CSS Problem mit automatischer Höhe
- Ersteller Awek
- Erstellt am
Hallo alle zusammen,
seit einigen Monaten habe ich angefangen mit CSS meine Seiten zu designen. Das hat bis jetzt auch sehr gut funktioniert, nur jetzt komme ich einfach nicht mehr weiter. Habe schon viel versucht, aber es klappt nicht wie gewollt.
Wie meine Webseite aussehen soll, seht ihr auf dem Bild im Anhang.
Der rote Rand soll mit dem Inhalt die Höhe verändern, hat aber selbst keinen Inhalt nur ein Hintergrundbild. Mein CSS Eintrag dazu:
Meiner Meinung nach müsste es so funktionieren.
Habe auch viel anderes probiert. Höhe 100% usw. aber entweder ist der Rand viel zu lang und schiebt alles was unter dem Inhalt kommt nach unten oder er ist viel zu kurz...
Ich hoffe mir kann jemand helfen, ansonsten wende ich mich an ein CSS-Forum.
Grüße, Awek
seit einigen Monaten habe ich angefangen mit CSS meine Seiten zu designen. Das hat bis jetzt auch sehr gut funktioniert, nur jetzt komme ich einfach nicht mehr weiter. Habe schon viel versucht, aber es klappt nicht wie gewollt.
Wie meine Webseite aussehen soll, seht ihr auf dem Bild im Anhang.
Der rote Rand soll mit dem Inhalt die Höhe verändern, hat aber selbst keinen Inhalt nur ein Hintergrundbild. Mein CSS Eintrag dazu:
Code:
#linke_spalte {
position:absolute;
top:170px;
left: 180px;
bottom:50px;
width: 40px;
height:auto;
background-image: url("images/text_bg_left.png");
background-color: white;
}Meiner Meinung nach müsste es so funktionieren.
Habe auch viel anderes probiert. Höhe 100% usw. aber entweder ist der Rand viel zu lang und schiebt alles was unter dem Inhalt kommt nach unten oder er ist viel zu kurz...
Ich hoffe mir kann jemand helfen, ansonsten wende ich mich an ein CSS-Forum.
Grüße, Awek
Ohne weiteres ist das nicht möglich. "height: 100%" geht nur, wenn das Elternelement auch eine fixe Höhe hat (und sei es nur 100%).
Aber weis doch dein Hintergrund der mittleren Spalte zu. Ein inhaltsleeres HTML-Element solltest du so oder so vermeiden wo es geht.
Gruß,
Max
Aber weis doch dein Hintergrund der mittleren Spalte zu. Ein inhaltsleeres HTML-Element solltest du so oder so vermeiden wo es geht.
Gruß,
Max
Das habe ich mir auch schon überlegt, das Problem ist nur das ich in allen Rändern ein anderes Bild habe. Da es oben und unten funktioniert, bräuchte ich aber 2 Hintergrundbilder in dem Inhaltfeld. Eins eben links und das andere rechts. Der Inhalt hat auch keine feste Größe, sondern verändert sich je nach Browserfenster.
Wie könnte ich das umsetzen?
Was vlt. noch wichtig ist, nach oben funktioniert das mit der Größe, sprich wenn ich das Browserfenster kleiner ziehe werden die roten Ränder auch kleiner, aber größer nur bis zu einem bestimmten Punk!?
Gruß,
Awek
Wie könnte ich das umsetzen?
Was vlt. noch wichtig ist, nach oben funktioniert das mit der Größe, sprich wenn ich das Browserfenster kleiner ziehe werden die roten Ränder auch kleiner, aber größer nur bis zu einem bestimmten Punk!?
Gruß,
Awek
Wenn du zwei Elemente verschachtest kannst du ja auch zwei Hintergrundbilder verwenden. Eins für links und eins für rechts.
Gruß,
Max
Code:
<style type="text/css">
#content {
background: url(rechter-rand.png) right repeat-y;
}
#content-inner {
background: url(linker-rand.png) left repeat-y;
}
</style>
<div id="content">
<div id="content-inner">
</div>
</div>Gruß,
Max
Zuletzt bearbeitet:
Danke, habe es so in der Art gemacht. Ich glaube dein 2. definierter contest müsste contest-inner heißen oder?
Habe es jetzt geschafft. Muss jetzt natürlich noch die anderen Abstände ändern, aber danke für den Denkanstoß!
Gruß,
Awek
Habe es jetzt geschafft. Muss jetzt natürlich noch die anderen Abstände ändern, aber danke für den Denkanstoß!
Gruß,
Awek
Zuletzt bearbeitet:
Habe jetzt noch die 3 weiteren Ränder verschachtelt, funktioniert unter FF auch perfekt, natürlich beim IE wieder nicht, aus irgendeinem Grund nimmt er den oberen Rand doppelt. Sonst läuft´s auch da. Und wieso ignoriert IE min-height? 
Den aktuellen Code poste ich nochmal wenn ich´s wirklich nicht schaffe, aber für dem IE immer alles anders machen und oft mit 3 mal so langem Code nervt langsam wirklich.
Update: Bekomme alles so langsam hin. Also nochmal danke, ich denke das war´s hier.
Den aktuellen Code poste ich nochmal wenn ich´s wirklich nicht schaffe, aber für dem IE immer alles anders machen und oft mit 3 mal so langem Code nervt langsam wirklich.
Update: Bekomme alles so langsam hin. Also nochmal danke, ich denke das war´s hier.
Zuletzt bearbeitet:
