Überschriftrahmen in float-Fließtext zu groß

Hallo,
ich habe in einem html-Dokument folgende Struktur:

========

ueberschrift

========

Über css (s.u.) sind „leftcolumn“ und „rightcolumn“ per float so positioniert, dass der „content“ mit „inhalt“ zwischen beiden Spalten landet:

========
#leftcolumn {
width: 15em;
float: left;
margin-right: .5em;
}

#rightcolumn {
width: 15em;
float: right;
margin-left: .5em;
}

#content {
min-width: 20em;
}

#inhalt {
padding: 0 1.25em;
}

#inhalt h2 {
border-top: 2px solid #003560;
}

content/inhalt ist also die Spalte in der Mitte, in der mein Seiteninhalt stehen soll.

Mein Problem ist nun, dass im Firefox (3.5) die obere Line der Überschrift „#inhalt h2“ breiter ist als die tatsächliche Überschrift, da „content“ und „inhalt“ (versteckt) über die volle Fensterbreite gehen, während der Text durch die beiden "column"s begrenzt wird. Beim Internet Explorer wird „content/inhalt“ als Box so begrenzt, dass die Linie stimmt.

Kann man der Überschrift sagen, dass ihr Rahmen genau so breit wird, wie sie für ihren Text Platz hat?
display:inline (oder inline-block) für die h2 geht nur bedingt, weil die Linie dann zu kurz ist. Die Linie soll aber den vollen Verfügbaren Platz einnehmen, ohne in die „leftcolumn“ und die „rightcolumn“ hineinzuragen.

Die div-Struktur soll nach einer Vorgabe so bleiben. Positionierung der div’s mit „position:absolute“ wäre schlecht, denn die angegebene div’s stecken in einem weiteren div, das sich wegen seiner Hintergrundfarbe mit vergrößern soll. (Es sei denn, mir fehlt grad eine Info, wie man das trotzdem hinbekommt.)

Danke für Tipps.
A

Hallo Anja,

Die Linie soll aber
den vollen Verfügbaren Platz einnehmen, ohne in die
„leftcolumn“ und die „rightcolumn“ hineinzuragen.

um das zu erreichen, musst Du dem content-Div nach links und rechts ein margin in der Breite der Spalten geben:

#content {
min-width: 20em;
margin:0 15.5em;
}

Schöne Grüße
Yasmin

Moin,

Die div-Struktur soll nach einer Vorgabe so bleiben.

Zusatzinfo: Die „div-Struktur“ hat ja aber rein gar nichts mit dem Aussehen zu tun. Ein in HTML dient zum Gruppieren mehrerer Elemente. Struktur im Sinne von Layout macht man mit HTML gar nicht, auch nicht - wie viele das heute gerne behaupten - mit divs!

Das nur so am Rande, weil heutzutage immer noch viele glauben, man mache Layout mit divs. (Von den Tabellenvergewaltigern wollen wir jetzt mal gar nicht sprechen).

Liebe Grüße,
-Efchen

Die Linie soll aber
den vollen Verfügbaren Platz einnehmen, ohne in die
„leftcolumn“ und die „rightcolumn“ hineinzuragen.

#content {
min-width: 20em;
margin:0 15.5em;
}

Vielen Dank Yasmin,

ich dachte, das würde den Content im Internet-Explorer ebenfalls noch mal um den angegebenen Margin schmaler machen. Aber es klappt - zumindest in den beiden Browserversionen, die ich hier habe). Danke also.

Nur schade, dass der Text jetzt eben nicht mehr um die anderen Bereiche herumfließt. Das hätte ich gerne auch noch, aber wichtiger war jetzt die o.g. Gestaltung.

Gruß
A

Zusatzinfo: Die „div-Struktur“ hat ja aber rein gar nichts mit
dem Aussehen zu tun. Ein in HTML dient zum Gruppieren
mehrerer Elemente. Struktur im Sinne von Layout macht man mit
HTML gar nicht, auch nicht - wie viele das heute gerne
behaupten - mit divs!

Hallo,
das klingt jetzt, als ob man die in HTML mit „div“ gruppierten Elemente auf keinen Fall mit einer id versehen und diese per CSS gestalten darf. (großes Fragezeichen)

Die Gruppierung in dem angesprochenen Design hat innerhalb der Seite ja ihren Sinn. Und ich habe gelernt, dass man solche Gruppen (wie alle anderen HTML-Auszeichnungen) dann auch per CSS gestalten darf. Dafür ist CSS doch da, oder?

Gruß
A

ich dachte, das würde den Content im Internet-Explorer
ebenfalls noch mal um den angegebenen Margin schmaler machen.

Du spielst auf den Box-Model-Bug an? Der kommt hier nicht zum Vorschein, weil keine Objekt-Breite angegeben ist (zumindest keine, die der IE6 erkennt [der ja keine min-width interpretiert]).

Nur schade, dass der Text jetzt eben nicht mehr um die anderen
Bereiche herumfließt. Das hätte ich gerne auch noch, aber
wichtiger war jetzt die o.g. Gestaltung.

kannst Du genauer erklären, was Du erreichen willst? Vielleicht kann ich da auch weiter helfen, verstehe aber im Moment Dein Ziel nicht ganz.

Schöne Grüße
Yasmin

das klingt jetzt, als ob man die in HTML mit „div“ gruppierten
Elemente auf keinen Fall mit einer id versehen und diese per
CSS gestalten darf. (großes Fragezeichen)

Nein, dann hast Du das falsch verstanden oder ich mich unklar ausgedrückt.

Es gibt nur Leute, die legen eine Grundstruktur mit s fest und schreiben dann einfach ihren Inhalt in die s. Das entbehrt eglichen Sinns.

Und ich habe gelernt, dass man solche
Gruppen (wie alle anderen HTML-Auszeichnungen) dann auch per
CSS gestalten darf. Dafür ist CSS doch da, oder?

Da hast Du vollkommen recht.

Liebe Grüße,
-Efchen

schade, dass der Text jetzt eben nicht mehr um die anderen
Bereiche herumfließt. Das hätte ich gerne auch noch

Hallo nochmal,

mit float erreiche ich ja, dass nachfolgender Inhalt um das float-Objekt herumfließt, also unterhalb des float-Elements wieder die volle Fensterbreite einnimmt.

Mit der jetzigen Lösung (margin-left/margin-right)
wurde der Content ja derart in der Breite begrenzt, dass diese Begrenzung auch unter den zu umfließenden Elementen noch gilt - also auch dort, wo die volle Fensterbreite genutzt werden könnte.

Und gern würde ich diesen Platz noch nutzen, falls das in diesem Beispiel noch halbwegs einfach machbar ist.

Gruß
A

Hallo Anja,

Mit der jetzigen Lösung (margin-left/margin-right)
wurde der Content ja derart in der Breite begrenzt, dass diese
Begrenzung auch unter den zu umfließenden Elementen noch gilt

  • also auch dort, wo die volle Fensterbreite genutzt werden
    könnte.

ich verstehe. Ich hatte (unbegründeterweise) unterstellt, die Columns sollten die gesamte Höhe überspannen.

Und gern würde ich diesen Platz noch nutzen, falls das in
diesem Beispiel noch halbwegs einfach machbar ist.

Es gäbe mehrere Möglichkeiten, das gewünschte Ergebnis zu erreichen - kommt ein bisschen auf die Anforderung an die vorhandenen Elemente an.

Du könntest das Margin statt auf #content auf #inhalt beziehen. Dieses Element würde dann aber natürlich den gleichen Einschränkungen unterliegen, wie vorher #content.
Alternativ kann das Margin auch auf die H2 selbst bezogen werden. Dann erreichst Du einen nahtlosen Anschluss an die Columns allerdings nur, wenn Du die Schriftgröße für H2 auf 100% bzw. die gleiche wie die der Columns festlegst (weil sich die Maßeinheit em ja auf die Schriftgröße bezieht und die einer H2 standard-mäßig sehr groß ist). Das hätte natürlich den Nachteil, dass die Überschrift dann in der Größe nicht mehr heraussticht.
Eine weitere Möglichkeit wäre ein zusätzliches div, dass in #inhalt enthalten ist und die h2 umspannt und das margin erhält.

Schöne Grüße
Yasmin

Mit der jetzigen Lösung (margin-left/margin-right)
wurde der Content ja derart in der Breite begrenzt, dass diese
Begrenzung auch unter den zu umfließenden Elementen noch gilt

  • also auch dort, wo die volle Fensterbreite genutzt werden
    könnte.

Alternativ kann das Margin auch auf die H2 selbst bezogen
werden. (…)
Eine weitere Möglichkeit wäre ein zusätzliches div, dass in
#inhalt enthalten ist und die h2 umspannt und das margin
erhält.

Hallo Yasmin,
das wird auch nicht gut, weil die Überschriften dann auch im unteren Fensterteil begrenzt werden. Aber dort sollen sie natürlich ebenfalls die volle zur Verfügung stehende Breite einnehmen können. Insbesondere soll die Linie dort auch bis zu den Fensterrändern reichen und nicht dort aufhören, wo die Columns stehen würden, wenn sie länger wären.
Ist wohl etwas kniffliger.
Gruß
A

Hallo Anja,

das wird auch nicht gut, weil die Überschriften dann auch im
unteren Fensterteil begrenzt werden.

Du musst ja nicht allen den Außenabstand zuweisen, sondern (per class) nur der einen, die ihn haben soll.

Schöne Grüße
Yasmin

das wird auch nicht gut, weil die Überschriften dann auch im
unteren Fensterteil begrenzt werden.

Du musst ja nicht allen den Außenabstand zuweisen, sondern
(per class) nur der einen, die ihn haben soll.

Auch keine gute Lösung, Yasmin, weil die Inhalte (der rechten und linken Box) sich später ändern werden und dann der Inhalt jeder Einzelseite angepasst werden müsste.

Und selbst wenn nicht: Die Überschriften landen bei den Besucherinnen an ganz unterschiedlichen Stellen, abhängig von individuell eingestellter Schriftgröße, Fenstergröße, Browsereinstellungen, assistive Technologien, u.s.w.

Dann sollen später auch andere Menschen die rein redaktionelle Arbeit an den Webseiten übernehmen, und da wäre es auch schlecht, wenn die sich um die unterschiedliche Gestaltung von Elementen kümmern müssten, die (für sie) eigentlich gleich sind.

Gruß
A