Frage stellen

100% bei CSS funktioniert nicht

1.6k Aufrufe
Gefragt in Webseiten HTML von
Hallo!

Ich habe eine Internetseite gemacht und die Gestaltung mit CSS realisiert. Allerdings habe ich mir viele Tutoriale zur Hilfe genommen und beherrsche CSS nicht blind.

Jetzt habe ich ein Design, das 2 Spalten hat. Links ist das Menü mit 150 Pixeln und rechts der Inhalt.


clear:left;
float:left;
width:150px;
margin:0 0 0px 0;
padding:0;background:#f4f4f4;
}


Das Menü passt sich in der Höhe automatisch an. Wenn ich Menüpunkte hinzufüge, wird der grau hinterlegte Bereich länger und wenn ich welche wegnehme wird der grau hinterlegte Bereich kürzer. Jetzt will ich die linke Menü-Spalte aber generell von oben bis unten in dieser Hintergrundfarbe hinterlegt haben und nicht nur da, wo ich Menüpunkte habe.

Folgender Code funktioniert, aber nur mit absoluten Angaben:


clear:left;
float:left;
width:150px;
height:800px;
margin:0 0 0px 0;
padding:0;background:#f4f4f4;
}

Ersetze ich height:800px; durch height:100%; geht es nichtmehr....das Problem ist, dass die Höhe des Designs von dem Inhalt der rechten Spalte abhängig ist und sich der Menüstreifen automatisch anpassen soll.

Weiß jemand Rat?

6 Antworten

0 Punkte
Beantwortet von
height:100% bedeutet: so hoch wie das umgebende Element. Vermutlich ist das bei dir <body>
Also gib auch dem <body> die Höhe 100%
Aber dieser ist umgeben von <html>.
Also gib auch dem <html> die Höhe 100%

Nun beziehen sich die 100% auf die Höhe der Browseranzeigefläche. Prüfe, ob das das ist, was du willst.



Falls nicht:
Workaround:
Menü direkt als Kindelement des body und daneben gefloated ebenfalls als Kindelement des body dein Content-DIV.
Wenn du dem body die graue HG-Farbe gibst und der navi die HG-Farbe transparent hast du nun deinen grauen navi-Streifen und daneben deinen wie auch immer gefärbten Content.
0 Punkte
Beantwortet von
Hi, da brauchst du nur die gleiche Hintergundfarbe nochmal als bgcolor für die gesamte Spalte anzugeben.
0 Punkte
Beantwortet von
Danke für die hilfe.

Hier eine Skizze:
http://img243.imageshack.us/img243/7258/designe.jpg

Das sind die wichtigen CSS-Stellen:


body {
margin:20px;
padding:0;
font:76% Verdana,Tahoma,Arial,sans-serif;
background:#eaeaea top center repeat-y;
color:#3a3a3a;
}
#rahmen {
background-color:#ffffff;
color:#303030;
margin:0 auto;
padding:0px 0px;
width:760px;
}

#menu {
clear:left;
float:left;
width:150px;
margin:0 0 0px 0;
padding:0;background:#f4f4f4;
}


Die Verschachtelung sieht so aus:


<div id="rahmen">
<div id="menu">
....
</div>
<div id="content">
...
</div>
</div>


Wenn ich Dich richtig verstanden habe, beziehen sich die 100% auf den sichtbaren Bereich. Hm...also dann ist das nicht das, was ich möchte. Es soll die Länge haben, die nötig ist, um das Logo mit dem Footer durchgängig zu verbinden. Damals als ich mit Frames gespielt hatte, konnte man mit dem Sternchen * den restlichen Bereich ausfüllen, der noch frei ist - ohne Prozent oder absolute Angaben. Aber das war html und nicht css....

Was müsste ich konkret in meinem CSS-Code ändern, kannst Du mir da etwas helfen?
0 Punkte
Beantwortet von
Das Feld indem sich das Menü befindet musst du nur noch mit background:#f4f4f4; ergänzen, um die gleiche Farbe wie das Menü zu erhalten.
Bei der Anpassung der Höhe musst du die Höhe der längsten Seite angeben. Diese wird durch die Länge des Menüs oder des Inhaltes bestimmt. Anders ist es mit deinem Seitenaufbau nicht zu lösen.
0 Punkte
Beantwortet von
Was müsste ich konkret in meinem CSS-Code ändern
Erst einmal solltest du CSS lernen! Denn da steht einiger Quatsch drin:
background:#eaeaea top center repeat-y; = Kein Bild sondern nur HG-Farbe, aber die zentriert oben.
font:76%: 76% von den User-Voreinstellungen demnach, oder wovon? Die meisten User bevorzugen aber 100% ihrer voreingestellten Font-size, sonst hätten sie die nicht so eingestellt!
#rahmen = überflüssig, mach das im body. DIVs immer vermeiden!
margin:0 0 0px 0; = margin:0;

beziehen sich die 100% auf den sichtbaren Bereich
nein, sondern auf die Maße des Elternelements. Lies nochmals Antwort 1! Dort gab es auch schon eine konkrete Handlungsanweisung für dein Problem, vollziehe es nach und frage konkret dazu. Dein CSS passt jedenfalls überhaupt nicht zu meinen Vorschlägen!
0 Punkte
Beantwortet von
Hier http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm findest du ein Layout, wie du es dir vorstellst.
...