Antworten auf deine Fragen:
Neues Thema erstellen

Div an Fensterbreite anpassen

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]
 
Zuletzt bearbeitet:

Herr_D

offline

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 ;)
 
Zuletzt bearbeitet:
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.
 
Zuletzt bearbeitet:

Herr_D

offline

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>
 
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

offline

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 ;)
 

Br0

Helfer

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
 
Zuletzt bearbeitet:
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

offline

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

Code-Fan

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 ;-)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.342
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben