✔ mehre divs neben und untereinander verschachtelt

[sailor1]

Hallo und moin moin,

nach tagelangem suchen muß ich einfach fragen, ich habe offensichtlich einen "Blackout"

Ich möchte eine Site bauen mit einem 2-zeiligen Layout + Fuss- und Kopftext, und es soll 80% des Bildschirms ausmachen.
Unter dem Kopf soll die Navi links (fix 130px breit) und der Maincontent rechts ( der Rest) sein. Dann der Footer.

Soweit ist das klar und klappt auch, aber jetzt kommt's:

Im Maincontent soll erst mal eine Überschrift kommen und dann zwei weiter Container, einer links fix (Bild oder Slideshow) und einer rechts mit dem Rest )Text dazu), darunter eine horizontale Linie und wieder zwei Container, diesmal der rechte fix und der linke mit dem Rest.

Und jetzt setzt es aus, es klappt einfach nicht und ich kappiere nicht was ich falsch mache. Bitte schaut mal und öffnet mir die Augen.

Ich muß noch etwas gestehen, ich arbeite mit Dreamweaver und bin schon etwas älter

Das ist mein Code:

<style type="text/css">
<!--
#rahmen {
position:relative;
width:80%;
height:500px;
z-index:1;
}
#header {

background-color: #CCCCCC;
}
#navi {
width:130px;
background-color: #FFCC00;
float: left;
}
#maincontent {
float: right;
background-color: #FFCC00;
height: 200px;
margin: 0 20px 0 5px;
}
#manicontent content1 {
height: 250px;
width: 200px;
background-color: #33CCFF;
float: left;
}
#manicontent #content2 {
height: 250px;
width: 200px;
background-color: #33CCFF;
float: left;
}
#footer {
clear: both;
background-color:#999999;
}
-->

</style>

danke schon mal und..

 

[Maik]

Hi,

im ersten Selektor fehlt das Gatterzeichen zum ID-Name content1, und die Parent-Box heißt doch #maincontent und nicht "manicontent":

#manicontent #content1 {
height: 250px;
width: 200px;
background-color: #33CCFF;
float: left;
}
#manicontent #content2 {
height: 250px;
width: 200px;
background-color: #33CCFF;
float: left;
}

mfg Maik

 

[Maik]

Achja, ich hab da noch einen weiteren Fehler entdeckt: die Höhenangaben für #content1 und #content2 korrespondieren nicht mit der Höhe ihres Elternelements #maincontent, denn sie sind 50px höher, und überlappen demnach die umschliessende Box an ihrem unteren Elementrand ;-)

mfg Maik

 

[sailor1]

Hi Maik,

danke für die schnelle Reaktion. Genau das ist immer wieder das Problem des Einzelkämpfers. Man liest und liest und sieht das Naheliegende nicht. Sorry für diese blöde Frage, das hätte ich selbst merken müssen.

Das mit den Höhen habe ich dann nach der Korrektur der Fehler auch gemerkt und gleich berichtigt.

Aber noch etwas, wie bekomme ich das hin, dass der maincontent und auch der content2 das zur Verfügung stehende Fenster auch ganz ausfüllt ohne eine feste Bereitenangabe?

Und wie mache ich darunter weiter?

etwa so:

#mainContent #hr {
clear: both;
width: 100%;
}

#maincontent #content3 {
height: 250px;
width: 200px;
background-color: #33CCFF;
float: right;
}
#maincontent #content2 {
height: 250px;
width: 200px;
background-color: #33CCFF;
float: right;
}

?

danke und....

 

[Maik]

Schau dir das mal mit diesen Regeländerungen an:

#maincontent {
/*float: right;*/ /* auskommentiert = deaktiviert */
background-color: #FFCC00;
height: 200px;
margin: 0 20px 0 135px;
}

#maincontent #content2 {
height: 250px;
/*width: 200px;*/ /* auskommentiert = deaktiviert */
background-color: #33CCFF;
margin-left:200px;
}

mfg Maik

 

[sailor1]

Hi Maik,

danke, das wars, habe alles hinbekommen und werde das jetzt auf der richtigen Seite entsprechend einbauen.

Das war superschnelle Hilfe, Respekt und danke!