<hr> im Opera in Element zentrieren

[Konrad L. M. Rudolph]

Moin,

Folgender HTML-Code:

<div>
    <hr />
</div>

mit folgendem CSS:

div {
    border: 1px solid red;
    width: 300px;
}

hr {
    border: none;
    border-top: 1px solid Silver;
    height: 0;
    margin: 1em 10%;
    width: 80%;
}

Die Trennlinie ist im Opera "sinniger Weise" nicht zentriert, obwohl width und margin entsprechend gesetzt worden sind. Auch ein 'text-align: center' im div bringt nichts, der Ruler lässt sich definitiv nicht in die Mitte zwingen.

Beispiel: http://madrat.net/tmp/hr-test.html

Was mache ich falsch? Wie lässt es sich beheben?

Gruß,
KonRad -

[Viennamade]

Hallo Konrad!

Die Trennlinie ist im Opera "sinniger Weise" nicht zentriert, obwohl width und margin entsprechend gesetzt worden sind. Auch ein 'text-align: center' im div bringt nichts, der Ruler lässt sich definitiv nicht in die Mitte zwingen.

Ich habe dem hr-Selektor margin-left: auto und margin-right: auto mit auf den Weg gegeben und dann wird auch im Opera zentriert.

Beste Grüße
Viennamade

[Konrad L. M. Rudolph]

Moin,

Ich habe dem hr-Selektor margin-left: auto und margin-right: auto mit auf den Weg gegeben und dann wird auch im Opera zentriert.

Ok, so klappt das, danke erst mal. Nur leider reicht das für meinen Zweck nicht, denn ich muss jeweils für links und rechts exakt 16px Rand verwenden. Und wenn ich die Margin zu 16px ändere, geht es überhaupt nicht mehr. Hast Du dafür auch eine Lösung?

Gruß,
KonRad -

[MudGuard]

Hi,

Ok, so klappt das, danke erst mal. Nur leider reicht das für meinen Zweck nicht, denn ich muss jeweils für links und rechts exakt 16px Rand verwenden. Und wenn ich die Margin zu 16px ändere, geht es überhaupt nicht mehr. Hast Du dafür auch eine Lösung?

Hm. Irgendwie widersprichst Du Dir doch.
Im ersten Posting hattest Du 300px Breite vorgegeben für das div. Das hr sollte davon 10% links und rechts Rand haben, also je 30px sowie 80% Breite, also 240px. Jetzt willst Du 16px margin.

Ach ja, ganz nebenbei: hr ist in den mir bekannten Browsern (auch im Opera) zentriert, wenn seine Breite kleiner als die zur Verfügung stehende Breite ist. Die Gesamtbreite ist Dir bekannt (die 300px aus dem div). Also kannst Du doch die Breite einfach auf den passenden Wert setzen, der sich aus der Gesamtbreite abzuüglich der 2* 16px ergibt.

cu,
Andreas

[Konrad L. M. Rudolph]

Moin,

Hm. Irgendwie widersprichst Du Dir doch.

Zugegeben. Ich habe das Problem falsch abstrahiert, weil ich dachte, es gäbe vielleicht eine Lösung, die davon unabhängig ist.

Also hier noch einmal die genauen Ausgangsdaten: ich habe einen div mit der Breite 20%. In diesem Div befindet sich das hr, das links und rechts jeweils 16px Abstand vom Rand haben muss. Die Padding des div kann ich hierzu leider nicht verwenden, denn sonst macht das Layout im MSIE Probleme (ich verwende :before und :after, um dem div runde Ecken zu verpassen).

Nochmal der Link, diesmal mit korrekten Daten: http://madrat.net/tmp/hr-test.html

Ach ja, ganz nebenbei: hr ist in den mir bekannten Browsern (auch im Opera) zentriert, wenn seine Breite kleiner als die zur Verfügung stehende Breite ist. Die Gesamtbreite ist Dir bekannt (die 300px aus dem div). Also kannst Du doch die Breite einfach auf den passenden Wert setzen, der sich aus der Gesamtbreite abzuüglich der 2* 16px ergibt.

Hmm, wie ich oben sagte, ist das leider nicht der Fall, d.h. die Gesamtbreite ist mir nicht bekannt.

Gruß,
KonRad -

[Detlef G.]

Hallo Konrad,

... In diesem Div befindet sich das hr, das links und rechts jeweils 16px Abstand vom Rand haben muss.

Warum genau 16px?
Was befindet sich über und was unter der hr?

(ich verwende :before und :after, um dem div runde Ecken zu verpassen).

Ob das die optimale Lösung ist?

Nochmal der Link, diesmal mit korrekten Daten: http://madrat.net/tmp/hr-test.html

Füge bitte etwas mehr drum herum in dein Beispiel ein, oft ergibt sich aus
dem Zusammenhang eine Lösung.

Auf Wiederlesen
Detlef

[Konrad L. M. Rudolph]

Moin Detlef,

... In diesem Div befindet sich das hr, das links und rechts jeweils 16px Abstand vom Rand haben muss.

Warum genau 16px?

Weil die Boxen (divs) abgerundete Ecken haben. Das erreiche ich durch die Pseudoklassen :before und :after. Die Ecken-Bilder haben dabei das Format 16*16. Damit der Text nun nicht in die Ecken hineinragt, wird ein Abstand von 16px gehalten.

Was befindet sich über und was unter der hr?

Darüber: Text (<p>). Darunter nichts -- zumindest nicht im selben Kasten. Ich überlege im Moment, ob hier die Trennlinie überhaupt sinnvoll ist -- wenn ich sie durch einen border-bottom des letzten <p> ersetze, fällt auch der ganze Ärger weg.

(ich verwende :before und :after, um dem div runde Ecken zu verpassen).

