[div uitlijning] probleem met kolommen - Softwareontwikkeling

maandag 28 april 2008 00:09

Acties:

Topicstarter

Ik ben nog niet heel lang met div's bezig en loop tegen een probleem aan.

Ik heb een site met daarin 3 kolommen waarvan er 2 bij elkaar in 'overkoepelende' div zitten.
Ik krijg de laatste div niet goed op zijn plek.

Het plaatje het meest rechts (aardbeien) blijft een beetje onder de middelste kolom hangen terwijl deze rechts boven in zou moeten komen.

Ik heb al even gezocht op floats en vindt van alles tot display:block en display:inline etc maar niets lijkt te helpen.

Waar komt dit door en hoe los je dit op? Heeft het te maken met de manier waarop ik het geheel heb ingedeeld?

Ik heb het menu links, en wil de 2 andere kolommen in een div hebben omdat ik hier met ajax content in zal plaatsen en deze 2 kolommen dus ga vervangen door een pagina in de div...

maandag 28 april 2008 10:37

Acties:

xzaz

mm, waarom maak je niet gewoon 1 div boven. Dan 3 divs naast elkaar (lees: float left) en gooi dan die divjes in de 3 divs. So wie so heeft het plaatje met de aardbeien geen css props dus zonder float: left komt hij er niet naast.

[ Voor 12% gewijzigd door xzaz op 28-04-2008 10:37 ]

Schiet tussen de palen en je scoort!

maandag 28 april 2008 11:05

Acties:

ViNyL

Topicstarter

Maar deze heeft deze als css opmaak:

code:

div.col-picture-right
{
float: left;
}

Ik heb de layout eerst in orde gehad. Alleen ik wil de middelste en de rechtse in een div hebben zodat ik deze inhoud kan vervangen met andere content.

maandag 28 april 2008 11:21

Acties:

xzaz

Gebruik eens FF met develop toolbar.

code:

1
2
3

div col-picture-right img{
float: left
}

Kijk ook eens naar div.page_content

[ Voor 15% gewijzigd door xzaz op 28-04-2008 11:27 ]

Schiet tussen de palen en je scoort!

maandag 28 april 2008 11:28

Acties:

ViNyL

Topicstarter

Ik heb de image ook al in mijn stylesheet gehad met een float. Alleen als ik er float right van maak zie ik ook echt wat veranderen. Alleen komt het image dan rechts onderin te staan en niet bovenaan de pagina.

maandag 28 april 2008 11:36

Acties:

xzaz

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
</head>
<style>
    #container{ width: 900px; }
    div {
    margin: 5px;
    }
    
    #col1{
    float: left;
    width: 257px;
    }
    
    #col2{
    float: left;
    width: 257px;
    }
    
    #col3{
    float: left;
    width: 257px;
    }
</style>
<body>
<div id="container">
<div id="col1"><img src="http://wijmakenwebsites.nl/passievoorpuur/website/images/links-img.gif" /></div>
<div id="col2"><img src="http://wijmakenwebsites.nl/passievoorpuur/website/images/midden-img.gif" /></div>
<div id="col3"><img src="http://wijmakenwebsites.nl/passievoorpuur/website/images/rechts-img.gif" /></div>
</div>
</body>
</html>

?

[ Voor 3% gewijzigd door xzaz op 28-04-2008 11:36 ]

Schiet tussen de palen en je scoort!

maandag 28 april 2008 11:38

Acties:

ViNyL

Topicstarter

Zo had ik hem eerst ook inderdaad. Toen heb ik dus de col2 en col3 in een "overkoepelende" div geplaast. Eens kijken of het nu goed gaat...

edit:

Dit ziet er inderdaad beter uit! Thanks, nu de rest van de layout erin stoppen en eens kijken hoe dat gaat..

[ Voor 32% gewijzigd door ViNyL op 28-04-2008 11:41 ]

maandag 28 april 2008 11:41

Acties:

xzaz

ViNyL schreef op maandag 28 april 2008 @ 11:38:
Zo had ik hem eerst ook inderdaad. Toen heb ik dus de col2 en col3 in een "overkoepelende" div geplaast. Eens kijken of het nu goed gaat...

div.page_content zo te zien. Dat kan wel maar moet je page_content wel zo groot maken als je eigen container. Dan past de laaste col (col3) er niet meer op en vliegt hij naar onder. Ook moet je page_content float left ten opzichte van de eerste col zetten. En col 2 en col 3 weer op elkaar laten floaten.

Wat was je bedoeling dan met die page_content div?

Schiet tussen de palen en je scoort!

maandag 28 april 2008 11:42

Acties:

ViNyL

Topicstarter

Precies zoals je hier zegt. Alleen blijkbaar was ie niet breed genoeg

maandag 28 april 2008 11:45

Acties:

xzaz

ViNyL schreef op maandag 28 april 2008 @ 11:42:
Precies zoals je hier zegt. Alleen blijkbaar was ie niet breed genoeg

div.midden-home, float:left geven moet ook werken. Omdat je image nu ook float: left heeft.

code:

div.col-picture-right img (line 62)

{

float: left;

}

Uiteindelijk zal ik er nog voor de gemakkelijkheid 3 kolommen van maken, werkt gemakkelijker en is overzichtelijker.

[ Voor 34% gewijzigd door xzaz op 28-04-2008 11:47 ]

Schiet tussen de palen en je scoort!

maandag 28 april 2008 11:48

Acties:

ViNyL

Topicstarter

Ja daar heb je gelijk in. Dank voor je hulp. Volgens mij gaat het zo goed

Ik heb nog een vervelend probleem. In Safari ziet mijn menu er goed uit, met keurig een border van 1px aan de onderkant van de menu items.

Onder internet explorer zit er echter een ruimte tussen de menu items van een pixel of 5 gok ik.Ik kan er niet vanaf komen. Waar komt deze ruimte vandaan??

edit:

Het lijkt in deze opmaak te zitten

code:

1
2
3

#main {
border-bottom: 1px solid #e2eaa5;
}

Als ik daar bij zet "display:inline" is alle ruimte weg, maar ook mijn rand...

[ Voor 69% gewijzigd door ViNyL op 28-04-2008 14:35 ]

maandag 28 april 2008 14:51

Acties:

xzaz

display:inline wordt als een 'hack' gezien. Bekijk dit eens:
http://www.456bereastreet...between_list_items_in_ie/

Schiet tussen de palen en je scoort!

maandag 28 april 2008 15:03

Acties:

ViNyL

Topicstarter

Hmm IE6/7 geeft dus duidelijk soms vage problemen

Thanks, bookmarkje erbij!