div niet mee laten groeien?

[gijs1]

ik heb een verticale streep als header en wil daar graag een titel in, maar zodra ik ik de titel groter maak wordt de div van de header ook groter terwijl er nog veel ruimte over is.

css:

#header{
display: table; 
height: 100px; 
width: 800px; 
margin-top: 10px;
background-color: #00FF00;
_position: relative; 
overflow: hidden;
}

#iheader{
_position: absolute; 
_top: 50%; 
display: table-cell; 
vertical-align: middle;
}
p.header{
_position: relative;
_top: -50%;
text-align: center;
font-size: 30pt;
}

html:

<div id="header">
<div id="iheader">
<p class="header">
Titel
</p>
</div>
</div>

 

[csshunter]

Hoi gijs1,

• Ik zie deze code in Internet Explorer 8 & 9, Firefox, Chrome, Opera en Safari niet werken.
  De hoogte van de header is daarin ca. 127px ipv de bedoelde 100px. Dat ligt er aan dat een <p> altijd uit zichzelf een verticale margin of padding heeft (die moet altijd expliciet op nul worden gezet). Ook de regelhoogte (line-height) speelt mee. Verder werkt de opgegeven <div>-hoogte niet, omdat er een table-opmaak is gegeven: dan rekt een cel altijd uit naar gelang van wat er in zit, ondanks de {overflow: hidden;}.
• In Internet Explorer 7 werkt ie ook niet: daar is de hoogte wel goed, maar staat de tekst bovenaan ipv verticaal gecentreerd.
• Zie: constante-div-ori.htm

Bedoel je deze?

• Test: constante-div-nw.htm.
• Dit gaat in alle browsers goed, zolang de tekst maar op één regel past; zie broncode.
• Bij een groter letterformaat wordt het dan bv. deze: constante-div-nw2.htm.

Met vriendelijke groet,
CSShunter
____________
PS: De underscore-hack voor IE is al jarenlang uit de mode, en niet zo betrouwbaar. Tegenwoordig worden speciale regels voor IE (of voor alleen een bepaalde IE-versie) opgegeven via een "Conditional Comment". - In dit geval is dat niet nodig.

PS-2: Met {display:table;} en {display: table-cell;} kan het ook.
Dat is deze: constante-div-nw3.htm.
Die werkt alleen niet in IE7 (maar die wordt momenteel nog maar door 1,35% van de Nederlandse surfers gebruikt).

 

[gijs1]

Bedankt voor je antwoord op mijn vraag,
ik bedoelde inderdaad dat de header 100 px hoog moest zijn zoals de code.
de underscorehack en de tabel opmaak had ik van het internet geplukt voor het verticaal centreren van de tekst.
nu werkt alles perfect, Dankjewel!