Lid |
|
hallo allemaal,
ik ben bezig met een template...
Opgebouwd uit divs...
Nu heb ik een header met de menuitems erin, en daaronder een blauw balkje...(dat in IE niet even dun word als in chrome trouwens) dan is er een div waar de inhoud moet komen, die zou de hele pagina lengte min de footer moeten innemen, en dan een groen balkje en de footer...
Nu heb ik een stylesheet voor IE en eentje voor chrome etc
In ie word mijn header veel te groot... terwijl ik als height 150 instel. Maar het komt omdat er binnen de header nog 3 divs zijn die relative gepositioneerd zijn. Mijn vragen zijn nu:
1.Hoe zorg ik dat het groene en blauwe balkje zoals in chrome maar 10 px dik zijn en niet 20px?
2.Hoe zorg ik dat ik de footer en het bijhorende groene strookje altijd mooi onderaan de pagina staan en dat de inhoudsdiv automatisch de leegte opvult(voor chrome EN IE)?
Mijn code:
1. html tamplate:
<html>
<head>
<title>{$titel}</title>
<link rel="stylesheet" href="styles/stylesheet.css">
<!--[if IE]>
<link rel="stylesheet" href="styles/stylesheet_ie.css">
<![endif]-->
</head>
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<div height="100%" width="100%" align="center">
<div width="100%" id="header">
<p align="center">
<div id="home" align="center">
<img src="img/manneke_logo.png" border="0" height="200" width="100" onMouseOver="this.src='img/manneke_draai.gif'" onMouseOut="this.src='img/manneke_logo.png'" />
</div>
<div id="activiteiten" align="center">
<img src="img/manneke_activiteiten.png" border="0" height="200" width="100" onMouseOver="this.src='img/manneke_draai-a.gif'" onMouseOut="this.src='img/manneke_activiteiten.png'" />
</div>
<div id="contact" align="center">
<img src="img/manneke_contact.png" border="0" height="200" width="100" onMouseOver="this.src='img/manneke_draai-c.gif'" onMouseOut="this.src='img/manneke_contact.png'">
</div>
</p>
</div>
<div width="100%" id="strookblauw">
</div>
<div width="100%" height="*" id="inhoud">
</div>
<div width="100%" id="strookgroen">
</div>
<div width="100%" id="copy">
<div id="bvba">
<p align="left">
Bvba Cartagena, Wilde Heide 1, 3150 Haacht Tel.: xxx/xx.xx.xx
</p>
</div>
<div id="fdp">
<p align="right">
Realisatie: <a href="http://www.fdproductions.be/" class="copy" target="_blank">FDproductions</a>
</p>
</div>
</div>
</div>
</body>
</html>
<link rel="stylesheet" href="styles/stylesheet.css"> <!--[if IE]> <link rel="stylesheet" href="styles/stylesheet_ie.css"> <![endif]--> <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> <div height="100%" width="100%" align="center"> <div width="100%" id="header"> <div id="home" align="center"> <img src="img/manneke_logo.png" border="0" height="200" width="100" onMouseOver="this.src='img/manneke_draai.gif'" onMouseOut="this.src='img/manneke_logo.png'" /> <div id="activiteiten" align="center"> <img src="img/manneke_activiteiten.png" border="0" height="200" width="100" onMouseOver="this.src='img/manneke_draai-a.gif'" onMouseOut="this.src='img/manneke_activiteiten.png'" /> <div id="contact" align="center"> <img src="img/manneke_contact.png" border="0" height="200" width="100" onMouseOver="this.src='img/manneke_draai-c.gif'" onMouseOut="this.src='img/manneke_contact.png'"> <div width="100%" id="strookblauw"> <div width="100%" height="*" id="inhoud"> <div width="100%" id="strookgroen"> <div width="100%" id="copy"> Bvba Cartagena, Wilde Heide 1, 3150 Haacht Tel.: xxx/xx.xx.xx Realisatie: <a href="http://www.fdproductions.be/" class="copy" target="_blank">FDproductions </a>
2. Css stylesheet voor Chrome:
@charset "utf-8";
/* CSS Document */
div#header{
background-color:#ffc000;
height: 200px;
margin-top: 0px;
}
div#home{
position: relative;
left: -100px;
background-color:#ffc000;
height: 200px;
margin-top: 0px;
width: 100px;
}
div#activiteiten{
position:relative;
top: -200px;
left: 0px;
background-color:#ffc00;
height: 200px;
margin-top: 0px;
width: 100px;
}
div#contact{
position: relative;
top: -400px;
left: 100px;
background-color:#ffc000;
height: 200px;
margin-top: 0px;
width: 100px;
}
div#strookblauw{
background-color:#0070c0;
height: 10px;
margin-top: 0px;
}
div#strookgroen{
background-color:#00b050;
height: 10px;
margin-bottom: 0px;
margin-top: 0px;
}
div#inhoud{
background-color:#531e1d;
margin-top: 0px;
margin-bottom: 0px;
}
div#copy{
background-color:7030a0;
margin-top:0px;
margin-bottom: 0px;
vertical-align:bottom;
height: 65px;
}
div#bvba{
position: relative;
top: 45px;
color:#00b050;
vertical-align:bottom;
}
div#fdp{
position: relative;
top: 10px;
color:#00b050;
vertical-align:bottom;
}
@charset "utf-8"; /* CSS Document */ div#header{ background-color:#ffc000; height: 200px; margin-top: 0px; } div#home{ position: relative; left: -100px; background-color:#ffc000; height: 200px; margin-top: 0px; width: 100px; } div#activiteiten{ position:relative; top: -200px; left: 0px; background-color:#ffc00; height: 200px; margin-top: 0px; width: 100px; } div#contact{ position: relative; top: -400px; left: 100px; background-color:#ffc000; height: 200px; margin-top: 0px; width: 100px; } div#strookblauw{ background-color:#0070c0; height: 10px; margin-top: 0px; } div#strookgroen{ background-color:#00b050; height: 10px; margin-bottom: 0px; margin-top: 0px; } div#inhoud{ background-color:#531e1d; margin-top: 0px; margin-bottom: 0px; } div#copy{ background-color:7030a0; margin-top:0px; margin-bottom: 0px; vertical-align:bottom; height: 65px; } div#bvba{ position: relative; top: 45px; color:#00b050; vertical-align:bottom; } div#fdp{ position: relative; top: 10px; color:#00b050; vertical-align:bottom; }
3.Css stylesheet voor IE:
@charset "utf-8";
/* CSS Document */
div#header{
background-color:#ffc000;
height: 200px;
margin-top: 0px;
}
div#home{
position:relative;
left: -100px
background-color:#ffc000;
height: 200px;
margin-top: 0px;
width: 100px;
}
div#activiteiten{
position:relative;
top: -204px;
left: 0px;
background-color:#ffc000;
height: 200px;
margin-top: 0px;
width: 100px;
}
div#contact{
position: relative;
top: -408px;
left: 100px;
background-color:#ffc000;
height: 200px;
margin-top: 0px;
width: 100px;
}
div#strookblauw{
background-color:#0070c0;
height: 5px;
margin-top: 0px;
}
div#strookgroen{
background-color:#00b050;
height: 2px;
margin-bottom: 0px;
margin-top: 0px;
}
div#inhoud{
background-color:#531e1d;
margin-top: 0px;
margin-bottom: 0px;
}
div#copy{
background-color:7030a0;
margin-top:0px;
margin-bottom: 0px;
height: 65px;
}
div#bvba{
position: relative;
top: 45px;
color:#00b050;
vertical-align:bottom;
}
div#fdp{
position: relative;
top: 10px;
color:#00b050;
vertical-align:bottom;
}
@charset "utf-8"; /* CSS Document */ div#header{ background-color:#ffc000; height: 200px; margin-top: 0px; } div#home{ position:relative; left: -100px background-color:#ffc000; height: 200px; margin-top: 0px; width: 100px; } div#activiteiten{ position:relative; top: -204px; left: 0px; background-color:#ffc000; height: 200px; margin-top: 0px; width: 100px; } div#contact{ position: relative; top: -408px; left: 100px; background-color:#ffc000; height: 200px; margin-top: 0px; width: 100px; } div#strookblauw{ background-color:#0070c0; height: 5px; margin-top: 0px; } div#strookgroen{ background-color:#00b050; height: 2px; margin-bottom: 0px; margin-top: 0px; } div#inhoud{ background-color:#531e1d; margin-top: 0px; margin-bottom: 0px; } div#copy{ background-color:7030a0; margin-top:0px; margin-bottom: 0px; height: 65px; } div#bvba{ position: relative; top: 45px; color:#00b050; vertical-align:bottom; } div#fdp{ position: relative; top: 10px; color:#00b050; vertical-align:bottom; }
even wat uitleg over de css bestanden:
div#header is dus de header die maar 150 px hoog mag zijn.
div#home,div#activiteiten en div#contact zijn de divs waar de menuitems instaan.
div#strookblauw en div#strookgroen zijn de twee balkjes tussen header en inhoud en inhoud en footer.
div#inhoud is de div die alle leegte moet opvullen en waar de inhoud in komt.
div#copy is de footer waarin de laatste 2 divs staan maar die werken goed.
Dus, div#copy en div#strookgroen moeten allebei mooi boven elkaar onderaan de pagina komen en de inhoud moet al de rest invullen...en in IE zouden dan de 2 strookjes dunner moeten, maar er is volgensmij een minimum dikte ofzo, want de strookjes blijven zelfs als ik 3px voor height ingeef nog steeds zo'n 15 à 20 px hoog...
Oh, en sorry dat ik geen voorbeelden kan voorzien, er zijn wat problemen met de host...
Alvast bedankt voor jullie tijd
MVG
Anton Vandeghinste
|