[CSS/HTML] container / box / tabel verdeling d.m.v. CSS. - Softwareontwikkeling

vrijdag 17 april 2009 14:48

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik ben bezig met de opbouw van een website, echter loop ik vast op het volgende probleem.

Als je bij "Rechtse tekst" een paar <br> toevoeg, zal de "onderste tekst" mee schuiven naar beneden.
Dit is niet het geval als je bij bij "Middelste tekst" en "Linkse tekst" een paar <br> toevoeg.

De bedoeling is dat "onderste tekst" altijd mee schuift met de langste container / box / tabel.

PS: Uit SEO oogpunt is het belangrijk dat "Middelste tekst" boven aan de <div's> blijft staan.

Voorbeeld code om mijn probleem duidelijk te maken:

[code=html]
<html>
<head>
<style>

#center{
border:2px dotted red;
width:980px;
text-align:left;
margin:0 auto;
position:relative;
}
#links{
border:2px dotted blue;
width:166px;
position:absolute;
}
#midden{
border:2px dotted green;
width:636px;
left:170px;
position:absolute;
margin:0 auto;
}
#rechts{
border:2px dotted black;
width:166px;
left:810px;
position:relative;
}
#footer{
border:2px dotted purple;
width:976px
}

</style>
</head>
<body>
<div id="center">
<div id="midden">Middelste tekst</div>
<div id="links">Linkse tekst</div>
<div id="rechts">Rechtse tekst</div>
<div id="footer">onderste tekst</div>
</div>
</body>
</html>
[/code=html]

[ Voor 0% gewijzigd door Verwijderd op 17-04-2009 14:51 . Reden: Code probleempje. ]

vrijdag 17 april 2009 14:51

Acties:

0 Henk 'm!

Svennetjee

Dit komt omdat je de linkse en middelste div's een position:absolute; mee hebt gegeven. Dit is eenvoudig op te lossen door aan de footer 'clear:both;' toe te voegen, de footer zal dan altijd vrij moeten staan. Probeer maar eens.

vrijdag 17 april 2009 14:54

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik heb in mijn footer "clear:both;" toegevoegd, echter maakt dit geen verschil. Zonder de "position:absolute;" klopt de verdeling niet meer.

vrijdag 17 april 2009 15:14

Acties:

0 Henk 'm!

Doublehomme

Ik zou de divs "midden", "links" en "rechts" links floaten (float: left;) en geen absolute positie geven (wel een breedte) dan komen ze gewoon naast elkaar te staan.
Als je dan de footer een clear:both; geeft schuift die mee naar beneden.
Je moet dan wel de div "midden" in het midden zetten, maar volgens mij maakt dat voor SEO niet uit (correct me if I'm wrong)?

vrijdag 17 april 2009 15:14

Acties:

0 Henk 'm!

Xander

Als ik jou was zou ik toch die position:absolute schrappen en gewoon floats gaan gebruiken. Enige lastige is dan om de linker-kolom daadwerkelijk links naast de middelste te krijgen, maar volgens mij kun je dat wel oplossen met een negatieve margin.

PC specs!---Pulse mee voor GoT!
[22:49:37] <@Remy> ik wil een opblaasbare dSLR :+

vrijdag 17 april 2009 15:35

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Wat "Doublehomme" zegt werkt inderdaad prima, echter zou ik het toch graag zien dat "Middelste tekst" eerst geladen wordt.

De reden hiervan is dat zoekmachines meer waarden toe kennen aan test boven in een pagina.
Aangezien "Middelste tekst" de meeste en belangerijkste tekst bevat zou ik het graag zien dat deze tekst eerst geladen worden.

Code tot nu toe:
[code=html]
<html>
<head>
<style>
body {
text-align:center;
}

#center{
border:2px dotted red;
width:980px;
text-align:left;
margin:0 auto;
}
#links{
border:2px dotted blue;
float:left;
width:166px;
}
#midden{
border:2px dotted green;
float: left;
width:636px;
}
#rechts{
border:2px dotted black;
float: left;
width:166px;
}
#footer{
border:2px dotted purple;
width:976px;
clear:both;
}

