|
|||
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. ,-) |
Sponsored Links |
|
|||
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. |
Sponsored Links |
|
|||
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. ,-) |
|
|||
Hallo,
Zitat:
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 |
|
|||
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. |
|
|||
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
|
Sponsored Links |
|
|||
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
|
Sponsored Links |
Stichwörter |
css menue |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |