Frage stellen
Da im Forum für Anfängerfragen keine Lösung gefunden wurde, versuche ich es hier noch einmal, bei den Profis
Das Problem:
Auf meiner Seite http://test.pfarreimusik.ch arbeite ich mit einer horizontalen Navigation, die ich von hier habe: http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/.
Irgend eine Konstellation auf meiner Page verhindert nun aber, dass man im IE mit der Maus von der Hauptnavigation zur Subnavigation fahren kann (die Subnavi verschwindet...). Ich gehe davon aus, dass es vom CSS her im IE eine "Lücke" gibt zwischen der Navi und der Subnavi. Aber bisher hat nichts geholfen...
Hier mein HTML:
- Code: Alles auswählen
<!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=iso-8859-1" />
<meta name="Robots" content="all, index, follow" />
<link rel="shortcut icon" href="../favicon.ico" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="../scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : ''}); //Add background color and image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : ''}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
$("ul#topnav li span a").hover(function() { //Hover over event on list item
$(this).css({ 'background' : ''}); //Add background color and image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : ''}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
});
</script>
<title>Pfarreimusik Wünnewil-Flamatt</title>
</head>
<body>
<div id="head">
</div><div class="container_navi">
<ul id="topnav">
<li><a href="http://test.pfarreimusik.ch/index.php" class="navi">Home</a></li>
<li>
<a href="http://test.pfarreimusik.ch/jahresprogramm/jahresprogramm.php" class="navi">Jahresprogramm</a>
<!--Subnav Starts Here-->
<span>
<a href="http://test.pfarreimusik.ch/jahresprogramm/2009.php" class="navi">Veranstaltungen 2009</a>
<a href="http://test.pfarreimusik.ch/jahresprogramm/2010.php" class="navi">Veranstaltungen 2010</a>
</span>
<!--Subnav Ends Here-->
</li>
<li><a href="http://test.pfarreimusik.ch/ueber_uns/ueber_uns.php" class="navi">Über uns</a>
<!--Subnav Starts Here-->
<span>
<a href="http://test.pfarreimusik.ch/ueber_uns/strategie.php" class="navi">Strategie</a>
<a href="http://test.pfarreimusik.ch/ueber_uns/besetzungsliste.php" class="navi">Besetzungsliste</a>
<a href="http://test.pfarreimusik.ch/ueber_uns/vorstand.php" class="navi">Vorstand</a>
<a href="http://test.pfarreimusik.ch/ueber_uns/musikkommission.php" class="navi">Musikkommission</a>
<a href="http://test.pfarreimusik.ch/ueber_uns/direktion.php" class="navi">Direktion</a>
<a href="http://test.pfarreimusik.ch/ueber_uns/veteranenobmann.php" class="navi">Veteranenobmann</a>
<a href="http://test.pfarreimusik.ch/ueber_uns/kontakt.php" class="navi">Kontakt</a>
</span>
<!--Subnav Ends Here-->
</li>
<li><a href="http://test.pfarreimusik.ch/jungblaeser/jungblaeser.php" class="navi">Jungbläser</a>
<!--Subnav Starts Here-->
<span>
<a href="http://test.pfarreimusik.ch/jungblaeser/ausbildung/ausbildung.php" class="navi">Ausbildung</a>
<a href="http://test.pfarreimusik.ch/jungblaeser/jugendmusik/jugendmusik.php" class="navi">Jugendmusik</a>
<a href="http://test.pfarreimusik.ch/jungblaeser/bildergalerie/bildergalerie.php" class="navi">Bildergalerie</a>
<a href="http://test.pfarreimusik.ch/jungblaeser/sponsoring/sponsoring.php" class="navi" target="_self">Sponsoring</a>
<a href="http://test.pfarreimusik.ch/jungblaeser/kontakt/kontakt.php" class="navi" target="_self">Kontakt</a> </span>
<!--Subnav Ends Here-->
</li>
<li><a href="http://test.pfarreimusik.ch/bildergalerie/bildergalerie.php" class="navi">Bildergalerie</a>
<!--Subnav Starts Here-->
<span>
<a href="http://test.pfarreimusik.ch/bildergalerie/0607/bilder0607.php" class="navi" target="_self">Bilder 2006/2007</a>
<a href="http://test.pfarreimusik.ch/bildergalerie/0708/bilder0708.php" class="navi">Bilder 2007/2008</a>
<a href="http://test.pfarreimusik.ch/bildergalerie/0809/bilder0809.php" class="navi">Bilder 2008/2009</a>
<a href="http://test.pfarreimusik.ch/bildergalerie/0910/bilder0910.php" class="navi">Bilder 2009/2010</a> </span>
<!--Subnav Ends Here-->
</li>
<li><a href="http://test.pfarreimusik.ch/goenner/goenner.php" class="navi" target="_self">Gönner</a></li>
<li><a href="http://test.pfarreimusik.ch/links/links.php" class="navi" target="_self">Links</a></li>
<li><a href="http://test.pfarreimusik.ch/gaestebuch/gaestebuch.php" class="navi" target="_self">Gästebuch</a></li>
</ul>
</div><div id="container">
<div id="contents">
<h1>Willkommen auf der neuen Homepage der Pfarreimusik Wünnewil-Flamatt!</h1>
<br /><br />
<p><img class="imagefloatrechts" src="images/titelseite.jpg" alt="" width="300" height="225" border="0"/>
Schon seit einiger Zeit stand das Thema im Raum, "einmal" eine neue Homepage für die Pfarreimusik zu erstellen. Bald einmal war allerdings klar, dass dies kein
Sonntagsnachmittags-Projekt geben wird. Die Tage zogen ins Land, nach ihnen die Wochen, Monate, ja gar Jahre...<br/>
<br/>
Heute aber, gerade rechtzeitig zum Start der Saison 2009/2010 dürfen wir Ihnen, liebe Besucher, die neue Homepage der Pfarreimusik Wünnewil-Flamatt präsentieren!
Inhaltlich ist vieles beim Alten geblieben. Allerdings wurde die Seite von Grund auf neu gestaltet und konzipiert. Sie entspricht damit modernen Standards und ist
für uns einfacher zu unterhalten.
<br />
<h2>Was bedeutet das für Sie?</h2>
Hauptsächlich soll diese Homepage aber für unsere Besucher eine leichtere Bedienung und eine bessere Übersicht mit sich bringen. Wir wünschen deshalb viel Spass beim
erkunden der vielen interessanten Inhalte und Bilder. Für Kritik, Anregungen, Lob etc. steht wie gewohnt das <a href="gaestebuch/gaestebuch.php" class="text" target="_self">Gästebuch</a> zur Verfügung. Sollte es trotz den ausgiebigen Tests noch Fehler technischer Natur geben, kontaktieren Sie bitte direkt den <a href="ueber_uns/kontakt.php" class="text" target="_self">Webmaster</a>.</p>
<br /><br />
<h3>Hinweis</h3>
<p>Wir empfehlen zum betrachten der Seite den <a href="http://www.mozilla-europe.org/de/firefox/" class="text" target="_blank">Mozilla Firefox Browser</a> oder andere <a href= "http://www.w3.org/" class="text" target="_blank">W3C</a> konforme Browser wie <a href="http://www.opera.com/" class="text" target="_blank">Opera</a>, <a href="http://www.apple.com/de/safari/" class="text" target="_blank">Safari</a> oder <a href="http://www.google.com/chrome/?hl=de" class="text" target="_blank">Chrome</a>.
<br />
Zwar kann die Seite auch mit den verschiedenen Versionen des Microsoft Internet Explorers betrachtet werden. Leider funktioniert die Navigation mit diesem Browser aber (noch)
nicht wunschgemäss. Sämtliche Seiten sind aber trotzdem via Hauptmenü erreichbar. Vielen Dank für das Verständnis!</p>
</div>
</div>
<div id="footer">
Copyright © Pfarreimusik Wünnewil-Flamatt 2009 </div>
</body>
</html>
und mein CSS:
- Code: Alles auswählen
* { margin: 0; padding: 0; }
body
{
font: 15px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #1F1C1C;
background-image:url(../images/noten_hand.gif);
background-repeat: no-repeat;
background-position:bottom left;
background-attachment: fixed;
}
#head
{
margin: 30px auto 0px auto;
width: 900px;
height: 140px;
background-image:url(../include/head.gif);
}
#footer
{
margin: 0px auto 30px auto;
padding: 15px;
font: 90% arial, hevetica, sans-serif;
background-image: url(../include/footer.gif);
color: #FFFFFF;
text-align: center;
width: 870px;
height: 10px;
clear:both;
}
br {
line-height: 80%;
}
.mailto {
color: #000000;
padding-left: 20px;
background-image: url(../images/letter.gif);
background-position: center left;
background-repeat: no-repeat;
}
/*PDF-Links*/
a[href$=".pdf"] {
padding-left: 20px;
background-image: url(../images/pdf.gif);
background-position: center left;
background-repeat: no-repeat;
}
/*Links generell*/
a:link {
color: #FFFFFF;
font-style:italic;
}
a:visited {
color: #999999;
font-style:italic;
}
a:hover, a:active
{
color: #000000;
text-decoration: underline;
font-style:italic;
}
/*Links mit image*/
a:link.text {
color: #FFFFFF;
font-style:italic;
padding-left: 15px;
background-image: url(../images/link.gif);
background-position: center left;
background-repeat: no-repeat;
}
a:visited.text {
color: #999999;
font-style:italic;
padding-left: 15px;
background-image: url(../images/link.gif);
background-position: center left;
background-repeat: no-repeat;
}
a:hover.text, a:active.text
{
color: #000000;
text-decoration: underline;
font-style:italic;
padding-left: 15px;
background-image: url(../images/link.gif);
background-position: center left;
background-repeat: no-repeat;
}
/*Links Navi*/
a:link.navi {
color: #FFFFFF;
font-style: normal;
}
a:visited.navi {
color: #999999;
font-style: normal;
}
a:hover.navi, a:active.navi
{
color: #000000;
font-style: normal;
}
li {
list-style-type: none;
}
h1 {
color: #CCCCCC;
font: 220% Verdana Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 25px 0 10px 0;
}
h2
{
color: #FFFFFF;
font: 120% Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 20px 0 7px 0;
}
h3
{
color: #FFFFFF;
font: 106% Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 15px 0 5px 0;
}
#container
{
margin: 0em auto;
width: 876px;
color: #FFFFFF;
background-color:#3366cc;
border: 12px solid;
border-color: #0000FF;
min-height: 550px;
height: auto;
}
#contents
{
margin: 0px 100px 20px 30px;
padding: 20px;
width: 750px;
list-style-position: outside;
}
.imagefloatrechts
{
float: right;
padding : 3px;
border : 2px solid #0066cc;
margin : 0px -10px 15px 15px;
z-index: 2;
}
.imagefloatlinks
{
float: left;
padding : 3px;
border : 2px solid #0066cc;
margin : 0px 15px 15px -10px;
z-index: 2;
}
#linkespalte {
float: left;
padding: 5px;
margin: 5px;
width: 300px;
}
#rechtespalte {
float: right;
padding: 5px;
margin: 5px;
width: 300px;
}
#contents p
{
line-height: 130%;
margin: 0px 0px 5px 0px;
}
.clear {
clear: both;
}
/*Navigation*/
.container_navi {
margin: 0px auto 0px auto;
max-height: 0px;
width: 876px;
border: 12px solid #0000ff;
z-index:3;
}
ul#topnav {
margin: 12px 0 0 0 ;
padding: 0 0 0 38px;
float: left;
width: 838px;
position: relative;
top: -50px;/*--Set relative positioning on the unordered list itself - not on the list item--*/
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #3366cc;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
}
ul#topnav li a {
padding: 5px 10px;
display: block;
text-decoration: none;
color:#ffffff;
}
ul#topnav li:hover {
font-weight:bold;
border-top: 2px solid #ffffff;
border-bottom: 3px solid #ffffff;
}
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/
ul#topnav li span {
float: left;
padding: 10px 0;
position: absolute;
left: 0;
display: none; /*--Hide by default--*/
width: 876px;
font-weight: normal;
font-size: 100%;
}
ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover {
border-top: 1px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
/*Gästebuch-CSS*/
div.gb { margin: 0px 50px 20px 50px; padding: 0px; border: 1px solid #ffffff; line-height: 19px; }
div.gb-author { margin: 0px; padding: 1px 10px 1px 10px; border-bottom: 1px solid #ffffff; background: #0066CC; }
p.gb-author-left { margin: 0px; float: left; color: #ffffff;}
p.gb-author-right { margin: 0px; text-align: right; }
div.gb-entry { margin: 10px; padding: 0px; }
p.gb-browse { padding: 0px 50px 0px 50px; text-align: right; font-weight: bold; }
p.gb-admin-buttons { margin: 5px 0px 0px 0px; text-align: right; }
.caution { color: black; font-weight: bold; }
.small { font-size: 11px; line-height:16px; }
.comment { margin: 10px 0px 0px 0px; color: #808080; font-style: italic; }
.comments-th { padding: 5px; border: 1px solid #aaa; font-weight: bold; vertical-align: top; text-align: left; }
.comments-td { padding: 5px; border: 1px solid #aaa; vertical-align: top; text-align: left; }
.submit-td { padding: 5px; vertical-align: top; }
div.gb a:link {
color: #FFFFFF;
font-style: normal;
}
div.gb a:visited {
color: #999999;
font-style:italic;
}
div.gb a:hover, div.gb a:active {
color: #000000;
text-decoration: underline;
font-style:italic;
}
.small a:link {
color: #FFFFFF;
font-style: normal;
}
.small a:visited {
color: #999999;
font-style:italic;
}
.small a:hover, .small a:active {
color: #000000;
text-decoration: underline;
font-style:italic;
}
.gb-browse a:link {
color: #FFFFFF;
font-style: normal;
}
.gb-browse a:visited {
color: #999999;
font-style:italic;
}
.gb-browse a:hover, .gb-browse a:active {
color: #000000;
text-decoration: underline;
font-style:italic;
}
/*Lightbox 2.04 CSS*/
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Ich bin dankbar für jede Hilfe!
