nicht angemeldet
Hallo zusammen!
Bin dabei eine Homepage für den Verein zu erstellen. Der Aufbau ist so gestaltet, dass oben der Header ist über die ganze Breite, darunter über die ganze Breite ein Css-Dropdown-Menü und darunter der Content-Bereich, der seit heute Morgen 3-spaltig ist.
Jetzt sollen die Spalten links und rechts eine andere Hintergrundfarbe haben, als die in der Mitte. Und da habe ich das Problem, dass die Farben nicht durchgehend bis zum Ende der Seite gehen. Habe schon gegoogled, Faust columns und so weiter...hab auch alles mögliche ausprobiert, zuletzt Wrapper um das ganze drum herum gebaut, aber er zeigt es nicht so an, wie es gedacht ist.
Sieht so aus: http://www.myimg.de/?img=vorschau702b4.jpg
Erstens ist unten noch ein weißer Streifen über die ganze Breite und zweitens ist in der Mitte auch noch was falsch, da taucht auf einmal die Seitenfarbe auf, was ich garnicht verstehe...
Also Frage ist: Was muss ich verändern, damit ich 3 Spalten mit den Farben x,y,x habe, die jeweils bis zum unteren Seitenende gehen ?
Und hier Code:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Homepage des SV Unna</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="header.jpg" alt="header" width="100%" height="30%" style="float:left"/>
<div id="menu"><!-- öffnet die Navigationsleiste-->
<ul><!-- öffnet den ersten Themenblock -->
<li><h3><a href="index.html">Startseite</a></h3></li>
</ul><!--schließt den ersten Themenblock-->
<ul><!-- öffnet den zweiten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 2 -->
<h3><a href="">Der Verein</a></h3>
<ul><!-- öffnet die Klappnavi von Thema 2 -->
<li><a href="vorstand.html">Der Vorstand</a></li>
<li><a href="">Die Mannschaften</a></li>
<li><a href="">Bildergalerie</a></li>
<li><a href="">Vereinsgeschichte</a></li>
<li><a href="">Sponsoren</a></li>
<li><a href="">Mitgliedschaft beantragen</a></li>
</ul><!-- schließt die Klappnavi von Thema 2 -->
</li><!-- schließt die Listeneinträge von Thema 2 -->
</ul><!--schließt den zweiten Themenblock-->
<ul><!-- öffnet den ersten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 1 -->
<h3><a href="">Spielbetrieb</a></h3>
<ul><!-- öffnet die Klappnavi von Thema 1 -->
<li> <h3> <a href="#">Mannschaften ></a> </h3>
<ul><!--öffnet die dritte Ebene für die Unterpunkte von 1.1-->
<li><a href="unna1.html">Unna I</a></li>
<li><a href="unna2.html">Unna II</a></li>
<li><a href="unna3.html">Unna III</a></li>
<li><a href="">Unna IV</a></li>
</ul><!--schließt die dritte Ebene für die Unterpunkte von 1.1-->
</li>
<li><a href="">Vereinsabend</a></li>
<li><a href="">Vereinsmeisterschaft</a></li>
<li><a href="">Turniere</a></li>
<li><a href="rangliste.html">Rangliste</a></li>
</ul><!-- schließt die Klappnavi von Thema 1 -->
</li><!-- schließt die Listeneinträge von Thema 1 -->
</ul><!--schließt den ersten Themenblock-->
<ul><!-- öffnet den zweiten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 2 -->
<h3><a href="">Jugend</a></h3>
<ul><!-- öffnet die Klappnavi von Thema 2 -->
<li><a href="">Training</a></li>
<li><a href="">Diplome</a></li>
<li><a href="">Turniere</a></li>
<li><a href="">Jugend-Rangliste</a></li>
<li><a href="">Schulschach</a></li>
</ul><!-- schließt die Klappnavi von Thema 2 -->
</li><!-- schließt die Listeneinträge von Thema 2 -->
</ul><!--schließt den zweiten Themenblock-->
<ul><!-- öffnet den zweiten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 2 -->
<h3><a href="">Unna Open</a></h3>
<ul><!-- öffnet die Klappnavi von Thema 2 -->
<li><a href="">Ausschreibung</a></li>
<li><a href="">Spielplan</a></li>
<li><a href="">Rangliste</a></li>
<li><a href="">DWZ-Auswertung</a></li>
<li><a href="">Feedback</a></li>
</ul><!-- schließt die Klappnavi von Thema 2 -->
</li><!-- schließt die Listeneinträge von Thema 2 -->
</ul><!--schließt den zweiten Themenblock-->
<ul><!-- öffnet den zweiten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 2 -->
<h3><a href="">Links/Archiv</a></h3>
<ul><!-- öffnet die Klappnavi von Thema 2 -->
<li><a href="http://sbhamm.de" target="_blank">SB Hamm</a></li>
<li><a href="http://www.sbhamm.de/Jugendhome.html" target="_blank">SJ Hamm</a></li>
<li><a href="http://www.jugend.svr-schach.de/" target="_blank">Jugend SVR</a></li>
<li><a href="http://www.schachbund.de/spieler.html" target="_blank">DWZ - Suche</a></li>
<li><a href="" target="_blank">Archiv</a></li>
</ul><!-- schließt die Klappnavi von Thema 2 -->
</li><!-- schließt die Listeneinträge von Thema 2 -->
</ul><!--schließt den zweiten Themenblock-->
</div><!-- schließt die Menüleiste #menu -->
<div style="clear: both;"> </div> <!--cleart die gefloatete Menüleiste-->
<div id="wrapper1">
<div id="wrapper2">
<div id="wrapper3">
<nav>
<br />
<h2 style="text-decoration:underline"> Aktuelle Termine: </h2><br /><br />
<p> 04.10.2013: Trainingsabend </p><br />
<p> 24.12.2013: Weihnachten </p><br />
<p> 31.12.2013: Silvester </p><br />
<p> 24.12.2014: Weihnachten </p><br />
<p> 31.12.2014: Silvester </p><br />
<p> 24.12.2015: Weihnachten </p><br />
<p> 31.12.2015: Silvester </p><br />
</nav>
<nav class="right">
<br /><h2 style="text-decoration:underline">Partienschätze</h2><br />
<a href=""><img src="schatz.gif" alt="schatz" /></a>
<br /><br /><br />
<h2 style="text-decoration:underline">Aufgabe des Tages:</h2>
<br /><br />
<iframe width="310" scrolling="no" height="341" frameborder="0" src="http://www.shredderchess.com/online/playshredder/
gdailytactics.php?mylang=de&mysize=32"></iframe>
</nav>
<div id="content">
<br /><br />
<h2 style="color:#800000; line-height: 1.5em"> Willkommen auf der neuen Homepage des Schachvereins Unna 1924! <br />
- Der SV Unna -
</h2>
<div id="horizmenue">
<ul>
<li><a href="index.html">Startseite</a></li>
</ul>
<ul>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<ul>
<li><a href="impressum.html">Impressum</a></li>
</ul>
<ul>
<li><a href="impressum.html">Anfahrt</a></li>
</ul>
</div><!-- schließt die Menüleiste #horizmenue -->
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
</body>
</html>
@CHARSET "ISO-8859-1";
/*--Setzt alle Abstände auf "Null"--*/
* {
margin: 0;
padding: 0;
}
/*--formatiert die Menüleiste unten--*/
#horizmenue {
width: 45%;
margin-top:40%;
margin-left: 27.5%;
margin-right: 27.5%;
font-family: Verdana;
font-size: 0.75em;
line-height: 1.0;
}
#horizmenue li {
display: inline;
float: left;
padding: 1%;
}
#horizmenue a {
padding: 2px 8px 5px;
}
/*--formatiert die Menüleiste--*/
#menu {
width: 100%;
padding: 0;
background: #003366;
font-family: Verdana;
font-size: 1.0em;
line-height: 1.5;
}
/*--formatiert die Themenblöcke--*/
#menu ul {
float: left;
width: 16.666%;
list-style-type: none;
}
#menu > ul ul {
width: 100%;
}
/*--definiert die Blocküberschriften--*/
#menu h3 {
font-size: 1em;
text-align: center;
color: #000;
border: 1px solid #003366; /*--erforderlich für IE 7--*/
background: #ff8000;
}
/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
text-decoration: none;
display: block;
border: 1px solid #ccc;
text-align: center;
background: #FFFAFA;
color: #003366;
}
/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover {
color: #ff9224;
background: #003366;
}
/*
*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/
#menu li {
position: relative;
}
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/
* html #menu ul li {
float: left;
width: 100%;
}
/*--nur für IE 7 erkennbar--*/
*+ html #menu ul li {
float: left;
width: 100%;
}
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}
*html #menu ul li a {
height: 1%;
}
/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:link {
font-size: 1em;
font-weight: bold;
text-align: center;
color: #000;
border: 1px solid #003366;
background: #ff8000;
}
/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:hover {
color: #ff9224;
background: #003366;
border: 1px solid #ccc;
}
/*--versteckt die dritte Ebene--*/
#menu ul li:hover ul ul {
display: none;
}
/*-- lässt die dritte Ebene beim Hovern über die zweite in Erscheinung treten und nach rechts ausklappen--*/
div#menu ul ul li:hover ul {
display: block;
position: absolute;
top: 0;
left: 100%;
}
html,body {
width:100%;
height:100%;
margin: 0px;
padding: 0px;
}
#content {
background-color: #FFE4B5;
text-align:center;
font-family: Verdana;
font-size: 1.0em;
line-height: 1.0;
width:55%;
float:left;
}
#content > p {
width: 55%;
text-align:left;
line-height: 2.0em;
margin-top: 5%;
margin-left: 15%;
margin-right: 15%;
float:left;
}
#content > p > a {
}
.iframe_spielplan iframe {
display:block;
width:100%;
border:none;
height:100%;
}
header {
background:#123456;
width: 100%;
height: 30%;
}
table {
float:left;
background-color:#F5DEB3;
}
.layout_rangliste td {
width:10%;
height: 20px;
}
.layout_rangliste tr.even td {
background-color:#FAEBD7;
}
nav{
width: 22.5%;
border:0px solid black;
padding-top: 20px;
float:left;
background-color: #F5DEB3;
text-align:center;
}
.right {
float:right;
}
#wrapper1
{
background-color:#F5DEB3;
background-position:0 0;
background-repeat:repeat-y;
}
#wrapper2
{
background-color:#FFE4B5;
background-position:22.5% 0;
background-repeat:repeat-y;
}
#wrapper3
{
background-color:#F5DEB3;
background-position:77.5% 0;
background-repeat:repeat-y;
}
Matthias Apsel
JürgenB