✔ Layout

[dadom110]

Hallo...

seid langem hab ich mich mal wieder an eine HTML Seite mit CSS gewagt und mir wird gerade wieder bewusst warum ich mir schon beim letzten mal die Haare gerauft habe... bekomme es einfach mit meinen Containern nicht hin

siehe Anhang wie es aussehene soll.

Den Header und die Seite habe ich schon

#container {
	background-color: green;	
	height: 600px;
	width: 287px;
}


#top {
  width: 460px;
  background-image: url("line.JPG");
  background-repeat: repeat-x;
  height: 75px;
  float:left;
}

aber ichbekomm es einfach nicht hin das ganze zwei weitere Container UNTER den Header und NEBEN die rechts Seite zu bekommen

Hoffe jemand weiss einfachen Rat

Viele Grüße
D

 

[Maik]

Hi,

dann versuch es mal mit der float-Eigenschaft, um ein dreispaltiges Layout zu erzeugen.

Linke Spalte = float:left
Rechte Spalte = float:right
Mittlere Spalte = margin-left /-right (entsprechend der äußeren Spaltenbreiten)

Und die drei Spalten auch in dieser Reihenfolge im HTML-Code notieren.

 

[dadom110]

mhh entweder hast du nicht genau verstanden was ich machen will oder ich kann es nicht umsetzen Ich will ja kein "klassisches" 3 Spalten Layout | | | so was will ich ja gar nicht... ich habe ja eine Verschachtelung in den DIVs die ich einfach nicht auf die Reihe bekomme...oder muss ich da mit "Parent"-DIVs arbeiten? (bitte noch mal das Bild ansehen wie es aussehen soll )

Grüße
D

 

[Maik]

Dann werden wir eben etwas konkreter bzw. detailierter:

<div id="wrapper">
     <div id="leftCol">
          <div id="top">top</div>
          <div id="left">left</div>
          <div id="content">content</div>
     </div>
     <div id="container">container</div>
</div>

#wrapper {
width:747px;
}

#leftCol {
float:left;
width:460px;
}

#top {
background:red;
height:75px;
}

#left {
float:left;
width:100px;
height:525px;
background:blue;
margin-right:0 !important;
margin-right:-3px;
}

#content {
margin-left:100px !important;
margin-left:97px;
height:525px;
background:yellow;
}

#container {
float:right;
height:600px;
width:287px;
background:green;
}

 

[dadom110]

das sieht wunderbar aus....so einfach... dank dir für deine Mühe