zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Horizontales Menü mit variabler Listen-Zeilenanzahl

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.10.2013, 12:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.08.2013
Beiträge: 21
dst89 befindet sich auf einem aufstrebenden Ast
Standard 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.


(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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.10.2013, 18:44
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Ersetze das Komma durch ein <br> ein.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.10.2013, 08:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.08.2013
Beiträge: 21
dst89 befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #4 (permalink)  
Alt 25.10.2013, 14:19
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 26.10.2013, 16:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.08.2013
Beiträge: 21
dst89 befindet sich auf einem aufstrebenden Ast
Standard

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...


(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.

Geändert von dst89 (26.10.2013 um 17:02 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 26.10.2013, 17:08
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #7 (permalink)  
Alt 26.10.2013, 17:17
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.375
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von dst89 Beitrag anzeigen
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.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?

Geändert von Thielo (26.10.2013 um 17:23 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 27.10.2013, 16:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.08.2013
Beiträge: 21
dst89 befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von dst89 (27.10.2013 um 16:39 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 27.10.2013, 17:05
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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>
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 27.10.2013, 17:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.08.2013
Beiträge: 21
dst89 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
menü, vertikal, zeilen, zentrieren

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Horizontales Menü kalibrieren _SIE_ CSS 1 06.07.2013 12:09
Horizontales Menü centriert, Menühintergrund über ganze Seite PowerNerd CSS 19 05.05.2012 21:06
horizontales Menü in horizontales Pulldown-Menü ändern Stephan1958 CSS 5 11.01.2012 13:37
Horizontales Drop-Down Menü (Liste) mit 2 Ebenen Christofer CSS 1 19.05.2010 14:33
Darstellungsproblem flohpapa CSS 3 16.12.2009 08:55


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:02 Uhr.