✔ Layout einer Webseite ohne Tabellen sondern nur mit CSS

Status
Nicht offen für weitere Antworten.
sunreise

sunreise

Grünschnabel
Ich möchte eine Webseite gestalten, indem ich nur CSS verwende.

Das Grundmodell der Webseite ist folgendermaßen aufgebaut.

Code: 
<!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=ISO-8859-1" />
<title>Layouten ohne Tabellen</title>
<link href="newstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="kopfzeile">Kopfzeile</div>
<div id="roben">Rand oben</div>
<div id="navigation">Navigation</div>
<div id="rlinks">Rand links</div>
<div id="inhalt">Inhalt</div>
<div id="rrechts">Rand rechts</div>
<div id="rechts">sonstiges</div>
<div id="runten">Rand unten</div>
<div id="fusszeile">Fusszeile</div>
</body>
</html>

Das Stylesheet sieht folgendermaßen aus

Code: 
/*<![CDATA[*/
html, body {
	margin: 0;
	padding: 0;
	height : 100%;
}
#kopfzeile {
	padding: 0;
	margin: 0;
	border: 0;
	font-size: small;
	font-weight: bold;
	color: #000000;
	height: 103px;
}
#roben {
	clear: left;
	padding : 0;
	margin : 0;
	border : 0;
	font-size : small;
	color : #000000;
	height : 13px;
}
#navigation {
	float: left;
	padding: 0;
	margin: 0;
	border: 0;
	font-size: small;
	color: #000000;
	width: 178px;
}
#rlinks {
	float: left;
	padding : 0;
	margin: 0;
	font-size : small;
	color : #000000;
	width : 5px;
	background-image : url(bilder/rlinks.jpg);
	background-repeat : repeat-y;
}
#inhalt {
	float: left;
	padding: 0;
	margin: 0;
	border: 0;
	font-size: small;
	width: 628px;
}
#rrechts {
	float: left;
	padding : 0;
	margin : 0;
	border : 0;
	font-size : small;
	width : 5px;
	background-image : url(bilder/rrechts.jpg);
	background-repeat : repeat-y;
}
#rechts {
	float: left;
	padding: 0;
	margin: 0;
	border: 0;
	font-size: small;
	color: #000000;
	width: 194px;
}
#runten {
	clear: left;
	padding : 0;
	margin : 0;
	border : 0;
	font-size : small;
	color : #000000;
	height : 10px;
}
#fusszeile {
	clear: left;
	padding: 0%;
	margin: 0;
	border: 0;
	font-size: small;
	color: #000000;
	height: 35px;
}
/*]]>*/

Jetzt zu meinem Problem, in den DIV Containern rlinks und rrechts möchte ich ein Bild als Hintergrund einsetzen was 5px breit und 1px hoch ist.
Da ich nie weiß, wieviel Inhalt in dem dem DIV Container inhalt steht, habe ich gedacht, ich könnte das mit dem Befehl
background-repeat : repeat-y; auffüllen.

Leider ist das nicht so.

Ich habe es im Firefox 1.5.0.4 und im IE 6 getestet.

Jetzt bin ich mit meinen Latein am Ende und hoffe auf Hilfe aus diesem Forum

sunreise
 
Ich empfehle dir hierfür die Faux-Columns-Technik, in der die Spalten durch eine einzige Hintergrundgrafik optisch erzeugt werden, und diese in einem übergeordneten Element vertikal wiederholt wird.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück