css Claering Problem

adw4712 · 24.07.2008, 07:17

Guten Morgen,

nachdem ich mir die halbe Nacht um die Ohren geschlagen habe wend ich mich jetzt doch an euch...

Ich möchte rechts neben den Überschriften H3 eine Grafik mit einem Pfeil anzeigen, mit dem mann nach oben zum Seitenanfang gelangt.

Die Grafik soll auf gleicher Höhe mit H3 sein und unter H3 und der Grafik soll eine Linie (wie unterstrichen) sein.

Meine Lösung:
ein DIV-Container mit der classe=boxh3 in der ich h3 mit float=left und die Grafik mit float=right platziere. Den unteren Rand des DIV-Containers mach ich blau als Unterstreichung.

.boxh3 {
width: 490px;
color: #004890;
height: 18px;
border-bottom: 1px solid #004890;
margin: 22px 0px 18px 0px;
}

h3{
font: bold 12px Arial, Helvetica, sans-serif;
float: left;
color: #004890;
}

.upgrafik{
float: right;
}

Mein Problem:
Ohne zu clearen schiebt der Firefox den Div-Container zusammen und schrebit die Ihalte außerhalb, also unter den Container.
Aber Wie soll ich Clearen? In dem Container ist ja nichts mehr dem ich Clear-both zuweisen kann.

marc22 · 24.07.2008, 09:38

Einfach ein ans Ende des Divs hängen

adw4712 · 24.07.2008, 09:50

Zitat:

Zitat von marc22

Einfach ein ans Ende des Divs hängen

OK. das funktioniert, danke...

Aber kann es nicht sein, das durch das der ein oder ander Browser einen Zeilenumbruch macht und sich der nachfolgende Inhalt dadurch nach unten verschiebt?

Typochonder · 24.07.2008, 10:03

warum nicht einfach so?

HTML-Code:

<style type="text/css">
h3 {
font:700 12px/14px Arial, Helvetica, sans-serif;
width: 490px;
color: #004890;
height: 18px;
border-bottom: 1px solid #004890;
}
h3 a {
margin-left:420px; 
text-decoration:none;
}
</style>
</head>

<body>
<h3>Headline<a href="#">Top</a></h3>
</body>
</html>

adw4712 · 24.07.2008, 10:20

@ Typochonder

ohne mich mit diesem neuen Ansatz intensiv zu befassen:

Macht beim Safari-Browser Probleme (der Link wird nach unten verschoben dargestellt).
Firefox unterstreicht den Link nicht mit

Trotzdem danke... es gibt immer wieder neue Ansätze für das gleiche Problem ;-)

Boris · 24.07.2008, 10:54

Das hier: ... ist eine Katastrophe. Das macht man heute direkt sauber über CSS:

Code:

.boxh3:after
{
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

Rinaldo · 24.07.2008, 10:56

:after wird doch nicht vom IE6 unterstützt, oder?

Boris · 24.07.2008, 10:58

Nö, aber bekanntermaßen cleart der IE6 (und sogar IE7) automatisch Elemente, denen height: zugewiesen wurde. In diesem Fall height: 18px;.

Nennt man auch hasLayout.

Rinaldo · 24.07.2008, 11:02

Ah, war mir neu - vielen Dank für den Hinweis, gleich mal lesen...

Typochonder · 24.07.2008, 11:10

wie "..Firefox unterstreicht den Link nicht mit"?

funzt im ff 3, ie 6 u. 7 wunderbar.

marc22 · 24.07.2008, 11:13

Zitat:

Nö, aber bekanntermaßen cleart der IE6 (und sogar IE7) automatisch Elemente, denen height: zugewiesen wurde. In diesem Fall height: 18px;.

Na so bekanntermaßen auch nicht

Aber gut zu wissen

EDIT: Welchem Element weist Du die 18px Höhe zu?

Ich habe es eben mal probiert. Beim IE6 muss ich der Box eine Höhe geben, beim IE7 die entsprechende min-height und im FF wirkt das :after. Das kann es doch nicht sein?!

Boris · 24.07.2008, 11:13

Zitat:

Zitat von Rinaldo

Ah, war mir neu - vielen Dank für den Hinweis, gleich mal lesen...

Siehe: http://www.jassesnee.de/easyclear/ ("Clearing" im 21. Jhdt)

marc22 · 24.07.2008, 11:39

Das ist zwar nicht so sauber, aber bei der Entscheidung, ob ich nun durch künstliche Clearing-Elemente nicht-100%ig semantisches HTML oder aber einige unschöne CSS-Hacks (die auch noch viel aufwändiger sind) in Kauf nehme, würde ich aufgrund der Einfachheit lieber ersteres benutzen..

Einfach eine CSS-Klasse mit clear: both definieren und dann da, wo es nötig ist, benutzen..

adw4712 · 24.07.2008, 13:44

@ Boris

Ich hab das mit dem :after ausprobiert.
Klappt bei ff2 und Safari leider nicht (zumindest wenn man flexibel sein will und keine Höhenangabe für den Div angibt), also muss ich zusätzlich ein künstliches Clearing-Element einfügen, dann kann ich mir das :after auch gleich sparen.

Jedenfalls wusste ich das mit dem :after nicht und hab somit wieder was dazugelernt, auch wenn ich jetzt doch mit der "Krücke" arbeiten muss.

marc22 · 24.07.2008, 14:51

Man sollte aber das clear: both in eine css-klasse auslagern; vielleicht will man die später auch noch auf andere Elemente auslagern.