|
|||
UL als Navigation (inline). Firefox zentriert die Links nicht
Hallo,
estrmal möchte ich mich kurz vorstellen. Ich bin neu hier im Forum und Anfänger in Sachen CSS. Derezeit beschäftige ich mich mit einem "Lernprojekt" um CSS anhand parktischer Arbeit erlernen zu können. Die Website mit der ich mich derzeit beschäftige soll eine Plattform für zwei hier in Leipzig ansäßige Bands werden. Das sind Freunde von mir, die mir erlaubt haben, mich auf ihrem Webspace ein bissl auszutoben XD. (später landet das ganze natürlich auf einer richtigen Domain) Jetzt zu meinem eigendlichen Problem. Ich habe auf der >Site< als Menü eine ungeordnete Liste benutzt, und diese mit entsprechenden Hintergrundbildern für Menü und Links versehen um einen dezenten 3D Effekt in der Navigation zu erzielen. Mein Problem ist nun, daß die Links im Firefox nicht mittig im Menü ausgerichtet werden und somit immer oben ein kleiner Rand im a:hover Modus bleibt. Das versaut zum einen den gewünschten Effekt und sieht zum andren richtig....bescheiden...aus. Als Hintergrundbild dient ein Bild, welches beide Zustände beinhaltet, aber im a:hover Modus um die Hälfte nach oben verschoben wird. Das der IE das ganze korrekt anzeigt und der Firefox nicht, bedeutet ja meist, daß der IE es fälschlicherweise richtig anzeigt. Wäre da nicht die Tatsache, daß es auch auf allen andren Browsern richtig (oder eher so wie gewünscht) dargestrellt wird. Getestet habe ich mit Opera, Netscape, IE und Firefox jeweils in allen Auflösungen von 800x600 bis 1280x1024. Momentan habe ich selber gar keinen Ansatzpunkt. Ich habe mit line-height und Schriftgrößen rumexperimentiert. Auch ein paar margins und paddings hab ich schon in allen Variationen rumgeschubst. In der Liste, den Links usw..Auch vertikal zentrierte Schriftausrichtung in Links, Liste und Menue führt zu nichts (hat keine Auswirkung). Was hab ich übersehen? Ich poste hier mal meine gesamte CSS Datei, eben weil ich nicht genau weis, wo genau der Wurm drin ist. Code:
* { margin: 0; padding: 0; } body { background-color:#444444; } #Hauptcontainer {position:relative; margin:0mm auto ; width:760px; } #Header {position:relative; height:150px; background-color:#545654; } #Header h1 {position:relative; margin:0px 70px 0px 50px; font-size:50pt; font-family:Bickham Script Pro Regular; letter-spacing:20px; color:#FCFEFC; } #MenueMain {position:relative; height:23px; background-color:#646664; background:url(../Grafiken/Navigation.gif) no-repeat 0 0; } a {background:url(../Grafiken/Navigation.gif) no-repeat 0 0;} a:hover { color:black; font-weight:bold; font-size:15pt; text-decoration:none; background-position: 0px -25px; } a:link { color:black; font-weight:bold; font-size:15pt; text-decoration:none; } a:visited { color:black; font-weight:bold; font-size:15pt; text-decoration:none; } #MenueMain ul { display:inline; list-style-type:none; margin:0; padding:0; } #MenueMain li {display:inline; list-style-type:none; } #MenueMain ul li a { margin:60px; padding:0; } #Menue {position:relative; height:23px; background-color:#646664; background:url(../Grafiken/Navigation.gif) no-repeat 0 0; } a {background:url(../Grafiken/Navigation.gif) no-repeat 0 0;} a:hover { color:black; font-weight:bold; font-size:15pt; text-decoration:none; background-position: 0px -25px; } a:link { color:black; font-weight:bold; font-size:15pt; text-decoration:none; } a:visited { color:black; font-weight:bold; font-size:15pt; text-decoration:none; } #Menue ul {display:inline; list-style-type:none; } #Menue li {display:inline; list-style-image:none; } #Menue ul li a { margin:30px; padding:0; } #Content {position:relative; border-style:solid; border-width:1px; background-color:#FFFFFF; border-color:#FFFFFF; } #Content p {margin:10px 100px 100px 100px; padding:20px 20px 20px 20px; line-height:150%; background-color:#F9F9F9; color:#616161; } #Content h1 {margin:50px 100px 40px 100px; color:#8D8765 } #Content h2 {margin:20px 100px 30px 100px; font-size:12pt; color:#444444; } #Mond {position:absolute; /*Grafiken*/ margin-top:-35mm; margin-left:155mm; } Geändert von meccs76 (25.10.2008 um 21:00 Uhr) |
Sponsored Links |
|
|||
Zitat:
Von welchen IE- und FF-Versionen sprichst du? Hast du mal einen Vergleichs-Screenshot?
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Zitat:
Ist zwar nur ne Kleinigkeit, aber ich möchte die Site für so viele Browser wie möglich optimieren, und irgendwie stöhrt mich das XD. Edit: ist für mich ein Zeichen, daß ich dennoch irgendwas falsch gemacht habe. Geändert von meccs76 (25.10.2008 um 21:49 Uhr) |
|
|||
Ich sehe nirgends so eine Linie.
Liegt vermutlich daran, dass ich in meinem FF 3.03 eine andere Default-Schrift eingestellt habe. Grundsätzlich: Wenn du Kontrolle über die Dimensionen von Elementen haben willst (und das willst du, wenn du so mit Hintergrundbildern arbeitest): Nimm Float, um deine Menüpunkte nebeneinander zu stellen. Weder mm noch pt sind geeignet für Bildschirmdarstellung. Nimm px und für Schriftgrößen am besten immer Prozent oder em, damit auch IE-Benutzer die Schrift ihren Bedürfnissen entsprechend skalieren können. Die Angaben, die du für deine Links machst, gelten für alle Links der Seite, nicht nur für die Navigation. Willst du das wirklich?
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (25.10.2008 um 21:48 Uhr) |
|
|||
Zitat:
Zitat:
|
|
|||
Zitat:
Es ist immer der Benutzer, der das letzte Wort über die Schriftart (und Größe!) hat. Zitat:
Informier dich über den Nachfahrenselektor.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Zitat:
Ach, ich Kloppi XD aber #Menue a {...} #Menue a:link, a:visited {...} #Menue a:hover {..} sollte Abhilfe schaffen, oder? Danke für den Tip. Würdest du mir das mit Float nochmal für Dummies erklären bitte? |
Sponsored Links |
|
|||
Fällt dir jetzt was auf?
Zitat:
Grundlagen zu Float im Allgemeinen findest du unter FAQ Punkt 2. Zu Navigationen im Speziellen in Heikos FAQ-Beitrag. Ansonsten brauchst du ein Buch, wenn du CSS lernen willst. Dieses Forum kann dir nicht die Grundlagen erklären.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
problem mit links im firefox | steve-x | CSS | 7 | 05.01.2009 21:07 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 15:29 |
Ul mit Sub-Ul Navigation macht Darstellungsprobleme im Opera | eRoZion | CSS | 17 | 16.09.2005 09:30 |
Probleme mit 3 spalten | luk | CSS | 3 | 08.06.2005 14:39 |
Navigation Links Hover | child | CSS | 3 | 25.02.2005 21:00 |