✔ Content box in die Mitte bekommen

alex130 · 8. Dezember 2006

Hi
Ich hab ein Problem, hab mal schnell ein recht einfaches Layout erstellt, aber ich weis nicht,wieso die Content Box jetzt nicht in der Mitte ist.
Ich hoffe ihr könnt mir helfen, hier mein COde:

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>

<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;
}

.leftCol { /* linke Spalte */
width: 150px;
float: left;
}

.rightCol { /* rechte Spalte */
width: 150px;
float: right;
border-right: 1px solid black;
border-bottom: 1px solid black;
}

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

#content {
width: 500px;
height: 600px;
border: 1px solid black;
border-top: 0px;
border-bottom: 0px;
background: #0099FF;
margin: 0 auto;
}

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

</style>
</head>
<body>

<div id="container">
<div id="header"></div>
<div class="leftCol">
<div class="box"></div>
</div>


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

<div id="content">
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 id="footer">TEST</div>
</body>
</html>

Maik · 8. Dezember 2006

Setz mal folgende Regeln ein:

Code:

.leftCol { /* linke Spalte */
width: 150px;
float: left;
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;
margin-left: 0 !important; /* Moderne Browser */
margin-left: -3px; /* IE */
}

#content {
margin: 0 150px !important; /* Moderne Browser */
margin: 0 147px; /* IE */
height: 600px;
border: 1px solid black;
border-top: 0px;
border-bottom: 0px;
background: #0099FF;
}

alex130 · 8. Dezember 2006

Hi
Danke für deine schnelle Antwort und wiedermal funktoniert es.
Danke

Maik · 8. Dezember 2006

Ein Blick in deinen CSS-Thread Css Layout verschiebung hätte dir eigentlich auch weitergeholfen

alex130 · 8. Dezember 2006

Hi
Ich hab leider schon wieder ein Problem, hab nur eine Div box dazu gemacht, die .text heißt....
Aber jetzt wird das Layout nur im IE richtig angezeigt und in FireFox falsch

Ich hoffe du kannst mir bitte nochmal helfen.
Hier mein neuer Code:

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>

<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;
}

.leftCol { /* linke Spalte */
width: 150px;
float: left;
border-left: 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;
margin-left: 0 !important; /* Moderne Browser */
margin-left: -3px; /* IE */
}

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

#content {
margin: 0 150px !important; /* Moderne Browser */
margin: 0 147px; /* IE */
height: 600px;
border: 1px solid black;
border-top: 0px;
border-bottom: 0px;
background: #0099FF;
}

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

.text {
width: 480px;
margin: 10px;
background: #0099FF;
}


</style>
</head>
<body>

<div id="container">
<div id="header"></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>

Maik · 8. Dezember 2006

Bei mir wird die Seite in beiden Browsern falsch dargestellt.

Anyway, entferne mal die width-Angabe aus dem Selektor .text.

alex130 · 8. Dezember 2006

Hi
Hab im text Selector das width entfernt, wird aber immer noch falsch angezeigt.
Ich hab auch schon versuch, statt dem text Selector im Content Div den Wert padding auf 10 px ode rso zu stelen, aber dann verrutscht die Box auch wieder

Maik · 8. Dezember 2006

Code:

.text {
padding: 10px;
background: #0099FF;
}

Und so sieht's bei mir im Firefox (2.0) und IE (6.0) aus:

alex130 · 8. Dezember 2006

Ja so passt es jetzt, THX

✔ Content box in die Mitte bekommen

alex130

Erfahrenes Mitglied

Maik

alex130

Erfahrenes Mitglied

Maik

alex130

Erfahrenes Mitglied

Maik

alex130

Erfahrenes Mitglied

Maik

Anhänge

alex130

Erfahrenes Mitglied

Neue Beiträge