XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   UL als Navigation (inline). Firefox zentriert die Links nicht (http://xhtmlforum.de/showthread.php?t=54256)

meccs76 25.10.2008 21:57

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;


      }

PS: Mir ist klar, daß man einige Sachen zusammenfassen könnte, dies werde ich später auch noch tun. Momentan hilft mir diese Schreibweise aber sehr beim lernen und die Übersicht zu behalten. Hat es eigendlich negative Auswirkungen es ausführlöich zu schreiben?

fricca 25.10.2008 22:06

Zitat:

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 kann ich nicht nachvollziehen. Ich sehe keinen Unterschied beim Hover-Effekt.
Von welchen IE- und FF-Versionen sprichst du?
Hast du mal einen Vergleichs-Screenshot?

meccs76 25.10.2008 22:35

Zitat:

Zitat von fricca (Beitrag 408055)
Das kann ich nicht nachvollziehen. Ich sehe keinen Unterschied beim Hover-Effekt.
Von welchen IE- und FF-Versionen sprichst du?
Hast du mal einen Vergleichs-Screenshot?

Na dann bin ich jetzt völlig irritiert. XD
Heist das, daß du überall den 1mm Rand nach oben im Menü hast? Oder wird es überall "richtig" dargestellt?

Opera:

http://www.bildercache.de/minibild/2...212800-733.jpg


Firefox:

http://www.bildercache.de/minibild/2...213408-854.jpg

Praktikant 25.10.2008 22:41

Den Rand sieht man wohl nur im FireFox 3....
Ich habe Ihn im FireFox nähmlich ebenso nicht....

meccs76 25.10.2008 22:46

Zitat:

Zitat von eXHTML (Beitrag 408057)
Den Rand sieht man wohl nur im FireFox 3....
Ich habe Ihn im FireFox nähmlich ebenso nicht....

Und gibt es eine Möglichkeit diesen weg zu bekommen?

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.

fricca 25.10.2008 22:46

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?

meccs76 25.10.2008 23:02

Zitat:

Zitat von fricca (Beitrag 408060)
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?

Oha, scheinbar ist das Problem größer als ich dachte. Denn, wenn die Schriftart per default einen Einfluss auf diese Darstellung hat, dann sollte ich diesen "Wackelkandidaten" von vorn herrein ja ausschließen, oder? Also am besten definieren, ich werd mich mal dran machen und das testen. Würdest du mir sagen, welche Schriftart per default bei dir eingestellt ist? Würde mir bei der Fehlersuche sehr helfen.

Zitat:

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?
Nein, das möchte ich nazürlich nicht. Aber ich habe die Angaben doch innerhalb des Containers gemacht. Ist das so falsch?

fricca 25.10.2008 23:08

Zitat:

Zitat von meccs76 (Beitrag 408062)
Würdest du mir sagen, welche Schriftart per default bei dir eingestellt ist?

Das spielt keine Rolle. Du kannst so die Darstellung nicht kontrollieren. Siehe oben.
Es ist immer der Benutzer, der das letzte Wort über die Schriftart (und Größe!) hat.



Zitat:

Nein, das möchte ich nazürlich nicht. Aber ich habe die Angaben doch innerhalb des Containers gemacht. Ist das so falsch?
Du hast die Angaben für die Links im Stylesheet eingerückt, sonst nichts.
Informier dich über den Nachfahrenselektor.

meccs76 25.10.2008 23:14

Zitat:

Zitat von fricca (Beitrag 408064)
Das spielt keine Rolle. Du kannst so die Darstellung nicht kontrollieren. Siehe oben.
Es ist immer der Benutzer, der das letzte Wort über die Schriftart (und Größe!) hat.



Du hast die Angaben für die Links im Stylesheet eingerückt, sonst nichts.
Informier dich über den Nachfahrenselektor.


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?

fricca 25.10.2008 23:19

Zitat:

Zitat von meccs76 (Beitrag 408066)

#Menue a:link,
a:visited {...}

Fällt dir jetzt was auf?

Zitat:

Würdest du mir das mit Float nochmal für Dummies erklären bitte?
Nein, einen Roman zu schreiben habe ich keine Zeit und keine Lust.
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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:00 Uhr.

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

© Dirk H. 2003 - 2023