Matthias Apsel: 3 elemente horizontal

Beitrag lesen

Om nah hoo pez nyeetz, homplom!

muss ich mir halt was anderes einfallen lassen für die headlines.

Wenn es dir so wichtig ist, dass die Balken links und rechts genau dieselbe Höhe haben wie der Text (was machst du, wenn der Text Unterlängen hat?), dann folgender Alternativvorschlag:

Mach die Überschrift als Bild (nur die Streifen)

h1: {text-align: left;
     color: #b4b4b4;
     background-image: url(Pfad zum Bild); background-position: /*je nach Sprite-Verwendung*/;}

Mach das Bild auf jeden Fall lang genug. Durch das CSS ist sichergestellt, dass bei deaktivierten Grafiken der Text zu sehen ist und bei aktivierten Grafiken ist der Text nicht sichtbar (ostfriesische Nationalflagge).

Die Grafiken links und rechts machst du extra, steckst jedoch alle diese Bilder in eine Grafik (Sprites).

#home:before {content: url(Pfad zum Bild); background-position: /* s.o. */}
#home:after {content: url(Pfad zum Bild); background-position: /* s.o. */}

[1]

<h1 id="home">Home</h1>

[1] Pseudoelemente werden mit :: gekennzeichnet, die Schreibweise mit einem : versteht aber auch der IE8.

Matthias

--
1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif