Seite 1 von 1

clearing Problem bei CSS

Verfasst: 24.07.2008, 06:08
von adw4712
Hallo,
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.

Verfasst:
von
SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002
  • persönliche Betreuung
  • individuelle Beratung
  • kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.


Verfasst: 24.07.2008, 13:54
von Germanjosh
Wenn die Breite des Containers sowieso fest ist, könntest du den Button auch absolut / relativ positionieren, oder?

Verfasst: 24.07.2008, 15:23
von spickzettel
Die Höhe von .boxh3 ist zu klein.

Code: Alles auswählen

height:auto;
overflow:hidden;
sollte funktionieren.

Verfasst: 25.07.2008, 10:17
von Plexx
Dein Problem ist wohl, dass du h3 und der grafik eine Breite zuweisen musst, vor allem dann wenn sich die h3 nicht in einer Zeiel ausgeht..

zum clearen am einfachsten (wenn auch nicht am schönsten) <div style="clear:both;"></div>

Anonsten google mal nach easy clearing (:after pseudoklasse)

Verfasst: 26.07.2008, 18:35
von adw4712
Danke für die Tipps.

:after geht nicht bei allen Browsern, aber danke für den Hinweis, kannte ich noch nicht...

Ich denke ich mach da mit dem <div style="clear:both;"></div>