[CSS] Menü den letzten Schliff geben

Dieses Thema im Forum "Webdesign" wurde erstellt von Pope, 29. November 2008 .

Schlagworte:
  1. 29. November 2008
    Menü den letzten Schliff geben

    Hallo,
    ich habe ein kleines Problem mit meinem CSS-Menü.
    Es ist ein Dropdown-Menü, die beiden obergeordneten Menüpunkte sind in der Navigationsleiste
    ganz links und da wäre auch schon das erste Problem, ich hätte es gerne das die beiden Menüpunkte
    in der Mitte der Leiste angezeigt werden.
    Das zweite Problem wäre die Länge der navigationsleiste, ich hätte es gerne das beide ein wenig über die
    angezeigte Seite hinaus gehen, damit die komplette Breite der Seite gefüllt ist.


    Ich habe die Seite hier mal testweise hochgeladen: http://razer2k.redio.de/index.html

    Hier ein Bild von dem Men+ wie ich es mir vorstelle: http://www.abload.de/img/unbenannt8ny1.jpg
     
  2. 29. November 2008
    AW: Menü den letzten Schliff geben

    1. wenn dein menu via float:left; versetzt ist geht das nicht
    2. entferne im body margin und padding
     
  3. 29. November 2008
    AW: Menü den letzten Schliff geben

    Hm komisch wenn ich die "float:left"s entferne zerschieße ich mir jedesmal das komplette Menü.

    Und wenn ich aus der Zeile :

    .pd_menu_01 {float:left; padding:0; margin:0;color: #FF4D00;background: #666666;width:100%; border:solid 1px #666666;clear:both;} /*Color navigation bar normal mode*/

    padding:0 und margin:0

    entferne bringt das kein sehbares Resultat ?(
     
  4. 29. November 2008
    AW: Menü den letzten Schliff geben

    li-elemente sind immer im block-format. d.h. wenn du sie nur ein einer zeile haben willst reicht ein "display:inline" normalerweiße aus.

    wegen margin/padding. ich hab gsagt du musst es im body entfernen. "body { margin:0;padding:0; }"
     
  5. 29. November 2008
    AW: Menü den letzten Schliff geben

    Ich habe jetzt mal knapp eine Halbestunde rumprobiert aber ichglaube echt das ich zu dumm bin für CSS :angry:


    Vllt. sollte ich mal meinen CSS Code hier posten, habs jan icht im Head eingebunden:

    CSS-Code:
     
  6. 29. November 2008
    AW: Menü den letzten Schliff geben

    Pack deine Liste in ein zweites DIV ...

    Code:
    <div class="pd_menu_01">
     <div class="center">
     <ul>
     <li><a href="#">1</a>
     <ul>
     <li><a href="#">1.1</a></li>
     <li><a href="#">1.2</a></li>
     <li><a href="#">1.3</a></li>
     </ul>
     </li>
     </ul>
     <ul>
     <li><a href="#">2</a>
     <ul>
     <li><a href="#">2.1</a></li>
     <li><a href="#">2.2</a></li>
     <li><a href="#">2.3</a></li>
     </ul>
     </li>
     </ul>
     </div>
    </div>
    ... und gebe dem Klassenselektor "center" folgende Eigenschaft:

    Code:
    .center {
     margin-left: 50%
     }
    Tada
     
  7. 29. November 2008
    AW: Menü den letzten Schliff geben

    EDIT:
    Stimmt!
    Geht wirklich nicht....

    Aso was mir aufgefallen ist,
    das Script funktioniert bei mir im IE nicht!
    Also das Menue kommt nicht.

    MFG Ralphwiggum
     
  8. 29. November 2008
    AW: Menü den letzten Schliff geben

    Weil es nicht funktioniert? Probier es mal aus
     
  9. 30. November 2008
    AW: Menü den letzten Schliff geben

    Ok erstmal ein großes Dank an all diejenigen die hier probieren mir zu helfen.

    So ich bin jetzt ein wenig verwirrt, wieso soll ich die Liste in ein zweites DIV packen ? Mit der ist ja alles in Ordnung, wie gesagt geht es mir ja nur darum das die Menüpunkte zentriert sind und das die beiden Enden der Navigationsleiste links und rechts über den Rand hinausgehen.
     
  10. 30. November 2008
    AW: Menü den letzten Schliff geben

    Weil dein Problem mit einem zweiten DIV, indem sich dann nur deine Listen befinden, ohne Probleme gelöst wird. Ohne das zweite DIV müsstest du jede Liste entsprechend positionieren und das habe ich auf Anhieb nicht hinbekommen. So zentrierst du einfach das zweite DIV und die Listen sind in der Mitte des Viewport.

    Übrigens: Meine 50 Prozent oben musst du natürlich entsprechend der Anzahl deiner Listen anpassen.
     
  11. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.