CSS-Anweisung clear: both richtig verwenden

[Gast] Foren Web allgemein HTML und CSS / Stylesheets CSS-Anweisung clear: both richtig verwenden

Web allgemein

Themen

Beiträge

Moderatoren

Letzter Beitrag

HTML und CSS / Stylesheets

1193

6413

FSt

19. Dez 2022, 21:28

Vitus

3dr

Beiträge gesamt: 45

9. Jan 2006, 15:19
Beitrag # 1 von 16
Bewertung:
(10912 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo,
rechts oder wahlweise links neben Bildern habe ich Text plaziert. Bei wenig Text rutscht ein Bild in die nächste Zeile, bei viel Text nicht. Ich weiß, daß ich die css-Anweisung clear: both einzusetzen habe, allerdings weiß ich nicht wie und wo. Was mache ich falsch, kann mir jemand helfen? -hier noch ein link zu einem Beispiel: http://www.detlefreuter.de/...mplates/test_01.html Herzlichen Dank für Eure Tips!

CSS-Anweisung clear: both richtig verwenden

SabineP

Beiträge gesamt: 7586

9. Jan 2006, 16:11
Beitrag # 2 von 16
Beitrag ID: #203921
Bewertung:
(10904 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo 3dr,

ich weiß nicht genau wie Deine Seite aussehen soll, IE und Firefox zeigen unterschiedliche Layouts.

Es gibt zwei Beispiele zu clear in der Test-Suite.

clear:
http://www.w3.org/...current/test5526.htm

float und clear:
http://www.w3.org/...urrent/test5526b.htm

Gruß Sabine

als Antwort auf: [#203910]

CSS-Anweisung clear: both richtig verwenden

3dr

Beiträge gesamt: 45

9. Jan 2006, 16:36
Beitrag # 3 von 16
Beitrag ID: #203926
Bewertung:
(10898 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Sabine,
erst mal Danke für den Tip mit der Testsuite. Ich weiß, daß ff und ie unterschiedliche Layouts zeigen. Bei beiden wird jedoch die Zeile: "Thema mit viel Text" von dem Bild im Absatz "Thema mit wenig Text" verdeckt. Das soll eben so NICHT sein, sondern die Zeile "Thema mit viel Text" soll immer UNTERHALB des 1. Bildes (egal wieviel Text neben diesem steht) erscheinen. Leider finde ich hierfür die richtige Lösung nicht ;-(. Konnte ich mich verständlich ausdrücken und könntest Du mir helfen, das wäre wunderbar. Grüsse Detlef

als Antwort auf: [#203921]

CSS-Anweisung clear: both richtig verwenden

Pozor

Beiträge gesamt: 892

9. Jan 2006, 16:38
Beitrag # 4 von 16
Beitrag ID: #203927
Bewertung:
(10896 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo,

du benötigst das clear:both bei jedem Titel, oder bei jedem div, wenn du die
einzelnen Beiträge in divs packst.

als Antwort auf: [#203910]

CSS-Anweisung clear: both richtig verwenden

SabineP

Beiträge gesamt: 7586

9. Jan 2006, 16:57
Beitrag # 5 von 16
Beitrag ID: #203929
Bewertung:
(10894 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Detlef,

ich würde eine Tabelle verwenden, dann klappts in allen Browsern.

Selbst die Seiten der Testsuite sehen in meinen Browsern unterschiedlich aus.
Also warum mit etwas herumschlagen das jeder Browser anders darstellt.

Gruß Sabine

als Antwort auf: [#203926]

CSS-Anweisung clear: both richtig verwenden

FSt

Beiträge gesamt: 1965

9. Jan 2006, 17:00
Beitrag # 6 von 16
Beitrag ID: #203930
Bewertung:
(10892 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo 3dr

Versuch mal

Code

<div style="clear: both"></div> 
<h3>Thema mit viel Text</h3>

Das sollte auch gehen. Ansonsten bin ich aber ganz klar mit Sabine einig. Wieso nicht einfach Tabellen verwenden, die sind nämlich nicht verboten und zudem auch noch so praktisch ..

Gruss
FSt

als Antwort auf: [#203926]

CSS-Anweisung clear: both richtig verwenden

SabineP

Beiträge gesamt: 7586

9. Jan 2006, 17:29
Beitrag # 7 von 16
Beitrag ID: #203935
Bewertung:
(10888 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Eine Variante hätte ich ja noch, aber wie kann man den roten Kasten (Seiteninhalt) insgesamt zentrieren:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
br {clear:left}
.breite{width:550px; border:1px solid #ff0000}
</style>
</HEAD>

<BODY>
<div class="breite">
<h3>Überschrift</h3>
<img align="left" src="bild.gif" height="100" width="100">
viel oder wenig Text viel oder wenig Text viel oder wenig Text viel oder wenig Text<br>

<h3>Überschrift</h3>
<img align="left" src="bild.gif" height="100" width="100">
viel oder wenig Text viel oder wenig Text viel oder wenig Text viel oder wenig Text<br>
</div>
</BODY>
</HTML>

Getestet in IE4, Netscape 4 und Firefox, alle Browser zeigen das gleiche Layout an.

Gruß Sabine

als Antwort auf: [#203930]

CSS-Anweisung clear: both richtig verwenden

3dr

Beiträge gesamt: 45

9. Jan 2006, 18:03
Beitrag # 8 von 16
Beitrag ID: #203942
Bewertung:
(10884 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

...stimmt, so klappts, ist aber ein wenig mühsam, danke Stefan

als Antwort auf: [#203927]

CSS-Anweisung clear: both richtig verwenden

3dr

Beiträge gesamt: 45

9. Jan 2006, 18:08
Beitrag # 9 von 16
Beitrag ID: #203943
Bewertung:
(10883 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Sabine,
...jetzt binisch platt, wie der Kölner sacht, überall wird gepredigt: bloß keine Tabellen (wenn nicht tabellarischer Inhalt), alles via css formatieren, (und da geb ich mir wirklich Mühe), bessere usability, accesssability und was weiß ich noch was für Vorteile -und jetzt gehts auf einmal doch wieder einfach mit Tabellen?. Oder hab' ich was verschlafen? (leichter isses ja) Viele Grüsse

als Antwort auf: [#203929]

CSS-Anweisung clear: both richtig verwenden

3dr

Beiträge gesamt: 45

9. Jan 2006, 18:11
Beitrag # 10 von 16
Beitrag ID: #203944
Bewertung:
(10882 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Liebe Sabine,
vielen Dank für die ausführlichen Tipps. So habe ichs eben ausprobiert, wenn ich die Bilder aber auch mal rechts stehen haben möchte, klappts wieder nicht, kann das sein? Grüsse Detlef

als Antwort auf: [#203935]

CSS-Anweisung clear: both richtig verwenden

SabineP

Beiträge gesamt: 7586

9. Jan 2006, 18:41
Beitrag # 11 von 16
Beitrag ID: #203946
Bewertung:
(10876 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Detlef,

jetzt habe ich doch noch eine Variante gefunden, die ganz ohne Tabellen auskommt:

Bilder links

Code

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<style type="text/css"> 
body {text-align: center; } 
br {clear:both;} 
img {float:left; height:100px; width:100px;} 
.breite{text-align:left; width:550px; border:1px solid #ff0000} 
</style> 
</HEAD> 
 
<BODY> 
<div class="breite"> 
<h3>Überschrift</h3> 
<img src="bild.gif" alt="Bild 1"> 
wenig Text oder viel Text oder wenig Text viel oder viel Text wenig oder 
viel Text oder wenig Text viel oder viel Text wenig<br> 
<h3>Überschrift</h3> 
<img src="bild.gif" alt="Bild 2"> 
wenig Text oder viel Text oder wenig Text viel oder viel Text wenig oder 
viel Text oder wenig Text viel oder viel Text wenig<br> 
</div> 
</div> 
</BODY> 
</HTML>

Bilder rechts

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<style type="text/css"> 
body {text-align: center; } 
br {clear:both;} 
img {float:right; height:100px; width:100px;} 
.breite{text-align:left; width:550px; border:1px solid #ff0000} 
</style> 
</HEAD> 
 
<BODY> 
<div class="breite"> 
<h3>Überschrift</h3> 
<img src="bild.gif" alt="Bild 1"> 
wenig Text oder viel Text oder wenig Text viel oder viel Text wenig oder 
viel Text oder wenig Text viel oder viel Text wenig<br> 
<h3>Überschrift</h3> 
<img src="bild.gif" alt="Bild 2"> 
wenig Text oder viel Text oder wenig Text viel oder viel Text wenig oder 
viel Text oder wenig Text viel oder viel Text wenig<br> 
</div> 
</div> 
</BODY> 
</HTML>

einziger Unterschied float:right, anstatt float:left für den img-Tag

Getestet in IE4, Netscape 4 und Firefox, IE4 und Firefox zeigen das gleiche Layout an,
Netscape 4 zentriert nicht und verschiebt den Text etwas, ist aber nicht so schlimm.

>> bloß keine Tabellen (wenn nicht tabellarischer Inhalt),
>> alles via css formatieren

Solange die Browser mitspielen habe ich da nichts dagegen,
aber was soll man tun wenn der Kunde einen alten Browser benutzt
und er trotzdem ein Layout sehen möchte.

Tabellen sind sogar nach WAI erlaubt, sie müssen ja nur linearisierbar sein.
http://www.w3.org/...s/WAI/webinhalt.html

Ein Beispiel für linearisierbare Tabellen ist das Layout von selfhtml:
http://de.selfhtml.org/

Gruß Sabine

als Antwort auf: [#203944]
(Dieser Beitrag wurde von SabineP am 9. Jan 2006, 18:41 geändert)

CSS-Anweisung clear: both richtig verwenden

3dr

Beiträge gesamt: 45

10. Jan 2006, 09:36
Beitrag # 12 von 16
Beitrag ID: #203997
Bewertung:
(10795 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Sabine,
... na das ist ein schöner Arbeitsbeginn, direkt von dir genau die Lösung die ich suchte. Ganz herzlichen Dank an Dich (-und auch an alle anderen, die gepostet haben)! Nur eines noch: was bitte sind "linearisierbare Tabellen", diesen Ausdruck habe ich noch nie gehört. Grüsse Detlef

als Antwort auf: [#203946]

CSS-Anweisung clear: both richtig verwenden

SabineP

Beiträge gesamt: 7586

10. Jan 2006, 12:00
Beitrag # 13 von 16
Beitrag ID: #204036
Bewertung:
(10785 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Zu linearisierbaren Tabellen:
http://www.w3.org/...tml#linearized-table

Eine Tabelle wird in Textbrowsern in linearisierter Form dargestellt.
Stelle Dir dazu eine Tabelle vor und lies die Zellen der Reihe nach von oben links nach unten rechts.
In dieser Reihenfolge werden die Zellen untereinander dargestellt.
Der Sinn des Inhaltes der Tabelle darf nach der Linearisierung nicht verloren gehen, dann ist die Tabelle linearisierbar.

Es gibt auch zahlreiche DIV-Layouts, die in einem Textbrowser keinen Sinn mehr ergeben.

Es kommt also in erster Linie nicht darauf an, ob man Tabellen oder DIVs verwendet.

Man kann sich jede HTML-Seite in linearisierter Form ansehen mit dieser Firefox-Erweiterung:
http://chrispederick.com/work/webdeveloper/
im Menü Verschiedenes --> Seite linearisieren.

Oder einen Textbrowser (z.B. Lynx) installieren:
http://lynx.browser.org/

Lynx-Emulator: http://www.delorie.com/web/lynxview.html
(neuerdings muß man auf seinem Webspacer eine Datei plazieren, damit der Emulator die Seiten anzeigt)

Gruß Sabine

als Antwort auf: [#203997]
(Dieser Beitrag wurde von SabineP am 10. Jan 2006, 12:03 geändert)

CSS-Anweisung clear: both richtig verwenden

3dr

Beiträge gesamt: 45

12. Jan 2006, 13:57
Beitrag # 14 von 16
Beitrag ID: #204553
Bewertung:
(10675 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Sabine,
Danke für die Info zu den linearisierbaren Tabellen; habe jetzt aber mal alles ohne Tabellen umgesetzt. Leider wird im ff der seitliche Scrollbalken nun fast doppelt so lang wie die Seite eigentlich hoch ist dargestellt, der ie tut dies nicht. -ich selber finde meinen Fehler einfach nicht; da die Lösung möglicherweise auch für andere Forenbesucher interessant sein könnte, hier der link zu Seite: http://www.detlefreuter.de/...mplates/test_02.html.
Kannst Du helfen? Grüsse Detlef

als Antwort auf: [#204036]

CSS-Anweisung clear: both richtig verwenden

SabineP

Beiträge gesamt: 7586

12. Jan 2006, 14:58
Beitrag # 15 von 16
Beitrag ID: #204574
Bewertung:
(10674 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Du mußt diese Zeile noch ändern,

vorher:
div#Seite { margin: 30px auto 50%; padding-top: 0; width: 600px; height: auto }

nachher:
div#Seite { margin: 30px auto ; padding-top: 0; width: 600px; height: auto }

Gruß Sabine

als Antwort auf: [#204553]

CSS-Anweisung clear: both richtig verwenden

3dr

Beiträge gesamt: 45

12. Jan 2006, 15:16
Beitrag # 16 von 16
Beitrag ID: #204577
Bewertung:
(940 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo schlaue Sabine,
vielen Dank,-wie dusselig von mir, -da hätte ich ja wirklich selbst drauf kommen müssen. Na ja, vielleicht kann ja jemand was mit dem template anfangen, ich beuge jetzt mal ne Weile mein Haupt, streu' vielleicht auch noch ein bißchen Asche drauf und freue mich über die Lösung ;-)

als Antwort auf: [#204574]

Aktuell

PDF / Print

callas software veranstaltet Webinar rund um den Etikettendruck

| 14.12.2023

Weitere Events

Neuste Foreneinträge

InDesign 19.2 konvertiert 19.3-Dateien beim Öffnen ungefragt

Platzierte Vektorgrafiken skalieren

Adobe Fonts werden nicht sofort/automatisch in ID-Dateien geladen

PDF-Formular: Dateianhang durch User?

Kontrollkästchen in PDF-Formular

Mehrfach geschichtete und übereinander gelagerte PDFs bereinigen

Mein Tagesausflug ins Land CorelDraw

Eizo Monitorkalibrierung auf Windows

Fußnoten zu Endnoten konvertieren

SMS ab Server senden? Wie geht das?

Weitere Stellenangebote