✔ margin Problem

[alex130]

Hi
Ich habe ein problem und zwar, wird glaub ich der margin Wert bei meinem #content bereich nicht beachtet.
Hier ist mein Code, ich hoffe ihr könnt mir helfen.
Thx

style.css

body {
padding: 0px;
height: 100%;
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: 480px;
margin: 0px 10px 0px 10px;
}


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

#content {
background-color: #efefef;
min-height: 450px;
border: 1px solid black;
width: 480px;
margin: 0px 10px 0px 10px;
padding: 20px;
padding-right: 20px;
}

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



#footer {
background-color: #efefef;
width: 634px;
margin-top: 8px;
border: 1px solid black;
height: 20px;
padding: 3px;
}


 /* A LINKS */

a:link {
font-size: 12px;
 color : #367cce;
font-weight : bold;
text-decoration: none;
}

a:active {
font-size: 12px;
 color : #367cce;
  font-weight : bold;
  text-decoration: none;
}

a:visited {
font-size: 12px;
 color : #367cce;
  font-weight : bold;
  text-decoration: none;
}

a:hover {
font-size: 12px;
 color: #FF6600;
 font-weight : bold;
 text-decoration: none;
}

index.html

<div id="container">
	<div id="header">
		Header
	</div>
	<div class="leftCol">
		<div class="box">
			LeftCol
		</div>
	</div>
	<div id="content">
		Content
	</div>
	<div class="rightCol">
		<div class="box">
			RightCol
		</div>
	</div>
</div>

 

[Quaese]

Hi,

zunächst gehe ich mal davon aus, dass die rechte Spalte auch rechts angeordnet sein soll. Damit muss
sie als rechts-floatendes Element im Quellcode vor dem Content notiert werden.

Die margin-Werte müssen von den äusseren Rändern aus gemessen werden. Hier also die Breite der
Seitenspalte zzgl. der 10 Pixel - entspricht 160 Pixel.

Ein Bug des IE verhindert das oben beschriebene margin-Verhalten. Hier muss den Spalten eine Höhe
zugewiesen werden.

CSS:

body {
padding: 0px;
height: 100%;
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;
height: auto !important;
height: 1%;
}

.centerCol {
width: 480px;
margin: 0px 10px 0px 10px;
}


.rightCol { /* rechte Spalte */
width: 150px;
float: right;
height: auto !important;
height: 1%;
}

#content {
background-color: #efefef;
min-height: 450px;
height: auto !important;
height: 450px;
border: 1px solid black;
/*width: 480px;*/
margin: 0px 160px 0px 160px;
padding: 0px;
}
.inner-content{ margin: 20px;}

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

#footer {
background-color: #efefef;
width: 634px;
margin-top: 8px;
border: 1px solid black;
height: 20px;
padding: 3px;
}


 /* A LINKS */
a:link {
font-size: 12px;
 color : #367cce;
font-weight : bold;
text-decoration: none;
}

a:active {
font-size: 12px;
 color : #367cce;
  font-weight : bold;
  text-decoration: none;
}

a:visited {
font-size: 12px;
 color : #367cce;
  font-weight : bold;
  text-decoration: none;
}

a:hover {
font-size: 12px;
 color: #FF6600;
 font-weight : bold;
 text-decoration: none;
}

HTML:

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

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

  <div id="content">
    <div class="inner-content">Content</div>
  </div>
</div>

Vielleicht hilft dir das weiter.

Ciao
Quaese

 

[alex130]

Danke für die schnelle Antwort und deine Hilfe.
hat super funktioniert.
lg

 

[Maik]

Hi,

es wundert mich, dass du plötzlich die Reihenfolge der floatenden DIVs im HTML-Code vertauschst, denn in all deinen bisherigen CSS-Themen, in denen das Layout weitestgehend auf demselben Stylesheet basiert, hat sie doch immer gestimmt. :suspekt:

Mit anderen Worten: Diesen Thread hättest du dir sparen können, wenn du einfach mal in deinen vergangenen Themen nachgeschlagen und die Quellcodes miteinander verglichen hättest, denn in ihnen trat ja bislang kein "margin-Problem" auf.

Und beim nächsten Mal den "gelösten" Thread bitte auch als erledigt markieren. Vielen Dank.

 

[alex130]

Hi
Sry das ist mir dann auch eingefallen , aber dann hatte ich den Thread schon.
lg