|
|||
ie. Abstand über horizontaler Navi geht nicht weg.
Hey alle zusammen.
Auch wenn die Frage in ähnlicher Form bestimmt schon tausendmal gestellt wurde hoffe ich trotdem auf eure Hilfe bei meinem Problem. Und zwar habe ich eine horizontale Navigation mit hovereffekt gebaut. Funktioniert auch super in opera, firefox u. Mozilla nur mein Freund der Internetexplorer hat da noch etwas Probleme (bzw. ich Probleme mit ihm). Zum einen ist über der Navigation ein ca. 5px großer Abstand den ich einfach nicht wegbekomme. Zum anderen sollen die Bilder der einzellnen Buttons beim mausüberfahren ausgetauscht werden was aber im ie nicht geht. Unabhängig davon möchte ich die vielen gleichen Angaben zusammenfassen, wie muß ich das dann schreiben. HTML Code:
</head> <body> <div class="container"> <img class="head" src="bilder/head.jpg"> /*zw. dem Bild und der Navi befindet sich der Abstand*/ <div class="navi"> <div class="fleft"><a href="#" class="home"><img src="bilder/home_link.gif" alt="startseite"></a></div> <div class="fleft"><a href="#" class="verein"><img src="bilder/verein_link.gif" alt="verein"></a></div> <div class="fleft"><a href="#" class="mitglieder"><img src="bilder/mitglieder_link.gif" alt="bilder"></a></div> <div class="fleft"><a href="#" class="termine"><img src="bilder/termine_link.gif" alt="termine"></a></div> <div class="fleft"><a href="#" class="fotos"><img src="bilder/fotos_link.gif" alt="fotos"></a></div> <div class="fleft"><a href="#" class="gaeste"><img src="bilder/gaeste_link.gif" alt="gaeste"></a></div> <div class="fleft"><a href="#" class="links"><img src="bilder/links_link.gif" alt="links"></a></div> </div> /*habe den restlichen Code mal gelassen falls der Fehler woanders steckt*/ <div class="cleft"> <div class="main" style="background-image: url(bilder/linien.gif); background-repeat: no-repeat;"> <div class="fright"> <div class="spalterechts"><img src="bilder/hund_home.jpg"></div> </div> div class="spaltelinks"> <h1>Wilkommen beim<br>Verein für Deutsche Schäferhunde (SV) e.V.</h1> <h1>ORTSGRUPPE ROTH e.V.</h1> <img src="bilder/news.gif"> <div class="scroll"> <p><span class="farbe">10.10.2006 </span><a class="text" href="#">irgendwelche News</a></p> <p><span class="farbe">10.10.2006 </span><a class="text" href="#">irgendwelche News</a></p> <p><span class="farbe">10.10.2006 </span><a class="text" href="#">irgendwelche News</a></p> <p><span class="farbe">10.10.2006 </span><a class="text" href="#">irgendwelche News</a></p> <p><span class="farbe">10.10.2006 </span><a class="text" href="#">irgendwelche News</a></p> <p><span class="farbe">10.10.2006 </span><a class="text" href="#">irgendwelche News</a></p> <p><span class="farbe">10.10.2006 </span><a class="text" href="#">irgendwelche News</a></p> </div> </div> </div> <div class="cright"> <div class="unten"> <div class="fleft"> <div class="counter">00000000123 </div> </div> <a class="link" href="#"><img class="bild" src="bilder/pfeil_links.gif"></a> <a class="link" href="#"><img class="bild" src="bilder/brief.gif"></a><a class="link" href="#"><img class="bild" src="bilder/pfeil_rechts.gif"></a> <a class="link" href="#"><img class="impressum"src="bilder/impressum_text.gif"></a> </div> </div> </div> </body> </html> Code:
body {background-color: #999999; text-align: center;} /*schließt komplette Seite ein*/ .container {width: 820px; height: 690px; margin-left: auto; margin-right: auto; background-color: #999999; padding: 0; border: 2px solid #000000; text-align: left;} .head img {margin: 0; padding: 0;} /*Angaben zur Ausrichtung von Objekten*/ .fleft {float: left; margin: 0; padding: 0;} .cleft {clear: left;} .fright {float: right; margin: 0; padding: 0;} .cright {clear: right;} /*Navigation*/ a.home:link {display: block; background-image: url(../bilder/home_hover.gif); background-repeat: no-repeat; height:30px; width: 117px;} a.verein:link{display: block; background-image: url(../bilder/verein_hover.gif); background-repeat: no-repeat; height:30px; width: 117px;} a.mitglieder:link{display: block; background-image: url(../bilder/mitglieder_hover.gif); background-repeat: no-repeat; height:30px; width: 117px; } a.termine:link{display: block; background-image: url(../bilder/termine_hover.gif); background-repeat: no-repeat; height:30px; width: 117px;} a.fotos:link{display: block; background-image: url(../bilder/fotos_hover.gif); background-repeat: no-repeat; height:30px; width: 117px; } a.gaeste:link{display: block; background-image: url(../bilder/gaeste_hover.gif); background-repeat: no-repeat; height:30px; width: 117px;} a.links:link{display: block; background-image: url(../bilder/links_hover.gif); background-repeat: no-repeat; height:30px; width: 117px;} .home img {border: 0px;} .verein img {border: 0px;} .mitglieder img {border: 0px;} .termine img {border: 0px;} .fotos img {border: 0px;} .gaeste img {border: 0px;} .links img {border: 0px;} a.home:hover img {display: none; border: 0} a.verein:hover img {display: none; border: 0} a.mitglieder:hover img {display: none; border: 0} a.termine:hover img {display: none; border: 0} a.fotos:hover img {display: none; border: 0} a.gaeste:hover img {display: none; border: 0} a.links:hover img {display: none; border: 0} /*Veränderbarer Hauptteil*/ .main {width: 720px; height: 450px; overflow: scroll; background-color: #ffffff; margin: 0; padding-left:100px; padding-top: 25px;} /*Eigenschaften von Bildern in rechter Spalte*/ .spalterechts img {margin-top: 60px;} /*Hautteil linke u. rechte Seite*/ .spalterechts {width: 345px; margin: 0; padding: 0; border: 2px solid #000000; text-align: right;} .spaltelinks {width: 345px; margin: 0; padding: 0; border: 2px solid #000000; text-align: left;} /*Texteigenschaften*/ h1 {font-size: 18px; font-family: HeArial, sans-serif; margin-bottom: 25px; margin-top: 0;} h2 {font-size: 14px; font-family: Helvetica, Arial, sans-serif;} p {font-size: 14px; font-family: Helvetica, Arial, sans-serif; margin: 0; line-height: 22px;} .farbe {font-size: 14px; font-family: Helvetica, Arial, sans-serif; margin: 0; color: #ff0000;} /*Verlinkungen*/ /*Verlinkung normaler Text*/ a.text:link {font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: #000000; text-decoration: none;} a.text:visited {font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: #cccccc; text-decoration: none;} a.text:hover {font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: #999999; text-decoration: none;} /*Verlinkung Bilder*/ a.bild img {display: block; text-decoration: none; border: 0;} /*Aufzählungen*/ ul {list-style-image: url(../bilder/punkt.gif); list-style-type: disc;} li {margin: 10px;} a.li:link {font-size: 18px; font-weight: 700; text-decoration: none; font-family: Helvetica, Arial, sans-serif; color: #000;} a.li:visited {font-size: 18px; font-weight: 700; text-decoration: none; font-family: Helvetica, Arial, sans-serif; color: #ccc;} a.li:hover {font-size: 18px; font-weight: 700; text-decoration: none; font-family: Helvetica, Arial, sans-serif; color: #999;} /*Fußbereich*/ .unten {background-image: url(../bilder/unten.gif); background-repeat: no-repeat; width: 820px; height: 105px; position: absolute; top: 595px; margin: 0; padding-left: 15px; padding-top: 50px;} .bild {margin-left: 30px; } .impressum {margin-left: 240px;} .counter {background-image: url(../bilder/counter.gif); background-repeat: no-repeat; padding: 3px; margin-right: 140px; width: 130px; height: 45px; padding-left: 20px; padding-top: 14px;} a.link img {border: 0;} a.link:link {text-decoration: none; } a.link:visited {text-decoration: none; } a.link:hover {text-decoration: none; } /*Spezielle Eigenschaften von verschiedenen Seiten*/ /*Scrollbarer Bereich*/ .scroll {width: 250px; height: 300px; overflow: scroll; border: 1px solid #999999; background-color: #ffffff; padding: 5px; margin-top: 5px;} .start a:link {margin: auto; width: 192px; height: 446px; text-decoration: none;} .start img { border: 0;} Vielen Dank für eure Mühe. |
Sponsored Links |
|
||||
Erstmal vorweg:
yatil!: Der Div-Wahnsinn und versuch mal anstatt der ganzen div Elemente, eine Liste zu benutzen. Die wird dir das Leben wohl um einiges erleichtern. (meinst du das mit zusammenfassen?) Zitat:
Hast du eine Beispielseite wo man sich das Problem mit dem Hovereffekt mit dem IE mal anschauen könnte ?
__________________
Stolpern fördert |
Sponsored Links |
|
|||
hallo visthar,
erstmal vielen Dank für die Antwort (auch für die Mühe sich durch meinen krassen Code zu wühlen) Also zu der Sache mit den Div`s. Habe eigentlich versucht mich mit Div´s zurückzuhalten (weil ich die Problematik kenne) aber scheinbar doch viel zu viele verwendet (bei genaueren hinsehen ist es wirklich krass). Werde mal versuchen die Navi als Liste zu bauen (vieleicht klärt sich das dann mit dem hovern und den Abstand auch) und schauen wo ich noch ein paar Div´s entfernen kann . Das war zwar nicht das was ich mit zusammenfassen gemeint hatte aber auch ein sehr hilfreicher Ansatz. Mit zusammenfassen meinte ich z.B .home img {border: 0px;} .verein img {border: 0px;} .mitglieder img {border: 0px;} .termine img {border: 0px;} .fotos img {border: 0px;} .gaeste img {border: 0px;} .links img {border: 0px;} ich dachte man kann das irgendwie verkürzen. Habe das mit * {padding: 0; margin: 0;} probiert, geht leider nicht. Eine Beispielseite habe ich leider noch nicht. Meine Seite liegt auf externen Rechner zum bearbeiten (falls ich aber keine Fortschritte mache werde ich sie probehalber mal ins Netz stellen, aber jetzt erstmal weiter Schritt für Schritt learning bei doing zur fertigen Website) |
|
||||
Zitat:
Du müsstest eigentlich auch den universal Selektor benutzen können, um das ganze übersichtlicher zu gestalten. * img{border:none;} Ob das so funktioniert oder zulässig ist, kann ich nicht garantieren Da ich nicht sagen kann, ob er auch für Klassen benutzt werden kann.
__________________
Stolpern fördert |
|
|||
hallo,
habe meine (noch lang nicht fertige) Seite zum besseren Verständnis mal reingestellt sv og roth Also es geht um den Abstand über der Navigationsleiste und dem Hover Effekt bei den Bilder der Navi (wenn ich mit der Maus darüber fahre soll ein anderer button erscheinen, wie gesagt klappt bei allen nur beim ie nicht) Die zwei "Spalten" in der Mitte (zur Verdeutlichung mit schwarzen Rahmen versehen) habe ich so angeordnet, weil derjenige für den ich die Seite mache den Inhalt selbst eintragen will, dachte das wäre so die beste Lösung. img {border: none;} habe ich geändert. Nochmal zu meinen unglücklich gewählten Namen. Nicht gut??? Warum? Dachte man schreibt so das man erkennt worum es geht, Falsch gedacht? Zwecks der div Sache würde die Navi als Liste umbauen (jedenfalls versuchen) und und ja und.... ich habe keine Ahnung . Zur Hilfe welche Div´s sind noch überflüssig? Oh je. Viel zu lernen ich noch habe. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten | mazzo | CSS | 10 | 05.04.2012 18:32 |
grafische Navigation horizontal zentrieren, klappt nicht | lila_3 | CSS | 4 | 30.11.2010 11:25 |
Boxen von Navigation und Logo sind zu weit auseinander | lila_3 | CSS | 2 | 04.09.2009 00:28 |
IE verschiebt Navi Menü | macmensa | CSS | 7 | 17.08.2009 17:45 |
Probleme mit horizontaler Navi rechts | lila_3 | CSS | 2 | 14.07.2009 22:36 |