Div Problem

Status
Nicht offen für weitere Antworten.

alex130

Erfahrenes Mitglied
Hi
Und wieder mal hab ich ein Problem ^^ und zwar, bei meinem Div, ich hab hier nen Screenshot und den Code gepostet und hoffe dass ihr mir helfen könnt.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="style3.css" />
<style type="text/css">
#container {
width: 800px;
margin: 0 auto;
}

#header {
width: 800px;
height: 130px;
background-image: url(images/logo.jpg);
border: 1px solid black;
background: #000099;
}

.navi-top {
width: 800px;
height: 30px;
border: 1px solid black;
background: #0066FF;
border-top: 0px;
}

.leftCol { /* linke Spalte */
width: 150px;
float: left;
border-left: 1px solid black;
border-right: ;1px solid black;
border-bottom: 1px solid black;
margin-right: 0 !important; /* Moderne Browser */
margin-right: -3px; /* IE */
}

.rightCol { /* rechte Spalte */
width: 150px;
float: right;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: ;1px solid black;
margin-left: 0 !important; /* Moderne Browser */
margin-left: -3px; /* IE */
}

.box {
width: 150px;
height: 400px;
background: #CCCCCC;
}

#content {
margin: 0 150px !important; /* Moderne Browser */
margin: 0 147px; /* IE */
height: 600px;
border: 0px, 1px solid black, 0px, 1px solid black;
background: #DDDDDD;
}

#footer {
width: 498px;
height 30px;
border: 1px solid black;
border-top: 0px;
margin: 0 auto;
background: #000099;
}

.text {
padding: 10px;
background: #DDDDDD;
}


</style>
</head>
<body>

<div id="container">
<div id="header"></div>
<div class="navi-top">
<div class="navigation" align="center">

		<a href="index.php">Home</a>
		<a href="index.php?site=search">User suchen</a>
		<a href="index.php?site=new_user">Neue User</a>
		<a href="index.php?site=online">Online User</a>
		<a href="index.php?site=help">Hilfe / Faq</a>
		<a href="index.php?site=vote">Vote</a>
		<div class="clearer"><span></span></div>
	</div>
</div>
<div class="leftCol">
<div class="box"></div>
</div>


<div class="rightCol">
<div class="box">
</div>
</div>

<div id="content">
<div class="text">
TEST<br />
TEST<br />
TEST<br />
TEST<br />TEST<br />
TEST<br />TEST<br />
TEST<br />TEST<br />
TEST<br />TEST<br />
TEST<br />TEST<br />
TEST<br />TEST<br />
TEST<br />TEST<br />
TEST<br />TEST<br />
TEST<br />TEST<br />
TEST<br />
</div></div>




</div>
<div id="footer">TEST</div>
</body>
</html>
 

Anhänge

  • css-problem.JPG
    css-problem.JPG
    22,3 KB · Aufrufe: 29
Hi,

entweder erhöhst du die Breite für das umschliessende DIV #container von 800 auf 802px, oder du verringerst die Breite für die beiden DIVs #header und .navi-top von 800 auf 798px, da sie, im Gegensatz zum Erstgenannten, noch einen umlaufenden Rahmen von einem Pixel besitzen, der zur Breitenangabe hinzuaddiert wird, was eine Boxbreite von 802px ergibt, Stichwort: "Boxmodell", und deshalb zu dieser "Überlappung" führt.

Wenn die Breitenangaben für die beiden inneren DIVs entfallen, passen sie sich automatisch der Breite des Elternelements #container an, da sie ja als Blockelement eine "voreingestellte" Breite von 100% besitzen.
 
Status
Nicht offen für weitere Antworten.
Zurück