Hallo zusammen.
Es ist noch schwierig mein Problem zu beschreiben. Also ich möchte in meinem Navigationsmenü einen Roll-over mit CSS realisieren. Da sind aber leider zwei Probleme aufgetaucht.
Hier die Seite zum anschauen: http://www.alsodenn.ch/tutorials/html/prototyp.html
1. Beim Roll-Over wird die ursprüngliche Box links und rechts breiter und man sieht die hintere Box auch, keine Ahnung wieso. Auf jeden Fall ist es sehr unschön.
2. In der vertikalen Unternavigation ist 1. das gleiche Problem vorhanden und 2. macht es bei zweizeiligen Navigationspünkten irgendwie auch zwei verschiedene Boxen oder so etwas ähnliches.
Wie kann ich diese Fehler beheben? Natürlich gerne Browserübergreifend
.
Hier der Quellcode:
CSS:
HTML:
Vielen Dank schon im voraus für eure Lösungsvorschläge.
Gruss
Es ist noch schwierig mein Problem zu beschreiben. Also ich möchte in meinem Navigationsmenü einen Roll-over mit CSS realisieren. Da sind aber leider zwei Probleme aufgetaucht.
Hier die Seite zum anschauen: http://www.alsodenn.ch/tutorials/html/prototyp.html
1. Beim Roll-Over wird die ursprüngliche Box links und rechts breiter und man sieht die hintere Box auch, keine Ahnung wieso. Auf jeden Fall ist es sehr unschön.
2. In der vertikalen Unternavigation ist 1. das gleiche Problem vorhanden und 2. macht es bei zweizeiligen Navigationspünkten irgendwie auch zwei verschiedene Boxen oder so etwas ähnliches.
Wie kann ich diese Fehler beheben? Natürlich gerne Browserübergreifend
.Hier der Quellcode:
CSS:
HTML:
/* CSS Document */
#seite_zentrieren {
width: 760px;
position: absolute;
left: 50%;
margin-left: -380px;
}
body {
padding:10px;
margin: 0px;
background-color: white;
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
/* START Feste Navigationskästchen */
#navigation {
position: absolute;
left: 130px;
top: 119px;
width: 630px;
height: 25px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
background-color: #CCCCCC;
color: inherit;
}
.navigationspunkt {
background-color: yellow;
color: black;
float: left;
margin: 5px;
padding: 3px;
border: 1px solid black;
}
.navigationspunkt a:hover {
background-color: #00BB00 ;
color: white;
margin: 5px;
padding: 3px;
border: 1px solid black;
}
#unternavigation {
position: absolute;
left: 0px;
top: 150px;
width: 125px;
height: 300px;
background-color: white;
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
background-color: #CCCCCC;
}
.unternavigationspunkt {
background-color: yellow;
color: black;
float: left;
margin: 5px;
padding: 3px;
border: 1px solid black;
}
.unternavigationspunkt a:hover {
background-color: #00BB00 ;
color: white;
margin: 5px;
padding: 3px;
border: 1px solid black;
}
/* ENDE Feste Navigationskästchen */
/* START Link Formatierungen */
a:link {
backgroundcolor: inherit;
color: inherit;
text-decoration: none;
}
/* ENDE Link Formatierungen */HTML:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Prototyp</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body>
<div id="seite_zentrieren">
<div id="navigation">
<div class="navigationspunkt"><a href="#">Hauptseite</a></div>
<div class="navigationspunkt"><a href="#">Verein</a></div>
<div class="navigationspunkt"><a href="#">Wasserfahren?</a></div>
<div class="navigationspunkt"><a href="#">Classics</a></div>
<div class="navigationspunkt"><a href="#">Fotos</a></div>
<div class="navigationspunkt"><a href="#">Downloads</a></div>
<div class="navigationspunkt"><a href="#">Links</a></div>
<div class="navigationspunkt"><a href="#">Gästebuch</a></div>
</div>
<div id="unternavigation">
<div class="unternavigationspunkt"><a href="#">Was ist Wasserfahren?</a></div>
<div class="unternavigationspunkt"><a href="#">Die Technik des Wasserfahrens</a></div>
<div class="unternavigationspunkt"><a href="#">wasserfahrer</a></div>
</div>
</div>
</body>
</html>Vielen Dank schon im voraus für eure Lösungsvorschläge.
Gruss
