Wann float und wann clear verwenden? Probleme mit Opera

[Corinna]

Hallo,

kann mir jemand erklären wann ich float und wann ich clear in Bezug auf Layer verwenden sollte/muss?

Am besten am Beispiel dieser Seite http://www.mediengestalten.com/test/test_sw.html

Im IE funktioniert es problemlos, während mir der Opera bei Layer "news" Probleme macht.

Ich verzeichte jetzt mal darauf, den ganzen Quellcode hier zu posten.
Bitte die Seite mal ansehen und da auch den Quellcode ansehen.

Danke schonmal,
Gruß
Corinna

[wahsaga]

hi,

kann mir jemand erklären wann ich float und wann ich clear in Bezug auf Layer verwenden sollte/muss?
Am besten am Beispiel dieser Seite http://www.mediengestalten.com/test/test_sw.html
Im IE funktioniert es problemlos

na ja, streitbare aussage.

im IE 5.0 sieht es bei mir folgendermaßen aus:
neben logo und bild oben ist sind bei mir (1024er auflösung) noch ca. 6 cm platz rechts.
der content-bereich ist jedoch ganz rechts platziert, dafür sind die 6 cm abstand zwischen dem content und der navigation etc.

gruss,
wahsaga

[corinna]

hi,

kann mir jemand erklären wann ich float und wann ich clear in Bezug auf Layer verwenden sollte/muss?
Am besten am Beispiel dieser Seite http://www.mediengestalten.com/test/test_sw.html
Im IE funktioniert es problemlos
na ja, streitbare aussage.

ja, klar, ich weiß schon, dass der ie fast alles darstellt.

im IE 5.0 sieht es bei mir folgendermaßen aus:
neben logo und bild oben ist sind bei mir (1024er auflösung) noch ca. 6 cm platz rechts.
der content-bereich ist jedoch ganz rechts platziert, dafür sind die 6 cm abstand zwischen dem content und der navigation etc.

hmm, mist.
irgendwelche ratschläge, woran das liegt??

gruss,
wahsaga

[molily]

Hallo Corinna,

kann mir jemand erklären wann ich float und wann ich clear in Bezug auf Layer verwenden sollte/muss?

Am besten am Beispiel dieser Seite http://www.mediengestalten.com/test/test_sw.html

Das sollte prinzipiell richtig sein. Opera hat Probleme mit den Breiten, daher legt er #news fälschlicherweise unter #content. Das kannst du direkt umgehen, indem du #news gleichzeitig float:left und clear:left gibst. Eine andere Möglichkeit wäre, die Reihenfolge der Elemente zu ändern, sodass du den Elementen einer Spalte kein float geben musst. Dann müsste allerdings #bildlinks und #news direkt auf #navi folgen, ich nehme an, dass du diese bewusst hinter dem Hauptinhalt platziert hast. Falls dir die Linearisierung und die Bedienung bei alternativen Darstellungen wichtig ist, kannst du ja unsichtbare Überspringen-Links einfügen.

Mathias

[corinna]

hallo mathias,

die verwendung von float:left und gleichzeitig von clear:left funktioniert wunderbar. juhuu!

nein, ehrlich gesagt habe ich die reihenfolge der elemente nicht bewußt so gewählt.
ich habe aber die reihenfolge schonmal geändert, um zu sehen, ob sich so mein problem löst, aber das hat nur das gegenteil bewirkt.

was meinst du mit unsichtbaren überspringen-links??

danke & gruß
corinna

[Orlando]

Hi Corinna,

was meinst du mit unsichtbaren überspringen-links??

das hier:

http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html#tech-group-links

Grüße,
 Roland

[corinna]

aha, und kannst du mir mal ein prakisches beispiel zeigen.

gruß
corinna

[Orlando]

Hi Corinna,

aha, und kannst du mir mal ein prakisches beispiel zeigen.

zunächst eine Zeile CSS:

.wai { display:none; }

Alle Elemente, die eine Klasse namens "wai" aufweisen, werden in CSS-fähigen Browsern ausgeblendet. Textbrowser zeigen diese an (und Screenreader lesen sie vor). Der folgende Link ist somit in grafischen Browsern nicht zu sehen, ermöglich es aber Benutzern von Textbrowsern, die Navigation zu überspringen und direkt zum Inhalt zu gelangen:

<p class="wai">
  <a href="#inhalt">[Springe zum Inhalt]</a>
 <p>

<div id="navigation" name="navigation">
  <ul>
   <li><a href ... >Punkt 1</a></li>
   <li><a href ... >Punkt 2</a></li>
   <li><a href ... >Punkt 3</a></li>
  </ul>
 </div>

<div id="inhalt" name="inhalt">
  <h2>bla</h2>
  <p>bla</p>
  ...
 </div>

Da es ziemlich lästig sein muss, auf jeder Seite zunächst die Navigation vorgebetet zu bekommen, sollte man solche "unsichtbaren" Zusatzverweise einbauen.

Siehe auch

http://mluurzs2.urz.uni-halle.de/kurse/barrierefrei/wai-html.html#linkgruppe

Grüße,
 Roland

[corinna]

Hallo Roland,

jetzt habe ich es auch kapiert. Besten Dank für die Erklärung.
Das muss ich mir nochmal genauer zu Gemüte führen und über eine Verwendung nachdenken.
Erscheint mir auf jeden Fall sehr sinnvoll, aber nicht unbedingt für jede Seite.

Gruß
Corinna

[molily]

Hallo Roland,

.wai { display:none; }

Alle Elemente, die eine Klasse namens "wai" aufweisen, werden in CSS-fähigen Browsern ausgeblendet. Textbrowser zeigen diese an (und Screenreader lesen sie vor).

Nö, tun sie nicht in der Regel, aber die Theorie klingt schön. ;)

http://css-discuss.incutio.com/?page=ScreenreaderVisibility

Mathias

[Joachim]

Hi,

kann mir jemand erklären wann ich float und wann ich clear in Bezug auf Layer verwenden sollte/muss?

Das kommt darauf an, was Du tun moechtest. Das kleine Beispiel sollte Dir verdeutlichen, was float und clear machen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
</head>
<body>

<div style="float:left; border:1px solid black;">float left Div<br>test<br>test</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
<div style="clear:left">div 5 cleared</div>
</body>
</html>

Du siehst also: clear beendet praktisch die float-Anweisung, die sich so auf Div 1-4 bezieht.

Gruesse  Joachim

[corinna]

hallo joachim,

vom prinzip habe ich schon so halbwegs verstanden, was float und was clear bedeutet. ich habe schon auch verstanden, dass clear flaot praktisch wieder aufhebt.
aber wenn ich wie in meinem beispiel ein 2 spaltiges layout habe und dann eine layer mehrere "zeilen" umfassen soll, wusste ich nicht, wann ich flaot und wann clear verwenden muss.

trotzdem danke.

gruß
corinna