Grafik-Layout -> CSS/HTML - Hilfe benötigt

[Ben-]

Huhu,

Ich nehm mir mal etwas Zeit für diesen Post, da ich bereits lange gegrübelt und probiert habe, aber nichts so richtig klappt...

Layout

Dies ist an sich mein Layout, was ich nun in CSS/HTML bringen will. Was mir derzeit an Problemen im Weg steht, sind folgende Dinge:

1. Es soll in der Breite liquide sein, nachdem also der Umriss dieser weißen Scyline zuende ist, soll der horizontale Streifen inklusive dem glühenden Effekt am Rand fortgesetzt werden, wenn das Fenster breiter ist.
Problem: Ich bekomm es mit meinen Versuchen nicht so hin.

2. Die Würfel im Hintergrund hab ich zu einigen Angeordnet, als Bild gespeichert und dieses soll dann im Hintergrund wiederholt werden, sodass der Hintergrund immer mit Würfeln voll ist: Hintergrund
Problem: Im Header sind auch würfel, da ich es aber als gesamtes Bild ausgeschnitten habe, schneidet es am Rand so komisch ab.

Problem 1 & 2

Dasselbe Problem mit den Würfeln etc. wird auch bei dem weißen Balken nach unten hin sein, da auch dieser einen Glow hat und ich nicht weiß, wie ich das umsetzen soll.

Ich hoffe, dass ihr mir helfen könnt.

GA

[Sand*mann]

Hallo du GrafikAmateur,

wäre ganz nett mal mehr von deinen Versuchen zu sehen.

1. Erstmal Verständnisfrage: Versteh ich das richtig, dass der weiße Container in der Mitte (ich vermute der zukünftige Inhalt) fest sein soll, und nur der horizontale Balken soll sich der Größe nach anpassen?

2. Ohne Einsicht in HTML und CSS kann man da nicht viel zu sagen.

[Ben-]

Hi,

-> 1. siehst Du richtig, nur der horizontale Balken soll sich anpassen und der vertikale Inhaltsbereich soll dann ggf. mit margin:auto; immer mittig positioniert werden.

http://meins.mafia-inn.de/siteneu/

Mit dem Inhaltsbereich hab ichs noch nicht probiert... will erstmal das derzeitige Problem fixen.

[Sand*mann]

1. Wo ist dein Problem? Der Div ist doch wunderbar breit (warum auch immer). Dass das nicht so aussieht wie auf deiner Grafik liegt an dem Hintergrundbild. Hat ja als Rand ne ganz andere Farbe, als dieses türkise Glühen.

2. Würfel aus dem Headerbild nehmen und Haare/Borsten/wasauchimmer mit Schatten als png-bild speichern. Dann bleibt die halbtransparenz erhalten. Wieder als Hintergrund Bild einfügen - ferrrtisch.

[Ben-]

Klar, aber IE hats doch so mit PNG und Transparenz, oder?


Wie mach ich das denn richtig mit dem Glühen und dem Hintergrund, damits gut aussieht?

[Ben-]

Tatsache, auch im IE gehts. Danke ^.^

Aber nun besteht immernoch das Problem mit dem Glow :<

[Sand*mann]

Nein, der IE hats nicht mit Transparenz, aber da gibts einen Filter, der das klar macht.

Ich seh nicht, dass sich bei dir was verändert hat.

Du nimmst dir einfach deinen Layoutentwurf, schnippelst den das Glühen raus, speicherst es als Grafik und fügst es im CSS ein, wo ist denn dein Problem?

[Ben-]

Achso ja, habs mal hochgeladen.

Aber wenn ich das Ausschneide und rüberlege, dann sieht es ja bei den Würfeln auch so abgeschnitten aus... Siehe Bild "Problem 1&2" was ich im Startpost verlinkt habe.

[Sand*mann]

Ah, jetzt hat's klick gemacht.

Dafür nimmst du deine Skyline aus dem Headerbild raus und speicherst es separat. Dann fügst du im HTML die Grafik ein und positionierst sie absolut und mit hohem z-index. Dann stellst du top und left so ein, dass es den Hintergrund, nämlich das Glühen, verdeckt. Dann wirkt es stimmig.

[Ben-]

Es geht ja auch die Würfel im Hintergrund. Das Glühen hat ja eine gewisse Transparenz, wodurch man noch leicht die Würfel sieht. Das geht ja bei nem gif oder jpg verloren... Soll ich das auch als png machen?

[Sand*mann]

Klar.

Der IE 6 stellt die Halbtransparenz übrigens falsch dar (wie erwartet). Der 7er macht es richtig.
Und so behebst du es. Per Hack (* html .klasse / *html #id / * html div) oder Browserweiche und extra Stylesheet gibst du dem IE für den Header folgendes mit:

Mit Browserweiche:

<style text="text/css>
div#header
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.domain.de/bild.png', sizingMethod='scale');
}
</style>

Mit Hack:

<style text="text/css>
* html div#header
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.domain.de/bild.png', sizingMethod='scale');
}
</style>

[Ben-]

Nur noch copy-pasten und Grafikfile eintragen? Das ist ja genial! Dankeschön Ich werds mal probieren.

[Ben-]

Okay, gucks dir nochmal an - Klappt fast perfekt, aber im IE ist der horizontale Balken über der Scyline :<

[Sand*mann]

Du hast ja auch gar nicht gesagt, dass der Div#skyline über irgendetwas drüber sein soll. Das machst du nämlich mit z-index. Und den kannst du nur auf absolut positionierte Elemente verwenden.

Deshalb muss das CSS für #skyline so aussehen:

<style type="text/css">
div#skyline
{
position:absolute; /* absolute Positionierung */
z-index:500; /* je höher die Zahl desto höher liegt die Ebene auf dem Stapel */
background-image:url(scyline.png);
height:85px;
width:389px;
right:0px; /* wenn man explizit sagt, dass nach rechts 0px Platz sein soll, klebt das Element logischer weise am rechten Bildschirmrand */
top:99px;
}
</style>

Desweiteren hast du den Filter für den IE 6 falsch angewandt. CSS heißt: Cascading Style Sheet. Eine Kaskade.
Du musst erst den Div#header mit dem Hintergrundbild und allen anderen Sachen versorgen, dann kannst du den IE Hack einsetzen:

<style type="text/css">
div#header {
background-image:url(header2.png);
height:349px;
width:576px;
}
* html div#header
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='header2.png', sizingMethod='scale'); /* Warum du hier rand_1.png drin stehen hattest ist mit auch ein Rätsel */
}
</style>

Diesen Filter musst du auf die anderen halbtransparenten Grafiken natürlich auch anwenden!

Viel Erfolg!

[kadees]

Und um von Anfang an größere Probleme zu vermeiden solltest du deinen Code so oft wie möglich validieren: http://validator.w3.org/check?verbos...e%2Fsiteneu%2F

1. Character Encoding mismatch!:
wahrscheinlich überträgt dein Server im HTTP-Header das Charset iso-8859-1, du hast in deinen Meta-Angaben aber utf-8 stehen (speicherst du dein Dokument auch wirklich in utf-8?). Mögliche Lösung: ändere die Mata-Angabe in iso-8859-1.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

2. Validation Output: 1 Error:
Ändere/ergänze folgendes:

<style type="text/css">
/*<![CDATA[*/

/* hier kommen deine styles rein */

/*]]>*/
</style>

oder lagere deine Styles gleich in eine externe CSS-Datei aus.