|
|||
Problem mit overflow, Navigation verschoben...
Hallo!
Auf meiner Seite (Pfarreimusik Wünnewil-Flamatt) habe ich momentan zwei Probleme: 1. Die Navigation Der IE stellt die Navigation nicht so dar wie die Gekko-Browser. Woran könnte das liegen? Bzw. wie müsste eine entsprechende Browser-Weiche aussehen? 2. Overflow Auf der Seite Pfarreimusik-Wünnewil-Flamatt gibt es offenkundig ein Problem mit dem Overflow. Wie kriege ich die beiden boxen in den Inhalt? Hier der HTML-Code: HTML-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=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> <html> <body> <?php include ("../include/head.php"); ?> <?php include ("../include/navi.php"); ?> <div id="container"> <div id="contents"> <h1>Aktuelle Besetzungsliste</h1> <div id="linkespalte"> <h3>Direktion</h3> <li>Jacques Rossier</li> <br /> <li><i>Vizedirigenten:</i></li> <li>Hubert Schmutz</li> <li>Louis-Alexandre Yerly</li> <h3>Klarinette</h3> <li>Andrey Olivier</li> <li>Baumann Philippe</li> <li>Brülhart-Boschung Anita</li> <li>Lehmann Corinne</li> <li>Lehmann Ruth</li> <li>Poffet Muriel</li> <li>Roux Erna</li> <li>Spicher Ewald</li> <li>Schmutz-Schneuwly Daniela</li> <li>Weber-Aebischer Monika</li> <li>Zosso-Udry Andrea</li> <h3>Bassklarinette</h3> <li>Zollet Gertrud</li> <h3>Piccolo / Flöte</h3> <li>Freiburghaus Daniela</li> <li>Grossrieder Erwin (Piccolo)</li> <li>Grossrieder Eva</li> <li>Jenny Karin</li> <li>Roux Jeannine</li> <li>Schafer Jasmin</li> <li>Vonlanthen Samira (Piccolo)</li> <li>Zengaffinen Christa</li> <h3>Oboe</h3> <li>Roman Stampfli</li> <h3>Fagott</h3> <li>Pfander Stefanie</li> <li>Zollet Markus</li> <h3>Saxophon</h3> <li>Binz Jana (Alto)</li> <li>Brülhart Jan-Luca (Bariton)</li> <li>Maury Karin (Tenor)</li> <li>Schneuwly Anne (Alto)</li> <li>Schneuwly Silvia (Alto)</li> </div> <div id="rechtespalte"> <h3>Waldhorn</h3> <li>Buchs Manuel</li> <li>Fasel Judith</li> <li>Hug Edi</li> <li>Ledermann Monika</li> <li>Schafer Oswald</li> <h3>Trompete</h3> <li>Fanger Marco</li> <li>Jenni Hansueli</li> <li>Marti Erich</li> <li>Schafer Iwan</li> <li>Weber Clemens</li> <li>Weber Stefan</li> <h3>Tenorhorn</h3> <li>Aebischer Armin</li> <li>Lehmann Alois</li> <li>Perler Heinrich</li> <li>Riedo Andreas</li> <h3>Posaune</h3> <li>Perler Christoph</li> <li>Roux Gilber</li> <li>Wyler Lorenz</li> <h3>Tuba</h3> <li>Hayoz Josef</li> <li>Yerly Louis-Alexandre</li> <h3>Kontrabass</h3> <li>Rigolet-Neuhaus Claudia</li> <h3>Perkussion</h3> <li>Boschung Reto</li> <li>Grossrieder Jan</li> <li>Perler Alain</li> <li>Roux Dominique</li> <li>Schmutz Hubert</li> <li>Stampfli Simon</li> </div> </div> </div> <?php include ("../include/footer.php"); ?> </body> </html> Code:
* { 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; } /*#7f4000*/ #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; } 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; } a:link.navi { color: #FFFFFF; } a:visited.navi { color: #999999; } a[href$=".pdf"] { padding-left: 20px; background-image: url(../images/pdf.gif); background-position: center left; background-repeat: no-repeat; } a:hover.navi, a:active.navi { color: #000000; } 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; } .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; } /*Navigation*/ .container_navi { margin: 0px auto 0px auto; 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; list-style: none; 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; z-index:2; } 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; } 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; } /*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; } Gruss buemplizer |
Sponsored Links |
|
||||
Unabhängig vom konkreten Problem: Deine Navi hat ein falsches Konzept - auch jede Subnavi muss eine ul sein:
Code:
<li><a href="#">text</a> <ul> <li>... Zitat:
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
Sponsored Links |
|
|||
hallo
danke für die schnelle antwort. die navi ist nicht meine erfindung, sondern von hier: Horizontal Sub-nav with CSS & jQuery - Subnavigation Tutorial - CSS Tutorial - jQuery Tutorial funktioniert einwandfrei ohne subnav-ul-tags im ie... hier der korrekte link zum overflow-problem: Pfarreimusik Wünnewil-Flamatt danke für die unterstützung! gruss buemplizer |
|
||||
Es ist allerdings keine gute Idee, dem IE < 7 zuliebe die Semantik zum Teufel zu jagen Man bekommt DD-Menüs auch im IE < 7 zum Laufen, sogar JS-frei - wobei ich persönlich diesen Aufwand nicht mehr betreibe (zumal mit jeder neuen IE-Generation das Risiko besteht, das ganze Menü überarbeiten zu müssen).
Ich bringe den IE < 7 folgendermaßen zum Anzeigen der Subnavi: Son of Suckerfish Dropdowns | HTML Dog (der Link, der per Hover die Subnavi erscheinen lässt, führt auf eine Seite, von der man ebenfalls zu allen Unterseiten kommt - das ist z.B. für User mit deakt. JS sehr wichtig). Zum zweiten Problem siehe FAQ 2.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
OK... Danke für den Hinweis, ich werde mir bei Gelegenheit einmal die Variante "Suckerfish" anschauen.
So wie es ausschaut, liegt es aber nicht an der Navigation an sich, weil die scheint ja zu funktionieren. Offenbar ist das Problem die Positionierung der div's... (sprich, die navi.php alleine funktionert einwandfrei im ie). Allerdings sehe ich beim besten Willen den Fehler in der Positionierung nicht :S Die FAQ2 habe ich gelesen, einiges ausprobiert, aber irgendwie bin ich zu blöde... Ich bin froh für weitere gratis-Tipps... Sorry für meine Dummheit |
|
|||
niemand?
vielleicht sieht jemand ja gerade das problem mit dem overflow. irgendwie scheint das mit dem float, bzw. clear zu tun zu haben. aber ich schnall einfach nicht, wo, bzw. welches div ich clearen soll, hat nichts geklappt... |
|
|||
das problem mit dem overflow konnte ich dank einem hinweis aus einem anderen forum lösen:
"leeres" div-tag mit dem style clear: both; nach dem #rechtespalte einfügen, schon funzt alles wie es soll bleibt noch das problem mit dem ie und der navi... wäre super, wenn mir auch hier jemand einen wertvollen tip geben könnte |
|
|||
OK, auch die Navigation sieht jetzt gut aus... das div habe ich einfach mit
Code:
max-height: 0px; was jetzt noch bleibt, die subnavi ist im ie nicht "erreichbar", sprich kann nicht geklickt werden, weil sie beim verlassen (mit der maus) der hauptnavi wieder verschwindet (die subnavi). weiss wer, woran das liegen könnte? habe mal etwas von einem white-space bug gehört, aber das hat irgendwie nicht gefruchtet... |
|
|||
Damit ich nicht extra einen neuen Thread eröffnen muss, komme ich noch einmal hier damit...
Es ist immer noch das selbe Thema: Die Navi sieht im IE jetzt zwar gut aus, aber ich habe immer noch das Problem, dass ich die Subnav nicht erreiche... Deshalb noch einmal die Frage an euch: Woran könnte das liegen? Bin wirklich dankbar um Hinweise, weil die Seite abgesehen von diesem Manko sonst eigentlich fertig ist... |
Sponsored Links |
|
|||
Cool, endlich eine Lösung gefunden
Ist hier zwar etwas ein monolog, aber trotzdem mal die Lösung, falls es jemand brauchen kann: Ich habe im CSS hier das Padding von 10px auf 8px geändert: Code:
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%; } |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Navigation Problem mit activem Button | clister | CSS | 2 | 19.02.2010 13:13 |
Div Container - Navigation verschoben | Azadeh | CSS | 4 | 07.09.2008 15:03 |
Overflow Problem Firefox / IE | SURE612 | CSS | 11 | 14.07.2006 15:40 |
Listenformatierung mit CSS Problem bei Navigation | loozy | CSS | 4 | 07.06.2006 15:03 |
Problem mit Navigation | AxlFoley | (X)HTML | 9 | 18.02.2005 23:07 |