|
|||
Menüleiste im Blocksatz
Hi,
ich habe einen Entwurf umzusetzen, der eine Menüleiste im Blocksatz vorsieht. D.h. es gibt einen Balken, der 5 Menü-Punkte enthält, Der erste sitzt linksbündig, der letzte rechtsbündig und die Zwischenräume sind alle gleich. Das ganze soll in ein CMS, sodass nach einer Änderung die Zwischenräume automatisch angepasst werden. Ich habe schon etliches ausprobiert, aber die Zwischenräume bei unterschiedlichen Wortlängen bekomme ich nicht ausgeglichen. Hat jemand einen Tipp wie das umzusetzen ist, bzw. ob das überhaupt geht. Viele Grüße von Lotta |
Sponsored Links |
|
|||
Was hast du denn "etliches" bisher probiert?
Nebenbei hast du das Stichwort für einen Lösungsansatz bereits selbst geliefert: Blocksatz (=text-align: justify). |
Sponsored Links |
|
|||
Das Problem ist nur, dass es keinen einzeiligen Blocksatz gibt! Erst wenn die erste Zeile gefüllt ist, und das nächte Wort nicht mehr in die Zeile passt werden die Abstände vermittelt. Vorher ist allen rechtsbündig.
|
|
|||
Genau.
Man könnte dafür sorgen, dass immer etwas in der zweiten Zeile steht. Wie soll man dir denn was konkretes sagen können, wenn du nicht herzeigst, worum es dir geht?
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Einen Link zur Seite darf ich leider nicht posten.
Ich habe die relevanten Stellen aus CSS und HTML kopiert. Bei der jetzigen unbefriedigenden Lösung habe ich den li Größenangaben in % gegeben, wobei die äußeren kleiner sind, da sie ja keinen Außenabstand haben. Das ganze sollte dann soweit funktionieren, dass der Kunde die Texte ändern kann und die Abstände automatisch ausgeglichen werden. HTML-Code:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title></title> <style type="text/css" media="screen"> <!-- #wrapper{ margin:35px auto 20px; width:945px; } #header { height: 73px; width: 100%; position: relative; top: 0px; background-color: #cccccc; } #logo { height: 73px; width: 92px; float: left; } #header li { float: left; padding: 0px; margin: 0px 0px 0px 0px; display: inline; text-align: center; width:30%; line-height: 16px } #header ul { padding: 29px 30px 0px 0px; margin:0; list-style-position: outside; list-style-type: none; width:753px; float: right; } .first { text-align: left !important; width:20% !important; } .last { text-align: right !important; width:20% !important; } #header a { color: #ffffff; } -- > </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"> <img src="/pfad/img_layout/head_logo.gif" alt="" height="73" width="92" name="logo" /></div> <ul> <li class="first"><a href="#">Kurz</a></li> <li ><a href="#">Langer Link</a></li> <li ><a href="#">Läääääääääängerer Link</a></li> <li class="last"><a href="#">Langer Link</a></li> </ul> </div> </div> </body> </html> |
|
|||
Doctype fehlt.
Du floatest die li-Elemente, da geht kein Blocksatz. Du brauchst inline oder inline-block. Ich habe dir bereits den Tipp gegeben, eine zweite Zeile zu erzeugen. In modernen Browsern ginge das sogar ohne Zusatzmarkup mit generated content. Code:
#header ul:after { content:"Ich bin die zweite Zeile."; display:inline-block; width:100%; }
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Hi Fricca,
vielen Dank für deine Hilfe. Ich habe es jetzt hinbekommen mit der zweiten Zeile, indem ich ein List-Element angehängt habe, das ein transp. Gif enthält und so breit ist wie die Liste. Bei den restlichen List-Elementen werden die Abstände jetzt schön vermittelt. Einen Schönheitsfehler hat das ganze noch, wenn ein List-Element mehrere Wörter enthält, werden diese auch auseinander gezogen. Man muss ein Geschütztes Leerzeichen einfügen um das zu vermeiden. Hast du noch einen Tipp um das zu umgehen? Viele Grüße Lotta HTML-Code:
<html> <head> <style type="text/css" media="screen"> <!-- #wrapper{ margin:35px auto 20px; width:945px; } #header { height: 73px; width: 100%; position: relative; top: 0px; background-image: url(img_layout/head_bg_nav.gif); } #logo { position: absolute; height: 73px; width: 92px; top: 0; left: 0; } #header li { padding: 0px; margin: 0px 0px 0px 0px; display: inline; /* Fix for doubled margin IE Bug */ line-height: 16px; text-align: left !important; } #header ul { position: absolute; padding: 29px 30px 0px 0px; margin:0; list-style-position: outside; list-style-type: none; width:753px; text-align: justify; display:inline-block; top: 0; right: 0; } #header a { color: #ffffff; } -- > </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"> <img src="/img_layout/head_logo.gif" alt="" height="73" width="92" name="logo" /></div> <ul> <li ><a href="#">Link1 </a> </li> <li ><a href="#">Link2 lang </a> </li> <li ><a href="#">Link3 lääääääänger </a> </li> <li ><a href="#">Link4 lang </a> </li> <li><img src="img_layout/spacer.gif" width="750" height="1"></li> </ul> </div> </div> </body> </html> |
|
|||
inline-block für die li-Elemente sollte helfen, ist aber browserübergreifend mühsamer. Wenn du die Möglichkeit hast, den Whitespace in den Links durch zu ersetzen, dann ist das wohl das einfachste.
Bitte: Schau dir den Code, den du postest, doch selbst mal im Browser an. Wir sehen deine (Hintergrund-)Bilder nicht! Es fehlt noch immer ein Doctype. Nein, das ist nicht egal (Google: "Doctype Switch"). Ein Stylesheet musst du nicht auskommentieren. Aber wenn du es tust, dann achte darauf, dass die Kommentare korrekt sind. Bei meinen Tests habe ich im IE erstmal gar nichts gesehen.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (19.05.2010 um 11:05 Uhr) |
|
|||
Zitat:
Ich habe jetzt noch ein "display: inline-block" zu "#header a" hinzugefügt, damit bleiben auch Links mit mehreren Wörtern zusammen. Vielen Dank noch einmal für deine Hilfe. Grüße Lotta |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Menüleiste einbinden | Tim0 | CSS | 4 | 21.05.2011 14:10 |
suche eine bestimmte menüleiste ? | ModelWizko | Javascript & Ajax | 15 | 01.10.2010 19:54 |
Ausrichtung in Menüleiste | heho | CSS | 8 | 08.06.2010 21:29 |
Eigene Menüleiste | keyboardY | CSS | 4 | 25.01.2010 22:06 |
Einstieg in Css, Einfügen einer Menüleiste | Calistus | CSS | 3 | 27.07.2006 15:01 |