[CSS] div centreren tussen 0, en andere div

[Verwijderd]

Stel, ik heb de volgende structuur:

HTML:

<div id="logo">Logo</div>
<div id="content">Content</div>

De positie van #content is als volgt:

Cascading Stylesheet:

width: 780px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin: -200px 0 0 -390px;

#content wordt dus helemaal gecentreerd.

Nu wil ik #logo verticaal tussen 0 en #content, oftewel geplaatst op 25% minus een kwart van de hoogte van #content.

Hoe doe ik dat?

Met frames zou de oplossing makkelijk zijn, namelijk zo:

HTML:

<frameset rows="100%, 400, 100%">
 <frameset rows="100%, 10, 100%">
  <frame name="bla" />
  <frame name="logo" /> <!-- dit is #logo -->
  <frame name="bla" />
 </frameset>
 <frame name="content" /> <!-- dit is #content -->
 <frame name="bla" />
</frameset>

Maar ik prefereer CSS met layers boven frames.

Wie heeft de oplossing?

[Rowanov]

Bijde divjes in 1 div, die div centreren en dan de rest op die hoofd div uitlijnen?

[Verwijderd]

Ja, dat zou inderdaad een oplossing zijn. Maar dan is de vraag dus, hoe lijn je zoiets uit? Mijn kennis reikt tot:

Cascading Stylesheet:

text-align: left|center|right|justify;
/* allemaal niet van toepassing, want horizontaal
*/
vertical-align: top|middle|bottom;
/*en dat gaat niet op voor div, 
want je moet bij vertical-align ook een line-height opgeven.
*/

[ Voor 3% gewijzigd door Verwijderd op 27-10-2004 17:06 ]

[Rowanov]

Zet de padding van je eerst div op 0px, geef de hoogte en breedte wel aan. geef je tweede div een top padding gelijk aan de hoogte van je eerste div.

[MBV]

waarom niet zo voor het logo:

code:

#logo {
   position: absolute;
   left:     25%;
   width:    100px;
   margin-left: -50px;
}

'k ben geen expert, maar volgens mij zou dit gewoon moeten werken, toch?

[JayVee]

Kijk eens naar Little Boxes