CSS Fehler - nur wo?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

  • Hallo ihr lieben,
    ich arbeite daran eine Yamegoo v2 Version zu erstellen. Nun habe ich aber ein Problem in der Navigation. Es ist nix schlimmes, dennoch möchte ich gerne wissen wie das kommt.


    [Blockierte Grafik: http://www.abload.de/img/yamegoosvo.jpg]


    Wenn ihr da mal bitte genau schaut ist da - wenn man mit der Maus über einen Eintrag geht - links so ein kleiner Abstand. Der soll da aber nicht sein, und ich kann mir auch nich erklären wie er da hin kommt. Ich habe es mit einer eigenen Dropdown-CSS versucht, die ist aber nicht so gut geworden. Jetzt habe ich mir die Video2Brian-CD "Little-Boxes" angesehen und dort wird auch eine Navigation auf der Seite gezeigt. Testweise habe ich mal genau diese Navi (aus dem Quelltext von http://www.little-boxes.de) genommen und da ist auch der Fehler, bei Little Boxes sieht es aber richtig aus.


    Schaut doch mal bitte hier:
    http://yamegoo.de/new/


    Quelltext der Seite könnt ihr ja im Browser sehen - CSS gibts hier:
    http://yamegoo.de/new/stylesheet.css


    Bin für jede Hilfe dankbar :)

  • Sieht ja wirklich merkwürdig aus. Kleiner Tipp: lade dir mal die Firebug Erweiterung für den Firefox runter, damit kannst Du dir das Problem genauer anschauen. So richtig zum Ziel bin ich eben auch nicht bekommen, hätte nur die Idee, dass evtl. ein negativer margin von 10 Pixel nach links bei der Aufzählungsliste helfen könnte. Ist aber keine saubere Lösung.

  • Also ich habe einige Frei-Verfügbare Navis genommen, dort ist der Fehler halt auch.Das muss doch dann aber irgendwo definiert sein....
    Was genau mache ich mit dem Addon?


    Wäre lieb wenn du nochmal drüber schauen könntest....


    Grüße

  • Zitat

    Was genau mache ich mit dem Addon?

    Installieren? Danach kannst Du per Rechtsklick in deiner Webseite "Element untersuchen" auswählen und genauer nachschauen welche CSS-Eigenschaften es hat. In dem selben Fenster kannst Du eben diese verändern oder ergänzen um zu testen.

  • OK, das wollte ich wissen. Nutze derzeit nur noch Opera, ich installier aber mal eben den Fuchs und das Addon. Du hast das doch denke ich mal - hast du nix "verdächtiges" entdeckt?

  • Entschuldige, wenn ich mich mal einmische:


    Du hast das in der CSS-Datei folgendermaßen geregelt:


    #navibereich ul { margin: 0;}
    #navibereich li {
    float: left;
    width: auto;
    list-style: none;
    margin: 0;
    }


    Versuch doch mal zusätzlich zu margin: 0 auch padding auf 0 zu setzen. Damit werden etwaige Browser-Stylesheets zurückgesetzt, die evtl. den Abstand herstellen.


    Also so:

    #navibereich ul {
    margin: 0;
    padding: 0;
    }


    #navibereich li {
    float: left;
    width: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    }


    Eigentlich reicht es schon, wenn du im oberen Bereich, also bei #navibereich ul, das padding auf 0 setzt.

  • Geil es funktioniert :)
    Jetzt bleibt aber die Frage offen: Wieso geht es bei little-boxes.de und bei mir nicht? Wieso musste ich noch das padding 0 einfügen obwohl es bei little-boxes nicht ist?


    Danke inu für deine Hilfe :)

  • Vielleicht wurde das bei little boxes mit einem Universalselektor geregelt - z.B. auf diese Weise:


    * {
    margin: 0;
    padding: 0;
    }


    Sowas steht ja meistens am Anfang einer CSS-Datei, um sozusagen die browserinternen Einstellungen zurück zu setzen. Die meisten Browser definieren ja ein basales Stylesheet (sog. default-stylesheet), in dem dann die Margins und Paddings und noch anderes auf einen bestimmten Wert gesetzt sind, von dem man erstmal nichts weiß, was einen dann aber wundert, wenn's auftritt, da man z.B. gar keinen Abstand gesetzt hatte. Das macht der Browser nämlich ungefragt. Dafür gibt's dann diese Reset-CSS-Dateien, die erstmal wieder alles auf "Null" setzen. Sonst passiert genau das, was du erlebt hast.


    Du hattest das zwar für body definiert, da aber margins und paddings nicht vererbt werden, wirkt sich das in den Listen nicht mehr aus.

  • Ich hab mir's mal genauer angesehen.


    Der eigentliche Grund für den unerklärlichen Abstand lag nicht am fehlenden Padding-Eintrag für den Universalselektor (der ist bei little-boxes allerdings tatsächlich drin). Der Grund war vielmehr der, dass du in Zeile 296 für ul ein padding-left mit 6 px eingegeben hast. Da hätte auch ein zusätzlicher Eintrag von padding: 0 per Universalselektor nichts genützt, da diese Regel durch Zeile 296 wieder aufgehoben worden wäre. Falls du das padding-left in Zeile 296 nicht unbedingt brauchst, wäre es sinnvoller, das zu löschen. Dann ist nämlich das zusätzliche padding: 0 (das ul {padding-left: 6px;} wieder aufhebt) weiter unten für #navibereich ul überflüssig.

  • Danke!
    Blöder Fehler von mir :-?


    Und noch eine letzte Frage. Ich möchte rechts eine Freundesliste (Freunde die gerade Online/Offline sind) einblenden. Soll ich das nun per iFrame machen oder einfach ne normale PHP-Schleife? Ich habe auch schon an AJAX gedacht, also das meine Freundesliste halt alle 10 Sekunden aktualisiert wird.


    Was wäre nach heutigem Standard am besten?


    viele Grüße und danke!

  • Wie würde sowas dann in etwa aussehen? Habe sowas leider noch nie gemacht :(