Hintergrund linke Spalte komplett farbig
Liebe Gemeinde,
ich habe ein Hintergrundspaltenproblem. www.ka-en.de/contao/index.php. Die linke Spalte soll ganzflächig den ockerfarbigen Ton erhalten. In Container habe ich den unteren Rand des linken und mittleren Hauptfeldes mit einem Hintergrundbild versehen, das links die farbige Fläche hat und rechts eine weiße Fläche mit Schatten. Über Content fülle ich den Rest der rechten Fläche mit weiß, die linke Fläche soll komplett mit ocker sein. Ich habe es mit #left versucht, klappt nicht, er nimmt die Farbe immer nur bis zu den Einträgen.
#container
{
width:980px;
margin-left:-10px;
background:url("tl_files/Anker-Alsdorf/Layout/textfeldunten.png") left bottom no-repeat;
}
#main
{
width:690px;
background-color:#fff;
background-position:left top;
}
#left
{
width:290px;
height:100%;
background-color:#B9B490;
background-position:left top;
}
#content
{
width:630px;
padding-top:30px;
padding-left:50px;
text-align:left;
font:14px trebuchet ms;
color:#444;
}
article_left
{
width:247px;
margin:0 10px;
padding-top:10px;
padding-right:10px;
padding-left:15px;
text-align:left;
background-color:#B9B490;
background-position:left top;
border-bottom:1px solid #fff;
font:11px trebuchet ms;
color:#444;
}
Hat jemand vielleicht eine Idee, wie man das Problem lösen könnte? Für einen Tipp wäre ich sehr dankbar.
Viele Grüße,
Katja
Liste der Anhänge anzeigen (Anzahl: 1)
Lass' am besten alles so wie es ist und ersetze bitte das Hintergrundbild mit Folgendem im Anhang.
Ich denke, wenn man die abgerundete Ecke einbezieht, ist das die beste Lösung.
Der Trick ist einfach; musste aber auch ganz lange suchen
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
