godfather_al
Mitglied
Guten Abend,
ich arbeite gerade an einem neuen Layout, bei der oberen Navigation war das Ziel, dass die Navigationspunkte in Blöcken erscheinen und beim Überfahren ein ganzer Block (nicht nur der Hintergrund des Textes) umgefärbt wird, so ähnlich wie bei http://www.hockey.de nur ohne den waagerechten Platz zwischen den Blöcken. Es will mir nicht gelingen, wer kann mir einen Tip geben ?
Vielen Dank vorab.
Alex
HTML:
<!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>Kaufmännische Nachhilfe Düren</title>
<style type="text/css"> @import url(layout.css);</style>
</head>
<body>
<basefont face="Verdana">
<div id="centerBox">
<div id="kopf"><h2>Kaufmännische Nachhilfe Düren</h2></div>
<div id="navigation_links"><br/>
<ul>
<li><a href="index.html">Nachhilfe </a></li>
<li><a href="nachpruefung.html">Nachprüfung</a></li>
<li><a href="service.html">Service </a></li>
<li><a href="angebote.html">Angebote </a></li>
<li><a href="kontakt.html">Kontakt </a></li>
<li><a href="links.html">Links </a></li>
<li><a href="impressum.html">Impressum </a></li>
</ul>
</div>
<div id="navigation_oben">
<ul>
<li><a href="index.html">Nachhilfe </a></li>
<li><a href="nachpruefung.html">Nachprüfung</a></li>
</ul>
</div>
<div id="inhalt"><basefont face="Verdana"><h1></br>Wer wir sind ...</h1>
<p>Die Kaufmännische Nachhilfe Düren ist eine Nachhilfe - Einrichtung speziell ....</p>
</div>
</div>
</body>
</html>
CSS:
body, html, #navigation_links, #navigation_oben, #kopf, #inhalt, #centerbox {margin: 0; padding: 0;}
body {font: 100.01% font-family: cursive; margin: auto; background-color: white; text-align: center;}
#centerBox {
position: absolute;
left: 2.5%;
width: 95%;
top: 2.5%;
height: 95%;
border: 0px solid #000;
background-color: aqua;
}
#kopf {
position: absolute;
left: 0%;
width: 100%;
top: 0%;
height: 15%;
border: 1px solid #000;
background-image: url(nav.jpg);
background-repeat: no-repeat;
background-color: white;
text-align: left;
}
#navigation_links {
position: absolute;
left: 0%;
width: 15%;
top: 15%;
height: 85%;
border: 1px solid #000;
background-color: white;
text-align: left;
}
#navigation_oben {
position: absolute;
left: 15%;
width: 85%;
top: 15%;
height: 5%;
border: 1px solid #000;
background-color: white;
text-align: left;
}
#inhalt {
position: absolute;
left: 15%;
width: 85%;
top: 20%;
height: 80%;
border: 1px solid #000;
background-color: white;
color: #806640;
text-align: left;
}
p {color: #000000; margin: 25px 25px 0 25px;font-size: 0.9em;}
p1 {color: rgb(0, 0, 0); font-size: 1.0em;}
h1 {font-family: cursive; color: #000000; margin: 0 25px; padding: 5px 0 0; font-size: 1.2em;}
h2 {font-family: cursive; color: #000000; margin: 0 25px; padding: 5px 0 0; font-size: 2.0em; font-family: cursive; text-align: right; letter-spacing: 3px;}
#navigation_links ul {list-style-type: none; line-height: 1.2; margin: 25px 0px 0 0; padding: 0; font-family: cursive; font-size: 0.9em; }
#navigation_links ul li {margin-top:15px;}
#navigation_links a:link, #navigation_links a:visited {text-decoration: none; color: black; display: block; font-weight: bold; padding: 0px; padding-left: 15px; rgb(255, 255, 255); font-family: cursive; font-size: 0.9em;}
#navigation_links a:hover {color: gray; background-color: aqua; font-family: cursive;}
#navigation_oben ul {display: inline; list-style-type: none; margin: 0px 25px 0 0; line-height: 1.5em; padding:0; font-family: cursive; font-size: 0.9em; font-weight: bold;}
#navigation_oben ul li {display: inline; margin-top: 0px; margin-left: 25px; }
#navigation_oben a:link, #navigation_oben a:visited {display: inline; text-decoration: none; color: black; padding: 0px; rgb(255, 255, 255);font-family: cursive; font-size: 0.9em; font-weight: bold;}
#navigation_oben a:hover {display: inline; color: gray; background-color: aqua; font-family: cursive;}
ich arbeite gerade an einem neuen Layout, bei der oberen Navigation war das Ziel, dass die Navigationspunkte in Blöcken erscheinen und beim Überfahren ein ganzer Block (nicht nur der Hintergrund des Textes) umgefärbt wird, so ähnlich wie bei http://www.hockey.de nur ohne den waagerechten Platz zwischen den Blöcken. Es will mir nicht gelingen, wer kann mir einen Tip geben ?
Vielen Dank vorab.
Alex
HTML:
<!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>Kaufmännische Nachhilfe Düren</title>
<style type="text/css"> @import url(layout.css);</style>
</head>
<body>
<basefont face="Verdana">
<div id="centerBox">
<div id="kopf"><h2>Kaufmännische Nachhilfe Düren</h2></div>
<div id="navigation_links"><br/>
<ul>
<li><a href="index.html">Nachhilfe </a></li>
<li><a href="nachpruefung.html">Nachprüfung</a></li>
<li><a href="service.html">Service </a></li>
<li><a href="angebote.html">Angebote </a></li>
<li><a href="kontakt.html">Kontakt </a></li>
<li><a href="links.html">Links </a></li>
<li><a href="impressum.html">Impressum </a></li>
</ul>
</div>
<div id="navigation_oben">
<ul>
<li><a href="index.html">Nachhilfe </a></li>
<li><a href="nachpruefung.html">Nachprüfung</a></li>
</ul>
</div>
<div id="inhalt"><basefont face="Verdana"><h1></br>Wer wir sind ...</h1>
<p>Die Kaufmännische Nachhilfe Düren ist eine Nachhilfe - Einrichtung speziell ....</p>
</div>
</div>
</body>
</html>
CSS:
body, html, #navigation_links, #navigation_oben, #kopf, #inhalt, #centerbox {margin: 0; padding: 0;}
body {font: 100.01% font-family: cursive; margin: auto; background-color: white; text-align: center;}
#centerBox {
position: absolute;
left: 2.5%;
width: 95%;
top: 2.5%;
height: 95%;
border: 0px solid #000;
background-color: aqua;
}
#kopf {
position: absolute;
left: 0%;
width: 100%;
top: 0%;
height: 15%;
border: 1px solid #000;
background-image: url(nav.jpg);
background-repeat: no-repeat;
background-color: white;
text-align: left;
}
#navigation_links {
position: absolute;
left: 0%;
width: 15%;
top: 15%;
height: 85%;
border: 1px solid #000;
background-color: white;
text-align: left;
}
#navigation_oben {
position: absolute;
left: 15%;
width: 85%;
top: 15%;
height: 5%;
border: 1px solid #000;
background-color: white;
text-align: left;
}
#inhalt {
position: absolute;
left: 15%;
width: 85%;
top: 20%;
height: 80%;
border: 1px solid #000;
background-color: white;
color: #806640;
text-align: left;
}
p {color: #000000; margin: 25px 25px 0 25px;font-size: 0.9em;}
p1 {color: rgb(0, 0, 0); font-size: 1.0em;}
h1 {font-family: cursive; color: #000000; margin: 0 25px; padding: 5px 0 0; font-size: 1.2em;}
h2 {font-family: cursive; color: #000000; margin: 0 25px; padding: 5px 0 0; font-size: 2.0em; font-family: cursive; text-align: right; letter-spacing: 3px;}
#navigation_links ul {list-style-type: none; line-height: 1.2; margin: 25px 0px 0 0; padding: 0; font-family: cursive; font-size: 0.9em; }
#navigation_links ul li {margin-top:15px;}
#navigation_links a:link, #navigation_links a:visited {text-decoration: none; color: black; display: block; font-weight: bold; padding: 0px; padding-left: 15px; rgb(255, 255, 255); font-family: cursive; font-size: 0.9em;}
#navigation_links a:hover {color: gray; background-color: aqua; font-family: cursive;}
#navigation_oben ul {display: inline; list-style-type: none; margin: 0px 25px 0 0; line-height: 1.5em; padding:0; font-family: cursive; font-size: 0.9em; font-weight: bold;}
#navigation_oben ul li {display: inline; margin-top: 0px; margin-left: 25px; }
#navigation_oben a:link, #navigation_oben a:visited {display: inline; text-decoration: none; color: black; padding: 0px; rgb(255, 255, 255);font-family: cursive; font-size: 0.9em; font-weight: bold;}
#navigation_oben a:hover {display: inline; color: gray; background-color: aqua; font-family: cursive;}
