zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden ie. Abstand über horizontaler Navi geht nicht weg.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.11.2006, 16:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.08.2006
Beiträge: 16
tifi befindet sich auf einem aufstrebenden Ast
Standard 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.
Vielen Dank für eure Mühe.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.11.2006, 22:32
Benutzerbild von vistahr
vistahr{style:none;}
neuer user
 
Registriert seit: 23.10.2006
Ort: Hannover
Beiträge: 68
vistahr befindet sich auf einem aufstrebenden Ast
Standard

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 ?
__________________
Stolpern fördert
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.11.2006, 13:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.08.2006
Beiträge: 16
tifi befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #4 (permalink)  
Alt 21.11.2006, 14:25
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von tifi Beitrag anzeigen
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

Geändert von heiko_rs (21.11.2006 um 14:28 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 21.11.2006, 15:14
Benutzerbild von vistahr
vistahr{style:none;}
neuer user
 
Registriert seit: 23.10.2006
Ort: Hannover
Beiträge: 68
vistahr befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von tifi Beitrag anzeigen
.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.
__________________
Stolpern fördert
Mit Zitat antworten
  #6 (permalink)  
Alt 21.11.2006, 17:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.08.2006
Beiträge: 16
tifi befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 17:32
grafische Navigation horizontal zentrieren, klappt nicht lila_3 CSS 4 30.11.2010 10:25
Boxen von Navigation und Logo sind zu weit auseinander lila_3 CSS 2 03.09.2009 23:28
IE verschiebt Navi Menü macmensa CSS 7 17.08.2009 16:45
Probleme mit horizontaler Navi rechts lila_3 CSS 2 14.07.2009 21:36


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:41 Uhr.