div-tags "fixieren"

hi

ich habe für meine website ein "banner" erstellt und möchte dieses fixieren, dass heißt beim scrollen soll das untere ende des banners die grenze darstellen.

ich nutze das programm dreamweaver. wenn ich über meine CSS die div-tags fixiere, weichen sie aber von ihrer üblichen position ab. kann mir jemand sagen wie ich das manuell in die CSS-Datei eingtragen kann ?

oder soll ich um die ganzen verschachtelten ein weiteren div-tag ziehen und diesen dann "fixieren" ? und wie mache ich das dann ?

vielen dank =))

hier der code in HTML :

Code:

<div id="banner"></div>
<div id="navigation">
		<div id="buttons"><a href="../Home.html">Home
		  </a></div>
   		 <div id="buttons"><a href="../TrainingFitness.html">Training/Fitness</a></div>
   		 <div id="buttons"><a href="../DonationSpenden.html">Donation/Spenden
	    </a></div>
   		 <div id="buttons"><a href="../Kontakt.html">Kontakt</a>
    </div>
</div>

und hier die CSS:

Code:

#banner {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	background-color: #000;
	background-image: url(banner%20entwurf1.jpg);
	height: 132px;
	
}
#navigation {
	background-color: #333;
	width: 800px;
	height: 40px;
	margin-right: auto;
	margin-left: auto;
}

#buttons {
	background-color: #000;
	height: 30px;
	width: 200px;
	margin-right: auto;
	float: left;
	color: #FFF;
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, serif;
	margin-bottom: auto;
	padding-top: 5px;
}
.KirbyFitness {
	font-weight: bold;
	color: #F00;
}

#body {
	background-color: #000;
	height: auto;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
}
#index {
	background-color: #FFF;
	height: auto;
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	border-top-color: #999;
	border-right-color: #999;
	border-bottom-color: #999;
	border-left-color: #999;
	border-top-style: inset;
	border-right-style: inset;
	border-bottom-style: inset;
	border-left-style: inset;
	padding: 8px;
	margin-top: 10px;
}
#fusszeile {
	background-color: #000;
	height: auto;
	width: 725px;
	margin-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 30px;
	color: #FFF;
	font-size: 9px;
}
h2 {
	text-align: center;
}
h3 {
	text-align: center;
}


h1 {
	text-decoration: underline;
	text-align: center;
}

 

Bei der Verwendung von CSS ist hier wohl position:fixed; das, was Du suchst -> Damit bleibt das Element auch beim Scrollen an seiner Position. Diese Position musst du mit Hilfe von top/bottom und left/right festlegen. Außerdem solltest Du mit width und height die Proportionen des Elements festsetzen.

Zum Beispiel (Banner unten links):

Code:

#banner {
	position:fixed;
	bottom: 0;
	left:0;
	width: 800px;
	background-color: #000;
	background-image: url(banner%20entwurf1.jpg);
	height: 132px;
}

Beachte, wenn Du das Element mit fixed positionierst, kannst Du es nicht mittels margin:auto; in die Mitte schieben. Dafür könntest Du dann etwa left: 30%; verwenden oder:

- einen DIV mit #banner-Höhe festlegen, der über die ganze Bildschirmbreite geht und dessen Hintergrund transparent ist
- innerhalb dieses DIVs dann #banner einfügen und mit Hilfe von margin:auto; mittig positionieren