✔ 3-spaltiges Layout / fixe Breite

[Blackylein]

Hi!

Ich hab ein Problem mit meinem dreispaltigen Layout. Das ganze sieht so aus, dass ich normal einen Header habe, darunter dann ein Bild und ein Menü. Dann kommt die Content Box, wo drei Spalten drin sein sollen. Das Problem ist, dass die drei Spalten nicht in einer Zeile sind und ich nicht verstehe wieso. Keine dieser Spalten soll irgendwie variabel sein von der Breite, ist alles fix.

#content {
	clear:both;
	width:772px;
	background-image:url(../images/bg.jpg);
	background-repeat:repeat-y;
	margin: 0 auto;
	
}		

#links {
	background-color:#000000;
  	float:left;
	width:260px;
	margin-left:20px;
	z-index:1
}

#mitte {
	background-color:#333333;
  	width: 250px;
 	margin-left:300px;
	margin-right:150px;
	z-index:2
}


#rechts {
	background-color:#999999;
	margin-left:600px;
	width: 160px;
	z-index:3
}

<div id="content">

        <div id="links">
       	  <img src="images/banner_kaufparkaktuell.jpg" /><br /><br />-->
            Das ist ein Blindtext! Das ist ein Blindtext! Das ist ein Blindtext!        </div>
            
        <div id="mitte">
        	<img src="images/banner_vereinsnews.jpg" /><br /><br />
            Das ist ein Blindtext! Das ist ein Blindtext! Das ist ein Blindtext!       </div>

        <div id="rechts">
        	<img src="images/banner_magazin.jpg" /><br /><br />
            Das ist ein Blindtext! Das ist ein Blindtext! Das ist ein Blindtext!        </div>
    
</div>

Ich tüftel jetzt schon seit Tagen daran, hab einiges ausprobiert, finde aber einfach den Fehler nicht. Wäre euch echt dankbar, wenn ihr mir weiterhelfen könntet.

MfG
Bl4cky

 

[Maik]

Hi,

versuch es mal hiermit:

#links {
        background-color:#000000;
          float:left;
        width:260px;
        margin-left:20px;
}

#mitte {
        background-color:#333333;
        margin-left:280px;
        margin-right:160px;
}

#rechts {
        background-color:#999999;
        float:right;
        width: 160px;
}

<div id="content">
        <div id="links">...</div>
        <div id="rechts">...</div>
        <div id="mitte">...</div>
</div>

 

[Blackylein]

Hey, cool, das funktioniert. Danke!

Einen kleinen IE-Bug hab ich noch. Der Copyright-Text soll in der Fußzeile zentriert sein. Die Fußzeile ist aber ein bisschen speziell (siehe Anhang)

Ich hab den Text in einen eigenen DIV reingepackt und dem DIV passende Größe zugewiesen (ohne dem Logo rechts). Im Opera passts auch, nur im IE nicht.

#footer {
	width:772px;
	height:92px;
	text-align:center;
	background-image:url(../images/footer.jpg);
	margin: 0 auto;
}

.footer_text {
	width:590px;
	padding-top:40px;
	font-size:10px;
	color:#333333;
}

<div id="footer">
    <p class="footer_text">Copyright &copy; 2008 Kaufpark Vösendorf :: Impressum :: Datenschutzrichtlinen</p>
    </div>

 

[Maik]

Möglicherweise hilft das hier weiter?

#footer {
        width:772px;
        height:92px;
        /*text-align:center;*/
        background-image:url(../images/footer.jpg);
        margin: 0 auto;
}

.footer_text {
        width:590px;
        padding-top:40px;
        font-size:10px;
        color:#333333;
        text-align:center;
}

 

[Blackylein]

Hm, ja stimmt. Deine Variante ist viel logischer als meine *schäm*

Dankeschön!

Warum ist im Opera zwischen "content" und "footer" ein Abstand?

<div class="content">
<div class="links"></div><div class="mitte"></div><div class="rechts"></div>
</div>
<div class="footer"></div>

#content {
	position:relative;
	width:772px;
	background-image:url(../images/bg.jpg);
	background-repeat:repeat-y;
	margin: 0 auto;
	
}		

#links {
  	position:absolute;
	width:250px;
	top:20px;
	left:25px;
}

#mitte {
	position:relative;
	width: 250px;
	top:20px;
	left:305px;
}


#rechts {
	position:absolute;
	width: 160px;
	top:20px;
	right:25px;
}

#footer {
	width:772px;
	height:92px;
	background-image:url(../images/footer.jpg);
	margin: 0 auto;
}

 

[Maik]

Hi.

Warum ist im Opera zwischen "content" und "footer" ein Abstand?

Das liegt an der äußeren Polsterungseigenschaft des p-Elements, die derzeit nicht auf null zurückgesetzt ist:

.footer_text {
        width:590px;
        padding-top:40px;
        font-size:10px;
        color:#333333;
        background:#ffff00;
        text-align:center;
        margin-top:0;
}

Wenn du aber zu Beginn des Stylesheets folgende Regel aufnimmst, werden für alle im Dokument enthaltenden Elemente ihre Polsterungseigenschaften auf null zurückgesetzt, und müssen so nicht einzeln behandelt werden:

* {
margin:0;
padding:0;
}

 

[Blackylein]

Ich hab das im body eigentlich eh festgelegt

body {
  	padding:0;
  	margin:0;
  	background-color: #ffffff;
	font-family:Verdana, Arial, Helvetica, sans-serif; 
}

und daran scheints auch nicht zu liegen ... *weitersuch*

 

[Maik]

Hi,

du hast mit der Regel lediglich die Polsterungseigenschaften des Dokumentkörpers body zurückgesetzt, und diese Regel gilt nicht für alle weiteren Elemente innerhalb des Dokuments, bzw. wird nicht an sie vererbt.

Mit meinen beiden gestrigen Vorschlägen wird bei mir im Opera (und den anderen modernen Browsern) keine Lücke zwischen dem Inhalt und dem Footer erzeugt.