XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   ie. Abstand über horizontaler Navi geht nicht weg. (http://xhtmlforum.de/showthread.php?t=43054)

tifi 20.11.2006 16:31

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>

CSS
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;}

OH man ganz schön viel (ich tip mal zu viel) aber ich lass mal alles stehen.:unsure:
Vielen Dank für eure Mühe.

vistahr 20.11.2006 22:32

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:

----------------------------------------------------------------------
CSS-Prolog - Welche (globalen) Definitionen sind wichtig und nützlich?
F: Wieso stimmt der Abstand da nicht? Wieso zeigt der IE das anders an als andere Browser?
A: Es ist sinnvoll am Anfang des CSS mit dem Universalselektor alle browserseitig unterschiedlichen Defaultabstände auf Null zu setzen:
Code:

* { margin: 0; padding: 0; }
----------------------------------------------------------------------
Für das Problem mit den Abständen.


Hast du eine Beispielseite wo man sich das Problem mit dem Hovereffekt mit dem IE mal anschauen könnte ?

tifi 21.11.2006 13:44

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)

heiko_rs 21.11.2006 14:25

Zitat:

Zitat von tifi (Beitrag 315252)
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;}

Klar, Selektoren per Komma trennen und px weglassen (geht beim Wert 0, wobei ich bei border "none" schreiben würde). Oder allgemein img border: none; zuweisen, und nur denen eine border geben, die eine bekommen sollen (je nachdem, was weniger CSS-Umfang bedeutet).

P.S.: Klassenbezeichnungen wie "fright" und "cleft" etc. sind etwas unglücklich gewählt ;)

vistahr 21.11.2006 15:14

Zitat:

Zitat von tifi (Beitrag 315252)
.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;}

Wenn du das ganze zusammenfasst wird die Liste ziemlich lang und wirklich übersichtlicher wird es dadurch auch nicht.

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.

tifi 21.11.2006 17:17

hallo,

habe meine (noch lang nicht fertige:roll:) 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???:oops: 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 :shock: . Zur Hilfe welche Div´s sind noch überflüssig?

Oh je. Viel zu lernen ich noch habe.


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:15 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019