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
Lesezeichen