CSS Layout mal wieder

[Forumsgast]

CSS:

<style type='text/css'><!--

body { background-color: #000000; color: #ffffff; font-family: comic sans MS; font-size: 8pt; }

.main { background-color: #c4c4c4; width: 950px; margin: auto; margin-top: 30px;  }
.head { background-color: #ff0000; width: 950px; height: 100px; margin: auto; }
.menu { background-color: #00ff00; width: 120px; float: left; margin-top: 5px; }
.content { background-color: #0000ff; width: 825px; margin-left: 5px; margin-top: 5px; float: right; }
.foot { background-color: #ff1100; width: 950px; height: 25px; margin-top: 5px; }

 --></style>

HTML:

<div class='main'>
<div class='head'>head</div>
<div class='menu'>menu</div>
<div class='content'>content</div>
<div class='foot'>foot</div>
</div>

Wie bekomme ich es nun hin das 'foot' die 5px top zu 'content' macht? Derzeit sind die 5px zu 'head' =(

hallo,

genau wiess ich es nicht, was Du meinst, aber teste mal margin-top:15px;

bei foot ! d.h. mit jedme DIV-Conatainer muss margin-top grösser werden

[Forumsgast]

oO Hättest du den Code gelesen würdest du sehen das es so bereits ist aber es eben an 'head' anliegt und nicht an 'content' . So sollte es aber sein damit egal wie lang der 'content' wird 'foot' immer 5px abstand davon hat.

oO Hättest du den Code gelesen würdest du sehen das es so bereits ist aber es eben an 'head' anliegt und nicht an 'content' . So sollte es aber sein damit egal wie lang der 'content' wird 'foot' immer 5px abstand davon hat.

wenn alle DIVs margin-top:5px haben dann ändert sich rein gar nichts im Abstand der DIVs zueinander...

[Forumsgast]

ok ich habs hinbekommen mit clear: both;


Nun das nächste Problem. Wie kann ich 'menu' sagen das es genauso lang wie 'content' werden soll und umgedreht?

Du hast ja main als Hauptcontainer, was bedeutet lang die Höhe oder die Breite ? tippe mal auf Höhe :
mit height:auto oder height:100% (minus footer und header also so ca. 80% könnte es hinkommen)

[Forumsgast]

also es geht mit beidem nicht es bewegt sich keinen millimeter. Und ja ich meine mit lang die höhe. Und wenn ich % mach und der content wird länger brauch ich nicht den footer ab ziehen weil der dann wieder ne andere prozentzahl hat. Demnach ist es meiner Meinung nach auch mit % unmachbar.

hallo,
dann versuchs mal auf meine Art :

<style type='text/css'><!--

body { background-color: #000000; color: #ffffff; font-family: comic sans MS; font-size: 8pt; }

.main { background-color: #c4c4c4; width: 950px; margin: auto; margin-top: 30px;height:100%;  }
.head { background-color: #ff0000; width: 950px; height:10%;margin-bottom:5px; }
.menu { background-color: #00ff00; width: 120px; height:80%;float: left;  }
.content { background-color: #0000ff; width: 825px;height:80%; margin-left: 5px;  float: right; }
.foot { background-color: #ff1100; width: 950px; height: 10%; margin-top: 5px; }

 --></style>

[Forumsgast]

Sorry aber da geht garnix mehr das komplette Layout ist verhunzt mit dem Code.

dann versuchs mal damit;

<style type='text/css'><!--

body { background-color: #000000; color: #ffffff; font-family: comic sans MS; font-size: 8pt; }

.main {position:absolute; background-color: #c4c4c4; left:50%; width: 950px;margin-left:-475px;  margin-top: 30px;height:100%;  }
.head { background-color: #ff0000; width: 950px; height:10%;margin-bottom:5px; }
.menu { background-color: #00ff00; width: 120px; height:80%;float: left;  }
.content { background-color: #0000ff; width: 825px;height:80%; margin-left: 5px;  float: right; }
.foot { background-color: #ff1100; width: 950px; height: 10%; margin-top: 5px; }

 --></style>

oder mach ne Skizze, so soll mein layout aussehen...

[Forumsgast]

http://zero-online.net/

Das ist soweit fertig nur das eben menu immer gleich hoch wie content sein soll.

Hallo,

aha, da muss man die Sache anders angehen:
menu nicht Bestandteil von main, sondern Bestandteil von content, dann menu height:100% oder auto (dann von content) und float:left vom Text, so ungefähr umbauen.
und content wird dann so breit wie main.
mal auf die schnelle:

<div id=main>
<div id=header"></div>
<div id="content"><div id="menu" stzle="height:100%;float:left;width:125px;">menu</div><p id="text" style="float:right;" >content</p></div>
<div id="footer">
</div>

P id=text kann dann auch mit border geschmückt werden, interessantes design der freak side of life
kann man aber als einfache Layout-Tabelle gestalten...

[Forumsgast]

So habs nun so eingebaut wie du es geschrieben hast. Ist hochgeladen schaus dir an.

Zum Thema tabelle: ich versuche grade zu lernen wie man eben ohne <table> alles sauber hinbekommt. =) Mit table hab ich das in einigen minuten erledigt =)

Hallo,
dann probiers erstmal mit fixem Layout also mit position:absolute, klar, geht bei float:left;height:100% ja nicht, Lösung Top-Menue, also das Menue als Zeile zwschen
header und content.
Ein fixes Layout kann man später mit %-Angaben dynamisch machen.
display:block display:inline etc. kann man auch verwenden, führt aber manchmal zu kuriosen Ergebnissen beim Layout genau wie float.

bei Deiner Seite ist im firefox die Höhe des Menues bei 400px genau wie angegeben,
im IE sieht man nur den Balken. d.h. beim firefox wird 100% mit float funktionieren beim IE nicht.

hier gibt es gut Tipps dazu:
http://www.stichpunkt.de/index.html

die Profisites mit ihren CSS-Hacks verwirren da eher nur...
da kann man dann nachsehen, wenn das fixe Layout sitzt.