[CSS]Probleem met lay-out - Softwareontwikkeling

vrijdag 1 december 2006 12:02

Acties:

Topicstarter

Ik probeer een lay-out op te stellen met HTML en CSS, echter worden de elementen niet goed gepositioneerd. Ik wil aan de linkerkant van mijn pagina 2 divjes voor een menu en een sidebar en rechts daarnaast een grote div voor de content. Het probleem is echter dat de content div onder de sidebar wordt geplaatst in plaats van er naast. Heb al lopen stoeien met de CSS (o.a. floats en clears) maar ik kom er niet uit.

Zo hoort hij te zijn:
Afbeeldingslocatie: http://upload.fkees.net/img/1320/layoutgoed.gif

Afbeeldingslocatie: http://upload.fkees.net/img/1320/layoutgoed.gif

.. Maar zo wordt hij weergegeven:
Afbeeldingslocatie: http://upload.fkees.net/img/1321/layoutfout.gif

De CSS code en de HTML code:

Cascading Stylesheet:

html, body{

}
#container{
width: 780px;
padding: 20px;
}
#header{
width: 740px;
height: 130px;
}
#breadcrumbs{
width: 740px;
height: 30px;
margin-bottom: 30px;
}
#menu{
float: left;
width: 130px;
margin-right: 20px;
}
#sidebar{
width: 130px;
margin-right: 20px;
}
#content{
float: right;
width: 580px;
margin-left: 20px;
}
#footer{
clear: both;
width: 740px;
height: 30px;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <title>Test pagina voor opzet 1</title>
    </head>
    <body>
        <div id="container">
            <div id="header">
                Header
            </div>
            <div id="crumbs">
                bread crumbs
            </div>
            <div id="menu">
                <ul>
                <li>Menu</li>
                <li>Menu</li>
                <li>Menu</li>
                <li>Menu</li>
                <li>Menu</li>
                <li>Menu</li>
                </ul>
            </div>
            <div id="sidebar">
                Side bar<br />
                Side bar<br />
                Side bar<br />
                Side bar<br />
                Side bar<br />
            </div>
            <div id="content">
                <p>Lorem ipsum </p>
                <p>Lorem ipsum </p>
            </div>
            <div id="footer">
                Footer
            </div>
        </div>
    </body>
</html>

Alvast bedankt.

De wijzen komen uit het Oosten!

vrijdag 1 december 2006 12:07

Acties:

Rowanov

Kop eens wat anders...

In welke browser ziet het er zo uit? Wat ik zie in het plaatje is dat je content te breed is en daarom een regel lager terecht komt. Als je je margins op 0 zet, of je width minder maakt, dan zal je zien dat hij weer op dezelfde hoogte terecht komt.

vrijdag 1 december 2006 12:16

Acties:

NoepZor

Topicstarter

heb hem al kleiner gemaakt maar dit lost het probleem niet op. 130 + 20 margin + 20 margin + 560 = 730 px breed. Dit zou prima in een div van 740 px (780 - 2x20 padding) moeten passen. Echter geeft hij dan de content div nog steeds onder de sidebar div weer. Ik heb weer wat lopen spelen met de instellingen en deze code werkt nu in IE goed, maar in FF komt de content div nu onder de menu div terecht.

Cascading Stylesheet:

#menu{
float: left;
width: 130px;
margin-right: 20px;
}
#sidebar{
clear: both;
float: left;
width: 130px;
margin-right: 20px;
}
#content{
float: right;
width: 560px;
margin-left: 20px;
}

[ Voor 4% gewijzigd door NoepZor op 01-12-2006 12:17 ]

De wijzen komen uit het Oosten!

vrijdag 1 december 2006 12:25

Acties:

Rowanov

Kop eens wat anders...

Hier stond iets doms. Anyway, misschien kan je html 4.01 strict proberen en meer info geven over in welke browsers dit optreed + een online testcase.

[ Voor 96% gewijzigd door Rowanov op 01-12-2006 12:27 ]

vrijdag 1 december 2006 12:30

Acties:

NoepZor

Topicstarter

Het probleem treedt momenteel op in Firefox, maar niet in Internet Explorer. Testje kun je hier bekijken: http://www.noepzor.nl/csstest/

De wijzen komen uit het Oosten!

vrijdag 1 december 2006 12:37

Acties:

Rowanov

Kop eens wat anders...

Momenteel clear je de sidebar div aan beide zijden, waardoor de content op een regel lager komt te staan. Een oplossing hiervoor is het groeperen van de sidebar en het menu in een omvattende div, die je laat floaten. Denk er wel even aan dat je alle floats van de elementen die daar weer inzitten eventjes weghaalt, anders wordt het een enorme rotzooi met clearen. Daarnaast is het niet handig om je menu een margin-right te geven en je content een margin-left, omdat de margin collapse nou niet het meest voorspelbare en bugloze onderdeel in browsers is. Je kan beter op 1 element die margin zetten.

Edit: Firefox doet het hier dus goed en IE bugt

[ Voor 4% gewijzigd door Rowanov op 01-12-2006 12:38 ]

vrijdag 1 december 2006 14:39

Acties:

Verwijderd

Dit is een van de oplossingen: content moet je boven menu zetten. Dan zorgen dat de content minimaal hoger dan het menu is zodat sidebar onder menu komt te staan.

HTML:

<div id="content">
  <p>Lorem ipsum </p>
  <p>Lorem ipsum </p>
