✔ Layout wird falsch dargestellt

Status
Nicht offen für weitere Antworten.
A

alex130

Erfahrenes Mitglied
Hi
Ich hab ein problem, ich erstelle gerade eine Homepage aber das Layout wird falsch dargestellt, in Firefox wird es fast richtig angezeigt, aber im IE wird es sehr falsch dargestellt.
Könntet ihr mir bitte helfen?
Thx
Hier meine home.php:
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></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

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

		  		
&nbsp;<br />


</div>
</div>
<div class="rightCol"><div class="box2"></div></div>
</div>
<div class="clear">&nbsp;</div>
</div>

</body>
</html>

Und meine style.css
HTML: 
body {
padding: 0px;
margin: 0px;
background-image: url(images/bgs.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

#container {
width: 800px;
margin: 0 auto;
background-image: url(images/bgs.jpg);
}

#header {
background-color: #4978dc;
background-image: url(images/logo.jpg);
width: 800px;
height: 130px;
border: 1px solid black;
margin-bottom: 8px;
}

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

.centerCol {
width: 500px;
margin: 0 auto;
}

.rightCol { /* rechte Spalte */
width: 150px;
float: right;
}

#content {
background-color: #efefef;
width: 440px;
min-height: 450px;
border: 1px solid black;
margin-bottom: 5px;
padding: 20px;
padding-right: 20px;
margin-right: 15px;
margin-left: 15px;
}

.box {
background-color: #efefef;
width: 150px;
border: 1px solid black;
margin-bottom: 8px;
background-image: url(images/box-bg.gif);
padding-top: 65px;
margin-left: 5px;
}

.box2 {
background-color: #efefef;
width: 150px;
border: 1px solid black;
margin-bottom: 8px;
background-image: url(images/box-bg.gif);
padding-top: 65px;
margin-right: 5px;
}
 
Hi,

versuch es mal hiermit:

Code: 
#header {
background-color: #4978dc;
background-image: url(images/logo.jpg);
width: 798px;
height: 130px;
border: 1px solid black;
margin-bottom: 8px;
}

.centerCol {
margin: 0 150px;
}

#content {
background-color: #efefef;
min-height: 450px;
height: auto !important;
height: 450px;
border: 1px solid black;
padding: 20px;
margin: 0 15px 5px 15px;
}

.box {
background-color: #efefef;
border: 1px solid black;
margin-bottom: 8px;
background-image: url(images/box-bg.gif);
padding-top: 65px;
margin-left: 5px;
}

.box2 {
background-color: #efefef;
border: 1px solid black;
margin-bottom: 8px;
background-image: url(images/box-bg.gif);
padding-top: 65px;
margin-right: 5px;
}

Code: 
<div id="container">
     <div id="header"></div>
     <div class="leftCol">
          <div class="box"></div>
     </div>
     <div class="rightCol">
          <div class="box2"></div>
     </div>
     <div class="centerCol">
          <div id="content">&nbsp;<br /></div>
     </div>
     <div class="clear">&nbsp;</div>
</div>
 
Ist auch kein Wunder, wenn du die Hälfte des Stylesheets weglässt ;-]

Ich hatte eben nur die überarbeiteten Selektoren gepostet - hier nochmal der vollständige CSS-Code:
Code: 
body {
padding: 0px;
margin: 0px;
background-image: url(images/bgs.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

#container {
width: 800px;
margin: 0 auto;
background-image: url(images/bgs.jpg);
}

#header {
background-color: #4978dc;
background-image: url(images/logo.jpg);
width: 798px;
height: 130px;
border: 1px solid black;
margin-bottom: 8px;
}

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

.centerCol {
margin: 0 150px;
}

.rightCol { /* rechte Spalte */
width: 150px;
float: right;
}

#content {
background-color: #efefef;
min-height: 450px;
height: auto !important;
height: 450px;
border: 1px solid black;
padding: 20px;
margin: 0 15px 5px 15px;
}

.box {
background-color: #efefef;
border: 1px solid black;
margin-bottom: 8px;
background-image: url(images/box-bg.gif);
padding-top: 65px;
margin-left: 5px;
}

.box2 {
background-color: #efefef;
border: 1px solid black;
margin-bottom: 8px;
background-image: url(images/box-bg.gif);
padding-top: 65px;
margin-right: 5px;
}
 
Danke, sry für meine Blödheit ^^
Ich lasse den Thread noch offen, falls ich noch etwas brauche.
Danke
 
Kannst du mir noch was helfen bitte?
Ich bräuchte noch zwei div's, einen über den Boxen aber unter dem Logo, die soll 800px lang sein und eine unter dem content, diese soll so lang wie der content bereich sein.
Thx
 
Hast du dir das so vorgestellt?

Code: 
<div id="container">
     <div id="header"></div>
     <div id="divNeu_1">div Neu 1</div>
     <div class="leftCol">
          <div class="box"></div>
     </div>
     <div class="rightCol">
          <div class="box2"></div>
     </div>
     <div class="centerCol">
          <div id="content">&nbsp;<br /></div>
     </div>
     <div id="divNeu_2">divNeu_2</div>
</div>
Code: 
#divNeu_2 {
clear: both;
width: 462px;
margin: 0 auto;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück