Div probleem: tussenruimte tussen divs

**gast3154** · 11-05-2008, 22:40

Hey,

<?html

<!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">

<head>
<title>Test »</title>
<meta name="robots" content="Index, Follow" />
<meta name="description" content="Pagina" />
<meta name="keywords" content="pagina" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>

<body>

<div id="container">

<div id="header">

<p class="startname">
[PFZLINK]http://test.pagina.nl[/PFZLINK]
</p>

</div>

<div id="title">

<p class="titlename">
Mijn titel
</p>

</div>

<div id="options">

<div class="optleft">

<p class="left">

<a href="#">Voeg toe aan favorieten</a>

</p>

</div>

<div class="optright">

<p class="right">

<a href="#">Deze pagina als startpagina</a>

</p>

</div>

<div class="optcenter">

<p class="center">

<a href="#">Contacteer beheerder</a>

</p>

</div>

</div>

<div id="ads1">

<p>ads</p>

</div>

<div class="topic1">

<p class="topictitle">
Ads
</p>

<ul>
<li><a href="http://www.ads.nl">ads</a></li>
</ul>

</div>

<div class="topic1">

<p class="topictitle">

AutoIt </p>

<ul>

<li><a href="http://www.autoit.com">AutoIt</a></li>

</ul>

</div>

<div class="topic1">

<p class="topictitle">
Geld lenen </p>

<ul>

<li><a href="http://www.lenen.nl">Lenen.nl</a></li>
<li><a href="http://www.lenen.pl">Lenen.pl</a></li>

</ul>

</div>
<div class="topic1">

<p class="topictitle">
PHP </p>

<ul>

<li><a href="http://www.phpfreakz.nl">PHPFreakz</a></li>

</ul>

</div>
<div class="topic1">

<p class="topictitle">
Weblogs </p>

<ul>

<li><a href="http://www.geenstijl.nl">Geenstijl.nl</a></li>

</ul>

</div>

</div>
</body>

</html>

?>

<?css
body {
font-family: Tahoma;
font-size: 9px;
background-color: #3366ff;
}

#container {
margin-left: auto;
margin-right: auto;
width: 798px;
padding: 1px 3px 3px 3px;
}

#header, #options, #title, #ads1, #footer {
border: 1px solid #FFCC33;
padding: 2px;
background-color: #F5B800;
margin-top: 3px;
width: 789px;
}

.adssmall {
font-size: 11px;
}

.startname {
font-size: 14px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}

.center, .left, .right {
font-size: 11px;
padding: 2px;
}

.left {
padding-left: 20px;
}

.right {
padding-right: 20px;
}

.center {
text-align: center;
}

.optleft, .optright, .optcenter { }

.titlename {
font-size: 14px;
font-weight: bold;
text-align: center;
}

.optleft {
float: left;
}

.optright {
float: right;
}

.optcenter { }

p {
padding: 0;
margin: 0;
}

.clearer {
clear: both;
}

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

a.white:link {
text-decoration: none;
color: #ffffff;
}

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

a.white:visited {
text-decoration: none;
color: #ffffff;
}

a:hover {
color: #000000;
text-decoration: underline;
}

a.white:hover {
color: #ffffff;
text-decoration: underline;
}

.topic1 {
border: 1px solid #ffcc33;
background-color: #f5b800;
margin-top: 3px;
float: left;
font-size: 11px;
margin-right: 3px;
}

.topictitle {
background-color: #000000;
color: #ffffff;
padding: 3px;
font-weight: bold;
}

ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

li a {
display: block;
padding: 3px 0px 3px 5px;
width: 256px;
}

li a:link, a:visited { }

li a:hover {
background-color: #fefefe;
}

.footername {
font-size: 10px;
text-align: center;
}

.explain {
padding: 3px 0px 3px 5px;
}

?>

Fout (met bovenstaande html & css):

http://quickradio.nl/layout/fout/index.php

Zo wil ik het graag zien:

http://quickradio.nl/layout/goed/index.php

Daar is dus de vergrote tussenruimte (16 px ongeveer) tussen 'Ads' en 'PHP' weg, zelfde voor 'AutoIt' en 'Weblogs'.

Alvast bedankt,

Andreas

**gast2960** · 12-05-2008, 12:44

Uhm, je hebt toch al een goede pagina zonder fout?

offtopic:
Kan je de paragraaf
( <p class="topictitle"> PHP </p> )
niet beter veranderen in een tekstkop
( <h1>PHP</h1> )?

Gr. Gijsbert

**EvK** · 12-05-2008, 13:32

Waarom niet shorthand?
ipv

Code:

margin-left:2px;
margin-bottom:3px;

doe je:

Code:

margin:0 0 3px 2px;

Div probleem: tussenruimte tussen divs