[html/css]Positioneren van div's niet duidelijk.

[Verwijderd]

Goedenavond iedereen.

Eerst en vooral is de site waar ik aan werk hier te vinden. http://webs.hogent.be/sirowlbeak/. Hoewel html coderen geen probleem is ben ik nog absoluut niet vertrouwd met css. Ik gebruikte tot voor kort dan ook de tabellen om mijn pagina's de gewenste layout te geven. Maar het positioneren met css snap ik eigenlijk niet echt. Dan met name de rol van absolute en relative positioneren.

Wat is nu de bedoeling? Het logo "death cell" hoort eigenlijk net onder de inhoud komen te staan en mee te schuiven naar onder, afhankelijk van de inhoud per pagina. Maar een waardig alternatief voor een oplossing met tabellen lijk ik niet te vinden.

Ik hoef niet direct een oplossing (hoewel die zeker welkom is ) . Eerder wat inzicht in hoe die positionering nu precies werkt zou heel welkom zijn. Hieronder heb ik mijn css code bijgevoegd. Het zullen wel niet de meest elegante stylesheet zijn maar het is dus de eerste echte keer dat ik mijn website er volledig van laat afhangen qua layout. Alvast heel erg bedankt voor het lezen.

Cascading Stylesheet:

/* Layout */
body{ 
margin: 0 0 0 0;
}
div#header{
position: absolute;
top: 66px;
left: 307px;
height: 99px;
width: 666px;
}
div#menu{
position: absolute;
top: 165px;
left: 307px;
height: 23px;
width: 666px;
margin: 0 0 0 0;
background-color: #000000;
}
div#inhoud{
position: absolute;
top: 188px;
left: 307px;
width: 666px;
background-color: #000000;
}
div#logo{
position: relative;
top: auto;
left: 307px;
width: 666px;
height: 66px;
}
div#sub-nav{

background-color: #12FF0C;
width: 134px;
color: #FFFFFF;
}
div#sub-inhoud{


background-color: #450FCC;
width: 532px;
border-left-style: dashed;
border-left-width: 1px;
border-left-color: #FFFFFF;
}
/* menu elementen */
#b-news{
position: relative;
left: 0px;
}
#b-bio{
position: absolute;
left: 116px;
}
#b-members{
position: absolute;
left: 226px;
}
#b-gear{
position: absolute;
left: 356px;
}
#b-media{
position: absolute;
left: 469px;
}
#b-links{
position: absolute;
left: 601px;
}

[RobIII]

Begin eens met position absolute te droppen en gewoon in een flow te werken; positioneer elementen relatief van elkaar en float left/right waar nodig. Dat verhelpt al een boel.

Juist omdat je alles absoluut positioneert is heel de flow er uit en zal de 'relative' op je logo div weinig meer hebben om aan te relativeren om het zo maar te zeggen

[ Voor 33% gewijzigd door RobIII op 11-12-2008 22:37 ]

[mcDavid]

sterker nog, zet er een container div omheen en haal al je positioning weg, en ik denk dat 90% goed gaat.

een paar basistips voor werken met float:
Een container die je wilt centreren geef je margin: 0 auto;
Dingen die naast elkaar aan moeten sluiten geef je float:left;
Dingen die juist níét naast een eerder element moeten gaan staan geef je clear:both;
Als je je HTML logisch opbouwt, heb je in 99% van de gevallen aan bovenstaande genoeg om de positionering in orde te krijgen.

[Verwijderd]

Na een aantal tips hier te verwerken heeft het resultaat me al een stuk meer bevredigd. Ik heb de nieuwe versie nog niet geüpdatet. Ik zal zeker nog een aantal van de bovenstaande tips gaan uitproberen. Dankuwel daarvoor.

cheers