Div ganzseitig links verwenden als Hintergrund

Amr0d

Amr0d

Erfahrenes Mitglied
Ich habe mir etwas zusammen gebaut das zur Zeit so aussieht

Klick

Dummerweise ist das ein wenig geschummelt. Im CSS sieht das ganze nämlich so aus:

Code: 
#navi-bg {
	width: 350px;
	height: 100%;
	z-index: -100;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #e6ffee;
}

Jeder kann sich jetzt denken was passiert wenn ich das Browserfenster größer mache? Richtig! Der komplette grüne <div> bleibt links während Navigation und Text zentriert bleiben, was dann natürlich sehr unvorteilhaft bei größerem Browserfenster aussieht.

Wie kann ich es möglich machen das der <div> den ich verwende immer so 30px vor dem eigentlichen Content aufhört und nach links immer größer wird wenn ich das Fenster größer ziehe.

Vielleicht hat auch jemand von euch einen Anreiz für eine komplett andere Lösung des Problems wie z.b. gleich background-color setzen und nur den <div> mit dem eigentlichen Inhalt weiß färben?
 
Zuletzt bearbeitet:
Irgendwie ist mir noch nicht ganz klar, was du damit bezwecken willst. Aus dem, was du geschrieben hast, würde ich die Navigation in navi-bg Bereich verankern, z.B. mit absoluter Positionierung von rechts. Damit bleibt der schon einmal fest in seinem Bereich. Eine veränderliche Breite machst du mit einem prozentualen Wert und damit er nicht zu schmal wird, hängst du noch eine Mindestbreite mit rein.
Abstände zum jeweiligen Rand kannst du auch entweder mit einer absoluten Positionierung machen oder mit inneren Rändern via padding.
Es ist ja auch nicht zu erkennen, wie du Content und Bild positionierst. Ich würde die aber nicht mit der Navigation in einen Block packen, sondern separat in einen Div rechts von der Navi. Da ist dann auch deren Positionierung über Ränder sehr einfach.

Pseudo-mäßig also so:

<div mit 30% und float left>
Navigation
</div>
<div mit 60%>
Content
</div>
 
Eigentlich möchte ich nur erreichen das die Navi einen grünen Hintergrund hat wie auf dem Bild. Das muss aber nicht zwangsweise mit einem <div> passieren. Irgendwelche Alternativen?
 
Amr0d hat gesagt.:
... Jeder kann sich jetzt denken was passiert wenn ich das Browserfenster größer mache? ...
Zum Vergrößern anklicken....
Nein, natürlich nicht, wenn du dein HTML-Quelltext nicht zeigst.

Sicherlich würdest du dich auch vera..lbert fühlen, wenn du als Antwort auf deine Anfrage ein PNG-Bild mit dem Text "So sieht das bei mir aus" erhalten würdest. Als Zusatz könnte man dann noch ein paar Zeilen CSS geben, die ohne HTML eben völlig zusammenhanglos sind.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück