title image


Smiley float innerhalb display:table
Hallöle,



ich hätt' mal wieder ein Problem:



und zwar habe ich einen Header, der 2 Überschriften (h1 + h2) enthält, die

nebeneinanderstehend sowohl vertikal als auch horizontal zentriert werden sollen.



Für den IE6 kein Problem:

Die h1-Überschrift bekommt eine Breite und wird mit line-height und text-align:center;

auf die Höhe des übergeordneten Container gedehnt.

Damit diese Überschrift rechts steht, wird der Container einfach gefloatet.



Die h2-Überschrift besteht aus 2 Zeilen, daher wird die Hälfte der Höhe (abzüglich

eines zusätzlichen Abstandes (oben und unten)) für line-height übergeben. Auch

dieser Text ist zentriert.



Probleme gibt es in Firefox und Konsorten.

Hierfür muss der übergeordnete Container mit display:table;, die Überschriften

jeweils mit display:table-cell; formatiert werden. allerdings kann ich hier nicht

floaten, weil dann vertical-align:middle; nicht mehr interpretiert wird.



Frage:

wie kann ich auch Firefox und Konsorten beibringen, die h1-Überschrift rechts, die

h2-Überschrift links von h1, darzustellen?



Formatierungen:

#header {

padding: 3px 0;

color: #7F8F9F;

background-color: #CFDFEF;

border: 1px solid #8F9FAF;

border-bottom-width: 0;

}

#header div {

width: 100%;

height: 60px;

display: table;

}

#header h1 {

width: 10em;

display: table-cell;

vertical-align: middle;

font-size: 1.6em;

letter-spacing: 0.05em;

text-align: center;

}

#header h2 {

display: table-cell;

vertical-align: middle;

font-size: 1.1em;

font-weight: normal;

text-align: center;

}

 

/* fix for IE-win, hide from IE-mac \*/

* html #header h1 {

line-height: 60px;

float: right;

}

* html #header h2 {

padding: 5px 0;

line-height: 25px;

}

/* end fix/hide */



Quelltext:

<div id="header">

<div>

<h1>Tiroli Werdohl</h1>

<h2>Dienstleistungen für Orthopädie und Schuhtechnik<br />

Bodenbau und Zurichtung</h2>

</div>

</div>



mfg Achim

geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: