Div an Fensterbreite anpassen

aliasltb · 10.02.2011

Hey, ich habe ein Problem.
Und zwar habe ich ein Div namens "outerdiv", dass für eine Hintergrundgrafik sorgt. Unterhalb dieses Divs platziere ich einen "wrapper" in dem die gesamten Seiteninhalte vorhanden sind (ich möchte also eine normal zentrierte Seite haben und mit Hilfe des "outerdiv"s wird ein Balken im Hintergrund über die gesamte Fensterbreite gezogen - habe es also auf 100% Breite gesetzt).

Das funktioniert auch alles echt super, nur ein Problem besteht dabei:
Wenn ich das Fenster in der Breite verkleinere nimmt das outerdiv ja automatisch wieder die Breite des Fensters an. Wenn aber der Wrapper Breiter als das Fenster ist dann muss ich dafür nach rechts scrollen um den restlichen Bereich des Wrappers zu sehen. Aber dann ist das outerdiv nur noch so Breit wie das Fenster und wird rechts abgeschnitten.

Mit Javascript habe ich es gelöst, dass das outerdiv die Breite des Wrappers annimmt, wenn der Wrapper breiter als das Fenster ist. Sieht auch gut aus, aber das funktioniert nur, wenn das Fenster dann neu geladen wird.

Ich suche also nach einer Möglichkeit, dass sich, sobald das Fenster in der Breite kleiner wird als der Wrapper, automatisch -in echtzeit und ohne neues Laden der Seite- das outerdiv dem Wrapper anpasst und umgekehrt, wenn das Fenster in der Breiter größer wird als der Wrapper, sich die Breite des outerdivs wieder an die Breite des Fensters anpasst.

Kennt da jemand eine Möglichkeit??

Hier ist der Quellcode

HTML:

[LEFT]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beispiel</title>

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
var windowWidth = $(window).width();
var wrapperWidth = $("#wrapper").width();

if(windowWidth<wrapperWidth){
$("#outerdiv").css('width', wrapperWidth);;
}
});


　
　
</script>

<style type="text/css">

* {
margin:0px;
padding:0px;
}

body {
background:url("raute.jpg") repeat;
}

#outerdiv {
position:absolute;
height:488px;
width:100%;
background:url("bgstripe.png") repeat-x;
}

#wrapper {
position:relative;
width:960px;
margin:0 auto;
}

#head {
height:220px;
}

#menu {
position:absolute;
top:172px;
height:50px;
width:100%;
border:none;
float:left;
}

#menu a {
float:left;
padding:15px 10px;
text-decoration:none;
color:white;
}

#menu a:hover {
background:red;
color:#333;
}

#content {
width:100%;
float:left;
margin-top:20px;
background:white;
height:300px;
}

</style>

</head>

<body>
<div id="outerdiv"></div>

<div id="wrapper">
<div id="head">
<div id="menu">
<a href="">Startseite</a>
<a href="">Seite 1</a>
<a href="">Seite 2</a>
</div>
</div>
<div id="content">
Content
</div>
</div>
</body>
</html>[/LEFT]

Herr_D · 10.02.2011

Mal grundlegend: Warum positionierst du alles absolut?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beispiel</title>



<style type="text/css">

* {
margin:0px;
padding:0px;
}

body {
background:url("raute.jpg") repeat;
text-align:center;
width:100%;
}

#outerdiv {
width:100%;
background:url("grafixx/bg_content2.gif") repeat-x; /* bgstripe.png */
text-align:center /* alte Browser */
}

#wrapper {
text-align:left; /* alte Browser auflösen */
width:960px;
margin:0 auto;
}

#head {
height:220px;
}

#menu {
height:50px;
width:100%;
border:none;
background:#dedede;
}

#menu a {
padding:15px 10px;
text-decoration:none;
color:#555;
}

#menu a:hover {
background:red;
color:#333;
}

#content {
margin-top:20px;
background:white;
height:300px;
}

</style>

</head>

<body>
<div id="outerdiv">

<div id="wrapper">
<div id="head">
<div id="menu">
<a href="">Startseite</a>
<a href="">Seite 1</a>
<a href="">Seite 2</a>
</div>
</div>
<div id="content">
Content
</div>
</div>

</div>
</body>
</html>

Menue anpassen und farben, ich musst was sehen

Wobei das irgendwann in 'ne divSalat abdriftet... overdiv ist unnötig, wenn der wrapper 100% hat und die einzelnen Bereiche (head usw. breiten haben)

Du hast auch viele unnötige Tags im CSS weite 100% + float:left? Das fällt mir dann auf den Schreibtisch

aliasltb · 10.02.2011

AW: Div an Fensterbreite anpassen

Die Anker habe ich absolut positioniert, da sie nicht auf die Schnelle untem im head bleiben wollten.

Und das outerdiv muss ich ja wohl absolut positionieren oder nicht? Sonst wird der Wrapper die Höhe in Pixeln des outerdivs daruntergesetzt, und das will ich ja nicht.

EDIT:

Achja ich habe vergessen zu erwähnen, dass der body eine Hintergrundgrafik hat, die gekachelt wird. Und deswgen brauche ich das "outerdiv", damit der horizontale Balken zu sehen ist, denn der wird nach unten hin transparent, sodass dann das gekachelte des bodys hindurchscheinen soll.

EDIT 2:
Das float:left war mit dem width:100% auch unnötig. Hatte ich wohl vergessen rauszunehmen.

Herr_D · 10.02.2011

aliasltb schrieb:
Die Anker habe ich absolut positioniert, da sie nicht auf die Schnelle untem im head bleiben wollten.

Das macht html eigentlich automatisch...

Und das outerdiv muss ich ja wohl absolut positionieren oder nicht? Sonst wird der Wrapper die Höhe in Pixeln des outerdivs daruntergesetzt, und das will ich ja nicht.

outerdiv wird um alles "rumgelegt" (siehe meinen Code)

Achja ich habe vergessen zu erwähnen, dass der body eine Hintergrundgrafik hat, die gekachelt wird. Und deswgen brauche ich das "outerdiv", damit der horizontale Balken zu sehen ist, denn der wird nach unten hin transparent, sodass dann das gekachelte des bodys hindurchscheinen soll.

Ja das geht aber auch am wrapper (spart ein div)

Sorry für die Farben und so

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beispiel</title>



<style type="text/css">

* {
margin:0px;
padding:0px;
}

body {
background:url("grafixx/bgflash.gif") repeat;
text-align:center;
width:100%;
}

#outerdiv {
width:100%;
background:url("grafixx/bg_content2.gif") repeat-x; /* bgstripe.png */
text-align:center /* alte Browser */
}

#wrapper {
text-align:left; /* alte Browser auflösen */
width:960px;
margin:0 auto;
}

#head {
height:220px;
background:#C0FF00;
}

#menu {
margin-top:170px;
height:50px;
border:none;
background:#dedede;
}

#menu a {
padding:15px 10px;
text-decoration:none;
color:#555;
}

#menu a:hover {
background:red;
color:#333;
}

#content {
/* margin-top:20px; */
background:white;
height:300px;
}

</style>

</head>

<body>
<div id="outerdiv">

        <div id="wrapper">
                <div id="head">
                        <div id="menu">
                        <a href="">Startseite</a> | <a href="">Seite 1</a> | <a href="">Seite 2</a>
                        </div>
                </div>
                <div id="content">Content</div>
        </div>

</div>
</body>
</html>

aliasltb · 10.02.2011

AW: Div an Fensterbreite anpassen

Also ich habe jetzt mal deinen Code so übernommen. Und bei dir verschiebt sich die komplette Seite nach unten, wegen dem margin-top aus menu. Und das was ich eigentlich möchte, nämlich dass die Breite des outerdivs sich anpasst, funktioniert auch nicht.

Herr_D · 10.02.2011

Oh Sorry... nicht im richtigen Browser angeschaut...

Allerdings das outerdiv pass bei mir... ist immer 100% wenns zu klein wird, sieht man das doch eh nicht?

Ist dein Entwurf irgendwo online?

Ohne Bilder zu arbeiten ist müßig...

Code:

#head {
position:relative;
height:220px;
background:#C0FF00;
}

#menu {
position:absolute;
width:100%;
bottom:0;
height:50px;
border:none;
background:#dedede;
}

Könnte funzen

aliasltb · 10.02.2011

AW: Div an Fensterbreite anpassen

Okay danke damit ist das Menü wieder oben.

Habe hier die beiden Bilder:

Herr_D · 10.02.2011

AW: Div an Fensterbreite anpassen

Oke... ich versuche heute abend mal was...

Br0 · 10.02.2011

AW: Div an Fensterbreite anpassen

Hallo aliasltb,

Hier mal eine saubere & Valide Lösung für dich:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beispiel</title>



<style type="text/css">

* {
margin:0px;
padding:0px;
}

body {
background:url("raute.jpg");
}

#outerdiv {
background:url("bgstripe.png") repeat-x;
min-width: 960px;
}

#wrapper {
width:960px;
margin:0 auto;
}

#head {
height:170px;
}

ul#menu {
height:50px;
list-style: none;
}


ul#menu li {
height: 20px;
float:left;
padding: 15px 10px;
}

ul#menu li a {
text-decoration:none;
color:white;
}


ul#menu li:hover {
background:red;
color:#333;
}

#content {
margin-top:20px;
padding: 10px;
background:white;
min-height:300px;
}


</style>

</head>

<body>
<div id="outerdiv">

	<div id="wrapper">
		<div id="head"></div>
		<ul id="menu">
			<li><a href="">Startseite</a></li>
			<li><a href="">Seite 1</a></li>
			<li><a href="">Seite 2</a></li>
		</ul>
		
		<div id="content">
			Content
		</div>
	</div>
	
</div>
</body>
</html>

Der für dich hauptsächlich wichtige punkt ist:

HTML:

#outerdiv {
background:url("bgstripe.png") repeat-x;
min-width: 960px;
}

damit wird dein outerdiv niemals kleiner als 960px und somit kann es auch nicht abgeschnitten werden wenn das Fenster mal kleiner ist als 960px.

mfg

aliasltb · 10.02.2011

AW: Div an Fensterbreite anpassen

Danke dir bzw.euch beiden!
Genau das war die Lösung meines Problems. =)

Der Thread kann also geschlossen werden.

Herr_D · 10.02.2011

AW: Div an Fensterbreite anpassen

Br0 hats... und ich hab an dem Beispiel mal wieder merkwürdige Zusammenhänge bzw. Unterschiede meines Denkes und des Wirkens von css feststellen müssen... Firefox sucks

maxxscho · 12.02.2011

AW: Div an Fensterbreite anpassen

Ich hab jetzt den Code nur mal schnell überflogen und auch nichts ausprobiert, aber du könntest dir #outerdiv komplett sparen - du kannst nämlich auch dem html Tag ein Hintergrundbild zuweisen.

HTML:

html {
background:url("raute.jpg");
}

body {
background:url("bgstripe.png") repeat-x;
}

So würdest du dir ein div ersparen. Wie gesagt, ich bin den Thread und Code darin relativ schnell überflogen, daher keine Garantie für irgendwas ;-)