|
||||
Navigation umbauen für IE`s
Hallo,
auf folgender Seite die linke Navigation soll ich umbauen für nen Bekannten das sie auch im IE ohne Probleme klappt. Wer kan mir nen Tipp geben was ich umbauen/einbauen muss das es klappt? Im IE 7 verschiebt sich der Navigationspunkt unter dem der einen Flyout hat um einige Pixel nach unten, kann ja eigentlich nicht an "hasLayout" liegen da die Listen eine Höhe haben, ode rliege ich da falsch? Home Versuche mich schlau zu machen was es mit den Tabellen in den Conditional Comments auf sich hat bei dieser Navigation http://www.cssplay.co.uk/menus/flyoutt.html, ist ja vom Prinzip her das gleiche. Peter
__________________
Ich bin online Kleine Erklärung warum der DOCTYPE so wichtig ist Gute XHTML/CSS Einführung Geändert von Peter Klein (07.07.2008 um 19:30 Uhr) |
Sponsored Links |
|
||||
Erstmal solltest du die > > im XHTML ordentlich maskieren mit > > ... das kann ggfs. den Browser ein wenig irritieren.
Zitat:
Ist aber nicht so wirklich mein Favorit, da das extra Markup ist, das weder nicht gut, noch übersichtlich aussieht. Ich benutze da eher: http://htmldog.com/articles/suckerfish/dropdowns/
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
Sponsored Links |
|
||||
Was müsste ich denn in dem JavaScript ändern das es auch in ner vertikalen Version funktioniert? Da scheiter ich gerade.
|
|
||||
Das JS macht nichts, was das Horizontale oder Vertikale betrifft. Es emuliert nur :hover für den IE, indem es einem gewählten UL eine Klasse zuweist.
Wo die aufklappenden Menüs erscheinen sollen, musst du selbst im CSS festlegen.
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
||||
Ja das weiss ich.
Kann ich das JavaScript also bis auf die Änderung des ID-Namens übernehmen? Hatte ich eben getan und es klappte nicht. |
|
||||
Zitat:
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
||||
Ja ich kenne diese. Und werd mich auch daran halten
HAbe es jetz mal mit folgender Anleitung versucht: Barrierefreies und benutzerfreundliches Suckerfish Dropdown / Flyout-Menue - pfirsich-melba 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> <title>Startseite</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="mainstyle.css" /> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/optional/jq.cleanCSSanim.js" type="text/javascript"></script> <script src="js/optional/dimensions.js" type="text/javascript"></script> <script src="js/jq_dickerfisch_menue-c.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { //Funktion starten, wenn DOM-ready var samp = new DickerFisch('#left_nav',{ListType:'ul'}); }); </script> </head> <body> <div id="wrap"> <div id="header"> <h1>Rottweiler vom Wachberg</h1> </div><!--Ende header--> <ul id="topnav"> <li class="current"><a href="index.html">Startseite</a></li> <li class=""><a href="ueberuns.html">Über uns</a></li> <li class=""><a href="rasse.html">Rasse</a></li> <li class=""><a href="herkunft.html">Herkunft</a></li> <li class=""><a href="links.html">Links</a></li> <li class=""><a href="kontakt.html">Kontakt</a></li> <li class=""><a href="impressum.html">Impressum</a></li> </ul><!-- Ende topnav--> <div id="banner"> <p class="adkr"><span>Allgemeiner Deutscher Rottweiler Klub-Logo</span></p> <h2 class="banner_h">Schön das Sie vorbei kommen!</h2> </div><!-- Ende banner --> <div id="mid"> <div id="linke_seite"> <ul id="left_nav"> <li class="navlink"><a href="zwingeranlage.html">Zwingeranlage</a></li> <li class="navlink"><a href="#">Zuchttiere >></a> <ul> <li><a href="zuchttier_hexe.html">Hexe</a></li> <li><a href="zuchttier_dorle.html">Dorle</a></li> <li><a href="zuchttier_ebby.html">Ebby</a></li> </ul> </li> <li class="navlink"><a href="verkauf.html">Verkauf</a></li> <li class="navlink"><a href="ahnentafeln.html">Ahnentafeln</a></li> <li class="navlink"><a href="galerie.html">Galerie</a></li> <li class="navlink"><a href="planungwelpen.html">Planung/Welpen</a></li> <li class="navlink"><a href="nachwuchs.html">Nachwuchs</a></li> </ul><!-- Ende left_nav --> <h4>Kontaktdaten</h4> <p class="email">g.wilkniss@t-online.de</p> <p>Tel. 039484/747161</p> <p>Mob. 0152/06631178</p> <p>Fax. 039484/747162</p> </div><!--Ende linke_seite--> <div id="inhalt"> <p>Vor Über 20 Jahren eroberte der Rottweiler unser Herz! Seitdem sind wir begeisterte Züchter. Wir achten ganz besonders auf Schönheit und Leistung. Der Zwinger vom Wachberg blickt auf viele erfolgreiche Teilnahmen an zahlreichen Wettkämpfen und Austellungen zurück. Alle unsere Hunde sind sozial geprägt.</p> <p>Auf unserer Website erfahren Sie mehr<a href="ueber_uns.html"> über uns</a> , können sich einen kleinen Einblick über unsere <a href="zuchttiere.html">Zuchttiere </a>und unseren <a href="nachwuchs.html">Nachwuchs</a> verschaffen. Etwas zum Schmunzeln werden Sie in unserer <a href="welpen.html"> Welpengalerie</a> entdecken.</p> <p>Sollten Sie überdies noch Fragen haben, finden Sie<a href="kontakt.html"> hier </a> ein praktisches Kontaktformular zum Versenden einer Nachricht an uns. Alternativ können Sie uns telefonisch unter 039484/747161 und mobil 0152/06631178 Uhr erreichen. </p> <p>Viel Spaß beim Stöbern und Ausprobieren.</p> <br /> <h5>Bis bald bei uns, dem "Zwinger vom Wachberg" .</h5> </div><!--Ende inhalt--> </div><!-- Ende mid --> <div id="footer"> bla bla bla </div><!--Ende footer--> </div><!-- Ende wrap--> </body> </html> Code:
* { margin: 0; padding: 0; list-style-type: none; } body { background: url(bilder/bg.gif) repeat-x #242423; } a { text-decoration: none; } h2,h3,h4,h5,h6 { color: #fff; } h1 { display: none; } h4 { color: #db6307; margin: 10px 0 0 20px; font-weight: normal; } h5 { font-size: 110%; } #wrap { background: #181819; width: 970px; margin: 0 auto; border-right: 1px solid #db6307; border-left: 1px solid #db6307; clear: both; } #header { background: url(bilder/logo.jpg) no-repeat; height: 250px; width: 970px; } /*Navigation horizontal*/ #topnav { text-align: center; background: url(bildernavigation/pro_four0.gif) repeat-x; width: 870px; height: 35px; padding: 0 0 0 100px; font-family: Arial, sans-serif; font-size: 80%; clear: both; } #topnav li { height: 35px; font-weight: bold; float: left; } #topnav li a { float: left; display: block; text-decoration: none; color: #393838; height: 27px; padding: 8px 22px 0 22px; margin: 0 1px; } #topnav li.current a, #topnav li a:hover { background: url(bildernavigation/pro_four_neu.gif) repeat-x; display: block; text-decoration: none;color: #393838; height: 25px; padding: 6px 20px 0 20px; border: 2px solid #d32f2f; } /*Banner*/ #banner { clear: both; padding: 0 0 0 300px; height: 140px; } .banner_h { font-family: Georgia, serif; font-weight: normal; font-style: italic; color: #fff; padding: 55px 0 0 0; } .adkr { float:right; background: url(bilder/adrk_logo.png) no-repeat; width: 127px; height: 140px; } #banner p span { visibility: hidden; } /*Mid*/ #mid { clear: both; } /*Linke Spalte*/ #linke_seite { width: 250px; float: left; margin: 0 0 30px 0; } #linke_seite p { margin: 10px 0 10px 20px; color: #abaa89; } /*Navigation vertikal*/ #left_nav { color: #393838; width: 155px; text-align: center; font-family: Arial, sans-serif; font-size: 80%; margin: 0 0 40px 20px; } #left_nav li { position: relative; background: url(bildernavigation/pro_four0.gif) repeat-x; height: 35px; margin: 5px 0 0 0; font-weight: bold; } #left_nav li a { display: block; text-decoration: none; color: #393838; height: 29px; padding: 8px 0 0 0; } #left_nav li .current a, #left_nav li a:hover { display: block; background: url(bildernavigation/pro_four_neu.gif) repeat-x; text-decoration: none; border: 2px solid #d32f2f; color: #393838; height: 25px; padding: 6px 0 0 0; } #left_nav li ul { position: absolute; display: none; width: 150px; } #left_nav li:hover ul { display: block; left: 155px; top: -5px; width: 100px; } #left_nav li ul li { display: block; margin-left: 5px; } /*Inhaltsbereich*/ #inhalt { margin: 0 0 0 250px; width: 550px; padding: 0 100px 20px 50px; color: #abaa89; font-size: 100%; font-family: Georgia, serif; font-weight: normal; } #inhalt a { color: #db6307; } #inhalt p { margin: 0 0 15px 0 ; } #footer { width: 970px; background: #db6307; margin: 30px 0 0 0; padding-top: 3px; padding-bottom: 3px; text-align: center; clear: both; } /*KLASSEN*/ .email { margin: 10px 0 0 20px; color: #abaa89; font-weight: bold; } .unserbild { height: 350px; background: url(bilder/ueber_uns.png) no-repeat; } .zwingerbild { height: 350px; background: url(bilder/zwingeranlage_logo.png) no-repeat; } .keinewelpen { height: 330px; background: url(bilder/keine_welpen.jpg) no-repeat; } .keinewelpen span, .zwingerbild span, .unserbild span { visibility: hidden; } .welpenbilder span{ visibility: hidden; } /*Tabelle für Links*/ #linktabelle { width: 550px; border: 1px solid #db6307; } #linktabelle thead { background: #db6307; text-align: left; color: #000; } #linktabelle a { font-weight: bold; color: #abaa89; display: block; padding: 8px; text-decoration: underline; } #linktabelle a:hover { color: #abaa89; text-decoration: underline; background: #db6307; } #lieblinks { padding-left: 2px; width: 278px; } #befr-links { padding-left: 2px; width: 118px; } #empf { padding-left: 2px; width: 98px; } .hell { background-color: #666; } .adresse { width: 280px; } .freundeslink { width: 180px; } .empfehung { width: 40px; } /*Kontaktliste*/ #kontaktliste { width: 500px; border: 1px solid #db6307; } .left { float: left; } .right { float: right; } |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 17:20 |
Problem mit FlyOut Menu im IE7 | quarki69 | CSS | 5 | 15.03.2010 16:46 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |
Container mit 2 Container darin -> Hintergrund anzeigen | bendar | CSS | 4 | 05.04.2005 19:18 |