nicht angemeldet
Habe mich nun von den utopischen größten getrennt :)
Das ist schonmal gut gewesen. Hab jetz auch die Navigation hinbekommen, jedoch lässt sich das in dieser Form nicht schän darstellen. Problem ist, dass deine Subnavigation länger ist als deine Mainnavigation.
Im Grunde passt das nicht in dein Design diese Navigation, da sie größer wird als dein Design es zulässt. Daher würde ich das Konzept dieser Navigation nochmal überdenken. Oder du sorgst dafür, dass deine Hauptnavigation länger ist als deiner Sub.
Siehst dir mal an. Hab einiges rausgeschmissen aus dem css und die htm Seite noch ein wenig angepasst.
/* Zurücksetzen der Innen- und Außenabstände */
* {
margin: 0px;
padding: 0px;
}
body, td, th { font: normal 75%/167% Georgia, Palatino, "Times New Roman", serif; }
td, th { font-size: 100%; }
/* Farben und Hintergründe setzen */
html, body {
color: #3b2b20;
background-color: white;
}
h1 {
color: #9F0F00;
background-color: transparent;
font-size: 3em;
line-height: 1.1;
margin: .8em 0;
}
h2 {
color: #3C6331;
background-color: white;
font-size: 1.5em;
line-height: 1.1;
margin: .8em 0;
text-transform: uppercase;
}
/**
* @section Absätze
*/
p { margin: .8em 0; }
/**
* @section Links und Anker
*/
a:link {
color: #980c02;
background-color:transparent;
}
a:visited {
color: #999;
background-color: transparent;
}
a:hover, a:focus {
color: #FF7700;
background-color: transparent;
}
a:active {
color: white;
background-color: #980c02;
}
/**
* Regeln für besondere Bereiche
*
* @section Kopfbereich
*/
div#head {
width: 1024px;
height :150px;
margin: 0px;
position: relative;
background-image:url("logo2.png");
}
/**
* @section Hauptmenü
*/
#head ul.mainNav {
list-style: none;
position: relative;
top: 78px;
left: 320px;
}
#head ul.mainNav li {
float:left;
}
#head ul.mainNav li a {
background-color: #ad2a01;
padding: 5px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}
#head ul.mainNav li ul.subNav li {
clear: left;
width:100%;
}
#head ul.mainNav li ul.subNav {
list-style:none;
display: none;
}
#head ul.mainNav li ul.subNav li a {
font-size:11px;
}
#head ul.mainNav li:hover ul.subNav {
display: block;
}
/**
* @section Content
*/
div#content {
width: 650px;
margin: auto;
padding-right: 150px;
position: relative;
top: 50px;
font-family: Tahoma, Arial, sans-serif;
}
#content h1 { margin: 0; }
/**
* @section Footer
*/
div#footer {
color: white;
background-color: #d73600;
padding-right: 80px;
font-family: Tahoma, Arial, sans-serif;
font-size: .9em;
margin: auto;
width: 944px;
position: relative;
bottom: -100px;
}
#footer p {
margin: auto;
}
<!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" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SG Turm Albstadt</title>
<meta name="author-personal" content="Alexander Schönegg" />
<meta name="author-mail" content="mailto:info@turm-albstadt.de" />
<meta name="description" content="Schachclub Turm Albstadt" />
<meta name="language" content="de" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" href="default.css"
type="text/css" media="screen, projection" />
</head>
<body>
<div id="head">
<ul class="mainNav">
<li><a href="index.php?page=start.php">Startseite</a></li>
<li><a href="index.php?page=news.php">News</a></li>
<li><a href="index.php?page=termine.php">Termine</a></li>
<li><a href="index.php?page=mannschaften.php">Mannschaften</a>
<ul class="subNav">
<li><a href="index.php?page=team1.php">1. Mannschaft</a></li>
<li><a href="index.php?page=team2.php">2. Mannschaft</a></li>
<li><a href="index.php?page=dwz.php">DWZ</a></li>
</ul>
</li>
<li><a href="index.php?page=jugend.php">Jugend</a>
<ul class="subNav">
<li><a href="index.php?page=infos.php">Infos</a></li>
<li><a href="index.php?page=jtermine.php">Termine</a></li>
<li><a href="index.php?page=ergebnisse.php">Ergebnisse</a></li>
</ul>
</li>
<li><a href="index.php?page=ueberuns.php">Über uns</a>
<ul class="subNav">
<li><a href="index.php?page=satzung.php">Satzung</a></li>
<li><a href="index.php?page=geschichte.php">Geschichte</a></li>
</ul>
</li>
<li><a href="index.php?page=bilder.php">Bilder</a></li>
<li><a href="index.php?page=forum.php">Forum</a></li>
<li><a href="index.php?page=links.php">Links</a></li>
<li><a href="index.php?page=kontakt.php">Kontakt</a></li>
</ul>
</div>
<div id="content">
<h1>Willkommen auf der Internetpräsenz der SG Turm Albstadt</h1>
Der Verein hat derzeit ungefähr 55 aktive und passive Mitglieder im Alter zwischen 7 und 80 Jahren.
In der Saison 2010/2011 nehmen wir mit 2 Mannschaften am Spielbetrieb teil.
Die 1. Mannschaft spielt in der Bezirksliga und die 2. Mannschaft in der A-Klasse Nord.
Interessierte Spieler und Gäste, die gerne eine Partie spielen wollen, sind jederzeit willkommen.
</div>
<div id="footer">
<p><center>Homepage der SG Turm Albstadt 1902 e.V. - <a href="index.php?page=impressum.php">Impressum</a></center></p>
<p><center>Design und Code von Alexander Schönegg © 2011</center></p>
</div>
</body>
</html>