XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Horizontales Menü mit variabler Listen-Zeilenanzahl (http://xhtmlforum.de/showthread.php?t=70166)

dst89 23.10.2013 13:02

Horizontales Menü mit variabler Listen-Zeilenanzahl
 
Hallo,

ich muss ein horizontales Menü bauen, bei dem die Listenpunkte eine feste (bzw. maximale) Breite haben und Menüpunkte mit mehreren Wörtern umbrechen.

https://dl.dropboxusercontent.com/u/37800128/menu.jpg
(hier mit Javascript gelöst)

Ich möchte, dass die Listenpunkte immer vertikal mittig sind UND der Link nicht auch den gesamten Hintergrund ausfüllt. (normalerweise mache ich das mit einem padding oder der entsprechenden line-height, was an dieser Stelle aber auf Grund von Mehrzeiligkeit nicht funktioniert).

Wie kann ich das lösen?

explanator 23.10.2013 19:44

Ersetze das Komma durch ein <br> ein.

dst89 25.10.2013 09:57

hey,

ich glaube nicht, dass das die Lösung meines Problems ist. Ob da nun ein <br> steht oder nicht ist egal, wenn ich die Buttonweite beschränke und so den Text zu einem Umbruch zwinge. Und gerade dieser Umbruch ist ja schuld daran, dass line-height und padding mir den Text nicht mehr mittig platzieren werden, wie es in dem Beispielbild zu sehen ist.

Ich verstehe nur nicht, warum es scheinbar keine sinnvolle Lösung mit reinem CSS gibt...

explanator 25.10.2013 15:19

Wo ist das Problem. 5 Sek mit Google beschäftigt und erstes Ergebnis angeklickt -> CSS: horizontale und vertikale Zentrierung

schon das Schreiben hier dauert länger.

dst89 26.10.2013 17:57

Bevor hier wieder eine Diskussion anfängt, die dazu führen würde, dass man alle Foren eigentlich abschaffen müsste, da man im Grunde fast alle Antworten mit den richtigen Schlagworten ergoogeln kann, möchte ich das einfach mal so stehen lassen.

Mein Problem geht ein wenig weiter, als dass ich mit dieser Lösung zufrieden gestellt würde und damit bringt mir auch 5 sek Google nichts und ich bemühe ein Forum...

Den Text mittig zu zentrieren funktioniert wunderbar, immerhin ist das ja nichts neues. Problem an der Sache ist jedoch, dass bei diesem Menü keine Höhe für den Link vergeben werden kann (oder)... Ich möchte aber, dass der Link die Navigation in der Höhe voll ausfüllt...

https://dl.dropboxusercontent.com/u/798175/menu.jpg
(graue Hinterlegung = :hover )

PS: Ich sehe meinen Formulierungsfehler.. ich habe in meinem Einleitungstext den Text wohl nochmal umgeschrieben und nicht mehr durchgelesen... da ist ein "nicht" zu viel.

Zitat:

UND der Link nicht auch den gesamten Hintergrund ausfüllt.
muss heißen:

UND der Link auch den gesamten Hintergrund ausfüllt.

explanator 26.10.2013 18:08

Gib dem Link die display Eigenschaft block und setze die Breite und Höhe des a-Elementes entweder auf einen festen Wert, oder einen dynamischen, wie em, dann vergrössert es sich mit der Schrift.

Thielo 26.10.2013 18:17

Zitat:

Zitat von dst89 (Beitrag 534568)
Bevor hier wieder eine Diskussion anfängt, die dazu führen würde, dass man alle Foren eigentlich abschaffen müsste, da man im Grunde fast alle Antworten mit den richtigen Schlagworten ergoogeln kann, möchte ich das einfach mal so stehen lassen.

Mein Problem geht ein wenig weiter, als dass ich mit dieser Lösung zufrieden gestellt würde und damit bringt mir auch 5 sek Google nichts und ich bemühe ein Forum...

Vertically Centered Text

Wie komme ich drauf?
- Ich habe Google gefragt.

Nach was habe ich Google gefragt?
- multi lined vertical align

Wie lange habe ich gebraucht?
- 15 Sekunden Suche ... Und nochmal eine Minute bis ich mir deinen Text aus dem Zitat oben durchgelesen habe und mir dachte "nope" und 15 Sekunden lang den Kopf geschüttelt habe.

Worauf ich hinaus will: Seltenst hat jemand in diesem Forum hier ein Problem, das so "speziell", "einzigartig" oder "merkwürdig" ist, als das man nicht mit 20 Minuten Google die Lösung finden kann.

dst89 27.10.2013 17:17

Zitat:

Gib dem Link die display Eigenschaft block und setze die Breite und Höhe des a-Elementes entweder auf einen festen Wert, oder einen dynamischen, wie em, dann vergrössert es sich mit der Schrift.
geht nicht

Zitat:

Vertically Centered Text
geht

mein Ergebnis:

HTML-Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style>
        body {
                font: 0.75em/1.75em 'Helvetica Neue', Helvetica, Arial, sans-serif;
                color: white;       
        }
        ul, li {
                padding: 0;
                margin: 0;
                list-style: none;       
        }
        li {
                background: blue;       
                width: 100px;
                height: 6em;
                display: table;
                float: left;
        }
        li a {
                display: table-cell;
                text-align: center;
                vertical-align: middle;       
                color: white;
        }
       
        li a:hover {
                background: red;       
        }
</style>
</head>
<body>
<ul>
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Menüpunkt1 Menüpunkt1</a></li>
    <li><a href="#">Menüpunkt2 Menüpunkt2 Menüpunkt2</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>
</body>
</html>

Vielen Dank ;)

