CSS - Gleicher, horizontaler Abstand zwischen unterschiedlich breiten Elementen
Stefan Scholl
Hilfe entsprechender Templates kann ich Einfluss auf den Output
nehmen. Es werden auch freundlicherweise Klassen für gerade
aktive Seiten, sowie erste und letzte Seiten ausgegeben.
Nun kämpfe ich damit die Abstände zwischen den Links gleichmäßig
zu verteilen. Der Linktext ist unterschiedlich lang. Ich will mit
dem Anfang des ersten Links bündig mit dem linken Rand des
Content-Bereichs darunter anstoßen. Der letzte Link soll rechts
mit dem rechten Rand bündig sein.
Das ist der HTML-Code:
<ul class="nav">
<li class="first"><a class="active" href="/">Home</a></li>
<li><a href="/">Foofoofoo</a></li>
<li><a href="/">Bar</a></li>
<li class="last"><a href="/">News</a></li>
</ul>
Um beim Austesten zu sehen ob das so klappt, habe ich einen
hässlichen Tabellen-Code zur Orientierung geschrieben:
<table border="1" cellpadding="0" cellspacing="0" width="660">
<tr>
<td><a class="active" href="/">Home</a></td>
<td width="33%"> </td>
<td><a href="/">Foofoofoo</a></td>
<td width="33%"> </td>
<td><a href="/">Bar</a></td>
<td width="33%"> </td>
<td><a href="/">News</a></td>
</tr>
</table>
Der Tabellen-Code entspricht in der Ausgabe dem, was ich mit der
Liste+CSS-Lösung gerne hätte.
Die Pseudo-Class :do-as-i-want existiert noch nicht. Ein margin
von <rest-breite / (Elementanzahl - 1)> auch nicht.
Habe etwas rum gespielt und auch versucht leere LI hinzu zu
fügen, aber das brachte auch keine Lösung.
--
Web (en): http://www.no-spoon.de/ -*- Web (de): http://www.frell.de/
Markus Grob
[css-Problem?]
auf welcher Seite können wir das Problem betrachten, vor allem den
Pseudocode. Denn das Listenbeispiel nützt mir nichts.
Gruss, Markus
--
Sehr zu empfehlen:
http://www.google.ch/ oder .de/ oder .com/ usw.
Stefan Scholl
> Stefan Scholl schrieb:
>
> [css-Problem?]
>
> auf welcher Seite können wir das Problem betrachten, vor allem den
> Pseudocode. Denn das Listenbeispiel nützt mir nichts.
Es handelt sich nicht um einen Fehler, bei dem man auf den Code
sieht und dann sagt was man ändern muss. Mir fehlt die konkrete
Vorgehensweise das zu erreichen was ich am Ende haben will.
Ich habe Verschiedenes ausprobiert. Nicht nur mit einer Liste. Da
bin ich flexibel.
Aus einer Liste eine brauchbare Navigation machen ist kein
Problem. Da habe ich für andere Projekte schon schöne
CSS-only-Lösungen, die sogar mehrere Navigationsebenen
aufklappen.
Doch diesmal geht's nur um die erste Ebene der Navigation. Und die
soll den gegeben Platz voll und gleichmäßig ausnutzen.
"text-align: justify;" hat nicht funktioniert (ohne Liste
natürlich). Wäre mir aber sowieso etwas zu wacklig in der
Browserunterstützung gewesen.
Bei allen Suchtreffern im Netz ging's um andere Abstände, oder
Menüs, die immer zu nur einer Seiten ausgerichtet sind. Die
einzig passende Seite hat gezeigt wie man eine alte Website mit
mehr CSS neu baut. Und jeder Navigationspunkt hatte eine eigene
Pixelbreite im Style hinterlegt bekommen ... *ächz*
Susanne Jäger
> Nun kämpfe ich damit die Abstände zwischen den Links gleichmäßig
> zu verteilen. Der Linktext ist unterschiedlich lang. Ich will mit
> dem Anfang des ersten Links bündig mit dem linken Rand des
> Content-Bereichs darunter anstoßen. Der letzte Link soll rechts
> mit dem rechten Rand bündig sein.
>
> Das ist der HTML-Code:
>
> <ul class="nav">
> <li class="first"><a class="active" href="/">Home</a></li>
> <li><a href="/">Foofoofoo</a></li>
> <li><a href="/">Bar</a></li>
> <li class="last"><a href="/">News</a></li>
> </ul>
Wenn ich dich richtig verstanden habe ...
ungetestet, eher ein Denkanstoß
ul#nav {width: 100%; }
#nav li {width: 25%; /* oder vorsichtshalber 24 - ausprobieren*/
float: left;
min-width: 8em; /* ausprobieren wieviel Platz Foofoofoo in
Verdana braucht */
}
#nav a {display: block; text-align: center; }
#nav .first a {text-align: left;}
#nav .last a {text-align: right;}
Mal testen, ob das schon passt und sich der Rest durch
padding/margin/border Gemauschel hinbiegen läßt. Das hängt ein bisschen
von den echten Linktexten und der gesamten verfügbaren Breite ab.
Gruß
Susanne
Stefan Scholl
> Stefan Scholl wrote, On 06.08.2007 16:51:
>> Nun kämpfe ich damit die Abstände zwischen den Links gleichmäßig
>> zu verteilen. Der Linktext ist unterschiedlich lang. Ich will mit
>> dem Anfang des ersten Links bündig mit dem linken Rand des
>> Content-Bereichs darunter anstoßen. Der letzte Link soll rechts
>> mit dem rechten Rand bündig sein.
>>
>> Das ist der HTML-Code:
>>
>> <ul class="nav">
>> <li class="first"><a class="active" href="/">Home</a></li>
>> <li><a href="/">Foofoofoo</a></li>
>> <li><a href="/">Bar</a></li>
>> <li class="last"><a href="/">News</a></li>
>> </ul>
>
> Wenn ich dich richtig verstanden habe ...
>
> ungetestet, eher ein Denkanstoß
>
> ul#nav {width: 100%; }
> #nav li {width: 25%; /* oder vorsichtshalber 24 - ausprobieren*/
> float: left;
> min-width: 8em; /* ausprobieren wieviel Platz Foofoofoo in
> Verdana braucht */
> }
Leider weiß ich vorher nicht wie lang die Wörter sind und wie
viele Navigationspunkte es werden. Die Navigation wird dynamisch
erzeugt. Ich habe Einfluss auf den HTML-Code und welche Klassen
bei besonderen Fällen (erstes, letztes, etc.) zugeordnet werden.
Es werden die Klassen vorgegeben und kleine HTML-Templates aus
denen alles zusammen gebaut wird.
> #nav a {display: block; text-align: center; }
> #nav .first a {text-align: left;}
> #nav .last a {text-align: right;}
Bei einem der Versuchen hatte ich auch mit solchen Ausrichtungen
gespielt. Dabei sind die Abstände zwischen den Wörtern in der
Mitte geringer als zwischen erstem und zweiten und vorletzten und
letztem Wort. Gerade wenn die Randwörter kurz sind fällt das auf.
Das ist das größte Hindernis. Die Anzahl der Navigationspunkte
könnte ich theoretisch selbst ermitteln, wenn ich nicht die
fertigen Routinen zum Navigationsbau benutze, sondern selbst
etwas programmiere. Müsste dann eben die Breite ins
STYLE-Attribut direkt schreiben. Nur die Ausrichtung macht das
dann kaputt.
> Mal testen, ob das schon passt und sich der Rest durch
> padding/margin/border Gemauschel hinbiegen läßt. Das hängt ein bisschen
> von den echten Linktexten und der gesamten verfügbaren Breite ab.
Tendiere zu zwei Lösungen:
1.) Layoutvorgabe lockerer sehen
2.) Navigationsroutine selbst schreiben und eine Tabelle
verwenden.
Bin also nicht in einer richtigen Sackgasse. Wäre nur schön das
etwas eleganter lösen zu können.
Markus Grob
> Leider weiß ich vorher nicht wie lang die Wörter sind und wie
> viele Navigationspunkte es werden.
Nun, dann wird es mit CSS sicher Überlappungen geben, ausser, Du
reservierst "zu viel". Sonst filterst Du vor der Ausgabe im php die
Wörter, suchst das längste und verpasst dem css die notwendige Länge.
Fragt sich nur, wie breit Du wirklich werden willst, oder ob ein Umbruch
des Menüs nicht sinnvoller wäre.
> Tendiere zu zwei Lösungen:
> 1.) Layoutvorgabe lockerer sehen
Sehr vernünftig ;-)
> 2.) Navigationsroutine selbst schreiben und eine Tabelle
> verwenden.
Naja. Wie man will. Ich nicht ;-)
Peter Blancke
> Sonst filterst Du vor der Ausgabe im php die Wörter, suchst das
> längste und verpasst dem css die notwendige Länge.
Wie? Anzahl Buchstaben des Wortes als em-Angabe?
Grusz,
Peter Blancke
--
Hoc est enim verbum meum!
Norbert Melzer
> Ad 2007-08-09, Markus Grob <lor...@ilnet.ch> dixit:
>
>> Sonst filterst Du vor der Ausgabe im php die Wörter, suchst das
>> längste und verpasst dem css die notwendige Länge.
>
> Wie? Anzahl Buchstaben des Wortes als em-Angabe?
Em-Angaben sind ja sowieso "Pflicht", also mittels PHP ermitteln wie die
Breite bei $Schriftart und $Schriftgröße in Pixeln wäre und dieses dann per
$__magic_formula in em Umrechnen.
SCNR
Norbert
Norbert Melzer
> Ad 2007-08-09, Markus Grob <lor...@ilnet.ch> dixit:
>
>> Sonst filterst Du vor der Ausgabe im php die Wörter, suchst das
>> längste und verpasst dem css die notwendige Länge.
>
> Wie? Anzahl Buchstaben des Wortes als em-Angabe?
Em-Angaben sind ja sowieso "Pflicht", also mittels PHP ermitteln wie die
Breite bei $Schriftart und $Schriftgröße in Pixeln wäre und dieses dann per
__magic_formula() in em Umrechnen.
SCNR
Norbert