XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Menu responsiv immer mittig positionieren (http://xhtmlforum.de/showthread.php?t=69353)

philippsen 04.05.2013 18:04

Menu responsiv immer mittig positionieren
 
Hallo Leute,
ich würde gerne ein Menü immer mittig positionieren. Am besten auch noch das die li-Elemente sich responsiv verhalten.

Hier der link zur Seite:
Media Network

Bekomme es nicht hin das ul element sauber mittig zu positionieren.
relevanter HTML-Code:
HTML-Code:

<div class="centermenu"><div class="menu-startmenu-container"><ul class="menu" id="menu-startmenu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-105" id="menu-item-105"><a title="sendeformate">Sendeformate</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-106" id="menu-item-106"><a>Unternehmensfilm</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-107" id="menu-item-107"><a>Netzwerk</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-108" id="menu-item-108"><a>Referenzen</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-109" id="menu-item-109"><a>Über uns</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-110" id="menu-item-110"><a>Neuigkeiten</a></li>
</ul></div></div>


Wäre echt cool wenn jemand einen Tip hat?

Gruß
philippsen

plastiko 04.05.2013 21:38

Meine Idee dazu:

Die Zentrierung von .centermenu (per left und margin) weglassen.
Dafür height und width auf 100% setzen.

.menu-startmenu-container bekommt display: table; und ebenfalls height: 100%;.
Dann mit margin: 0 auto; horizontal zentrieren.

Die vertikale Zentrierung geht dann über .centermenu ul
Code:

display: table-cell;
vertical-align: middle;

Da du die Breite von .centermenu li in prozent angegeben hast, mußt du den horizontalen margin auch in % angeben.

philippsen 12.05.2013 10:06

Vielen Dank, hatte erst jetzt die Gelegenheit weiter zu machen!
Das klappt schon besser, allerdings bekomme ich die zentrierung der li Elemente noch nicht hin...

Hast du noch ne Idee wie ich die sauber zentriert bekomme?
Deinen Code habe ich schon integriert...

Viele Grüße

philippsen

explanator 12.05.2013 12:45

Schau dir mal deine Seite ohne Javascript an. Da ist nicht viel Inhalt, dafür hast du aber mit 151 Fehler, alle Voraussetzungen geschaffen, das die Seite nicht korrekt angezeigt wird.

Die Links im Menü sollten zumindest auch ohne Javascript funktionieren, zumindest wenn du Wert darauf legst, auch in den Suchmaschinen zu erscheinen.

Was die Zentrierung angeht, solltest du erst mal alle Fehler beseitigen und dann im FF Firebug installieren, dann siehst du auch wo dein Problem derzeit besteht.

Thielo 12.05.2013 13:32

Floats lassen sich wie folgt gut zentrieren, Achtung nicht ganz easy-peasy: Stu Nicholls | CSSplay | Centering Floats

philippsen 21.05.2013 17:02

Danke für Eure Hilfe!


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:32 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019