Hallo Forum,
ich habe ein Problem mit einer Navi und ich komme dabei einfach nicht weiter.
Ich habe eine Liste erstellt und diese per CSS horizontal dargestellt und mit einem Verlauf versehen (kein Bild). Soweit klappt alles.
Jetzt möchte ich aber, dass deim hover eines Menüpunktes sein Verlauf umgedreht angezeigt wird. Das funktioniert in Firefox, Opera und Safari, nur nicht im Internet Explorer (da gibt es nur eine einfache Hintergrundfarbe).
Mein HTML:
Mein CSS:
Ich wäre wirklich dankbar, wenn mir jemand dabei helfen kann.
ich habe ein Problem mit einer Navi und ich komme dabei einfach nicht weiter.
Ich habe eine Liste erstellt und diese per CSS horizontal dargestellt und mit einem Verlauf versehen (kein Bild). Soweit klappt alles.
Jetzt möchte ich aber, dass deim hover eines Menüpunktes sein Verlauf umgedreht angezeigt wird. Das funktioniert in Firefox, Opera und Safari, nur nicht im Internet Explorer (da gibt es nur eine einfache Hintergrundfarbe).
Mein HTML:
Code:
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenannt</title>
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="path">
</div>
<div id="navibar">
<ul>
<li>Prozesse</li>
<li>Informationen</li>
<li>Bereiche</li>
<li>Zoom</li>
<li>Feedback</li>
<li>Hyperlinks </li>
<li>Drucken </li>
<li>Sprache</li>
<li><input name="Suche" type="text" size="17" maxlength="50" height="5" value="Suche" class="formsuche"> </li>
<li>Hilfe</li>
</ul>
</div>
<div id="left_part">
<p>blabla</p>
</div>
</body>
</html>
Mein CSS:
Code:
/* --------------------- general ----------------------- */
/* general settings */
html{
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.8em;
color: black;
margin: 0;
padding: 0;
height: 100%;
}
/* default settings for links */
html a{
text-decoration: none;
outline: none;
}
body{
height: 100%;
margin: 0;
padding: 0;
}
/*-------------------- navigation -------------------*/
#navibar{ /* gradient and border for the navigation bar */
margin-top: 20px;
background: #dee9f5; /* Old browsers */
background: -moz-linear-gradient(top, #f4f9ff 0%, #dbe7f5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f9ff), color-stop(100%,#dbe7f5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4f9ff 0%,#dbe7f5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f4f9ff 0%,#dbe7f5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f4f9ff 0%,#dbe7f5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f9ff', endColorstr='#dbe7f5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f4f9ff 0%,#dbe7f5 100%); /* W3C */
border-bottom: #c2d4e9 1px solid;
border-top: #e1e9f1 1px solid;
border-left: #c2d4e9 1px solid;
border-right: #c2d4e9 1px solid;
}
#navibar ul{ /* size and margin of the navigation bar */
padding-top: 5px;
padding-bottom: 5px;
margin: 0;
}
#navibar ul li{ /* style of each navigation element */
list-style-type: none;
display: inline;
margin: 0 auto; /* for consistant distance of each navigation point to his border */
padding: 0 20px 0 20px !important; /* distance of the text to the border */
}
#navibar ul li{ color:#000; padding-right: 5px; padding-left: 5px; cursor: pointer;}
#navibar ul li:visited{ color:#000; padding-right: 5px; padding-left: 5px;}
#navibar ul li:hover{
color:#000;
background: #c2d4e9; /* Old browsers */
background: -moz-linear-gradient(top, #f7fbfe 0%, #bfd2e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7fbfe), color-stop(100%,#bfd2e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f7fbfe 0%,#bfd2e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f7fbfe 0%,#bfd2e8 100%); /* Opera11.10+ */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#dce7f6, endColorstr=#f4f9ff); /* Internet Explorer 5.5 - 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#dce7f6, endColorstr=#f4f9ff)"; /* Internet Explorer 8 */
background: -ms-linear-gradient(top, #f7fbfe 0%,#bfd2e8 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fbfe', endColorstr='#bfd2e8',GradientType=0 ); /* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
background: linear-gradient(top, #f7fbfe 0%,#bfd2e8 100%); /* W3C */
border: 2px #c2d4e9 solid;
-moz-border-radius: 5px;
border-radius: 5px;
padding-right: 18px !important;
padding-left: 18px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
#navibar ul li:active{ color:#000; background-color: #D6D7D8; padding-top: 5px; padding-bottom: 5px;}
#navibar ul li img{
vertical-align: middle;
margin-left: 5px;
border: none;
}
#navibar ul li input{
margin: 0;
padding: 0;
}
Ich wäre wirklich dankbar, wenn mir jemand dabei helfen kann.
Zuletzt bearbeitet: