zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Menü - Text über 2 Zeilen erwünscht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.03.2015, 17:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.03.2015
Beiträge: 4
Mallorca befindet sich auf einem aufstrebenden Ast
Standard CSS Menü - Text über 2 Zeilen erwünscht

Hallo,

seit etlichen Stunden suche ich eine Möglichkeit ein horizontales Hauptmenü 2zeilig zu machen und finde nichts. Leider.

Gewünscht ist, dass der Text im Menü einen Umbruch hat.

Menüpunkt 1:
So funktioniert
die Website

Dieser Punkt soll über 2Zeilen gehen und nicht nebeneinander, weil das sonst viel zu breit wird das ganze.
Menüpunkte mit nur 1 Zeile sollen natürlich genauso hoch sein wie die zweizeiligen.
Die Menüpunkt sollen am Ende alle gleich groß sein und nebeneinander stehen. Also Menüpunkt 3 ist ja nur einzeilig - soll aber auch farblich über 2 Zeilen gehen. Die Menüleiste soll ja ordentlich aussehen und einheitlich.

Hier der Quelltext:

<style>
#navigation li {
font:12px Arial, Helvetica, sans-serif;
display:inline;
list-style-type:none;
font-weight: bold;
}
#navigation a {
padding:15px 15px;
background-color:#4b6a7c;
color:#FFF;
text-decoration:none;
}
#navigation a:hover {
background-color:#0099cc;
color:#FFF;
font-weight: bold;
}
</style>

<body topmargin="60">

<nav>
<div id="navigation">
<ul>
<li><a href="#">SO FUNKTIONIERT DIE WEBSITE</a></li>
<li><a href="#">KOSTEN & ZAHLUNGSARTEN</a></li>
<li><a href="#">NEUANMELDUNG</a></li>
<li><a href="#">MEINE WEBSITE</a></li>
<li><a href="#">TIPPS & TRICKS</a></li>
<li><a href="#">FAQs & HILFE</a></li>
</ul>
</div>
</nav>

</body>

Hoffe Ihr könnt mir helfen.. DANKE. ,-)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.03.2015, 17:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Welche Browser musst du unterstützen? Eventuell kannst du mit flexbox arbeiten, das würde das ganze vereinfachen.
Ansonsten musst du die Elemente nebeneinander floaten und min-heights vergeben (die min-height ist deine doppelte Zeilenhöhe. Und darin dann deine Elemente zentrieren.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.03.2015, 18:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.03.2015
Beiträge: 4
Mallorca befindet sich auf einem aufstrebenden Ast
Standard

die seite hat ziemlich viele aktive user - die zumindest nicht die neuesten Browser haben... wäre dann die zweite Varianten die in den meisten Browser funktioniert oder?
Wo müsste ich das float und min-heights einbauen. Kannst Du mir bitte das bitte anhand des Quelltextes erklären. Danke. Werde jetzt auch noch nach Deinen Tipps Googlen. ,-)
Mit Zitat antworten
  #4 (permalink)  
Alt 02.03.2015, 18:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

flexbox kann heute problemlos genutzt werden und ist ja auch speziell für solche Lösungen erdacht worden.

Gruss

MrMurphy
Mit Zitat antworten
  #5 (permalink)  
Alt 03.03.2015, 09:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Hallo,

flexbox kann heute problemlos genutzt werden u
Nicht, wenn noch IE 8, 9 (oder auch teilweise 10) unterstützen muss.
Mit Zitat antworten
  #6 (permalink)  
Alt 03.03.2015, 09:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

Zitat:
Nicht, wenn noch IE 8, 9 (oder auch teilweise 10) unterstützen muss.
In der Praxis muss das niemand mehr. Es ist nicht nachvollziehbar, warum auf vorteilhafte Techniken verzichtet werden soll, die von deutlich über 90% aller Browser unterstützt werden.

Außerdem wird fälschlicherweise immer so getan, als würde von den genannten Browsern kein Inhalt oder nur Schrott angezeigt werden. Das ist schlicht falsch. Die User bekommen die Seite nur etwas schlichter angezeigt. Und das sind sie nicht anders gewohnt. Zumal die genannten Browser in der Regel nur zwangsweise benutzt werden, zum Beispiel auf der Arbeit.

Ich sehe eher die umgekehrte Sichtweise: Es ist doch Unsinn, 90% der User mit veralteter Technik zu beliefern, um 4% oder 5% vermeintlich zu unterstützen - wobei die die Unterstützung nicht mal bemerken.

Außerdem sind die neuen Möglichkeiten viel zeitsparender beim Erstellen einer Seite. Die gewonnene Zeit anschließend bei Bedarf ja immer noch wieder verschwendet(?) werden um alte Browser zu unterstützen.

Das Problem sind eher die Webseitenersteller, die mit den neuen Möglichkeiten überfordert sind und Angst davor haben. Das gleiche Phänomen gibt es ja beim Layouten mit Tabellen, von dem bis heute trotz aller Nachteile immer noch viele Leute nicht die Finger lassen können, obwohl es seit 15 Jahren eindeutig veraltet ist.

Gruss

MrMurphy
Mit Zitat antworten
  #7 (permalink)  
Alt 03.03.2015, 10:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Hallo,
In der Praxis muss das niemand mehr.
Doch, wir müssen das leider noch.
Und das zu entscheiden liegt leider nicht in der Macht des Websiteerstellers sondern an den Besuchern einer Seite.
Ich sage nicht, dass man auf flexbox verzichten muss, man muss nur darauf achten, wo man es einsetzt. In mediaqueries setze ich es auch ein (weil browser die diese verstehen, verstehen auch flexbox) aber nicht in den main-styles.
Und ja, es ist in den alten Browsern zwar benutzbar aber wenn die Anforderungen sind, dass es auch in alten Browsern gleich ausschaut kann man kein flexbox verwenden. Für kleine, mehr private Seiten, kann man flexbox natürlich ohne Probleme einsetzen.
Pauschal sagen kann man das leider noch nicht.
Mit Zitat antworten
  #8 (permalink)  
Alt 03.03.2015, 18:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.03.2015
Beiträge: 4
Mallorca befindet sich auf einem aufstrebenden Ast
Standard

Nicht streiten hier... lieber helfen wie man diese Geschichten aktiv am Beispiel umsetzen kann... komme da nicht weiter... kann mir irgendjemand helfen und mal ein Menüpunkt basteln. Auf der Flexbosseite war ich und komm da gar nicht weiter welchen Code ich wo einsetzen muss. Freue mich auf Eure Hilfe... Danke. ,-9
Mit Zitat antworten
  #9 (permalink)  
Alt 03.03.2015, 18:35
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

hier ein simples Beispiel zum weiter basteln:
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<style>
		html {
			box-sizing: border-box;
		}
		*, *:before, *:after {
			box-sizing: inherit;
		}
		* {
			margin: 0;
			padding: 0;
		}
		body {
			font: 100%/1.5 Arial, Helvetica, sans-serif;	
		}
		nav {
			width: 61.875em; /* 990px */
			margin: 1em auto;
		}
		ul {
			list-style: none;
			float: left;
		}
		li {
			float: left;
			width: 16.666666%; /* ein 6. der Breite */
			text-align: center;
		}
		a {
			color: #fff;
			text-decoration: none;
			padding: 5px;
			display: block;
			min-height: 3.7em;
			background: #4b6a7c;
			text-transform: uppercase;
		}
		a:hover {
			background: #0099cc;
		}
		.cf:after {
			content: " ";
			display: table;
			clear: both;
		}
	</style>
</head>
<body>
	<nav class="cf">
		<ul>
			<li><a href="#">So funktioniert die Website</a></li>
			<li><a href="#">Kosten &amp; Zahlungsarten</a></li>
			<li><a href="#">Neuanmeldung</a></li>
			<li><a href="#">Meine Website</a></li>
			<li><a href="#">Tipps &amp; Tricks</a></li>
			<li><a href="#">FAQ &amp; Hilfe</a></li>
		</ul>
	</nav>
</body>
</html>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.03.2015, 19:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.03.2015
Beiträge: 4
Mallorca befindet sich auf einem aufstrebenden Ast
Standard

Sehr geil... ,-9 Danke. Ich glaube in diesem Jahr hätte ich das nicht mehr hinbekommen, wenn ich mir den Quellcode so ansehe. Hoffe ich schaffe es noch heute wenigsten zu verstehen was da wo passiert. Nochmals vielen DANK für diese Leistung. FREU
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css menue

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
Hintergrund wird nicht angezeigt maxx CSS 6 14.10.2012 19:27
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 18:30
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
Auf-/Zuklappen mit JS crimi Javascript & Ajax 7 23.09.2008 17:27
CSS Tips & Tricks Webnauts Ressourcen 0 26.08.2006 00:04


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