Gap tussen div's
Hallo,
Ik heb een klein probleempje met m'n divs. Onderaan de main div zit een gat waar je de achtergrond door kunt zien.
( zie http://www.theonewithout.info/rvb/ )
HTML
De main CSS:
Iemand enig idee wat 't probleem is? Als ik #inner weghaal dan komt er een gap aan boven- en onderkant..
Ik heb een klein probleempje met m'n divs. Onderaan de main div zit een gat waar je de achtergrond door kunt zien.
( zie http://www.theonewithout.info/rvb/ )
HTML
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div id="site">
<div id="top">
<a href="."><img src="images/logo.gif" class="left no-border" title="Terug naar de beginpagina van Roelofs & van Brakel" alt="Terug naar de beginpagina van Roelofs & van Brakel" /></a>
<a href="./home">Home</a> | <a href="./contact">Contact</a> | <a href="./sitemap">Sitemap</a>
</div>
<div id="header">
<!-- <h1>Roelofs & van Brakel B.V.</h1> -->
</div>
<div id="main">
<div class="inner">
<?php
$mod = $_REQUEST["mod"];
/* Page inclusion */
$forbidden = array("index", "404");
if (in_array(strtolower($mod), $forbidden))
$mod = "home";
if (is_file($mod.".php")) {
$inc_page = $mod.".php";
} elseif (empty($mod)) {
$inc_page = 'home.php';
} else {
$inc_page = '404.php';
}
include ( $inc_page );
?>
</div>
<div class="clearer"></div>
</div>
<div id="footer">
<p>Auteursrecht �� 2008 - Roelofs & van Brakel</p>
</div>
</div>
<div id="top">
<a href="."><img src="images/logo.gif" class="left no-border" title="Terug naar de beginpagina van Roelofs & van Brakel" alt="Terug naar de beginpagina van Roelofs & van Brakel" /></a>
<a href="./home">Home</a> | <a href="./contact">Contact</a> | <a href="./sitemap">Sitemap</a>
</div>
<div id="header">
<!-- <h1>Roelofs & van Brakel B.V.</h1> -->
</div>
<div id="main">
<div class="inner">
<?php
$mod = $_REQUEST["mod"];
/* Page inclusion */
$forbidden = array("index", "404");
if (in_array(strtolower($mod), $forbidden))
$mod = "home";
if (is_file($mod.".php")) {
$inc_page = $mod.".php";
} elseif (empty($mod)) {
$inc_page = 'home.php';
} else {
$inc_page = '404.php';
}
include ( $inc_page );
?>
</div>
<div class="clearer"></div>
</div>
<div id="footer">
<p>Auteursrecht �� 2008 - Roelofs & van Brakel</p>
</div>
</div>
De main CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
#site {
width: 750px;
margin: auto auto;
border: 1px solid #151B54;
border-style: none solid;
}
#top {
height: 45px;
background-color: #fff;
text-align: right;
line-height: 40px;
padding-right: 20px;
padding-left: 20px;
padding-top: 5px;
}
#header {
height: 100px;
background-color: #306EFF;
border: 1px solid #151B54;
border-style: solid none;
background-image: url('images/header.png');
line-height: 80px;
}
#header h1 {
text-align: center;
font-size: 30px;
color: #000;
}
#main {
min-height: 100px;
background-color: #eee;
}
#footer {
height: 50px;
background-color: #306EFF;
text-align: center;
line-height: 50px;
color: #eee;
}
.inner {
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
.clearer {
clear: both;
}
width: 750px;
margin: auto auto;
border: 1px solid #151B54;
border-style: none solid;
}
#top {
height: 45px;
background-color: #fff;
text-align: right;
line-height: 40px;
padding-right: 20px;
padding-left: 20px;
padding-top: 5px;
}
#header {
height: 100px;
background-color: #306EFF;
border: 1px solid #151B54;
border-style: solid none;
background-image: url('images/header.png');
line-height: 80px;
}
#header h1 {
text-align: center;
font-size: 30px;
color: #000;
}
#main {
min-height: 100px;
background-color: #eee;
}
#footer {
height: 50px;
background-color: #306EFF;
text-align: center;
line-height: 50px;
color: #eee;
}
.inner {
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
.clearer {
clear: both;
}
Iemand enig idee wat 't probleem is? Als ik #inner weghaal dan komt er een gap aan boven- en onderkant..
Bug is alleen in firefox. in Ie is de 'gap' niet zichtbaar. waarschijnlijk heb je een br te veel of is het iets met je clear: both. Probeer het in FF eens zonder die div clearer
Ja, het is inderdaad alleen in FF, IE had ik nog niet eens getest.
Maar als ik die #clearer weghaal dan gaat m'n tekst over de layout heen en die gap blijft bestaan..
Maar als ik die #clearer weghaal dan gaat m'n tekst over de layout heen en die gap blijft bestaan..
als je <p>Auteursrecht © 2008 - Roelofs & van Brakel</p>
vervangt door:
<span>Auteursrecht © 2008 - Roelofs & van Brakel</span>
vervangt door:
<span>Auteursrecht © 2008 - Roelofs & van Brakel</span>
'Marco:
als je <p>Auteursrecht © 2008 - Roelofs & van Brakel</p>
vervangt door:
<span>Auteursrecht © 2008 - Roelofs & van Brakel</span>
vervangt door:
<span>Auteursrecht © 2008 - Roelofs & van Brakel</span>
:)
Dat is 't inderdaad, dank u wel! Maar waarom verpest FF 't dan zo?
FF geeft een margin aan de de p tag mee.
als ik
#footer p{
margin: 0;
}
toevoeg, is de gap ook weg
als ik
#footer p{
margin: 0;
}
toevoeg, is de gap ook weg
Gewijzigd op 01/01/1970 01:00:00 door Marco Fijn




