Menu gestalten Li Elemente?

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Menu gestalten Li Elemente?

    Hallo zusammen,

    ich bin dabei mir meine erste eigene Webseite zu gestalten, allerdings habe ich ein wenig Probleme mit dem Menü:

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

    Man sieht das irgendwie die Button bzw. Menüpunkte verschoben sind. Ich weiß nicht wie ich das gestalten soll. Ich habe es mit margin und Padding versucht. Komischerweise habe ich links in der
    Menüleiste einen Leerraum, welche ich patu nicht füllen kann. Immer wenn ich einen größeren Wert z.B. -30px Margin mache, dann wird die Grafik unter diesen Leerraum geschoben.

    Könnt Ihr mir evtl. Tipps geben was ich falsch mache, oder was ich beachten muss?

    Quellcode

    1. /*###### Navigation ######*/
    2. nav .mainMenuInner {background-image: url(../img/mainMenuInner.png); height: 34px; width: 1100px;}
    3. nav ul {list-style-type: none; margin: 0;} /* Keine Aufzählungszeichen */
    4. nav .mainMenuInner li {float: left; max-height: 30px; margin-top: 2px; padding-top: 4px; padding-bottom:5px; background-image: url(../img/mainButton.png);}
    5. nav .mainMenuInner li a {padding-left: 70px; padding-right: 70px; text-decoration: none; font-size: 1.125em; text-shadow: black 0 0 2px; color: #8a8a8b;}
    7. /* Navigationspunkte Klassen Aufteilung*/
    8. nav .start{text-transform: uppercase;}
    10. nav .aboutus{text-transform: uppercase;}
    12. nav .services{text-transform: uppercase;}
    14. nav .goals{text-transform: uppercase;}
    Alles anzeigen
    Mit freundlichen Grüßen
    best regards

    Liv3pl4y

  • Wahrscheinlich liegts daran, dass das nav .mainMenuInner li - Attribut kein display:inline; hat. Kann allerdings nur raten, da ich die HTML-Struktur nur erahnen kann. Grundsätzlich ist es mir persönlich auch lieber bei CSS-Problemen einen Link zu haben, soweit vorhanden.
    Falls das nicht klappt frag mal Google bzw. schau dir den entsprechenden Beitrag bei http://de.selfhtml.org/css/layouts/navigationsleisten.htm#horizontal an.

  • Ich melde mich hier nochmal, da ich die Lösung gefunden habe, evtl. für spätere Probleme anderer User:

    Ich habe letzlich aufs Padding Left & Right verzichet und jedes Listen (li) Element, also jede Listen Klasse mit jeweils dem absoluten Breitenwert versehen:

    Quellcode

    1. /*###### Navigation ######*/
    2. nav .mainMenuInner {background-image: url(../img/mainMenuInner.png); height: 34px; width: 1100px;}
    3. nav ul {list-style-type: none; margin: 0;} /* Keine Aufzählungszeichen */
    4. nav .mainMenuInner li {float: left; max-height: 30px; margin-top: 2px; padding-top: 4px; padding-bottom:5px; background-image: url(../img/mainButton.png);}
    5. nav .mainMenuInner li:hover {background-image: url(../img/mainButtonHover.png);}
    6. nav .mainMenuInner li a {text-decoration: none; font-size: 1.125em; text-shadow: black 0 0 2px; color: #8a8a8b;}
    8. /* Navigationspunkte Klassen Aufteilung*/
    9. nav .start{text-transform: uppercase; width: 275px; margin-left: -40px; list-style-image: url(../icons/house_startButton.png)}
    11. nav .aboutus{text-transform: uppercase; width: 275px; list-style-image: url(../icons/info_aboutUsButton.png)}
    13. nav .services{text-transform: uppercase; width: 275px; list-style-image: url(../icons/kleeblatt_servicesButton.png)}
    15. nav .goals{text-transform: uppercase; width: 275px; list-style-image: url(../icons/checkUp_goalsButton.png)}
    Alles anzeigen


    Ich hoffe damit haben später andere dann keine Probleme :)
    Mit freundlichen Grüßen
    best regards

    Liv3pl4y