Ob das die optimale Lösung ist?

Es ist die *einzige* CSS-Lösung.

Füge bitte etwas mehr drum herum in dein Beispiel ein, oft ergibt sich aus
dem Zusammenhang eine Lösung.

Ok, ich habe jetzt die ganze Sache mit den runden Ecken eingefügt, obwohl das IMO nicht zur Lösungsfindung beiträgt.

http://madrat.net/tmp/hr-test.html

Ich denke aber, ich lasse den <hr> weg, Border ist besser. ich wäre allerdings trotzdem an einer Lösung des Problems interessiert, wenn jemand eine weiß.

Gruß,
KonRad -

[Detlef G.]

Hallo KonRad

Weil die Boxen (divs) abgerundete Ecken haben. Das erreiche ich durch die Pseudoklassen :before und :after. Die Ecken-Bilder haben dabei das Format 16*16. Damit der Text nun nicht in die Ecken hineinragt, wird ein Abstand von 16px gehalten.

Das hatte ich mir gedacht, war mir aber nicht sicher.

Darüber: Text (<p>). Darunter nichts -- zumindest nicht im selben Kasten. Ich überlege im Moment, ob hier die Trennlinie überhaupt sinnvoll ist -- wenn ich sie durch einen border-bottom des letzten <p> ersetze, fällt auch der ganze Ärger weg.

Genau darauf wollte ich hinaus, da du dies hr mittels "height: 0;" sowieso
ausblendest und stattdessen den border-top anzeigst.
Ich wollte das aber ohne diese Information nicht vorschlagen.

Wenn die hr für Browser ohne CSS vorhanden sein soll, könnte diese auch ohne
border-top drin bleiben.

Es ist die *einzige* CSS-Lösung.

Die einzige rein-CSS-Lösung, die leider nicht im IE funktioniert.
Eine Möglichkeit mit ein paar zusätzlichen Elementen wäre
http://aktuell.de.selfhtml.org/tippstricks/css/runde_ecken/index.htm.

Auf Wiederlesen
Detlef

[Konrad L. M. Rudolph]

Moin,

Die einzige rein-CSS-Lösung, die leider nicht im IE funktioniert.
Eine Möglichkeit mit ein paar zusätzlichen Elementen wäre
http://aktuell.de.selfhtml.org/tippstricks/css/runde_ecken/index.htm.

"<div><div><div><div>" -- Hilfe! ;-)
Na ja, ich lasse es erst einmal so, wie es ist. Vielleicht komme ich ja mit der Zeit zur "Vernunft" und mache es auch im MSIE rund.

Gruß,
KonRad -

[MudGuard]

Hi,

(ich verwende :before und :after, um dem div runde Ecken zu verpassen).
Ob das die optimale Lösung ist?
Es ist die *einzige* CSS-Lösung.

Nein, die wirkliche CSS-Lösung ist m.E. border-radius:16px; (CSS 3 Module: Border, Working Draft http://www.w3.org/TR/css3-border/#the-border-radius).
Wird nur noch von keinem Browser direkt unterstützt.

Aber: Mozilla unterstützt -moz-border-radius

cu,
Andreas

[Konrad L. M. Rudolph]

Moin,

Nein, die wirkliche CSS-Lösung ist m.E. border-radius:16px; (CSS 3 Module: Border, Working Draft http://www.w3.org/TR/css3-border/#the-border-radius).

Wie Du sagst: Das ist CSS 3. CSS 2 hat keine andere Lösung.

Aber: Mozilla unterstützt -moz-border-radius

Nun ja, Stichpunkt "standards compliance". Trotzdem danke für den Tip.

Gruß,
KonRad -

[Detlef G.]

Hallo Konrad

... ich wäre allerdings trotzdem an einer Lösung des Problems interessiert, wenn jemand eine weiß.

Es ist für mich nicht hachvollziehbar, warum der Opera 7.23 nicht dazu zu
überreden ist, die hr zu zentrieren, wobei der IE 6.0 dies auch nicht
wirklich tut.
Eine Lösung, die ich allerdings nicht unbedingt für gut halte und auch nur
in IE 6.0, Mozilla 1.6 und Opera 7.23 getestet habe, wäre:

#nav {
    width: 20%;
}

.lightbox {
    background: #DCFE79;
    padding: 16px;
}

.lightbox:before {
    background: transparent url('pics/light-green-tr.png') scroll no-repeat top right;
    content: url('pics/light-green-tl.png');
    display: block;
    font-size: 1px;
    height: 16px;
    padding: 0;
    margin:-16px -16px 0 -16px;
}

.lightbox:after {
    background: transparent url('pics/light-green-br.png') scroll no-repeat top right ;
    content: url('pics/light-green-bl.png');
    display: block;
    font-size: 1px;
    height: 16px;
    padding: 0;
    margin:0 -16px -16px -16px;
}

hr {
    border: none;
    border-top: 1px solid Silver;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

p {
    margin: 1em 0;
    text-align: center;
}

Auf Wiederlesen
Detlef

[Konrad L. M. Rudolph]

Moin Detlef,

Eine Lösung, die ich allerdings nicht unbedingt für gut halte und auch nur
in IE 6.0, Mozilla 1.6 und Opera 7.23 getestet habe, wäre:

Hey, die Lösung ist gar nicht so dumm ... natürlich sind negative Margins so 'ne Sache aber dadurch würde generell das problem der Positionierung der Elemente wegfallen, weil man mit der Padding des Containers arbeitet.
Im Moment habe ich nämlich das Problem, dass das CSS fast zu 50% aus Browserweichen für den MSIE besteht, um die Abstände zum Rahmen zu korrigieren ...

Gruß,
KonRad -