|
|||
Navigation rutscht heraus
Hallo,
meine komplette Navigation rutscht im IE 7 aus dem Container heraus. Habe auch speziell für den IE 7 rumexperimentiert leider alles ohhe Erfolg. Hoffe mir kann da jemadn helfen Link CSS - Navigation Code:
/*NAVIGATION*/ * {margin:0; padding:0;} #menu { float:left; list-style:none; background-image:url("../img/head.jpg"); background-repeat:x-repeat; width:850px; height:331px; margin:0 0 0 55px; } #menu span { display: none; position: absolute; margin-left:-150px; } #menu a { display: block; text-indent: -900%; position: absolute; outline: none; } #menu a:hover { background-position: left bottom; } #menu a:hover span{ display: block; } #menu .home {float:left; width: 87px; height: 22px; background: url(../img/home.gif) no-repeat; margin:200px 0 0 100px; } #menu .home span {float:left; width: 113px; height: 50px; background: url(../img/home_hover.gif) no-repeat; margin:-36px 0 0 -13px; } #menu .warum {float:left; width: 485px; height: 49px; background: url(../img/warum.gif) no-repeat; margin:220px 0 0 150px; } #menu .warum span {float:left; width: 485px; height: 49px; background: url(../img/warum_hover.gif) no-repeat; margin:-19px 0 0 0px; } #menu .referenz {float:left; width: 216px; height: 45px; background: url(../img/referenzen.gif) no-repeat; margin:140px 0 0 250px; } #menu .referenz span {float:left; width: 216px; height: 45px; background: url(../img/referenzen_hover.gif) no-repeat; margin:-19px 0 0 0px; } #menu .kontakt {float:left; width: 145px; height: 37px; background: url(../img/kontakt.gif) no-repeat; margin:180px 0 0 500px; } #menu .kontakt span {float:left; width: 145px; height: 37px; background: url(../img/kontakt_hover.gif) no-repeat; margin:-19px 0 0 0px; } #menu .leistungen {float:left; width: 194px; height: 50px; background: url(../img/leistungen.gif) no-repeat; margin:120px 0 0 480px; } #menu .leistungen span {float:left; width: 194px; height:50px; background: url(../img/leistungen_hover.gif) no-repeat; margin:-19px 0 0 0px; } #menu .impressum {float:left; width: 141px; height: 33px; background: url(../img/imp.gif) no-repeat; margin:270px 0 0 360px; } #menu .impressum span {float:left; width: 141px; height: 33px; background: url(../img/imp_hover.gif) no-repeat; margin:-19px 0 0 0px; } Code:
* {margin:0; padding:0; } body { text-align:center; font-family:Arial; font-size:100.01%; background-color:#f5f1dc; } #wrapper { margin:0 auto; background-image:url("../img/bg.jpg"); background-repeat:x-repeat; width:960px; min-height:300px; padding-bottom:10px; } #wrapper:after { content:"."; display:block; clear:both; font-size:0; overflow:hidden; height:.1px; visibility:hidden; } #content { width:530px; min-height:250px; margin-left:45px; } #content h2 { text-align:left; color:#444343; font-size:18px; width:370px; min-height:30px; margin:10px 0 0 55px; padding-top:13px; } #content p { text-align:left; color:#161e80; line-height:26px; width:370px; min-height:30px; margin:10px 0 0 55px; } #content_top { background-image:url("../img/content_top.png"); background-repeat:no-repeat; width:500px; height:176px; margin:20px 0 0 25px; } #content_mid { background-image:url("../img/content_mid.png"); background-repeat:y-repeat; width:500px; min-height:113px; margin:-10px 0 0 25px; } #content_bot { background-image:url("../img/content_bot.png"); background-repeat:no-repeat; width:500px; height:113px; margin:0px 0 0 25px; } #content_bot ul { text-align:left; padding-top:10px; font-size:12px; } #ul1 {float:left; margin-left:55px; width:120px; } #ul2 { float:left; margin-left:10px; width:160px; } #ul3 { float:left; margin-left:0px; width:140px; } #content_bot li { list-style:none; } #content_bot a { text-decoration:none; color:#939395; } #content_bot a:hover { color:#636366; } #content_bot a:aktive { color:#a0101d; } #head { width:800px; height:331px; } /*CONTENT RIGHT*/ #content_right { float:right; margin:23px 80px 0 0; width:270px; min-height:400px; } #right_top { background-image:url("../img/right_top.png"); background-repeat:no-repeat; width:270px; height:44px; margin:0px 0 0 0px; } #right_mid { background-image:url("../img/right_mid.png"); background-repeat:y-repeat; width:270px; height:216px; margin:0px 0 0 0px; } .ref_img { float:left; background-image:url("../img/unger_img.png"); background-repeat:no-repeat; margin:10px 0 0 30px; width:80px; height:80px; } .ref_img2 { float:left; background-image:url("../img/schmiedeeisen_img.png"); background-repeat:no-repeat; margin:10px 0 0 30px; width:80px; height:80px; } #right_mid p { float:left; text-align:left; margin:10px 0 0 10px; width:138px; height:100px; } #right_mid p a { color:#a53038; } #right_mid p a:hover { color:#8394de; } #right_bot { background-image:url("../img/right_bot.png"); background-repeat:no-repeat; width:270px; height:20px; margin:0px 0 0 0px; } #w3c_paper { float:right; background-image:url("../img/w3c_paper.png"); background-repeat:no-repeat; margin:43px 0px 0 0; width:269px; height:210px; min-height:400px; } #w3c_paper p { float:left; background-image:url("../img/p_bg.png"); text-align:left; line-height:20px; margin:42px 0 0 120px; width:138px; height:150px; } #w3c_paper p a { color:#a53038; } #w3c_paper p a:hover { color:#8394de; } /*LEISTUNGEN*/ .link_lst {color:#a53038; } .link_lst:hover {color:#8394de; } #content .lst_ul { text-align:left; margin:0px 0 0 60px; padding:20px 0 20px 0; width:480px; } #content .lst_ul li { list-style:none; margin-top:3px; } .haken { width:15px; height:15px; margin-right:10px;} /*REFERENZEN*/ .referenz_box { float:left; width:480px; } #last_box { margin-bottom:30px; } .img_link { float:left; margin:20px 0 0 50px; border:0; width:100px; height:90px; } .link_text { float:left; width:280px !important; margin:30px 0 0 30px !important; min-height:30px; } /*KONTAKT*/ #content .fieldbox { text-align:left; width:330px; min-height:60px; margin-left:60px; } #name {margin-left:30px;} #vname {margin-left:6px;} #betreff {margin-left:25px;} #mail {margin-left:46px;} #text {margin-left:90px; margin-top:-22px;} #anliegen {float:left; } Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> <head> <link rel="shortcut icon" href="img/icon.ico" type="image/x-icon" /> <title>Your-Dreamworks - Webdesign aus Hoyerswerda</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="Your-dreamworks ist eine Werbeagentur im Bereich Webdesign aus Hoyerswerda." /> <meta name="keywords" content="Startseite, Webdesigner, Webagentur, Suchmaschinenoptimierung, Webdesign, Web Design, HTML, PHP-Programmierer, PHP, Webtagebuch, Webblog, XHTML, Hoyerswerda, CMS, CSS, W3C valide" /> <meta name="language" content="de" /> <meta name="robots" content="index,follow" /> <meta name="author" content="Nils Hoffmann" /> <meta name="abstract" content="Your dreamworks ist eine junge dynamische Werbeagentur aus Hoyerswerda bei Dresden das sich auf Webdesign/ -entwicklung spezialisiert hat." /> <meta name="copyright" content="Nils Hoffmann" /> <meta name="designer" content="Nils Hoffmann" /> <meta name="publisher" content="www.your-dreamworks.de" /> <meta name="revisit-After" content="5 days" /> <meta name="distribution" content="global" /> <style type="text/css"> @import url("css/content.css"); @import url("css/navigation.css"); </style> </head> <body> <div id="wrapper"> <div id="head"> <ul id="menu"> <li><a href="index.php" class="home">Startseite<span></span></a></li> <li><a href="warum_modernes_webdesign.php" class="warum">Warum modernes Webdesign?<span></span></a></li> <li><a href="referenzen.php" class="referenz">Referenzen<span></span></a></li> <li><a href="kontakt.php" class="kontakt">Kontakt<span></span></a></li> <li><a href="leistungen.php" class="leistungen">Leistungen<span></span></a></li> <li><a href="impressum.php" class="impressum">Impressum<span></span></a></li> </ul> </div> <div id="content_right"> <div id="right_top"></div> <div id="right_mid"> <div class="ref_img"></div> <p> <a href="http://unger-holzcreation.de/">Holzcreation Unger</a><br /> Ihre Möbeltischlerei aus Schwarzkollm </p> <div class="ref_img2"></div> <p> <a href="http://schmiedeeisen-shop.de/">Schmiedeeisen Shop</a><br /> Schmiedeeiserne Zaunbauteile </p> </div> <div id="w3c_paper"> <p>Your Dreamworks versucht die strikten Vorgaben des <a href="http://validator.w3.org/">W3C</a> umzusetzen und präsentiert Sie <a href="suchmaschinenoptimierung.php">Suchmaschinen- freundlich</a> im Internet.</p> </div> <div id="right_bot"></div> </div> <div id="content"> <div id="content_top"></div> <div id="content_mid"> <h2>Betreff: Was ist your dreamworks?</h2> <p> <i>Wer aufhört zu werben, um Geld zu sparen, kann ebenso seine Uhr anhalten, um Zeit zu sparen.</i><br /><br /> Your dreamworks ist eine junge, dynamische und moderne Werbeagentur aus Hoyerswerda. Vom Konzept über die Realisation, Logo-Design bis hin zur Bildoptimierung erhalten Sie alles aus einer Hand. Dank dieser Leistungen sichern Sie sich einen professionellen und vor allem zeitgemäßen Auftritt Ihrer Seite im Internet.<br /><br /> <strong>Ihre Website ist Ihr Aushängeschild im Internet!</strong> <br /><br /> Your dreamworks präsentiert Sie professionell, anwenderfreundlich und zeitgerecht im Internet und verschafft Ihnen einen Vorsprung gegenüber Ihrer Konkurrenz. </p> <p> <a href="#wrapper" class="link_lst">nach oben</a> </p> </div> <div id="content_bot"> <ul id="ul1"> <li><a href="index.php">>> Startseite</a></li> <li><a href="warum_modernes_webdesign.php">>> Warum modernes Webdesign?</a></li> <li><a href="kontakt.php">>> Kontakt</a></li> <li><a href="leistungen.php">>> Leistungen</a></li> <li><a href="impressum.php">>> Impressum</a></li> </ul> <ul id="ul2"> <li><a href="referenzen.php"><strong>>> Neuste Referenzen</strong></a></li> <li><a href="http://unger-holzcreation.de/">>> Holzcreation Unger</a><br /></li> <li><a href="http://schmiedeeisen-shop.de/">>> Schmiedeeisen Shop</a><br /></li> <li><a href="referenzen.php">>> uvm.</a></li> </ul> <ul id="ul3"> <li><a href="#"><strong>Partnerlink`s</strong></a></li> <li><a href="#">>> Link 1</a></li> <li><a href="#">>> Link 1</a></li> <li><a href="#">>> Link 1</a></li> </ul> </div> </div> </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-10061099-1"); pageTracker._trackPageview(); } catch(err) {}</script> </body> </html>
__________________
Die Erinnerung ist das einzige Paradies aus dem wir nicht vertrieben werden können. |
Sponsored Links |
|
|||
Oh,
habe ich sofort behoben. Daran liegts aber leider auch nicht. Wäre auch zu schön gewesen
__________________
Die Erinnerung ist das einzige Paradies aus dem wir nicht vertrieben werden können. |
|
||||
Noch ein Punkt fällt mir auf: wo ist der Bezug für pos.absolute (relative) im #menu?
Teste eventuell mal mit firebug lite im IE. Manfred |
|
||||
Der ganze #head ist etwas durch den Wind.
#head und #menu brauchen kein float, margin oder width. Nur #menu bräuchte height, background und position: relative. Siehe Little Boxes containing block Dann die li mit position: absolut; in #menu positionieren.
__________________
MfG Jens Geändert von plastiko (04.01.2011 um 00:29 Uhr) |
|
|||
Vielen Dank schon mal.
Kann leider erst am Abend probieren. Werde mir das Buch wohl auch mal zulegen müssen. Sehr gut erklärt ! Eine Frage noch, kann ich auch die einzelnen class pos:rel; ? Sozusagen Die einzelnen img die ich jetzt alle gefloatet habe. Frage nur weil plastiko das <b>li</b> so betont hat Kann z.B. <a href class="home" behalten oder sollte li class="home" bekommen ? Vielen Dank.
__________________
Die Erinnerung ist das einzige Paradies aus dem wir nicht vertrieben werden können. Geändert von Muamicus (04.01.2011 um 12:23 Uhr) |
|
|||
OK, ich versuche es heute Abend umzusetzen.
Du dann <li class="img"> bekommt anstelle von a das pos:abs; ? So richtig verstanden?
__________________
Die Erinnerung ist das einzige Paradies aus dem wir nicht vertrieben werden können. |
Sponsored Links |
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 |