[css] positionering van div-blokken met css - Softwareontwikkeling

zaterdag 11 januari 2003 12:32

Acties:

Topicstarter

Zoals je in het onderstaande versimpelde code-voorbeeld kunt zien heb ik een "main"-divblock met daarin een "header". Ik wil graag in die header een nieuw blok toevoegen en dat blok moet automatisch worden gecentreerd onderaan in de header. Het probleem is dat het nieuwe blok ("lowblock") bovenin de header blijft zitten zitten en ik weet niet wat ik moet veranderen aan de CSS om dat op te lossen.

Een mogelijke oplossing zou zijn om te gaan werken met absolute of relatieve positionering, maar dit zou toch ook dynamischer moeten kunnen neem ik aan? Wie weet raad?

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Centered block test</title>
<style type="text/css">
<!--
#main {
    width: 200px;
    height: 128px;
    margin: auto;
    text-align: center;
    background-color: #f00;
}
#header {
    width: 100%;
    height: 40%;
    background-color: #0f0;
}
#lowblock {
    width: 50%;
    margin: auto;
    background-color: #00f;
}


-->
</style>
</head>
<body>
 <div id="main">
  <div id="header">
   <div id="lowblock">
   lowblock
   </div>
  header
  </div>
 main
 </div>
</body>
</html>

zaterdag 11 januari 2003 12:38

Acties:

Verwijderd

wat dacht je van:

HTML:

#lowblock { 
    top:auto;
    bottom:0px;
    width: 50%; 
    margin: auto; 
    background-color: #00f; 
}

[ Voor 32% gewijzigd door Verwijderd op 11-01-2003 12:42 . Reden: gefixed ]

zaterdag 11 januari 2003 12:38

Acties:

Verwijderd

bottom: 0px; ?

zaterdag 11 januari 2003 12:57

Acties:

UltraNerd

Topicstarter

Op aanraden van Shadow3333 heb ik geprobeerd om de stylesheet uit het originele voorbeel aan te passen door #lowblock te vervangen door:

PHP:

#lowblock {
    width: 50%;
    margin: auto;
    background-color: #00f;
    top: auto;
    bottom: 0px;
}

Het lijkt een superlogische oplossing, maar voor dit voorbeeld helpt het niet! Het blok blijft bovenaan in de header staan (getest in Opera6,7,IE6 en Netscape7). Dus waarschijnlijk heb ik ergens anders in het stylesheet een instelling gemaakt waardoor deze "top" en "bottom" coordinaten worden genegeerd. Ik kan het niet vinden

zaterdag 11 januari 2003 12:59

Acties:

Verwijderd

top eruit slopen

zaterdag 11 januari 2003 13:06

Acties:

UltraNerd

Topicstarter

top uit #lowblock slopen hielp helaas ook niet.

Ik weet niet wat het standaard gedrag zou moeten zijn als er wel een bottom en geen top is opgenomen in de css. Ik kan me voorstellen dat 'top' standaard op 0px staat, en daarom denk ik dat 'top' inderdaad op 'auto' gezet moet worden, omdat anders de 'top' die standaard op 0 staat belangrijker zou kunnen zijn dan de 'bottom'.

Ik heb trouwens ook geprobeerd met andere waardes voor top en bottom, bijvoorbeeld 5 px. Maar dat "lowblock" blijft gewoon bovenin de pagina hangen....

zaterdag 11 januari 2003 13:10

Acties:

Verwijderd

ik heb effe geprutst: overal position: absolute; toevoegen werkt, behalve dan dat je zentrering fout gaat, dus dat moet je dan nog effe oplossen.

PHP:

div#main { 
    width: 200px; 
    height: 128px; 
    margin: auto; 
    text-align: center; 
    background-color: #f00; 
    position: absolute;
} 
div#header { 
    left: 0px;
    width: 100%; 
    height: 40%; 
    background-color: #0f0; 
    position: absolute;
} 
div#lowblock { 
    left: 50%;
    margin-left: -25%;
    width: 50%; 
    background-color: #00f; 
    bottom: 0px;
    position: absolute;
}

[ Voor 62% gewijzigd door Verwijderd op 11-01-2003 13:14 ]

zaterdag 11 januari 2003 13:30

Acties:

Verwijderd

Ik heb ook even flink wat gepield. Dit zou moeten werken:

HTML:

#main { position:relative;
    width: 200px; 
    height: 128px; 
    margin: auto; 
    text-align: center; 
    background-color: #f00; 
} 
#header { 
    width: 100%; 
    height: 40%; 
    background-color: #0f0; 
        } 
#lowblock { 
        position:absolute;
    width: 50%; 
        height:20px;
        bottom:0px;
        left:50%;
        margin-left:-25%;
   background-color: #00f; 
}

zaterdag 11 januari 2003 14:04

Acties:

UltraNerd

Topicstarter

He stoer, bedankt!! Dit werkt redelijk maar ik ben niet een een fan van de absolute positionering. Het probleem is dat ik altijd problemen heb met verschillen tussen browsers als ik absolute positionering gebruik. Officieel zou bij absolute positionering de coordinaten bepaald moeten worden tov het parent-block, maar elke browser heeft daar een andere interpretatie van geloof ik. Of ik begrijp het gewoon niet helemaal....

Met het stylesheet dat mophor suggereert krijg ik vier verschillende resultaten

Alleen Opera7 doet wat de originele bedoeling was. Het probleem lijkt te zijn dat elke browser de absolute positie berekend tov een ander parent-block.

De suggestie van Martijn22 is ook interessant, die geeft alleen in IE (wie gebruikt dat nou

) een klein randje onder het "lowblock". Wat ik erg interessant vind aan die oplossing is het gemixte gebruik tussen absolute en relative positionering. Ik ga nu misschien wat heel geks zeggen, maar ik hoor het wel als jullie het niet met me eens zijn:
Het lijkt wel alsof de positionering van een "absolute" blok wordt bepaald aan de eerstvolgende parent die "relatieve" positionering aan heeft staan.
Als dat zo is dan kan ik in de w3c specs van css daar in iig niets over vinden!

Als ik de oplossing van Martijn22 toepas en het #main block op relative zet, dan staat het lowblock altijd gecentreerd onderin het #main block, en niet onderin de header zoals mijn bedoeling was. Maar als ik de relatieve positionering uit #main haal en erbij zet bij #header dan werkt het wel zoals ik verwacht! (op IE na dan...). Vandaar mijn conclusie dat de absolute positionering van #lowblock wordt bepaald aan de hand van het dichtstbijzijnde parent-blok dat relatieve positionering heeft.

Dit is mijn huidige versie van de testcode, samengesteld uit alle bovenstaande suggesties. Het doet alleen nog in IE een klein beetje raar:

PHP:

#main {
    width: 200px;
    height: 128px;
    margin: auto;
    text-align: center;
    background-color: #f00;
}
#header {
    position: relative;
    width: 100%;
    height: 40%;
    background-color: #0f0;
}
#lowblock {
    position: absolute;
    width: 50%;
    height: 20px;
    bottom: 0px;
    left: 25%;
    background-color: #00f;

Conclusie: Ik denk dat ik uit alle suggesties een perfect alternatief kan halen, maar ik heb zowiezo weer wat geleerd vandaag, bedankt allemaal voor jullie hulp $_/-\o_$

zaterdag 11 januari 2003 14:28

Acties:

Verwijderd

Voor wat hoort wat.

Ik had je vraag niet helemaal goed begrepen (gelezen eigenlijk, maar ik de essentie had ik wel te pakken).
Ik vind het altijd ook lastig vinden zoiets bij de w3c. Meestal staat het ook gewoon bij http:www.handleidinghtml.nl. Het blijft toch altijd mijn referentie voor als ik even iets niet weet. Alleen jammer dat het css-gedeelte (nog) niet zo uitgebreid is.
En ja hoor, het staat er gewoon:
http://www.dto.tudelft.nl/mirhtml/css/position.htm#position
Een heel verhaal over referentieboxen, pas echt goed te gebrijpen als je het in de praktijk toepast. De beginwaarde van elk element is dus kennelijk position:static.

zaterdag 11 januari 2003 15:00

Acties:

UltraNerd

Topicstarter

Je hebt gelijk, op die link staat het perfect uitgelegd! add bookmark!

Voor de geinteresseerden en voor de mensen die dit onderwerp met de search vinden, ik heb gevonden waarom IE met het bovenstaande voorbeeld toch nog een klein randje van 1 pixel geeft onder het #lowblock. Het is een afrondingsprobleem

In de CSS heb ik de heigth van het #main block op 128px gezet. De header is 40% daarvan is 51.2px. De ene browser doet die afronding kennelijk wat anders dan de andere. Als ik de height van #main zet op bijvoorbeeld 130px (of een andere waarde die ook door 10 deelbaar is, zolang 40% ervan maar op een geheel getal uitkomt), dan is ook IE in staat om de pagina goed weer te geven!

[ Voor 8% gewijzigd door UltraNerd op 11-01-2003 15:03 ]