47
i am having some troubles with DIVs.
heres my setup
i have a wrapper, 900px wide 100% height
nested header 100% wide 20px high
nested menubar 100%wide 80px high
now i want to use the 100% remaining (100% page - 100px) in a content wrapper. any idea how i may achieve this?
all the comments are dutch, my apologies. they just explain the functions
HTML:
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>Home</title>
- <link rel="Stylesheet" href="Default.css" />
- </head>
- <body>
- <!-- Deze div zorgt dat alles netjes binnen de 900px valt, dit is de "inpakker" van het hele zooitje -->
- <div id="wrapper">
- <!-- De bekende header div -->
- <div id="header">
- </div>
- <!-- Het menu divje -->
- <div id="menubar">
- <!-- Het logo!! -->
- <img src="logo.png" height="80px" width="200px" style="" />
- <!-- De menulinks! in een mooi divje -->
- <div id="menulinks">
- <a href="">Home</a> <a href="">Over</a> <a href="">Ontwerp</a> <a href="">Portfolio</a> <a href="">Contact</a>
- </div>
- </div>
- <!-- De imagepreview is voor het plaatje linksboven -->
- <div id="imagepreview">
- <img src="logo.png" height=300px" width="400px" style="" />
- </div>
- </div>
- </body>
- </html>
body {
/* Font settings */
font-family: Arial; /* Font Face in HTML */
font-size: 12px; /* Grootte, CSS gebruikt andere waarden, px vind ik zelf nog wel het handigste */
color: #000000; /* Zeer hinderlijk, is anders dan in HTML, testkleur */
/* Settings voor de vormgeving */
background-color: #777777; /* Achtergrondkleu r */
margin: 0px; /* (Gejat) zorgt dat er geen gat valt tussen de randen */
height: 100%; /* Zorg dat de hoogte 100% is voor de wrapper */
width: 100%; /* Zorg dat de breedte 100% is voor de wrapper */
position: absolute; /* Zorg dat alle afmetingen absoluut zijn */
}
a {
/* Font settings */
color: #800000; /* Schijnt hij niet mee te pakken in de body (voor duidelijkheid donker rood gemaakt) */
font-weight: bold; /* Maak het dikgedrukt */
text-decoration: none; /* Haal het lijntje weg */
}
a:hover {
/* Settings voor de link */
text-decoration: underline; /* Zorg dat er een streepje onder komt */
}
#wrapper {
/* Settings voor de vormgeving */
width: 900px; /* Altijd 900px breed */
height: 100%; /* 100% hoog, relatief aan zijn bovenliggende tag (body) */
margin: auto; /* Leuk iets, de marge wordt automatisch aangepast aan de breedte zodat het divje gecentreerd wordt */
background-color: #e7f5fa; /* Achtergrondkleu r (licht blauw/groen) */
}
#header {
/* Settings voor de vormgeving */
width: 900px; /* Altijd 900px breed */
height: 20px; /* De strip is 20px hoog */
background-color: #800000; /* Achtergrondkleu r (donker rood) */
margin: auto; /* Leuk iets, de marge wordt automatisch aangepast aan de breedte zodat het divje gecentreerd wordt */
}
#menubar {
/* Settings voor de vormgeving */
width: 900px; /* Altijd 900px breed */
height: 80px; /* Het menu is 80px hoog */
background-color: #96d563; /* Achtergrondkleu r (vaag groen) */
text-indent: 25px; /* Zorg dat er 25px ruimte zit aan de linkerkant */
position: relative; /* Zorg dat alle posities in en uit deze DIV relatief zijn */
border-bottom-width: 1px; /* Zet een balk neer van 1px */
border-bottom-style: solid; /* Zet een doorlopende streep neer */
border-bottom-color: #000000; /* Maak de streep zwart */
margin: auto; /* Leuk iets, de marge wordt automatisch aangepast aan de breedte zodat het divje gecentreerd wordt */
}
#menulinks {
/* Settings voor de vormgeving */
bottom: 0px; /* Zorg dat de DIV strak tegen de onderkant ligt */
right: 25px; /* Zorg dat de DIV 25px van rechts afstaat */
position: absolute; /* Zorg dat de posities absoluut zijn aan de bovenliggende tag (div menubar) */
}
#imagepreview {
/* Settings voor de vormgeving */
width: 400px; /* Breedte 400px */
height: 300px; /* Hoogte 100% zodat alles netjes op 1 scherm past */
top: 25px; /* Zet het blokje 25px van de bovenkant af */
left: 25px; /* Zet het blokje 25px van de linkerkant af */
padding-bottom: 25px; /* Zorg voor een 25px ruimte onder dit blokje */
position: relative; /* Zorg dat alle posities in en uit deze DIV relatief zijn */
}
