[CSS] onverklaarbare ruimte

Door Edward Brosens op 12-12-2009 17:50

914 views

Hallo,

Ik heb last van een onverklaarbaar stukje ruimte en ik zou niet weten of het nou ergens mankeert in de pagina zelf HTML of het gelinkte CSS.

De HTML-pagina:


<!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=utf-8" />
<title>Titel</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

	<div id="header">
						<h3> HEADER EN LOGO</h3>
	</div>
    <div id="navigation">
    					<ul>
                        		<li><a href="#">HOME</a></li>
                                <li><a href="#">PAGINA 1</a></li>
                                <li><a href="#">PAGINA 2</a></li>
                        </ul>
	</div>
    <div id="content">
    					<h4>Kop content</h4>
                        <p>Content</p>
                                                                                                                                                          </p>
    </div>
    
    <div id="footer">
    					FOOTER
    </div>
</div>

</body>
</html>

En het CSS (style1.css):



body {
background-color:#D2E4E8;
padding:0px;
}


div#container{
width: 750px;
margin: 0 auto 0 auto;
background-color:#E6F0F2;
padding: 0px;
}

div#header {
margin: 0;
background-color:#FBFFBF;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000066;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}

div#navigation {
margin: 0;
text-align:center;
background-color:#3399FF;
}

div#content {
margin: 0;
background-color:#C9E4E4;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000099;
padding-left:10px;
text-align:left;
padding-bottom:20px;
}

div#footer {
margin: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:10px;
text-align:center;
padding-top:2px;
padding-bottom:2px;
background-color:#000066;
}

h3 {
font-size:12px;
}

ul a:link, ul a:visited{
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
}

ul a:hover, ul a:active{
color: #FFFFFF;
text-decoration: underline;
font-weight:bold;
}

ul{
font-family:Verdana, Arial, Helvetica, sans-serif;
list-style: none;
margin: 0;
padding: 5px 0 0 0;
}

li{
margin: 0;
padding: 0 15px 0 15px;
display: inline;
text-align:center;
}

Alle browsers (behalve het Designgedeelte van Dreamweaver) renderen deze pagina met een ruimte tussen de navigatie-div en de content-div.

Ik snap er geen reet van, kan iemand me vertellen wat ik fout doe?

Voorbeeld: http://i50.tinypic.com/mj1tw0.jpg

Gr. Edward

Edward Brosens

12-12-2009 18:27

Opgelost:

Een conflict met:


  <div id="content">
    					<h3>Kop content</h3>
    <p>Content</p>
    </div>

Na een <br /> doet ie het ineens wel goed, heel vreemd.

Dus zo:


 <div id="content">
    					<br /><h3>Kop content</h3>
    <p>Content</p>
    </div>

Stefan

12-12-2009 18:59

zet margin:0px; padding:0px; op je H4 element.

Jeffrey H

12-12-2009 19:57

Of gebruik gewoon een reset.css

Wouter De Schuyter

12-12-2009 20:26

Tha Wizekid schreef op 12.12.2009 19:57
Of gebruik gewoon een reset.css

Gebruik ik ook altijd ;), maar niet zo uitgebreid. Ik reset alleen het padding/margin overal.

Edward Brosens

12-12-2009 21:43

Stefan schreef op 12.12.2009 18:59
zet margin:0px; padding:0px; op je H4 element.

Och jah, dat kan natuurlijk ook. Scheelt me weer die lelijke <br />

Thanks.

Stefan

12-12-2009 23:56

Edward schreef op 12.12.2009 21:43
[quote='Stefan schreef op 12.12.2009 18:59']zet margin:0px; padding:0px; op je H4 element.

Och jah, dat kan natuurlijk ook. Scheelt me weer die lelijke <br />

Thanks.[/quote]
Alle H & P elementen hebeen of margin of padding, dus als je nog steeds onverklaarbare ruimte hebt, gewoon margin:0px; padding:0px; op gooien.

Robert Deiman

13-12-2009 09:25

Paradox™ schreef op 12.12.2009 20:26
[quote='Tha Wizekid schreef op 12.12.2009 19:57']Of gebruik gewoon een reset.css

Gebruik ik ook altijd ;), maar niet zo uitgebreid. Ik reset alleen het padding/margin overal.[/quote]
Ik reset altijd gewoon alles, omdat ook bij bijv. tables e.d. browsers dit vaak niet 100% hetzelfde doen.
Om gewoon met een "schone lei" te beginnen gebruik ik ook altijd een uitgebreide "reset.css". Dit maakt het crossbrowser bouwen van een website/ lay-out toch al een stuk gemakkelijker.

Reageren

Inloggen om te reageren