Ruimte tussen DIVS

Status
Niet open voor verdere reacties.
O

Ordinair

Nieuwe gebruiker
Lid geworden
21 nov 2012
Berichten
1
Ik ben al een tijd niet meer bezig geweest met HTML en CSS. Maar nu was ik na een lange tijd weer bezig met een website en nu heb ik ruimte tussen mijn DIVS.

Vroeger had ik daar altijd een oplossing voor maar ik kom er nu niet meer op.

screen.jpg

Het probleem kun je wel zien. De ruimte tussen de header en navigatie en het stukje achtergrond onder de footer nog.

Code: 
body,html {
	background-image:url('images/bg.png');
	background-repeat:repeat;
	margin:0px;
	padding;0px;
	clear:both;
	position: relative; 
	font-family:"arial";
	z-index:-1;
}

#container {
	width:970px;
	background-image:url('images/container.png');
	background-repeat:repeat-y;
	margin-left:auto;
	margin-right:auto;
	padding:0px;
}

#navigation {
	width:970px;
	height:40px;
	background-image:url('images/nav.png')
}

#navigation a {
	color:white;
	font-weight:bold;
	font-style:normal;
	text-decoration:none;
	text-shadow:1px 1px #000;
	text-transform: uppercase;
}

#navigation ul {

}

#navigation li {
	display:inline;
	list-style-type:none;
	padding-left:20px;
}

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
		<head>
			<title>Visco Urk - Visgroothandel</title>
				<meta name="keywords" content="vis, import, export, diepvries, black tiger, zalm, tonijn, makreel, groothandel, garnalen, zeebaars, yellowfin, wijting, schol, sliptong, tong, tarbot" />
				<meta name="description" content="Visco is een visgroothandel voor Nederlandse horeca." />
				<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
				<meta http-equiv="Content-Language" content="nl" />
				<link rel="stylesheet" type="text/css" href="style.css" />
		</head>

			<body>

				<div id="container">

					<div class="header">

						<img src="images/header.png" />

					</div>

					<div id="navigation">

						<ul>
							<li><a href="#">Beginpagina</a></li>
							<li><a href="#">Over Ons</a></li>
							<li><a href="#">Producten</a></li>
							<li><a href="#">Contact</a></li>
						</ul>

					</div>

					<div class="content">

						Content

					</div>

					<div class="footer">

						<img src="images/footer.png" />

					</div>

				</div>

			</body>
	</html>

Dit is dus mijn code, en er staat veel onzin tussen omdat ik vanalles aan het proberen ben. Maar kan iemand me helpen op het werkend te krijgen?
 
Hoi Ordinair,
Omdat de images ontbreken in je bovenstaande code, kan ik niet precies zien wat er aan de hand is.
Maar ik zou in ieder geval eens proberen:
Code: 
#navigation ul {
    margin: 0;
    padding: 0;
    }
#navigation li {
    ...
    margin: 0;
    padding: 0 0 0 20px;
    }
Toelichting:
De <ul>'s en <li>'s van opsomingsrijtjes hebben uit zichzelf bepaalde margins en paddings, ook al zijn die niet opgegeven. Om alles "leeg op te leveren" moeten alle margins en paddings ervan die je niet gebruikt, toch op nul worden gezet.
Hetzelfde geldt voor het rijtje <h1>, <h2>, <h3>, enz., en ook voor <p>'s.
De meeste andere elementen hebben er geen last van.

Met vriendelijke groet,
CSShunter
 
Als aanvulling daarop: je kunt ook een css reset opzoeken die al dat soort standaard waarden reset, dat heeft als voordeel dat je geen problemen hebt met browsers die standaard margins en paddings anders interpreteren.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan