Dynamisch größer werdene Banner?

XXO1989

Lieutenant
Registriert
Mai 2008
Beiträge
667
Hi Computerbasler,

ich baue eine Webseite und hab rechts und links gewollte Banner, nun hab folgendes Problem, da die Webseite relative kurz ist, (wird später auf Joomla konvertiert, mit dynamischer länge) würde sie auf Großen Bildschirmen nur am oberen randhängen. Wenn ich nun aber die Banner Länge auf 100% setze und dann auf einem kleinen Bildschirm die Seite angucke, gehen die Banner nur bis zum unteren Bildschirmrand.

Nun zu meiner Frage, wie kann ich die Banner Rechts und Links formatieren, das sie Automatisch mit der Webseite größer werden?

XXO1989
Ergänzung ()

Nochmal zur besseren Erläuterung.

Warum wird die Background Grafik nach unten nicht weiter wiederholt ?

9zzxhfcx.png



<!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" />
<html>
<title>Meine Testseite!</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #FFFFFF;
}
</style>
</head>
<body>

<div id="page_div">

<div id="head_div">
<div id="usersearch">Suchen</div>
</div>

<div id="main_left"></div>
<div id="main_content"></div>
<div id="main_right"></div>
<div id="footer"></div>

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




#page_div{
width:850px;
height: 100%;
margin-top: -8px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
background-image:url('../images/bg_up.png');
background-position:center top;
padding-left:50px;
padding-right:50px;
background-repeat: repeat-y;
}


#head_div{height: 215px; width: 100%; background-color: #FFFFFF;}
#main{width: 100%}


/*#main_left{float: left; width:209px; height: 450px;}
#main_content{float: left; width:622px; height: 448px; border: 1px solid #C6CFCF;}
#main_right{float: left; width:22px; height: 450px;}
#footer{float: left; width:855px; height: 38px;}
#usersearch{style:position:absolute; width:200px; height:100px;
background-color: #0099CC; border: 1px solid #000000; left: 500px; top:
100px;}
*/



MfG
XXO1989
 
Probiers mal 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>Meine Testseite!</title>
</head>

<style>
body {
        background-color: #FFFFFF;
}

#page_div{
	position:absolute;
	height: 100%;	
	background-image:url('background.png');
	background-position:center top;	
	background-repeat: repeat-y;
}

#container{
	width:850px;
	margin-top: -8px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	padding-left:50px;
	padding-right:50px;
}

</style>

<body>
	<div id="container">
		<div id="page_div">

			<div id="head_div">
				<div id="usersearch">Suchen</div>
			</div>

			<div id="main_left"></div>
			<div id="main_content"></div>
			<div id="main_right"></div>
			<div id="footer"></div>

		</div>
	</div>
</body>
</html>
 
Zurück
Oben