Neuling fragen zu CSS Design

manolo · #1 (**permalink**) 25.02.2009, 19:28

Hallo an alle,

//ursprüngliche Frage erledigt, hab ich selbst hinbekommen

Ok dann zu meiner Frage, ich bin Neuling in Sachen Css, will aber jetzt dazulernen.
Das geht natürlich am besten an einem Beispiel.

Mein Beispiel ist hier zu finden- handykurier.de

Also ich habe einfach ein Grundgerüst genommen und etwa rumprobiert.
Steht natürlich alles noch am Angang, ich teste das im Zusammenhang mit dem CMS ModX.

zu meiner Frage. Jetzt wird die Seitenhöhe ja bestimmt dadurch wieviel Content in der Mitte steht.

Ich möchte es aber so haben das ich die Spalte links wo das Menü ist einfärbe und dann in einer bestimmten höhe ausgebe.
Wenn nicht genügend Content vorhanden ist soll die Menüspalte also eine vorgegebene feste höhe haben,
wenn aber nun mehr Content in der Mitte steht soll die Menüspalte automatisch auf diese länge verlängert werden.

Wenn ich jetzt einfach #left mit eine hight versehe dann hat es ja nur eine feste höhe!?

Könnt Ihr mir folgen was ich meine?

Beste Grüße

manhunter__ · #2 (**permalink**) 25.02.2009, 20:43

dann musst du die eigenschaft min-height verwenden. am besten machst du es so, damit auch alle Browser unterstützt werden

Code:

#linke_spalte {
    min-height: 300px;
    height: auto !important;
    height: 300px;
}

beide pixel werte sollten gleich sein.

Internet Explorer kennt die Eigenschaft min-height nicht, deshalb "überliest" er diese Zeile und schaut sich die anderen 2 zeilen an. dann wird eine höhe von 300 pixel festgelegt, doch da wir noch einen zusatz hingeschrieben haben (!important), wird zuerst diese zeile angesehen.

regloh · #3 (**permalink**) 25.02.2009, 20:53

Eine gute Erklärung gibt es hier: Webstandards-Projekt - Min-Height für den Internet Explorer

manolo · #4 (**permalink**) 26.02.2009, 12:15

Super, ich danke euch beiden, werde mich gleich mal ans testen machen.

@regloh
Danke für den Link, die Seite kannte ich nicht.

manolo · #5 (**permalink**) 10.03.2009, 14:25

So ich bin jetzt etwas weitergekommen.

Nun hab ich folgendes Problem, wenn der Content Bereich den min-height der linken Spalte übersteigt wird die linke Spalte nicht mit verlängert.

Wie kann ich das lösen?

regloh · #6 (**permalink**) 10.03.2009, 14:57

Das funktioniert nur mit einem Trick. Nennt sich Faux-Columns. Siehe http://xhtmlforum.de/40267-faq-h-ufi...-und.html#faq1

manolo · #7 (**permalink**) 11.03.2009, 10:18

Hallo,

eigentlich besteht ja das Problem noch von meinem ersten Posting:

"Ich möchte es aber so haben das ich die Spalte links wo das Menü ist einfärbe und dann in einer bestimmten höhe ausgebe.
Wenn nicht genügend Content vorhanden ist soll die Menüspalte also eine vorgegebene feste höhe haben,
wenn aber nun mehr Content in der Mitte steht soll die Menüspalte automatisch auf diese länge verlängert werden."

Ich habe es so gemacht wie manhunter_ vorgeschlagen hat. Allerdings "wächst" die linke Spalte nicht mit wenn der Content größer ist.

Geht das nun damit oder nur mit "Faux-Columns" - was ich übrigens beim ersten durchlesen nicht richtig verstanden habe

regloh · #8 (**permalink**) 11.03.2009, 10:25

min-height gilt ja nur für den Container, dem du dieses Attribut gibst. D.h. dass nur deine linke Spalte mind. 300px hoch ist, aber höher wird, wenn der Inhalt in #linke_spalte nicht mehr reinpasst. Das hat nichts mit dem Inhalt im Content zu tun.

Mein Vorschlag (aber ohne Bild weiß ich nicht, wie du es genau haben willst):
Verzichte auf min-height in #linke_spalte und arbeite nur mit der Faux-Column-Technik. Wenn du sie nicht verstanden hast, dann lies nochmal. Ist wirklich ein einfacher Trick.

manolo · #9 (**permalink**) 12.03.2009, 11:32

Zitat:

Zitat von regloh

min-height gilt ja nur für den Container, dem du dieses Attribut gibst. D.h. dass nur deine linke Spalte mind. 300px hoch ist, aber höher wird, wenn der Inhalt in #linke_spalte nicht mehr reinpasst. Das hat nichts mit dem Inhalt im Content zu tun.

Mein Vorschlag (aber ohne Bild weiß ich nicht, wie du es genau haben willst):
Verzichte auf min-height in #linke_spalte und arbeite nur mit der Faux-Column-Technik. Wenn du sie nicht verstanden hast, dann lies nochmal. Ist wirklich ein einfacher Trick.

Danke dir, also dann entferne ich jetzt mal das min-heigt und versuche noch mal das Faux Column.

Was meinst du mit "ohne Bild"?
Die Url wo man das Desaster sehen kann steht oben drin

Handykurier.de

manolo · #10 (**permalink**) 12.03.2009, 13:44

So ich bin es nochmal.

Ich habe mich jetzt mal am Faux Columns versucht.

So wie ich es versucht habe muss man eine Pixelgroße Grafik erstellen, ich habe zum testen mal 1px * 5 px gemacht.

Dann muss man folgendes:
background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

in die css mit einfügen. Hab ich alles gemacht. Das Ergebnis ist zum anschauen Online. Funktioniert allerdings nicht.

Meine "Testgrafik" wird jetzt mittig genau so hoch wie der Bildschirm ist angezeigt, die 3 Spalten stört das allerdings nicht.

Ich steh auf dem Schlauch, was fehlt?

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
absoluter css neuling braucht hilfe wegen bullets	ben2308	CSS	10	02.08.2009 12:45
CSS Design soll sich dem Content anpassen	hujuzka	CSS	7	10.06.2009 11:45
Css Neuling Bräuchte Hilfe	wc3_monster	CSS	2	03.12.2008 22:23
CSS Design, Länge an Text anpassen	goldwatch	CSS	11	02.10.2008 20:29
CSS Design Probleme	Hawklan	CSS	5	12.08.2004 11:45