CSS Eine Seitenleiste bis zum unteren Seitenrand durchziehen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auge
code
design
ende
ergebnis
farbe
form
hintergrund
http
inhalt
jetzigen zeitpunkt
leiste
nehmen
position
setzen
sinn
sinnvollen beitrag
url
vollkommener nonsens
wertung
-
Hi!
Ich bastele gerade an einem neuen Design und möchte den Aufbau in etwa so gestalten wie bei http://www.elmastudio.de/. Also links eine fixierte Seitenleiste, rechts der Inhalt. Nur soll aber meinem Design die Seitenleiste andersfarbig als der Hintergrund des Inhalts sein. Dabei habe ich leider gesehen, dass die Farbe nicht ganz durchgeogen ist, sondern nur bis zum Ende des Inhalts der Leiste. Ich möchte also, dass die Seitenleiste bis ganz nach unten geht. Ist das realisierbar? Ich habe bereits recherchiert und herausgefunden, dass offenbar die Methode, ein Hintergrundbild zu wiederholen klappt. Das möchte ich aber nur ungern nutzen. Gibt es vlt. etwas wie
(hab ich schon probiert)?? Ansonsten hatte ich die Idee, keine Seitenleiste zu nehmen, sondern die Seitenleiste als Hintergrund nehmen und den Inhalt der Leiste zu fixieren. Der Content scrollt dann. Das wäre jedoch auch nicht optimal, weil es ja auch mal Seiten geben könnte, bei denen der Content weniger hoch ist als das Browserfenster.height: 100%;
Ich hoffe auch eure Hilfe!
MfG. Simon D. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo,
da die Glasgoogle gerade in der Wäsche ist, wäre ein Link oder der Quellcode Deines Versuchs sehr hilfreich. -
Schau dir doch mal die Beiträge hier an
http://www.lima-city.de/thread/css-problem-2-boxen-nebeneinander
Dort wird einmal eine Lösung mit JavaScript und einmal eine mit CSS3 und flex vorgeschlagen.
Beitrag zuletzt geändert: 12.5.2014 17:21:39 von mein-wunschname -
simon-d schrieb:
Dabei habe ich leider gesehen, dass die Farbe nicht ganz durchgeogen ist, sondern nur bis zum Ende des Inhalts der Leiste. Ich möchte also, dass die Seitenleiste bis ganz nach unten geht.
Ich hoffe ich habe das richtig verstanden. Wenn du deine Seitenleiste einfärbst, bleibt dir noch ein weisser Rand unten, auch bei 100%? Wenn ja, liegt das daran, dass der body automatische style Eigentschaften hat.
Mach bei deinem CSS:
body{ padding: 0px; margin: 0px; }
Wenn ich dich falsch verstanden habe, bitte genauer beschreiben. Weil ich denke, dass dich die anderen auch nicht wirklich verstanden haben. -
Also entweder ich versteh das jetzt nicht oder die Lösung ist zu einfach ...
Style:
* {
margin:0px;
padding:0px;
}
div.menue {
position:fixed;
top:0px:
left:0px;
width:[deinebreite]px;
height:100%;
}
div.text {
margin-left:[diebreitevonoben]px;
...
}
Das sollte doch (Tippfehler vernachlässigen) funktionieren ... -
Wenn ich dich richtig verstehe, dann musst du noch html und body auch 100% Höhe setzen, dann sollte auch dein Div etc auch 100% setzbar sein:
body, html, .navbar { height: 100% } .navbar { /* bla css position fixed left + width etc */ }
Nicht getestet, aber sollte laufen.
Edit: yey 2 mal Minus für einen sinnvollen Beitrag
Beitrag zuletzt geändert: 13.5.2014 22:36:19 von copynpaste -
Hi!
Danke an alle Antworter!
Dank Sonok habe ich jetzt endlich die Lösung: Ich habe offenbar falsch gedacht und nie versucht, nicht nur die Schrift, sondern auch den Kasten absolut zu positionieren... Jetzt funktioniert es!
MfG. Simon D. -
copynpaste schrieb:
[...]
Edit: yey 2 mal Minus für einen sinnvollen Beitrag
Jawohl, ein mal von mir.
Würdest Du bitte einmal ...
<!DOCTYPE html> <html> <head> <style> body, html { background-color: #00F; height: 90%; } </style> </head> <body> </body> </html>
.. erstellen und Anhand des Ergebnisses erklären, inwiefern Dein Beitrag in irgendeiner Form irgendeinen Sinn ergeben soll? Wenn meine Einschätzung Deines Beitrages sich als verfrüht weil falsch herausstellen sollte, dann nehme ich die Wertung selbstverständlich zurück und entschuldige mich, aber zum jetzigen Zeitpunkt ist er für mich einfach eine Negativwertung Wert, da er in meinen Augen vollkommener Nonsens ist. -
sonok schrieb:
Würdest Du bitte einmal [...] erstellen und Anhand des Ergebnisses erklären, inwiefern Dein Beitrag in irgendeiner Form irgendeinen Sinn ergeben soll? Wenn meine Einschätzung Deines Beitrages sich als verfrüht weil falsch herausstellen sollte, dann nehme ich die Wertung selbstverständlich zurück und entschuldige mich, aber zum jetzigen Zeitpunkt ist er für mich einfach eine Negativwertung Wert, da er in meinen Augen vollkommener Nonsens ist.
Die Frage des TE war hier auch nicht ganz klar. Ich hab die Fraeg so verstanden, dass der TE eine Möglichkeit sucht die linke Seitenleiste auf 100% Höhe zu setzen um die einfärben zu können. Genau das wäre mit meinem CSS möglich gewesen:
<!DOCTYPE html> <html> <head> <style> body { margin: 0 } body, html, .navbar { height: 100% } .navbar { width: 100px; background-color: #00F } </style> </head> <body> <div class="navbar"></div> </body> </html> -
Du sollst mir bitte erklären, welchen Effekt die Wertzuweisung von 100% höhe bei body oder html haben soll. Klarer kann ich das nicht fragen.
-
Nimm doch bitte mal mein HTML von oben und sieh es dir an, du wirst sehen links ist eine blaue Leiste, die 100% der Browserhöhe hoch ist.
Dann entfernst die für body und html die 100% Höhe, siehst dir das Ergebnis an und was kommt raus: keine Seitenleiste mehr. -
Ah, okay, jetzt seh ich was Du meintest.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
