Dreispalten Layout mit Hintergrundfarbe

Johnn41 · #1 (**permalink**) 20.03.2011, 21:59

Hallo Forengemeinde, ich habe ein Problem mit einem Dreispalten-Layout in einem Haup-Div-Element und es soll eine Hintergrundfarbe nur für die drei Spalten definiert werden. Die gesamte breite der drei Spalten beträgt 980 Pixel. Ist der Monitor breiter soll links und rechts eine andere Farbe definiert werden als die drei Spalten in dem Haupt-Div-Element.

Hier mal der Code (Css-Datei)

/* ****************** Fenster ********************* */
#fenster {
position: relative;
width: 980px;
margin-left: auto;
margin-right: auto;
height:auto;
background-color:#000000;
}

/* ****************** Grafik *************** */
#top {
position:relative;
background-image:url(../image_top/Kopf_modern3.jpg);
right: 0px;
height: 124px;
width: 980px;
text-align: left;
z-index: 1;
}

/* ****************** Top Menü *************** */
#top-menue {
position:relative;
top: 200px;
height: auto;
width: 938px;
text-align: left;
z-index: 1;
left:0px;

}

/* ****************** Hauptmenü *************** */
#haupt-menue {
position:relative;
width: 200px;
text-align: center;
float: left;

}

/* ****************** Inhalt *************** */
#inhalt {
position:relative;
top:0px;
left:0px;
width: 560px;
text-align: center;
float: left;
border-left: 1px solid #ddb430 ;
border-right: 1px solid #ddb430;
height:auto;
}

/* ****************** Inhalt2 *************** */
#inhalt2 {
position:relative;
top:60px;
position:relative;
left:0px;

height:auto;
}
/* ****************** Nachrichten *************** */
#news {
position:relative;
margin-top:50px;
text-align: center;
width: 170px;
text-align: center;
float: left;
margin-left:10px;
}

Hier die dazugehörige HTML-Datei:
<html>
<body>
<div id="fenster">

<div id="top" style="background-image:url(image_top/Kopf_modern3.jpg)">
<div id="top-menue">
<div align="right">

<?php include('include/menue_oben.php');?>
</div>

<div align="center" style="position:relative; top:86px; width:950px; height:37px; background-color:#<?php echo $rowbann[17] ; ?>;"></div>
<div align="center" style="position:relative; top:47px; width:950px; height:3px; background-color:#<?php echo $rowbann[19] ; ?>;"></div>
<div align="center" style="position:relative; top:83px; width:950px; height:3px; background-color:#<?php echo $rowbann[20] ; ?>;"></div>
</div>

<div id="haupt-menue">
<div style="width:153px; text-align: center; position:relative; top: 50px; left:-5px;">

<?php include('include/menue_links.php');?>
</div>
</div>

<div id="inhalt" style="position:relative;">
<div id="inhalt2">
<div style="width: 530px;margin-left: auto; margin-right: auto; text-align: left;">

<?php include('include/content.php');?>
</div>

</div>
</div>
</div>

<?php include('include/banner_link.php');?>
</div>

</body>
</html>

Das Problem ist, dass das ganze nur im IE 7 richtig dargestellt wird und zwar das Fenster-Element ist in diesem Fall schwarz. Und Oprea und Firefox erkennen das Fenster-Element nur an wenn ich eine Höhe angebe.

Vielen Dank im vorraus.. Johnn41.

hubspe · #2 (**permalink**) 21.03.2011, 08:04

Moin,

was sollen wir denn damit anfangen ??:

PHP-Code:


			
<?php include('include/menue_links.php');?>

Denkst du irgendjemand hat Zeit sich einen Testcase zusammenzufabulieren??
Außerdem können wir deine Bilder leider nicht sehen.

Uns interessiert nur was an den Browser ausgeliefert wird, d.h. Link zum Problem, dann kann man rumprobieren.

Was ich aber jetzt schon sagen kann ist, das deine ganzen relativen Positionierungen- und
Verschiebungen eine ausgesprochen schlechte Idee sind.
Arbeite mit Float/Clear und lass deine Elemente im Textfluß, dann klappts auch mit den Browsern.

pkipper · #3 (**permalink**) 21.03.2011, 08:18

Hi Johnn41,

Ich habe zwar den ganzen Code-Block den Du reingepostet hast nicht gelesen, aber mir fiel auf wie oft Du relative Positionierungen verwendet hast. Für ein Dreispalten-Layout gehts allerdings viel einfacher. Bitte lade doch zusätzlich zu deinem letzten Post noch ein Testcase hoch damit wir uns deine Seite online betrachten können und Dir somit besser helfen können.

Der vereinfachte Code könnte zB so aussehen:

HTML

HTML-Code:

<div id="umschliessendes_div">
    <div id="div_1">Inhalt Box 1</div>
    <div id="div_2">Inhalt Box 2</div>
    <div id="div_3">Inhalt Box 3</div>
</div>

CSS

Code:

#umschliessendes_div {
     width: 980px;
     margin: 0px auto;
     weitere Angaben...
}

#div_1 {
     display: block;
     float: left;
     weitere Angaben (height, width, etc)...
}

#div_2 {
     display: block;
     float: left;
     weitere Angaben (height, width, etc)...
}

#div_3 {
     display: block;
     float: left;
     weitere Angaben (height, width, etc)...
}

Zudem würde ich Dir, wenn du pixelgenau arbeitest, noch einen Global Reset empfehlen:

CSS

Code:

* {
    margin: 0px;
    padding: 0px;
}

Hoffe ich konnte Dir mit Deinem Problem weiterhelfen.

Liebe Grüsse,

Phil

hubspe · #4 (**permalink**) 21.03.2011, 08:53

Zitat:

Zitat von pkipper

Ich habe zwar den ganzen Code-Block den Du reingepostet hast nicht gelesen, aber mir fiel auf wie oft Du relative Positionierungen verwendet hast. Für ein Dreispalten-Layout gehts allerdings viel einfacher. Bitte lade doch zusätzlich zu deinem letzten Post noch ein Testcase hoch damit wir uns deine Seite online betrachten können und Dir somit besser helfen können.

äh....das hatte ich eigentlich auch schon gepostet, warum hast du mich wiederholt??

Johnn41 · #5 (**permalink**) 21.03.2011, 10:18

Hallo vielen Dank für Deine super schnelle Antwort, aber leider funzt das auch nicht.....
Mein Freund hat mir ein Testverzeichniss angelegt unter den Ihr die Testseite betrachten könnt.

Hier mal der Link: mexxxem.de/test/index.php

Es ist aber wirklich nur ein Test. Wie Ihr, nur im IE7 seht (IE8 nur kompatibilitäts modus), habe ich 4 Container angelegt. Ein Haupt-Element indem sich die anderen 3 Element befinden. Und es wird nur im IE 7 richtig dargestellt. Das heißst der Hauptcontainer muß sich nach dem längsten inneren Container richten und seine Höhe automatisch anpassen.

Wenn ich aber die Höhe des Hauptcontainers angebe z.B. 1000px dann stellen der Orera und Fierfox das auch dar. Ist aber nicht sinn der Sache.

Vielleicht hat jemand ein Idee wie ich das im Opera und Firefox auch umsetzen kann.

Vielen Dank im vorraus, mit besten Grüßen aus Berlin.

hubspe · #6 (**permalink**) 21.03.2011, 10:33

Warum hat #wrapper position:absolute?? Warum überhaupt position:absolute??
Du floatest aber du clearst nirgendwo. (CSS-FAQ Punkt 2)
Der IE7 macht es nur deshalb scheinbar richtig, weil er fälschlicherweise die Floats automatisch einschließt,
wenn das umgebende Element HasLayout hat.

Die divs brauchen kein display:block; weil sie eh von Hause aus Blockelemente sind.

Es ist immer besser in Verbindung mit einer Breite zu floaten.
Für optisch gleichlange Spalten gibt es Faux Columns, siehe CSS-FAQ Punkt 1.

Da es für mich nicht so aussieht, als verstündest du was du da tust empfehle ich dir zunächst
mal das Studium von Little Boxes, um die Grundlagen zu erlernen.

pkipper · #7 (**permalink**) 21.03.2011, 18:22

@ hubspe

Zitat:

Zitat von hubspe

äh....das hatte ich eigentlich auch schon gepostet, warum hast du mich wiederholt??

Post hubspe

Zitat:

Heute 08:04

Post pkipper

Zitat:

Heute 08:18

Das erstellen eines Threads kann schon mal ein paar Minuten dauern... Hat sich gekreuzt und ich habs nich gesehn

(sorry für Offtopic & Crossposting

)

Liebe Grüsse,

Phil

hubspe · #8 (**permalink**) 21.03.2011, 19:09

Zitat:

Zitat von pkipper

Das erstellen eines Threads kann schon mal ein paar Minuten dauern... Hat sich gekreuzt und ich habs nich gesehn

(sorry für Offtopic & Crossposting

okay, da haste recht, ist mir auch schon so gegangen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bitte um Hilfe - CSS und Prozentangaben	sprefer	CSS	3	01.03.2011 04:11
Untermenü im IE	nici	CSS	10	22.06.2009 21:19
Probleme mit Layout	kruemelchen26	CSS	0	15.05.2007 22:40
Firefox 2 "zerhackt" Layout	Pino	CSS	3	18.02.2007 12:39
Hintergrundfarbe eines aktivierten Links	fidel	CSS	5	15.06.2006 02:18