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