Hallo, ich habe mit Hilfe von CSS mehrere Container übereinander angeordent und auch einige Grafiken eingefügt (als Hintergrund).
Folgendes Problem: zwischen den einzelnen "divs" entsteht immer ein nerviger Abstand, den ich einfach nicht wegbekomme...
Habe auch schon gesucht aber nichts bringt mich irgendwie weiter. Der CSS Code
body {
color:#FFFFFF;
background:url(hintergrund.jpg);
}
h1 { padding-top:15px; font-size:24px;color:#ffffff;margin:0px;}
h2 { font-size:14px; padding-left: 20px;}
.main { width:622px; margin:0px auto;text-align:center;border:dashed 1px black; }
.title { height:75px; text-align:center; margin:0px}
.content_title { height: auto; width:622px; padding:0px; margin:0px auto; }
.content_top { width:622px; background:url(ev_bg_top.gif); padding:0px; margin:0px auto; }
.content { width:622px; background:url(ev_bg.gif); padding:0px; margin:0px auto;}
.content_bottom { width:622px; background:url(ev_bg_bottom.gif); padding:0px; margin:0px auto; }
Der HTML-Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<link rel="stylesheet" href="format.css" type="text/css" />
<title>Einfache Website mit Menü</title>
</head>
<body>
<div class="main">
<div class="title"><h1>Einfache Webseite mit Menü<br /> <a href="#">Startseite</a> |
<a href="#">Forum</a> | <a href="#">Aktuelles</a> | <a href="#">Sonstiges</a></h1></div>
<div class="content_title"><img src="xy.jpg" alt="" /></div>
<div class="content_top"> </div>
<div class="content"><h2>Test test test</h2></div>
<div class="content_bottom"> </div>
<div style="clear:both"></div>
</div>
</body>
</html>
Es wäre sehr schön wenn mir jemand beschreiben könnte, wie ich dieses nervige Problem beseitigen kann.