</style>
</head>
<body>
<div id="center">
<div id="links">Linkse tekst</div>
<div id="midden">Middelste tekst</div>
<div id="rechts">Rechtse tekst<br><br><br><br></div>
<div id="footer">onderste tekst</div>
</div>
</body>
</html>
[/code=html]

vrijdag 17 april 2009 15:40

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Probleem opgelost!

De oplossing van "Xander" werkt inderdaad, mijn excuses de dubbele post.

Thanks!

Oplossing:
[code=html]
<html>
<head>
<style>
body {
text-align:center;
}

#center{
border:2px dotted red;
width:980px;
text-align:left;
margin:0 auto;
}
#links{
border:2px dotted blue;
margin-left:-806px;
float:left;
width:166px;
}
#midden{
border:2px dotted green;
margin-left:166px;
float: left;
width:636px;
}
#rechts{
border:2px dotted black;
float: left;
width:166px;
}
#footer{
border:2px dotted purple;
width:976px;
clear:both;
}

</style>
</head>
<body>
<div id="center">
<div id="midden">Middelste tekst</div>
<div id="links">Linkse tekst<br><br><br><br></div>
<div id="rechts">Rechtse tekst</div>
<div id="footer">onderste tekst</div>
</div>
</body>
</html>
[/code=html]

vrijdag 17 april 2009 15:41

Acties:

0 Henk 'm!

Xander

edit:
nvm

[ Voor 109% gewijzigd door Xander op 17-04-2009 15:48 ]

PC specs!---Pulse mee voor GoT!
[22:49:37] <@Remy> ik wil een opblaasbare dSLR :+

vrijdag 17 april 2009 16:14

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Toch is er nog een klein probleem.

Er is verschil in de margin-left tussen IE 6 en Firefox 3.

De volgende code werkt prima in firefox 3 / Chrome en Opera alleen IE6 kan niet echt goed overweg met de margin-left ben ik bang.

Iemand nog een oplossing voor dit probleempje?

[code=html]
<html>
<head>
<style>
body {
text-align:center;
}

#center{
border:1px dotted red;
width:980px;
text-align:left;
margin:0 auto;
}
#links{
border:1px dotted red;
margin-left:-808px;
float:left;
width:170px;
}
#midden{
border:1px dotted red;
margin-left:170px;
float: left;
width:636px;
}
#rechts{
border:1px dotted red;
float: left;
width:170px;
}
#footer{
border:1px dotted red;
width:980px;
clear:both;
}

</style>
</head>
<body>
<div id="center">
<div id="midden">Middelste tekst</div>
<div id="links">Linkse tekst<br><br><br><br></div>
<div id="rechts">Rechtse tekst</div>
<div id="footer">onderste tekst</div>
</div>
</body>
</html>
[/code=html]

vrijdag 17 april 2009 16:19

Acties:

0 Henk 'm!

DeluxZ

Livin' the good life

IE6 heeft altijd 5 ( ? ) pixels margin/padding geloof ik. Zet in je body is padding: 0; margin:0;

[ Voor 3% gewijzigd door DeluxZ op 17-04-2009 16:19 ]

]|[ Apple Macbook Pro Retina 13" ]|[

vrijdag 17 april 2009 16:24

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

"display: inline;" was de oplossing.

Gewoon een vage margin bug in IE 6.

Zie: http://www.positionisever...lorer/doubled-margin.html

vrijdag 17 april 2009 16:27

Acties:

0 Henk 'm!

DeluxZ

Livin' the good life

Zoiezo is het slim om altijd je margin en padding op 0 te zetten anders gaan de browsers hun 'eigen' waarde gaan gebruiken. Voorkom je later alsnog geklooi met margins/paddings.

]|[ Apple Macbook Pro Retina 13" ]|[

Pagina: 1

Reageer