S
sagert90
Guest
Hallo verehrte Helden des Webs...
ich habe ein Problem mit einer Navigation die ich per HTML und CSS erstellen möchte. Den Grundcode habe ich von dem Inhaber einer anderen Internetseite erhalten, die Erlaubnis der Verwendung bzw Modifikation liegt also vor =)
Das Problem liegt in der Größe der einzelnen Navigationselemente...
Jeder Kasten soll im Grundzustand eine Breite von 130px haben und eine Höhe von 79px... dies funktioniert aber leider nicht, habe schon alles ausprobiert was ich finden konnte...
Die Menüunterpunkte sollen jedoch nur klein dargestellt werden, so wie wenn sie nicht selektiert sind und nicht beim mouseover auf 79px vergrößert werden.
Am liebsten hätte ich es auch, wenn in jedem Oberpunkt die Schrift komplett zentriert stehen könnte (gesehen von oben, unten, links, rechts).
Wie man sieht, sind die mouseover Kästen irgendwie größer als die im Normalzustand. Ich blicke einfach nicht mehr durch bzw. sehe den Wald vor lauter Bäume nicht mehr -.-
Hier ist der Code:
Hier der CSS-Code:
Hier auch noch ein Link zum bisherigen Stand der Dinge:
Hier zwei Bilder, die mein Anliegen hoffentlich ein klein wenig mehr verdeutlichen =)
Vielen Dank schon einmal im Vorraus!
mfG,
sagert90
ich habe ein Problem mit einer Navigation die ich per HTML und CSS erstellen möchte. Den Grundcode habe ich von dem Inhaber einer anderen Internetseite erhalten, die Erlaubnis der Verwendung bzw Modifikation liegt also vor =)
Das Problem liegt in der Größe der einzelnen Navigationselemente...
Jeder Kasten soll im Grundzustand eine Breite von 130px haben und eine Höhe von 79px... dies funktioniert aber leider nicht, habe schon alles ausprobiert was ich finden konnte...
Die Menüunterpunkte sollen jedoch nur klein dargestellt werden, so wie wenn sie nicht selektiert sind und nicht beim mouseover auf 79px vergrößert werden.
Am liebsten hätte ich es auch, wenn in jedem Oberpunkt die Schrift komplett zentriert stehen könnte (gesehen von oben, unten, links, rechts).
Wie man sieht, sind die mouseover Kästen irgendwie größer als die im Normalzustand. Ich blicke einfach nicht mehr durch bzw. sehe den Wald vor lauter Bäume nicht mehr -.-
Hier ist der Code:
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Untitled-2.css"/>
<title>Untitled Document</title>
</head>
<body>
<div id="navigation">
<div class="menu">
<ul>
<li><a href="news.html" class="active">News</a></li>
<li><a href="about.html">Über uns</a></li>
<li><a href="vid.html">Trailer
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="crjtrail.html">CRJ-Records</a></li>
<li><a href="zwartrai.html">Fotostudio Zwar</a></li>
<li><a href="vid.html">B Haze</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="angebote.html">Angebote
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="hochzeitsvideos.html">Hochzeitsvideos</a></li>
<li><a href="feiern.html">Feiern</a></li>
<li><a href="musikaufnahmen.html">Musikaufnahmen</a></li>
<li><a href="musikclips.html">Musikclips</a></li>
<li><a href="werbevideos.html">Werbevideos</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="studio.html">Studio</a></li>
<li><a href="fotografie.html">Begleitfotografie
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="redgallery.html">REDRUM INC</a></li>
<li><a href="hazegallery.html">B Haze</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
</div>
</body>
</html>
Code:
@charset "utf-8";
.menu {
width:910px;
height:79px;
position:relative;
z-index:100;
font-family:"Verdana", Arial, Helvetica, sans-serif;
padding-left: 20px;
}
.active{
color: #081825 !important;
height: 79px;
width: 130px;
background-color: #b9dfea;
}
/* hack to correct IE5.5 faulty box model */
* html .menu {
width:910px;
w\idth:910px;
height: 79px;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
margin:0;
list-style-type:none;
padding: 0;
height: 79px;
}
.menu ul ul {
width:130px;
height: 79px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
position:relative;
width: 130px;
}
.menu li li {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #fff;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none;
color:#081825;
line-height:22px;
font-weight:bold;
border-right-width: 1px;
border-right-style: groove;
border-right-color: #b9dfea;
padding-right: 12px;
padding-left: 12px;
height: 22px;
margin-top: 8px;
}
.menu ul li #noborder{
border-right-style: none;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {float:left;}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#d4d8bd 130px left;}
/* style the second level hover */
.menu ul ul a.drop:hover{
background-color: #b9dfea;
background-position: left 130px;
color: #081825;
}
.menu ul ul :hover > a.drop {background:#c9ba65 130px left;}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#e2dfa8;}
/* style the third level hover */
.menu ul ul ul a:hover {
background-color: #b9dfea;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:30px;
left:0;
width:149px;
padding-top: 7px;
}
/* another hack for IE5.5 */
* html .menu ul ul {top:30px;t\op:31px;}
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
color:#b9dfea;
height:25px;
line-height:25px;
width:130px;
border-width:0 1px 1px 1px;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 11px;
background-color: #081825;
text-align: left;
font-weight: normal;
}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {
width:150px;
w\idth:130px;
height: 79px;
}
/* style the top level hover */
.menu a:hover{
color:#081825;
background-color: #b9dfea;
height: 79px;
width: 130px;
}
.menu ul ul a:hover{
color:#081825 !important;
background:#b9dfea !important;
font-weight:bold;
height: 79px;
width: 130px;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#081825;
background-color: #b9dfea;
height: 79px;
width: 130px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
height: 79px;
width: 130px;
}
/* keep the third level hidden when you hover on first level list OR link */Hier zwei Bilder, die mein Anliegen hoffentlich ein klein wenig mehr verdeutlichen =)
Vielen Dank schon einmal im Vorraus!
mfG,
sagert90
Zuletzt bearbeitet von einem Moderator:
