Hier die HTML Datei
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>
<link type="text/css" href="style.css" rel="stylesheet" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<div id="banner" >LOGO
<h1>HEADER</h1>
</div>
<div id="left">
<h2>Menue links</h2>
</div>
<div id="content">
<h2>Inhalt</h2>
<p style="height:900px;">Hallo</p>
</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
Hier folgt die CSS Datei
Code:
body {
background-color: #e1ddd9;
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}
a {color: #DB7093;}
a:visited {color:#DB7093;}
a:hover {color: #564b47;}
a:active { color:#000000;}
h1 {
font-size: 11px;
text-transform:uppercase;
background-color: #E0A3B7;
border-top:1px solid #564b47;
border-bottom:1px solid #564b47;
padding:5px 15px;
margin:0px }
h2 {
font-size:20px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}
img.download {vertical-align:middle;}
/* ----------container zentriert das layout-------------- */
#container {
width: 800px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
background-color: #EBD3E0;
}
/* ----------banner for logo-------------- */
#banner {
background-color: #e1ddd9;
text-align: right;
padding: 0px;
margin: 0px;
}
#banner img {padding:10px 0px;}
/* -----------------Inhalt--------------------- */
#content {
background-color: #ffffff;
padding: 0px;
margin-left: 200px;
margin-right: 0px;
}
div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px");
}
p, pre{
padding: 5px 10px;
margin:0px;
}
/* --------------left navigavtion------------- */
#left {
float: left;
width: 200px;
margin: 0px;
padding: 0px;
}
/* -----------footer--------------------------- */
#footer {
clear: both;
margin: 0px;
padding: 0px;
text-align: right; }
Für Contao bedeutet dies:
1. der Container hat die Hintergrundfarbe der linken Spalte (#left)
2. Container .inside hat die gewünschte Farbe; in meinem Fall #fff; also weiss
Somit wird die quasi "linke Spalte" durch den Container, egal wie lang so angezeigt.
Du kannst ja mal testen!
Liebe Grüße
Maja
Hintergrund linke Spalte komplett farbig
Zitieren
