[html&css] h1-elemet und float-element Zentrierungsproblem

Wiesl

Lt. Junior Grade
Dabei seit
Feb. 2011
Beiträge
480
Hallo Leute!

Wahrscheinlich ist es für euch Profis eine ziemlich dumme Frage, aber ich komme einfach nicht auf die Lösung.

Folgendes Problem:

Ich habe in einem größerem Div sei es nun <body>, ein <wrapper> oder gar <html>, eine Überschrift <h1> und möchte nun ein <Div> (oder auch <img>, bzw. irgendwas anderes ;) )links bzw. rechts floaten.
Das Problem ist nun, dass sich die Überschriftszentrierung nur noch auf den ganzen Bereich minus dem gefloateten Objekt bezieht, und dies ziemlich unhübsch aussieht.

Wie kann ich einstellen, dass sich das text-align:center das gefloatete Elememt ignoriert bzw. die eigentlich Breite des übergeordneten Divs als Bezug nimmt.

Bsp.:

Code:
<body>
<h1>Überschrift</h1>
<div id="float">Beispieltext</div>
</body>

Code:
#float {
float: right;
width: 200px;
}

Danke im Vorraus
Wiesl
 
negative Margins sollten funktionieren.
Gegenfrage: Wie willst du so SICHER verhindern, dass deine Überschrift in das daneben befindliche Objekt eindringt und der Text entweder darunter oder darüber liegt?
 
text-align: center; orientiert sich immer an der Gesamtbreite des Elements, daher wüsste ich spontan nicht, wie man das umsetzt. Eine andere Idee wäre es, nicht mit float zu arbeiten, sondern mit position: absolute zu arbeiten. So nutzt dein h1-Element die volle Breite und der div-Container wird mit position: absolute; right: 0; und top: 0; rechts oben positioniert. Sonst fällt mir nichts ein.
 
ich habe eine min-width: 900px im wrapper.

Ist das die völlig falsche Herangehensweise?

Meine Seite wird eigentlich ziemlich ok auch auf Handydisplays angezeigt, ist vielleicht nicht der letzte Schrei hinsichtlich responsives Webdesign,aber für mich als Anfänger ok.

Bitte hilf mir mit den negativen Margins aus, v.a. verständnisstechnisch, denn:
margin bezieht sich doch immer aufs nächsthöhere Div, oder? welches div bräuchte welche negative margin-Werte?
Denn meinen Seite ist ja nicht immer gleich breit!
Und der Content-Mittelteil ist liquide, also je nach Gesamtbreite unterschiedlich groß!
Und in diesem ist eben jene Überschrift, und rechts neben dieser Überschrift bräuchte ich ein, verhältnismäßig kleines, Div-Elemet.
Allerdings fällt die nicht zentrierte Überschrift schon auf!

Grüße
Wiesl
 
Weißt du, wie breit (in px) dein floatendes Element ist? Dann gib der <h1> ne genau so breite Margin auf der gegenüber liegenden Seite. Oder wie gesagt... spiel mit negativen Margins. Ist aber mehr Frickel als präzises Arbeiten.
 
Zurück
Top