div-boxen überlappen

Filu · #1 (**permalink**) 09.06.2007, 13:09

Kann mir jemand sagen, wieso meine boxen sich gegenseitig überlappen und nicht innerhalb von (page-container) bleiben?

danke für eure Hilfe!

<CSS>

Code:

body{background-color: #47495F; font-family:verdana,arial,sans-serif; font: 12px;}

.page-container {width:800px; margin:0px auto; margin-bottom:10px; border:solid 1px rgb(150,150,150); background: #FFFFFF; z-index:1;}
.header{width: 760px; height: 86px; padding:20px; background-color: #EEEEEE; border-bottom: solid 1px rgb(150,150,150);}
.sitelogo {width:110px; height:86px; position:absolute; z-index:1; background:url(images/logo.gif); }
.header-titel{padding-left:250px; padding-top:30px; font-size:140%; font-weight:bold;}
.footer{width: 790px; padding: 5px; background-color: #EEEEEE; color: #606060; font-size:60%; text-align: center; border-top: solid 1px rgb(150,150,150);}

.main {clear:both; width:800px;}
.navi{display:inline /*Fix IE floating margin bug*/; float:left; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/; width: 150px; margin-top:10px; padding:10px; border-right: solid 1px rgb(150,150,150);}
.inhalt{display:inline /*Fix IE floating margin bug*/; float:left; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/; width:650px; margin-top:10px; padding:10px;}

</CSS>

<html>

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" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="cache-control" content="no-cache" />
<link rel="stylesheet" type="text/css" media="screen,projection,print" href="design.css" />
<link rel="icon" type="image/x-icon" href="./img/favicon.ico" />
<title>Adressverwaltung</title>
</head>
<body>

<div class="page-container">
<div class="header">
<a class="sitelogo" href="#" title="Home"></a>
<div class="header-titel">AdressVerwaltung</div>
</div>

<div class="main">
<div class="navi"><p>NAVI</p> <p>NAVI</p> <p>NAVI</p> <p>NAVI</p> <p>NAVI</p> </div>
<div class="inhalt">inhalt</div>
</div>

<div class="footer">AdressVerwaltung, Code and Design Copyright &copy; 2007 by ......</div>
</div>

</body>
</html>

</html>

Crizzo · #2 (**permalink**) 09.06.2007, 14:46

welche Boxen?
Onlinebeispiel?

Filu · #3 (**permalink**) 09.06.2007, 14:58

Ich habe das ganze mal online gestellt: Adressverwaltung

das Problem ist hald, dass die Navigation den ganzen footer überlappt und nicht innerhalb des "page-container" bleibt.

sorry, habe bissher noch nie ein komplettes Layout in CSS erstellt daher habe ich etwas Startschwierigkeiten.

Crizzo · #4 (**permalink**) 09.06.2007, 15:03

Gibt den einmal vorkommenden Hauptelementen erstmal eine id und keine Klasse

Danach solltest du mal schauen, wie der Inhalt bzw. die größe von deinem Content Container bestimmt wird.

fricca · #5 (**permalink**) 09.06.2007, 15:13

Zitat:

Zitat von Filu

das Problem ist hald, dass die Navigation den ganzen footer überlappt und nicht innerhalb des "page-container" bleibt.

Deinem float fehlt das clear.
Arbeite die verlinkten Artikel unter FAQ Punkt 2 durch, besonders den ersten und den zweiten.

Außerdem passen Navigation und Inhalt nicht nebeneinander - denk an das Box-Model!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18