"float" statt Tabelle

[Gerd-Lothar]

Ich benutze auf meinen Seiten die Konstruktion:

<span class="tab_links">aaaaa</span>
<span class="tab_rechts">bbbbb</span>

<span class="tab_links">ccccc</span>
<span class="tab_rechts">ddddd</span>

mit:
.tab_links { float:left; font-weight:bold; 200px;}
.tab_rechts { 400px; margin-bottom:20px;}

die bei mir ordentlich und wohl meistens woanders auch richtig kommt, aber nicht bei jemand mit Mac OS (MS IE 5.1, Netscape 6.2).

(Der Zweck ist, 2 Spalten zu erzeugen (tab_links = 1., tab_rechts = 2. Spalte, sodaß entsteht:

aaaaa  bbbbb....
ccccc  ddddd....
usw.
)

Ich finde das sehr ärgerlich, weil ich das alles sehr genau studiert hatte und dann begonnen hatte, auf CSS umzustellen und die Tabellen hinauszuwerfen; ich habe wenig Lust, das alles wieder rückgängig zu machen.

Klappt also "float" nicht überall, oder was stimmt nicht?

Gruß
Gerd-Lothar

[Gerd-Lothar]

Prompt vertippt:

Es heißt natürlich

width:200px;
width:400px;

Gerd-Lothar

[MudGuard]

Hi,

Ich benutze auf meinen Seiten die Konstruktion:

<span class="tab_links">aaaaa</span>
<span class="tab_rechts">bbbbb</span>

<span class="tab_links">ccccc</span>
<span class="tab_rechts">ddddd</span>

mit:
.tab_links { float:left; font-weight:bold; 200px;}
.tab_rechts { 400px; margin-bottom:20px;}

span ist ein inline Element. Bei Inline-Elementen gibt es die Eigenschaft width (die ja laut zweitem Posting zu den 200px bzw. 400px gehört) nicht.
Bin mir aber nicht 100% sicher, denn bei float:left steht, daß eine block-Box erzeugt wird (http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-float), bei der Beschreibung der block-level-Elemente steht aber nichts von float:left (http://www.w3.org/TR/REC-CSS2/visuren.html#block-box)...

Inline-Elemente floaten doch aber sowieso.

In .tab_links müßte meines Erachtens auch noch ein clear rein, da sonst bei mindestens 800 Pixeln Breite folgende Darstellung (wiederum mit der Einschränkung, daß width hier überhaupt zutrifft...) passieren müßte
aaaaa bbbbb ccccc
ddddd
bzw. ab 1200 Pixeln
aaaaa bbbbb ccccc ddddd
usw.

(Der Zweck ist, 2 Spalten zu erzeugen (tab_links = 1., tab_rechts = 2. Spalte, sodaß entsteht:
aaaaa  bbbbb....
ccccc  ddddd....
usw.
)
Ich finde das sehr ärgerlich, weil ich das alles sehr genau studiert hatte und dann begonnen hatte, auf CSS umzustellen und die Tabellen hinauszuwerfen; ich habe wenig Lust, das alles wieder rückgängig zu machen.

Für tabellarische Daten sind Tabellen aber eigentlich vorgesehen...

cu,
Andreas

[Gerd-Lothar]

Hier noch der Link der Seite:
http://www.webliteratur.de/_neu.htm

Gruß
GL

[MudGuard]

Hi,

Hier noch der Link der Seite:

http://www.webliteratur.de/_neu.htm

Das ist kein Link, das ist ne URL.

Schon mal mit dem erwähnten clear:left; probiert?
Das dürfte zumindest die 25.05.2003 untereinander setzen.

Bei dem langen Eintrag wird das allerdings nichts ändern - so ist float eben definiert...

cu,
Andreas

[Siechfred]

Guten Tag,

http://www.webliteratur.de/_neu.htm
Bei dem langen Eintrag wird das allerdings nichts ändern - so ist float eben definiert...

Ich weiß nicht, ob es dir hilft, aber versuche doch mal, dein Vorhaben mit <div> unter Verwendung von display:block zu überarbeiten. Zumindest erzeugt div afaik ein Block-Level-Element, wie table ja auch eines ist.

mfg Torsten

[Gerd-Lothar]

Danke für die Mühe, die sich alle gemacht haben!

Jedoch:

Tables interessieren mich hier nicht; die benutze ich seit 7 Jahren, und wie man die einsetzt, ist mir bekannt. Und den Schreibfehler mit "Link" statt "URL" lasse ich mir gerne aufzeigen; da bin ich auch selbst drauf gekommen.

Mich interessierte einfach, wo hier der "Fehler" sein sollte (ich sehe keinen und mein Browser stellt die Seite auch wie gewünscht dar).

Polemik nützt hier gar nichts und "span ist hier semantischer Quatsch" soll wohl heißen:

"span ist hier SICHER KEIN semantischer Quatsch", denn siehe z.B. Seite http://www.brainjar.com/css/positioning/default2.asp
zu "float":

1. Muß hier natürlich "width" kommen,
2. ist

<p>
  <span style="float:right;width:40%;">content...</span>
  content content content content content content content content...
</p>

klar.

Wo ist also der Fehler mit z.B.

<p>
<span style="float:left; width:100px;">content...</span>
<span style="width:400px;">content...</span>
</p>

?

Das würde mich schon interessieren....

Gruß
Gerd-Lothar

[Tim Tepaße]

Hallo Gerd-Lothar,

entschuldige, wenn meine Überschrift etwas harsch klingt, eine persönliche
Kritik sollte damit nicht gemeint sein. Es gibt in diesem Forum eine
Tradition, zusätzliche Tips zu geben, die sich zwar nicht direkt auf das
Ausgangsposting beziehen, dem Fragenden aber trotzdem weiterhelfen sollen.
In dieser Tradition ist mein Posting zu lesen, auf das Du im übrigen
auch hättest direkt antworten können.

Tables interessieren mich hier nicht; die benutze ich seit 7 Jahren, und
wie man die einsetzt, ist mir bekannt.

Es geht darum, wann man die einsetzt. HTML ist dafür geschaffen, Text
mit Zusatzinformationen anzureichern, z.B. "Dies ist eine Überschrift,
dies ist eine Abkürzung, dies ist ein Absatz". Man schafft durch die
korrekte Auszeichnung mit HTML also einen Mehrwert an Information,
eben an Semantik.

Warum ist das wichtig? Webseiten können auf den unterschiedlichsten
Ausgabemedien angegeben werden, so zum Beispiel in Textbrowsern.
Diese stellen nur Text dar, keinerlei visuelle Formatierung wie
z.B. mittels CSS. Aber jeden Quentchen an semantischer Zusatzinformation
hilft solchen Ausgabemedien dabei, die Seite in der ihn eigenen Art
besser auszugeben und damit meist die Seite für den Besucher
zugänglicher zu machen. Daraus folgt mein Credo, immer erst zu schauen,
ob man seinen Text mit semantisch wertvolleren HTML-Elementen
auszeichnen kann, ehe man zu Elementen ohne semantische Zusatzinformation,
genauer zu span und div, greift.

Und in Deinem Fall war das gegeben. Ich habe mir nun ein paar Gedanken
gemacht und mehrere sinnvolle Möglichkeiten aufgezeigt und auch Zeit
geopfert, diese ausführlicher zu beschreiben. Und jetzt muß ich noch
mehr Zeit opfern, weil Du Dir augenscheinlich nicht die leichte
Anstrengung gemacht hast, geistig auf mein Posting einzugehen. Nicht
besonders nett von Dir.

Polemik nützt hier gar nichts und "span ist hier semantischer Quatsch"
soll wohl heißen:
"span ist hier SICHER KEIN semantischer Quatsch", denn siehe z.B. Seite
http://www.brainjar.com/css/positioning/default2.asp

Doch, in Deinem Fall schon. Denn es gibt bessere Möglichkeiten der
Auszeichnung. Nur weil der Junge von brainjar mit der netten Webseite
keine semantische Zusatzauszeichnung für ein Beispiel (sic!) braucht,
muß das nicht auf andere Anwendungsfälle zutreffen. Du verwechselst
hier anscheinend syntaktischen und semantischen Gebrauch. Die
CSS-Eigenschaft float kann auf alles wirken, man ist nicht auf das
Element span limitiert, wenn bessere Möglichkeiten bestehen.

Gerade bemerke ich, daß Du die Seite anscheinend doch auf eine
(schön formatierte) Tabelle geupdatet hast. Ich poste diesen Text
trotzdem mal, vielleicht hilft es noch in Zukunft jemandem.

• Tim

[Gerd-Lothar]

Hallo Tim,

hiermit ausdrücklichen Dank für die viele Mühe, die Du Dir mit Deinen Erklärungen gemacht hast. Ich verstehe auch, worauf Du hinauswillst, und weiß das zu schätzen.

Mir ging es hier nicht darum, eine Lösung zu finden, denn die Lösung kenne ich bereits, denn ich benutze, wie schon gesagt, seit 7 Jahren Tabellen.

Es ging mir aus bestimmten Gründen um den Test einer anderen Variante, denn damit ziehe ich Erfahrungen für eine Vielzahl weiterer Anwendungsmöglichkeiten, hier mit "float".

Die von mir nun benutzte Lösung funktioniert offenbar bei meinem Browser und vermutlich auch bei vielen anderen, NUR BEI EINEM Mac-User nicht - und warum das so ist, weiß ich nicht und es hat mir hier auch noch keiner erklären können.

Dieser User teilte mir auch mit, daß eine weitere Float-Anwendung auf einer anderen Seite (ohne Tabelle) bei ihm nicht klappt. Ich vermutete daher, daß es mit dem Browser zu tun hatte. Es hätte ja sein können, daß dieser Browser, obwohl er Version > 4 ist, kein CSS 2 kann.

An "span" liegt es nicht. Ich habe dieses Layout sowohl mit span als auch mit p und mit div ausgeführt, und immer wird es wie von mir gewünscht dargestellt (ich weiß also nicht, was daran falsch sein soll) - nur bei jedem Mac-User nicht.

Die weiteren hier vorgeschlagenen Ideen mit "clear" oder "display:block" haben mich leider nicht weitergebracht.

Also allerseits vielen Dank für die investierten Mühen und für die Versuche, mich über Semantik und Syntaktik aufzuklären, aber geholfen hat mir das alles nicht viel.

Gruß
Gerd-Lothar

[Siechfred]

Hi,

ich weiß jetzt zwar nicht so ganz, was dein Posting mit meinem zu tun hat, aber ich versuche es trotzdem noch mal.

<p>
<span style="float:left; width:100px;">content...</span>
<span style="width:400px;">content...</span>
</p>

Imho funktioniert das ganze so:

<p id="1"> | Dieser    | <p id="2">   |
-----------+ Abschnitt | umfließt     |
wird rechts umflossen  | das          |
-----------------------+ vorherige    |
Element in der hier dargestellten Art |
--------------------------------------+

So in etwa stellte sich ein ähnlich gelagertes Problem bei mir dar, wohl deshalb, weil <span> ein Inline-Element ist. Deshalb mein Vorschlag, die Lösung mit dem <div>-Element unter Verwendung von display:block zu versuchen. Ich sehe da keine Tabelle.

Aber rein semantisch gesehen hat Tim recht.

mfg Torsten

[Tim Tepaße]

Hallo Gerd-Lothar,

Hier noch der Link der Seite:
http://www.webliteratur.de/_neu.htm

Also hier würde ich bei aller Liebe zu CSS nicht Deine span-Lösung
einsetzen, wenn Du denn diese für dieses Logbuch vorgesehen hast.
Warum?

Ich bemühe mich Elemente ohne offenkundliche Semantik, wie span und
div nur dann einzusetzen, wenn es keine besseren Elemente (= mit
semantischen Mehrinhalt) in HTML gibt. Und hier denke ich, ist das
der Fall.

Was sich da anbieten würde:

a) Das Datum als eine Überschrift deklarieren und den zugehörigen Text
   in einen oder mehrere Absätze packen. Eventuell das ganze dann noch
   zur Gruppierung oder auch zur visuellen Formatierung in ein div
   eingliedern. Das ganze kannst Du dann mit CSS formatieren, um einen
   ähnlichen Effekt zu erreichen.

b) Eine Tabelle benutzen. Hier sehe ich das genau wie Andreas nicht als
   Vergewaltigung an; wir haben hier ja nun mal Daten, die sich auf
   einander beziehen, eben der Zusammenhang Datum - Erläuternder Text.
   Eventuell würde ich erwägen, das Datum dann in eine th-Zelle zu
   stecken, da diesem doch ein Wert einer Überschrift anhängt.

c) Eine Definitionsliste zu verwenden. Abseits vom Namen empfiehlt das
   W3C auch andere Möglichkeiten der Verwendung, wie beispielsweise
   die eines Dialoges. Hier hat man dann das Datum als den zu definierenden
   Term (dt) und dazu passend die Definition, was genau passiert ist (dd).

