html border, hilfe bei menü

Opa_Schlumpf · 31. Januar 2013

Guten Tag..

Ich bastle gerade wieder einwenig rum und habe ein Problem..

Ich habe das Menü gecodet:

Soweit so gut..
Nur möchte ich das der schwarze Strich von den Boxen bis zum ende weitergeht..
Ich kann zwar das ganze mit einen 1px border lösen aber ich möchte das wenn man auf einen Reiter drückt das der schwarze Strich weg ist also das der Button gedrückt ist.
Wenn ich daher den border nehmen kann ich den nicht auf der position löschen..

Habe jetzt versucht eine weitere transparente Box mit einen border-bottom zu erstellen nur weis ich da nicht wie ich es einstellen kann das er wirklich nur bis ans ende mit der Box geht und keine neue Zeile anfängt..

Ich hoffe ihr versteht mein Anliegen^^

NicoAiko · 31. Januar 2013

mach doch von der fläche einfach ein border-top und lass bei dem Menü einfach den Border-Bottom weg oO

Opa_Schlumpf · 31. Januar 2013

wenn ich der main fläche ein border-top gebe und dem button einen border-bottom treffen beide aufeinander.
Nur möchte ich, das wenn man den Button drückt kein border mehr im "weg" ist sonder direkt in die flächte "fließt".

NicoAiko · 31. Januar 2013

also bei den Buttons einfach border-bottom wegmachen?

Hab ich eigentlich so geschrieben...

und das fließen müsste mit Javascript gehen...

Opa_Schlumpf · 31. Januar 2013

jap soweit bin ich schon..

Auf dem Bild hab ich einen wunderschönen Pfeil gemacht...
Der soll zeigen das der schwarze Border druchgehen soll und nicht nur bei den Buttons sein soll..
Das ist ja mein Problem das nach den Buttons kein Border mehr ist.

NicoAiko · 31. Januar 2013

ACHSOO!!

Dann probier doch mal was mit z-index

xGreekz7x · 31. Januar 2013

Mach einen Border-top und wenn der button aktiv ist, setzt du beim button,
paddin-bottom um eins höher und dafür fällt der border-bottom vom button aus

wenn ich das richtig verstanden habe

MfG

Opa_Schlumpf · 1. Februar 2013

Dann verschiebt er aber die ganze untere Box um 1px nach unten und die restlichen Buttons "fliegen"

NicoAiko · 1. Februar 2013

Probier mal z-index bei den Buttons!

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Opa_Schlumpf · 2. Februar 2013

Hat mir auch nicht wirklich geholfen hier mal die Ausschnitte aus meiner CSS:

PHP

.menuboxreiter {
            float: left;
            text-align: center;
            display: inline-block;
            height: 34px;
            border: 1px #c2c2c2 solid;
            background: url(Pictures/Layout/menubox.jpg) repeat-x;
            border-bottom: 0px;
            -webkit-border-top-right-radius: 7px;
            -webkit-border-top-left-radius: 7px;
            -moz-border-radius-topright: 7px;
            -moz-border-radius-topleft: 7px;
            border-top-right-radius: 7px;
            border-top-left-radius: 7px;
            cursor: pointer;
        }
        .menuboxreiter:hover {
            float: left;
            text-align: center;
            display: inline-block;
            height: 34px;
            border: 1px #c2c2c2 solid;
            background: url(Pictures/Layout/menuboxpress.jpg) repeat-x;
            border-bottom: 0px;
            -webkit-border-top-right-radius: 7px;
            -webkit-border-top-left-radius: 7px;
            -moz-border-radius-topright: 7px;
            -moz-border-radius-topleft: 7px;
            border-top-right-radius: 7px;
            border-top-left-radius: 7px;
        }
.menuboxout {
            clear: left;
            border: 1px #282828 solid;
            background-color: #FFFFFF;
            -webkit-border-top-right-radius: 7px;
            -moz-border-radius-topright: 7px;
            border-top-right-radius: 7px;
        }

Alles anzeigen

breadfish.de 11. März 2022