Hintergrund in dreispaltigen Layout

**ansatz** · 12.07.2009 19:55

Hallo und schönen Sonntag noch. Ich dachte ich hätte heute schon mal mein Thema (Frage) gepostet, aber wahrscheinlich nicht da ich es nicht wieder finde. So dann noch mal zu meinem Problem. Also ich habe ein Layout - fixes zentriertes Layout, mit Warpper für alles, Kopfnavi, Header und einem Wrapper für den Inhalt welcher dreispaltig ist. Nun mein Problem, das Hintergrundbild will einfach nicht angezeigt werden nur wenn ich dem wrapper eine Höhe gebe, funzt das, will ich aber nicht da der wrapper sich an den Spalten orientieren soll. Danke für einen Rat oder Hilfe. Beste Grüße Matthias.

hier der Code zu:

HTML-Code:

<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
/* default elements */
*{margin:0;padding:0; border:0px}

body,td,th {
	font-family:  "Helvetica", Arial, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 18px;
	font-style: normal;
	margin: 0px;
	background-color: #1A2946;
}
#wrapper {
	width: 900px;
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}
#headernav {
	background-color: #1A2946;
	height: 30px;
	text-align: right;
	padding-top: 10px;
	padding-right: 10px;
}
#header {
	background-image: url(images/banner.jpg);
	height: 250px;
}
#wrapperContent {
	background-image: url(images/bg.jpg);
}
#content {
	padding-top: 10px;
	padding-bottom: 10px;
	width: 410px;
	margin-right: 250px;
	margin-left: 250px;
	position: absolute;
	left: 0px;
	top: 300px;
}
#side1 {
	width: 220px;
	padding: 10px;
	position: absolute;
	left: 0px;
	top: 300px;
	}
#side2 {
	width: 220px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	position: absolute;
	top: 300px;
	right: 0px;
}
.clear {
	clear: both;
}
/* text elements */
h1 {
	font-size: 18px;
	font-style: normal;
	color: #FFFFFF;
	font-weight: normal;
	margin-bottom: 10px;
}
h2 {
	font-size: 16px;
	font-style: normal;
	color: #FFCD48;
	line-height: 18px;
	margin-bottom: 5px;
	font-weight: normal;
	background-image: url(images/pfeil.gif);
	background-position: 0px 4px;
	padding-left: 20px;
	background-repeat: no-repeat;
}
p {
	margin-bottom: 20px;
}
/* link elements */
a:link , a:visited{
	color: #FFBA03;
	text-decoration: none;
}
a:hover , a:active{
	color: #CC9900;
}
li {
	margin-left: 40px;
}
ul {
	margin-bottom: 10px;
}

-->
</style>
</head>
<body>
<div id="wrapper">
<div id="headernav"></div><!--EndHeaderNav-->
<div id="header"></div><!--EndHeader-->
<div id="wrapperContent">
<div id="side1"></div><!--END side1-->
<div  id="side2"></div><!--END side2-->
<div id="content"></div><!--END content-->  
<div class="clear"></div>
</div><!--END WrapperContent-->
</div><!--END Wrapper-->
</body>
</html>

**sejuma** · 12.07.2009 20:42

Deine drei "Spalten" sind absolut positioniert und befinden sich damit außerhalb des Elementflusses. Sie haben für den wrapper damit keinerlei Bedeutung.

Verzichte auf die absolute Positionierung und verwende float- und margin-angaben, wie z.B. bei diesem Layout.
Vor dem Schließen des #wrappers dann noch clearen.

**ansatz** · 12.07.2009 21:16

Supi und danke, hat alles geklappt in O Komma nix. Danke.
Ich hatte das ja auch schon mal mit der relativen Breite, habe da aber nicht das Boxmodell genügend beachtet, jetzt klappt es und das ist wichtig, besten Dank noch mal.

Gruß Matthias

zur Startseite vom TP

Thema: Hintergrund in dreispaltigen Layout

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Hintergrund in dreispaltigen Layout

Ähnliche Themen

Relativer Hintergrund - Verschiedene Bildelemente im Hintergrund [MYSPACE!]

fester Hintergrund - Hintergrund soll sich beim scrollen nicht bewegen

interaktives tutorial: vom tabellen-layout zum reinen css-layout

trotz transparentem hintergrund zeigt es einen weissen hintergrund an

Aktive Benutzer

Aktive Benutzer