CSS div layout

**Anja v. Steenbrugge** · 08-03-2009, 16:30

Hallo,

Ben bezig leren met layout maken van div/css.
Begin te begrijpen hoe in elkaar zit.

Wat mij nog niet uit komt is:
- Heb op layout staan het menu aan zijkant.
- Met content die ernaast komt te staan.
- Wat nu in mijn div/css doet, onder elkaar.
- Wat voor hulp code krijg ik om naast elkaar te komen staan?

Voorbeeld te zien hoe die nu is:
http://www.cooleavs.nl/willem/nieuw
om te bekijken met IE-browser, bij FF-browser werkt dit momenteel nog niet

Heb hier die niet in div is omgezet:
http://www.cooleavs.nl/willem
zo moet uitzien die ik bezig ben in div maken.

Ik hoop voldoende heb kunnen uitleggen.

Met vriendelijke groet,
Anja v. Steenbrugge

Code:

<html>
<head>
<title>Swebo.nl</title>
<style>
body {
    background-color: #dbf5fb;
    font: 11px Arial, sans-serif;
    color: #0B2222;
}

a:link {
    color: #00547a;
    text-decoration: none;
}
a:visited {
    color: #00547a;
    text-decoration: none;
}
a:hover {
    color: #000000;
    text-decoration: none;
    }

.tabel {
    width: 800px;
    background: #FFFFFF;
    padding: 5px;
}

.leeg {

    width: 790px;
    height: 5px;
}

#header {
    width: 790px;
    height: 100px;
    padding-top 10px;
}
   
ul#menu
    {
        margin: 0px;
        padding-left: 10px;
        list-style: none;
        height:    30px;
        width: 790px;
        background-color: #b9d065;
        
    }
    
ul#menu li
    {
        float: left;
        height: 25px;
    }
    
ul#menu li a
    {
        display: inline;
        overflow: hidden;
        height:    30px;
        padding: 5px 8px 0px 8px;
        font-family: Verdana;
        color: #000000;
        font-size: 11px;
        text-decoration: none;
        font-weight: bold;
    }
    
ul#menu li a:hover, ul#menu li.active a, ul#menu li.active a:hover
    {
        padding: 5px 8px 0px 8px;
        background-color: #e3eebc;
        color: #000000;
        height: 30px;
    }
    
#zijkant {
    padding: 5px;
    width: 150px;
    background-color: #b9d065;
}

#content {
    padding: 5px;
    width: 500px;
    background-color: #e3eebc;
}

#footer {

    width: 790px;
    height: 30px;
    padding: 5px;
    background-color: e3eebc;
    }
</style>
</head>

<body>


<div class="tabel"><div class="leeg">
<div id="header"><div class="leeg"><img src="http://www.cooleavs.nl/willem/images/head.jpg"></div>
<div class="leeg"></div>
<ul id="menu">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Products</a></li>
                            <li><a href="#">Support</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
<div class="leeg"></div>                        
<div id="zijkant"> Home<br>
contact<br>
Link<br>
Link<br>
Link<br>
Link<br>
Link<br>
</div>
<div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>
<div class="leeg"></div>
<div id="footer">
  <div align="center">© swebo.nl 2009 Design avsdesign.nl </div>
</div>
</body>

</html>

**Tonnie Lubbers** · 08-03-2009, 20:50

Hallo Anja,

De blokken passen qua grootte niet naast elkaar.

Begin met een basis. Twee blokken waarbij er naast het blok met inhoud ruimte (een marge) is om het blok met het menu naast te laten zweven.

Datgene wat je wilt laten zweven (floaten) naast een vast blok, moet in de HTML vóór het vaste blok worden opgegeven.

Een simpele opzet: http://vision2form.nl/Temp/pagina-2kolommen-rand.html

Daarna kun je de elementen verder opmaken. De getoonde layout is niet moeilijk te maken. Hou alleen rekening met een verschil in IE en FF, dus telkens weer testen of het goed blijft staan.

Gaat er iets fout, net zolang code weghalen totdat de fout er niet meer is.

Het is niet eenvoudig dit in een kort stukje samen te vatten, maar je zult echt bij het begin moeten beginnen, het leren van wat de diverse elementen doen, block-level en inline, en welke stylregels er op toe te passen zijn.

Daarnaast heeft IE een ander box-model dan bijvoorbeeld FF of Opera.
In het kort komt het erop neer dat de 1 een element van 200px breedte ziet als 200px breed en de ander de padding er nog bij optelt.

Een tip om veel ellende te voorkomen is dan ook om bij het ontwerpen van binnenuit te beginnen. Zet niet alle marges en paddings op het ouder-element, maar op het binnenste, het child-element.

Groet,

Tonnie

http://vision2form.nl/webontwerp/

CSS div layout

CSS div layout

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

CSS div layout

CSS div layout

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Inloggen