nicht angemeldet
Text »ausruecken« - eine Loesung
Hallo, liebe Foraner,
vor einer Weile stand ich vor dem Problem, einen kleinen Absatz _links_ auszuruecken, waehrend der Fliesstext rechts eben vorbeifliesst *g*. Vorgabe: moeglichst wenig Aufwand und moeglichst ueberall (auch wenn nicht ausgerueckt) sichtbar.
Gesagt, gedacht, nach ein bisschen herumprobieren stand im Quelltext ein <div> mit CSS ein wenig nach links gerueckt (incl. tabellenkram und so weiter..).
Schade war nur, dass der IE5/Mac damit Schwierigkeiten hatte (der IE4.5 interessanterweise nicht :-)), da war der div-Bereich naemlich gar nicht zu sehen, geschweige denn ausgerueckt. Da man einem User ja nicht verbieten kann, den IE zu benutzen, musste ich mir gezwungenermassen was anderes einfallen lassen. Nach ein paar Gespraechen mit <wink> Antje </wink> und ein wenig Weiterprobieren entstand dann folgende Moeglichkeit (in der Grundversion):
CSS-Definition im head oder sonstwo definiert:
[...]
#ruck {position:relative; left:30px; margin-left:0px;} // 30px nach rechts ruecken
[...]
und HTML:
[...]
<dl compact>
<dt>
<table border=0 cellspacing=0 cellpadding=0 align="left"><!-- die Linksausrichtung ist wichtig! -->
<tr><td>
<!-- hier steht dann das Ausgerueckte -->
</td></tr>
</table></dt>
<dd id="ruck">
<!-- Hier steht der Fliesstext, der rechts um das "Ausgerueckte" herum fliesst -->
</dd></dl>
[...]
Bei dieser Methode wird genau der umgekehrte Weg beschritten, naemlich nicht der Absatz nach links gerueckt, sondern eben der Fliesstext nach rechts. Naeheres zu den verwendeten Definitionslisten ist auf < http://www.teamone.de/selfhtml/tcdf.htm> zu finden.
Das gute an der Loesung ist, der Text wird immer gerueckt (ab NN3/IE3 <-- bis dahinunter getestet...), das Prinzip ist naemlich reines HTML. Das schlechte ist, die im CSS festgelegten Abstaende erkennt der Navigator (in Listen) nicht an. (Der NN6 kann es leider noch gar nicht, da kommt nur Muell :-((, aber das kann ja noch werden :-). ) Das heisst, man sollte sowas nur als Effekt nehmen, eine absolute Positionierung wird dadurch _nicht_ ersetzt.
In meinem Fall handelte es sich um einen (per CGI) redaktionell betreuten Text, daher wusste ich Positionen und dergleichen vorher noch nicht....deshalb der Aufwand.
Angucken kann man eine Testdatei (auch mal zum Vergleichen NN-IE) unter folgendem Link:
< http://www.ndparker.de/ruck.htm>
okay, soweit erstmal
cua
n.d.p.
-
Hi n.d.,
netter Trick, das. Was mich allerdings daran ein bisschen stört ist, dass Du <dl> dafür "missbrauchst" (Grund: <dl> ist eine Glossarliste, für mich etwas in der Art einer logischen Textauszeichnung, und sollte halt am besten nur für Glossare (oder verwandtes) verwendet werden.
Jedenfalls hab ich mich gerade geschlagene zwei Minuten auf meinen Hosenboden gesetzt und Dein Beispiel so umgeschrieben, dass es genau das gleiche tut, aber "sauberer" im Sinne von HTML vulgo SGML und auch noch ein bisschen kürzer ist:CSS-Definition im head oder sonstwo definiert:
[...]
#ruck {position:relative; left:30px; margin-left:0px;} // 30px nach rechts ruecken
[...]unverändert, aber HTML statt dessen:
<div id="ruck">The Apache Project (...)</div>
<table border=0 cellspacing=10 cellpadding=0 align="left"><!-- die Linksausrichtung ist wichtig! -->
<tr><td align="center" valign="middle"><p>The Apache HTTP Server (...)</p></td></tr>
</table>
<div id="ruck">In February of 1995 (...)</div>Wenn Du die Tabelle - analog zu <dd> - ein wenig eingerückt willst, dann musst Du dafür halt auch Stylesheets oder ein leeres GIF benutzen.
Verändertes Beispiel ist getestet mit IE5. Aber so richtig neu ist das alles nicht, dass per align ausgerichtete Tabellen von Text umflossen werrden, wissen wir ja spätestens seit SelfHTML.
Grüße,
Utz
-
hi, utz
<div id="ruck">The Apache Project (...)</div>
Verändertes Beispiel ist getestet mit IE5.genau das war das prob mit dem ie5/MAC er kam mit einem relativ positionierten div-bereich nicht klar, hast dus mit nem mac getestet? Und ausserdem hat man mit der methode den nachteil, bei deaktivierten stylesheets (oder gar nicht vorhandener Implementation *g*) faellt der linke Rand, der durch die <dl>s entsteht, voellig wech, das ist aber nur zweitrangig..., da gibts ja Kompromissloesungen :-)
Aber so richtig neu ist das alles nicht, dass per align ausgerichtete Tabellen von Text umflossen werrden [...]
naja, das align=left ist deswegen wichtig, weil er ja bei <dl compact> den <dd>-text NEBEN das <dt>-feld schreiben soll, tut er aber beim NN (IE weiss jetzt nicht mehr genau) nicht ohne align="left" :-))
aber trotzdem interessante anregung mit den divs.
achja, da faellt mir noch ein, dass der nn ja ausserdem probleme mit divs mit speziellen inhalten hat (mit links zum Teil udgl.)
cua
n.d.p.
p.s.: ich denke, der "Missbrauch" von HTML-Befehlen laesst sich bei manchen Designerwuenschen oftmals leider nicht vermeiden :-((
-
Hi n.d.,
genau das war das prob mit dem ie5/MAC er kam mit einem relativ positionierten div-bereich nicht klar, hast dus mit nem mac getestet?
Ne, war mit NT, dieses IE5/Mac-Problem war mir bisher auch nicht bekannt (hab leider keinen Mac zum Testen zur Verfügung). Das erklärt natürlich auch, warum Du diese Lösung gewählt hast.
p.s.: ich denke, der "Missbrauch" von HTML-Befehlen laesst sich bei manchen Designerwuenschen oftmals leider nicht vermeiden :-((
Ja, da hast Du ja so recht - ich versuch halt bei mir immer nur, den "Missbrauch" möglichst gering zu halten.
Grüße,
Utz
-
-