Ein schlichter Kasten mit Tücken

[Peter]

moin moin,
ich verzweifele grad an einer Kleinigkeit, die mir das Haare raufen lehrt.

Aufgabe: Ein Kasten mit einem 2px solid blauen Rand links und rechts, einem 5px farbigen rand nach unten. Folgendes css sieht schon fast gut aus:

#topHeadline {
    ...
    background-color: #91CD8F;
    border-bottom: 5px solid #6EBA6B;
    border-left: 2px solid #00639C;
    border-right: 2px solid #00639C;
    padding-bottom: 3px;
    padding: 5px 10px 5px 10px;
    ...
    }

Allerdings nur auf den ersten Blick, die 2px Ränder ziehen nicht komplett nach unten, sondern schrägen irgendwie (sieht man gut, wenn man sie grösser macht) ab. Dabei soll alles in einem Div stehen, weil es im template leider schon so vorgegeben ist. Es existiert also nur ein <div class="topHeadline">.
Gibt es einen Weg die Ränder ganz nach unten zu ziehen, nur in Änderung des CSS?

Danke für flinke Antwort! :)

[wahsaga]

hi,

Aufgabe: Ein Kasten mit einem 2px solid blauen Rand links und rechts, einem 5px farbigen rand nach unten.
[...] die 2px Ränder ziehen nicht komplett nach unten, sondern schrägen irgendwie (sieht man gut, wenn man sie grösser macht) ab.

Ja, das ist immer so.
Wenn du dickere border verschiedener Farben hast, dann bilden diese in den Ecken wo sie "zusammenstoßen" jeweils einen solchen "Winkel".

Dabei soll alles in einem Div stehen, weil es im template leider schon so vorgegeben ist. Es existiert also nur ein <div class="topHeadline">.
Gibt es einen Weg die Ränder ganz nach unten zu ziehen, nur in Änderung des CSS?

Mit nur einem Element? Eigentlich nein.

Was du eventuell(!) versuchen könntest wäre, den unteren border nicht dem Element selber zu verpassen, sondern dem Folgeelement. Dieses muss dann natürlich genauso breit sein (Box Model bzgl. seitlicher border beachten), und bekommt oben einen Rahmen, der optisch einen unteren Rahmen des vorhergehenden Elementes simuliert. Margins zwischen diesen beiden Elementen müssen dann natürlich 0 sein, und der Inhalt des Folgeelementes könnte über ein paading-top auf Abstand gehalten werden.
Nach dem letzten solchen Element wäre dann ggf. ein zusätzliches leeres Folgeelement einzufügen, um dies auch dort bewerkstelligen zu können.
Wäre natürlich eine recht spezielle Lösung, die nur unter ganz bestimmten Bedingungen funktionieren kann.
Leichter wäre es sicher, wenn im Template ein weiterer Container um das Element gelegt werden könnte, so dass man dem einen die seitlichen und dem anderen den unteren Rahmen verpasst. Wegen dem zusätzlichen Markup dann aber auch wieder leicht unschön ...

gruß,
wahsaga

[Peter]

jo, vielen dank für die flotte auskunft :)
Dann werd ich mal dem Programmierer ein wenig auf die Finger kloppen, auf das ich an das Template komme^^

gruss, peter

[MudGuard]

Hi,

hi,

Aufgabe: Ein Kasten mit einem 2px solid blauen Rand links und rechts, einem 5px farbigen rand nach unten.
[...] die 2px Ränder ziehen nicht komplett nach unten, sondern schrägen irgendwie (sieht man gut, wenn man sie grösser macht) ab.
Wenn du dickere border verschiedener Farben hast, dann bilden diese in den Ecken wo sie "zusammenstoßen" jeweils einen solchen "Winkel".
Dabei soll alles in einem Div stehen, weil es im template leider schon so vorgegeben ist. Es existiert also nur ein <div class="topHeadline">.
Gibt es einen Weg die Ränder ganz nach unten zu ziehen, nur in Änderung des CSS?
Mit nur einem Element? Eigentlich nein.

Kommt drauf an, ob das Element bereits ein Hintergrundbild hat.

Wenn ja: falls das Hintergrundbild das Element bereits vollständig ausfüllt: den unteren Balken ins Hintergrundbild setzen.

Wenn nicht: eine Mini-Grafik in der Höhe der gewünschten Border (Breite ein paar Pixel) als Hintergrundbild unten positioniert und in x-Richtung wiederholend.

cu,
Andreas