Menubar Zentrieren

  • Hallo Leute


    Ich bin nicht der Obermacker in CSS und PHP. Deswegen benötige ich eure Hilfe ;-)


    Es geht um folgendes. Ich benutze für eine Webpage e107, das ist ein Portal/Content Management System. Auf dieses habe ich ein spezielles Theme gelegt. Bei diesem Theme habe ich ein Problem und zwar wird eine Menubar nicht zentriert dargestellt.


    Die Webpage kann man hier einsehen:
    http://www.delirium-malfurion.de/news.php


    Ihr seht jetzt die Bar mit den Links drin (Home, Gildenroster). Diese möchte ich gerne zentriert haben.


    Ich habe 2 css Files:


    nav_menu.css
    http://www.delirium-malfurion.…emes/halo2UE/nav_menu.css
    style.css
    http://www.delirium-malfurion.…_themes/halo2UE/style.css


    die dazugehören.


    Was ich bereits herausgefunden habe ist wenn ich im File nav_menu.css den Wert bei padding verändere:


    Code
    1. div.menuBar {
    2. padding: 0px 0px 0px 0px;
    3. text-align: left;
    4. }


    ich die Abstände dieser Links vom linken/rechten Rand ändern kann.


    Ausserdem kann ich den Wert "float" unter:


    Code
    1. div.menuBar a.menuButton, div.menuButton, div.menuButton_over {
    2. width: 90px; float: left; height: 22px; padding: 7px 4px 0px 4px; text-align: center; text-transform: uppercase; font-size: 11px; color: #2cb218; background: url(images/tab_off.png) no-repeat center; font-weight: bold;
    3. }


    auf "right" abändern, dann wird die Links leiste rechts angezeigt, jedoch geht "center" nicht!


    Hat jemand eine Idee was ich noch machen kann? Vielen Dank schonmal ;-)


    Gruss
    Swiz

  • Moin swiz


    Was ich bereits herausgefunden habe ist wenn ich im File nav_menu.css den Wert bei padding verändere:


    Code
    1. div.menuBar {
    2. padding: 0px 0px 0px 0px;
    3. text-align: left;
    4. }


    Na so ne Niete biste ja dann nicht :p
    "Padding" ist der Innenabstand des jeweiligen Blockobjektes, also bei einem Beispiel der Abstand zu dem Rand des Divs "menuBar" und deinem Inhalt, also dem Menu.
    Somit kannst du bei einer statischen Seite theoretisch auch das Menu zentrieren, bzw. zentriert aussehen lassen.


    Zitat


    auf "right" abändern, dann wird die Links leiste rechts angezeigt, jedoch geht "center" nicht!


    Wie willst du auch etwas mittig umfließen lassen? ;)


    der Heilige Gral, den du suchst, ist margin.
    Du musst den linken und den rechten Außenabstand der "navigation" auf automatisch stellen, so zentriert man Blockelemente, kurz:

    Code
    1. div#navigation {
    2. margin:0 auto;
    3. width:400px
    4. }


    Es ist wichtig, dass du der Navigation eine Breite mitgibst, denn sonst nutzt der fiese Container die ganze Breite und du kannst bei einer Breite von 100% schlecht zentrieren :)