Menubar Zentrieren

swiz · 12.03.2008, 09:05

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.de/e10...E/nav_menu.css
style.css
http://www.delirium-malfurion.de/e10...o2UE/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:

div.menuBar {
  padding: 0px 0px 0px 0px;
  text-align: left;
}

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

Ausserdem kann ich den Wert "float" unter:

Code:

div.menuBar a.menuButton, div.menuButton, div.menuButton_over {
 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;
   }

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

hero-master · 13.03.2008, 08:56

Moin swiz

Zitat:

Zitat von swiz

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

Code:

div.menuBar {
  padding: 0px 0px 0px 0px;
  text-align: left;
}

Na so ne Niete biste ja dann nicht

"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:

div#navigation {
margin:0 auto;
width:400px
}

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

swiz · 13.03.2008, 09:57

Hey super, danke für die Hilfe, hat funktioniert!