</div>
<div id="menu">
  <ul>
    <li>Menu</li>
    <li>Menu</li>
    <li>Menu</li>
    <li>Menu</li>
    <li>Menu</li>
    <li>Menu</li>
  </ul>
</div>

vrijdag 1 december 2006 14:53

Acties:

NoepZor

Topicstarter

Het is opgelost, beide manieren werken goed. De manier van F12 heeft de minste code nodig (alleen volgorde verandering) dus ik ga die toepassen. Iedereen bedankt voor het meedenken.

De wijzen komen uit het Oosten!

maandag 4 december 2006 10:00

Acties:

NoepZor

Topicstarter

Omdat ik het onzin vind om weer een nieuw topic te openen plaats ik hier her volgende probleem weer. Ik heb dus een container met daarin 2 divs onder elkaar van 150 breed aan de linkerkant en dan de content div rechts daarnaast. Nu loop ik echter tegen het probleem aan dat de content DIV teveel naar rechts wordt geplaatst en daardoor ook de content div vergroot. Deze wordt in plaats van de opgegeven 780px nu 822px.

Screenshotje om het wat te verduidelijken:

Afbeeldingslocatie: http://upload.fkees.net/img/1357/tn/probleem.jpg

De css code:

Cascading Stylesheet:

html, body{
margin: 0;
padding: 0;
background-color: #EEEEEE;
}
#container{
width: 780px;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
border: 1px solid #333333;
}
#header{
width: 740px;
height: 130px;
}
#breadcrumbs{
background-color: #DBEAFF;
width: 740px;
height: 30px;
border-top: 2px solid #4891FF;
border-bottom: 2px solid #4891FF;
}
#menu{
float: left;
width: 130px;
border-bottom: 2px solid #4891FF;
}
#sidebar{
width: 130px;
}
#content{
float: right;
width: 500px;
}
#footer{
clear: both;
width: 740px;
height: 30px;
}

De bedoeling is dat de content DIV naast de andere 2 divs komt te staan met een marge van 40px. Ik heb de float al eens verwijderd van de content div, maar dan wordt deze niet naast de andere 2 divs gepositioneerd.

De wijzen komen uit het Oosten!

maandag 4 december 2006 10:26

Acties:

Rowanov

Kop eens wat anders...

En als je er een float: left; van maakt?

maandag 4 december 2006 10:30

Acties:

NoepZor

Topicstarter

Dan worden de 2 andere divs onder de content div geplaatst. Ook als ik geen float opgeef en de margin-left op bijv 200 px zet worden de andere 2 er onder geplaatst. Tevens blijft de container DIV 822 pixels breed waar ik niets van snap. Het zou te maken kunnen hebben met de padding van 20px, maar dan zou het nog geen 822 pixels breed moeten worden. Ook zonder de padding is hij te breed.

De wijzen komen uit het Oosten!

maandag 4 december 2006 12:35

Acties:

Verwijderd

Je container is sowieso al 40px breder dan de rest, daarom krijg je rechts zo witte balk.

Als je de content iets breder maakt dan sluit deze beter op het menu links aan, eventueel content naar links schuiven met margin-right.

Post anders even je laatste versies HTML en CSS, dan wordt het misschien duidelijker.

maandag 4 december 2006 12:59

Acties:

NoepZor

Topicstarter

Ik wil ook een marge hebben aan beide zijden van 20px. Daarom is alles 740px. Ik heb lopen testen met diverse breedtes van de content, maar de container div blijft op een of andere vage manier op 822px staan. Dit is erg vreemd aangezien de inhoud makkelijk in die 780px past.

De laatste versie (welke de layout het minst slecht weergeeft) staat een paar posts hoger.

De wijzen komen uit het Oosten!

maandag 4 december 2006 13:31

Acties:

Verwijderd

Welke browser gebruik je?

maandag 4 december 2006 13:36

Acties:

NoepZor

Topicstarter

Ik maak gebruik van Firefox 1.5 om te testen (met webmaster toolbar), maar daarnaast bekijk ik de pagina ook met Internet Explorer 6.0 welke de pagina ook niet correct weergeeft (zelfde als FF)

De wijzen komen uit het Oosten!

dinsdag 5 december 2006 11:59

Acties:

NoepZor

Topicstarter

Probleem is ook opgelost, alleen nu loop ik weer tegen een ander probleem aan

De wijzen komen uit het Oosten!

dinsdag 5 december 2006 20:57

Acties:

Vinze

Sorry dat ik even je topic gebruik, maar ik heb een hele kleine vraag die te kort is voor een nieuw topic:

Ik wil een table maken die er zo uitziet:
Kan dat?
Afbeeldingslocatie: http://img299.imageshack.us/img299/7277/cllllllt1.jpg

Afbeeldingslocatie: http://img299.imageshack.us/img299/7277/cllllllt1.jpg

[ Voor 74% gewijzigd door Vinze op 05-12-2006 21:03 ]

woensdag 6 december 2006 13:42

Acties:

Verwijderd

code:

<tr>
<td border="0">&nbsdp</td>
<td border="1">CEL 1</td>
</tr>
<tr>
<td border="1">CEL 2</td>
<td border="1">CEL 3</td>
</tr>

Waarschijnlijk is er een mooiere oplossing, maar hij werkt iig wel

[ Voor 3% gewijzigd door Verwijderd op 06-12-2006 13:42 ]