nicht angemeldet
float in UL/LI
Hallo,
dies ist die Fortsetzung eines Threats, der sich mit dem Formatieren von Überschriften
befasste.
Erstmal bedanke ich mich noch mal bei allen, die mir geholfen haben. Ich habe
eine Menge dazu gelernt.
Aufgabe: Setze in einer Zeile das Datum an den rechten Rand und fahre ohne
Leerraum in der nächsten Zeile darunter fort.
Das klappt mit <p style="clear: left;"> bei Überschriften und den folgenden
Absätzen.
Nur für die Tags UL und LI sieht es ein bisschen komisch aus, da ist
ein Zeilenumbruch direkt nach dem Aufzählungszeichen. So:
li span.rechts { float: right; }
li span.links { float: left; }
ul span.rechts { float: right; }
ul span.links { float: left; }
......
<UL>
<LI><span class="links">Text links </span><span class="rechts">Datum</span>
<P style="clear: left;"><i>Text drunter</i></P>
</UL>
liefert:
"-
Text links Datum
Text drunter"
Es muss dafür doch eine grundsätzliche Lösung ohne Tricks geben?
Viele Grüße
Petra
-
li span.rechts { float: right; }
li span.links { float: left; }
ul span.rechts { float: right; }
ul span.links { float: left; }......
<UL>
<LI><span class="links">Text links </span><span class="rechts">Datum</span>
<P style="clear: left;"><i>Text drunter</i></P>
</UL>Das funktioniert bei mir gar nicht (Datum wird nicht angezeigt)
Aber das:
li
{
border:1px solid black;
}
.rechts {
float:right;
width:6em;
border:1px solid black;}
</style>
</head>
<body><UL>
<LI>
<span class="rechts">Datum</span>
Text links und blablablab blablablablablab blabla<br>
blablablab blablablablablab blablablablablab blabla<P style="clear: left;"><i>Text drunter</i></P>
</li>
</UL>Struppi.
-
Hi,
Nur für die Tags UL und LI sieht es ein bisschen komisch aus, da ist
ein Zeilenumbruch direkt nach dem Aufzählungszeichen. So:
li span.rechts { float: right; }
li span.links { float: left; }
ul span.rechts { float: right; }
ul span.links { float: left; }Warum doppelt?
Abgesehen davon, float erfordert zwingend eine explizite Breite. Diese fehlt hier.Und wie Struppi schon schrieb: die links-floatenden Teile brauchen eigentlich gar nicht gefloatet zu werden.
li .rechts { float:right; width:10em; }
li p { clear:both; font-style:italic; }<ul>
<li>
<span class="rechts">Datum</span>text links
<p>Text drunter</p>
</li>
</ul>cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hallo Andreas,
danke, aber bei dieser Lösung rutscht das Datum um eine Zeile nach unten,
zumindest bei Netscape.Petra
Und wie Struppi schon schrieb: die links-floatenden Teile brauchen eigentlich gar nicht gefloatet zu werden.
li .rechts { float:right; width:10em; }
li p { clear:both; font-style:italic; }<ul>
<li>
<span class="rechts">Datum</span>text links
<p>Text drunter</p>
</li>
</ul>cu,
Andreas-
Hi,
danke, aber bei dieser Lösung rutscht das Datum um eine Zeile nach unten,
zumindest bei Netscape.Kann ich nicht feststellen - bei mir ist "Datum" auf der selben Höhe wie "text links".
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Kann ich nicht feststellen - bei mir ist "Datum" auf der selben Höhe wie "text links".
http://home.arcor.de/struebig/js/test/test float datum.htm
Struppi.
-
Bei meiner Netscape Version ist der erste Rahmen superklein, genauso groß
wie das Aufzählungszeichen und steht auch direkt daneben, dann ein unerwünschter
Zeilenumbruch."Text drunter" erscheint sowohl bei Netscape als auch bei Explorer nach
einer Leerzeile .....http://home.arcor.de/struebig/js/test/test float datum.htm
Struppi.
-
Hi,
Bei meiner Netscape Version ist der erste Rahmen superklein, genauso groß
Wie viele Jahre ist die denn alt?
Versionsnummer?
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
alt, 4.7. Aber das kann ja vorkommen ....
Wie viele Jahre ist die denn alt?
Versionsnummer?
-
Hallo Petra,
alt, 4.7. Aber das kann ja vorkommen ....
da wäre eine URI oder ein konkretes vollständiges Beispiel worum es dir geht sinnvoll.
Das Problem deines Ausgangspostings läßt sich z.B. so nachbessern,
mit Netscape 4 Weiche http://www.lipfert-malik.de/webdesign/tutorial/bsp/kristof-lipfert-nc4-crossover.html:/*/*//*/{! i{}
ul span, ul p{position:relative;top:-1.2em}
*}{}/* */Allerdings dürfte diese rustikale Vorgehensweise die Funktion von Links beeinträchtigen,
wie soll denn die Seite aussehen?Grüsse
Cyx23
-
http://santana.uni-muenster.de/~petra/example.html
Das Datum soll rechts außen stehen und xxxx, zzzz ohne Abstand.
Petrada wäre eine URI oder ein konkretes vollständiges Beispiel worum es dir geht sinnvoll.
»
-
Hallo Petra
http://santana.uni-muenster.de/~petra/example.html
Das Datum soll rechts außen stehen und xxxx, zzzz ohne Abstand.
Da klappt gar nicht mit NC 4.x
Ich weiß nicht was dir an meiner Variante mißfällt. Sie ist kürzer und funktioniert.
Struppi.
-
ich gebs auf. Ich bastle das jetzt mit table hin, pro LI eine Tabelle mit
einer Zeile und zwei Spalten. Primitiv, aber das klappt dann wenigstens.
Mit CSS kenne ich mich auch noch
noch nicht aus, drum weiß ich nicht, was mit margins gemeint ist, bzw. wo die
definiert sein müssen.Bei den Überschriften hat es ja prima geklappt, aber hier .... jedenfalls
habe ich was gelernt. Vielen Dank!!!Petra
Hallo Petra
http://santana.uni-muenster.de/~petra/example.html
Das Datum soll rechts außen stehen und xxxx, zzzz ohne Abstand.
Da klappt gar nicht mit NC 4.x
Ich weiß nicht was dir an meiner Variante mißfällt. Sie ist kürzer und funktioniert.
Struppi.
-
Hallo,
ich gebs auf. Ich bastle das jetzt mit table hin, pro LI eine Tabelle mit
einer Zeile und zwei Spalten. Primitiv, aber das klappt dann wenigstens.
Mit CSS kenne ich mich auch noch
noch nicht aus, drum weiß ich nicht, was mit margins gemeint ist, bzw. wo diedann ists allerdings etwas schwierig.
So läßt es sich auch hinbiegen:
<style type="text/css">
* h3 span.rechts { float: right; }
* h3 span.links { float: left; }
* h4 span.rechts { float: right; }
* h4 span.links { float: left; }
* li span.rechts { float: right;}
* li span.links { float: left;}/*/*//*/{! i{}
ul{margin:0;padding:0;list-style:none}
li{margin:0;padding:0;margin-top:-25px;}
.links {float:left;clear:right;}
.rechts {float:right;clear:left;}
p{display:inline;}
*}{}/* */</style>
Aber es ginge sicher noch eleganter wenn du mit CSS-Kenntnissen ggf. das HTML
noch etwas veränderst, aber eine TABELLE ist doch auch gut, und wahrscheinlich
_ohne_ Liste sogar für den Zweck vollkommen richtig eingesetzt!Grüsse
Cyx23
-
Hallo miteinander,
unter LI eine Tabell und ein bisschen mit align experimentiert, das wars.
Wieso denn kompliziert, wenn es auch einfach geht ...
Dank + Gruß
Petra-
Hallo nochmal,
unter LI eine Tabell und ein bisschen mit align experimentiert, das wars.
von dir kam ja die Äusserung "Primitiv"er Tabellen...
Wieso denn kompliziert, wenn es auch einfach geht ...
Es gibt ja noch Aspekte der Validität oder des richtigen HTMLs, die z.B. für zukünftige Browser
besonders interessant sein können und damit den Gesamtaufwand langfristig reduzieren;
oder evtl. der Wunsch nach semantisch richtigem HTML, z.B. hinsichtlich Suchmaschinen.Da stellt sich die Frage worum des dir mit der Liste geht, "richtiges HTML" oder
Darstellung der Bullets oder noch was anderes?Grüsse
Cyx23
-
-
-
ich gebs auf. Ich bastle das jetzt mit table hin, pro LI eine Tabelle mit
einer Zeile und zwei Spalten. Primitiv, aber das klappt dann wenigstens.
Mit CSS kenne ich mich auch noch
noch nicht aus, drum weiß ich nicht, was mit margins gemeint ist, bzw. wo die
definiert sein müssen.Naja, ein bisschen lesen z.b. in selfhtml würde dir da weiterhelfen. ist auf jeden Fall einfacher als mit Tabellen.
http://home.arcor.de/struebig/js/test/test float datum.htm
das klappt sogar mit dem NC 4.x
Struppi.
-
http://home.arcor.de/struebig/js/test/test float datum.htm
das klappt sogar mit dem NC 4.x
naja, zugegeben nicht ganz.
Struppi.
-
Hallo Strupi,
das klappt sogar mit dem NC 4.x
naja, zugegeben nicht ganz.
das läßt sich ja ähnlich wie schon beschrieben für den NC4 gut nachbessern,
sodaß alle Positionen stimmen; bedeutet natürlich hier konkret im Trüben
Fischen wenn die weiteren Layoutvorgaben von "Petra" fehlen.Ich kann auch nicht nachvollziehen welchen Sinn die ungeordnete Liste haben
soll zumal sowieso Tabellen eingesetzt werden, womöglich ein Missverständnis
dass Tabellen nicht mehr als Tabelle sondern als angebliches "Layoutmittel"
betrachtet werden, und dann auch hier womöglich aus dem Ansatz kommend benutzt
werden statt zur Tabelle zu kommen. Oder hab ich im Thread etwas hinsichtlich
der Liste oder eines CMS o.ä. überlesen?Grüsse
Cyx23
-
-
-
-
-
Hallo,
http://santana.uni-muenster.de/~petra/example.html
da ist wohl noch ein li falsch verschachtelt, aber was soll eigentlich mit
list-style passieren, bei IE 6 müssten die ja auch verändert oder abgestellt werden?Grüsse
Cyx23
-
-
-
-
-
Bei meiner Netscape Version ist der erste Rahmen superklein, genauso groß
wie das Aufzählungszeichen und steht auch direkt daneben, dann ein unerwünschter
Zeilenumbruch.Also ich hab auch eine NC 4.5 hier und bei mir sieht das so aus:
<img src="http://home.arcor.de/struebig/js/test/test%20float_right%20nc%204.gif" border="0" alt="">der 1. Rahmen ist nur zur verdeutlichung und hat nichts mit der darstellung zu tun. NC 4.x kann keinen Rahmen um li. Ich glaube kaum das die andere Variante besser aussieht.
"Text drunter" erscheint sowohl bei Netscape als auch bei Explorer nach
einer Leerzeile .....Das hab ich dir schon mal geschrieben das ist kein zeilenumbruch sindern ein Abstand. Einfach die margins anpassen dan ist da auch keiner mehr.
Struppi.
-
-
-
-
danke, aber bei dieser Lösung rutscht das Datum um eine Zeile nach unten,
zumindest bei Netscape.Nein, tut es nicht. Du musst nur das Datum vor dn Text schreiben.
Struppi.
-
-