Was würde ich machen? Wahrscheinlich a), weil mir b) dann doch als etwas
zu kleine Tabelle erscheinen würde. Hätte ich akute Schwierigkeiten a)
meinen Vorstellungen nach mittels CSS visuell zu formatieren würde ich
dann doch auf b) zurückgreifen.

c) kann ich akzeptieren, würde ich aber persönlich nicht verwenden, da
ich im Gegensatz zum W3C eine Abneigung gegen die Benutzung einer
Definitionsliste in anderen Zusammenhängen als Glossar-ähnlichen habe.

• Tim

[stefan]

Hallo Tim,

c) kann ich akzeptieren, würde ich aber persönlich nicht verwenden, da
ich im Gegensatz zum W3C eine Abneigung gegen die Benutzung einer
Definitionsliste in anderen Zusammenhängen als Glossar-ähnlichen habe.

Wobei das auch nur eine Meinung ist (was Du ja selbst auch sagst), und ich beispielsweise meine, dass eine Definitionsliste hier sehr angebracht wäre, speziell, weil die Daten IMHO auch einen "Aufzähl"- (also Listen-) Charakter haben. Dies schreibe ich nicht um Dich zu kritisieren oder so (es war ja alles sehr plausibel und gut umfassend erklärt), sondern nur, um eine zweite Meinung (ergänzend zu Deiner) ins Spiel zu bringen.

So long + schö
stefan