Dynamisch größer werdene Banner?

XXO1989 · 18. November 2010

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 (19. November 2010)

Nochmal zur besseren Erläuterung.

Warum wird die Background Grafik nach unten nicht weiter wiederholt ?

<!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{styleosition:absolute; width:200px; height:100px;
background-color: #0099CC; border: 1px solid #000000; left: 500px; top:
100px;}
*/

MfG
XXO1989

abcb12 · 21. November 2010

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>

XXO1989 · 29. November 2010

Danke wenn auch etwas spät,

ich hab das ganze jetzt so gelößt.

body{
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
background-image:url('../images/bg_up.png');
background-position:center top;
background-repeat: repeat-y;
}

MfG
XXO1989

Suche

Dynamisch größer werdene Banner?

XXO1989

Lieutenant

abcb12

Lt. Junior Grade

XXO1989

Lieutenant

Ähnliche Themen