heiko_rs 27.10.2013 18:05

In den FAQ Punkt 14 steht noch eine Lösung, die ich vor einigen Jahren mal geschrieben hatte. (das dort stehende span plus den CC für IE7- kann man inzwischen natürlich auch weglassen, denn ab IE8 laufen display: table & Co. ja.)

Das Problem ist halt die Höhe - sollen die Texte vertikal zentriert sein, müssen alle Elemente, in denen zentriert werden soll, dieselbe Höhe haben. Die bekommen sie zwar durch display: table-cell; automatisch, aber das reicht eben nur bis zu li, nicht a.
(würde man die Navi nicht als ul darstellen, sondern als lauter a nebeneinander, ginge es auch mit a, aber sowas ist natürlich indiskutabel.)

Und der Punkt bei der einheitlichen Höhe ist halt die anklickbare Fläche, die möglichst überall gleich sein soll, und dafür muss eben für alle a dieselbe Höhe deklariert werden, denn anders erfahren sie nicht, wie hoch die a-Elemente in den benachbarten li sind.

Letztlich ist das aber auch kein Problem, denn height wirkt bei td (sowie als solchen dargestellten Elementen) eh wie min-height, und da man height hier sinnvollerweise in em deklariert, dürfte der min-height-Aspekt eh nie zum Tragen kommen.

Solltest Du trotz allem keine Höhe vergeben wollen und die gleich hohe anklickbare Fläche ist nicht so wichtig, kannst Du height auch weglassen (dann ergibt sich die Höhe der Navi automatisch aus der des höchsten a), und dann ist sogar auch noch eine Alternative möglich:

HTML-Code:

<!DOCTYPE html>
<html lang="de">

<meta charset="utf-8">
<title>Test</title>
<style type="text/css">

* {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        }

ul {
        float: left;
        list-style: none;
        background: red;
        white-space: nowrap;
        }

li {
        display: inline-block;
        vertical-align: middle;
        margin: 0 10px;
        }

a {
        display: block;
        color: white;
        padding: 15px;
        }

</style>

<body>

<ul>
<li><a href="#">Text</a></li>
<li><a href="#">Text<br>Text</a></li>
<li><a href="#">Text<br>Text<br>Text</a></li>
<li><a href="#">Text</a></li>
</ul>


dst89 27.10.2013 18:38

Hallo heiko_rs,

danke für deine ausführliche Erläuterung. Nach deiner Möglichkeit würde ich standardmäßig Navigtionen erstellen, bei denen die anklickbare Fläche keine Rolle spielt.

Im Rahmen der User Experience und Usability würde ich im Zweifelsfall jedoch immer dazu tendieren in einer Navigation (vor allem wenn diese als horizontales Menüband dargestellt wird) gleichmäßige Schaltflächen erstellen zu wollen. Auch im Hinblick auf mobile Devices macht es mehr Sinn, gleichmäßige mind. 1cm hohe Navigationselemente zu erstellen.

Daher werde ich die von mir zuletzt dargestellte Version verwenden. :)


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:37 Uhr.

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

© Dirk H. 2003 - 2022