Hallöchen,

ich hab jetz schon im Forum gesucht nach meinem Problem (will ja nix doppelt erfragen), hab aber nix passendes Gefunden.

So jetz zu meiner Problematik:

Hier erstmal der Link, worum es geht (erstmal nur diese Seite, an den anderen baue ich gerade)

Klick

Wie man sich sicher denken kann geht es rechts um die "reiter" ... die Reiter 2 und 3 sollen komplett anklickbar sein und beim Mouseover ihre Hintergrundfarbe (bild) wechseln. (die Zahlen da drin, sollen aber nicht als standard Link behandelt werden (wie das im moment der fall ist)

Hier der Code:

HTML-Code:

<div class="inhalt_a">
<img src="img/lebendig_1.jpg" alt="Lebendig_1" width="553" height="553" />
<div class="reiter_a" style="top:5px;">1</div>
<div class="reiter_b" style="top:110px;"><a href="#" style="display:block">2</a></div>
<div class="reiter_b" style="top:215px;"><a href="#" style="display:block">3</a></div>
</div>

und Hier die relevanten CSS Teile:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

.inhalt_a {     height: 554px;     width: 554px;     position: absolute;     z-index: 3;     border: 1px solid #FFFFFF;     padding: 10px; }   .reiter_a {     height: 60px;     width: 20px;     position: absolute;     z-index: 4;     border-top: 1px solid #FFFFFF;     border-right: 1px solid #FFFFFF;     border-bottom: 1px solid #FFFFFF;     left: 574px;     text-align: center;     padding-top: 40px;     background-image: url(../img/reiter_active.gif);     background-repeat: repeat; }   .reiter_b {     height: 60px;     width: 20px;     position: absolute;     z-index: 2;     border-top: 1px solid #FFFFFF;     border-right: 1px solid #FFFFFF;     border-bottom: 1px solid #FFFFFF;     left: 574px;     text-align: center;     padding-top: 40px; }   .reiter_b a:link {     background-color: #000000; }   .reiter_b a:hover {     background-color: #333333; }

Danke schon mal im Vorraus

Borg


PS.: die dynamische funktion ala Inhaltwechsel und stylewechsel bekomm ich dann schon selber hin

Wenn du den Links innerhalb der Tab-Reiter die display:block-Eigenschaft und die gewünschten Dimensionen zuweist, sind sie auch über die ganze Fläche anklickbar.

Zitat von Borgforum

(die Zahlen da drin, sollen aber nicht als standard Link behandelt werden (wie das im moment der fall ist)

Wenn du den Zahlen als cursor-Eigenschaft bspw. text zuweist, hättest du den gewünschten Effekt.

Ich habe oben den Code jeweils mal aktualisiert .... irgendwie funktioniert das noch net so recht ...

aber wir kommen schon weiter

Probier es mal so:

Code :

1 2 3 4 5 6 7 8 9 10

.reiter_b a:link, .reiter_b a:visited  {     background-color: #000000;     display: block;     width: 20px;     height: 60px; }   .reiter_b a:hover {     background-color: #333333; }

Warum lässt du die Divs nicht gleich ganz weg?

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.reiter_b {         display:block;     height: 60px;     width: 20px;     background-color: #000000;     position: absolute;     z-index: 1;     border-top: 1px solid #FFFFFF;     border-right: 1px solid #FFFFFF;     border-bottom: 1px solid #FFFFFF;     left: 574px;     text-align: center;     padding-top: 40px;         cursor:text; }   .reiter_b:hover {     background-color: #333333; }

.....

Code :

1 2 3

<div class="reiter_a" style="top: 5px;">1</div> <a class="reiter_b" style="top: 110px;" href="#">2</a> <a class="reiter_b" style="top: 215px;" href="#">3</a>

Also, wie ihr jetzt seht, klappt das jetz prima, herzlichen Dank.

- wie kann ich die Zahlen in dem Reiter zentrieren?

- warum ich die divs lasse?
1. siehe oben
2. weil ich ja wenn ich auf einen Reiter klicke, alles dynamisch in der einen seite ändern will ... das würde dann umständlicher werden, glaub ich ...

oder irr ich mich da?

Zitat von Borgforum

[...] wie kann ich die Zahlen in dem Reiter zentrieren? [...]

Mit der line-height-Eigenschaft lassen sich die Zahlen vertikal zentrieren, der Wert entspricht hierbei der Höhe (60 Pixel).

Wunderbar, es funktioniert alles prächtig

ich musste dem line-height wert zwar komischerweise 95 geben, aber es klappt ja.

Für mich wäre das jetz an dieser Stelle erledigt, der rest is ja eigentlich nur noch PHP

Ich setzte den Thread in 30 min auf erledigt, falls bis dahin noch jemand wegen dem div weglassen oder sonstige Tipps hat

Danke

Borg

Der höhere line-height-Wert resultiert dann wohl aus der padding-top-Angabe, die ja zu der Höhenangabe addiert wird, Stichwort: Boxmodell.

Sorry, daß ich die eben nicht berücksichtigt habe

Zitat von Borgforum

... das würde dann umständlicher werden, glaub ich ...

oder irr ich mich da?

...nicht unbedingt...du kannst ja aus .reiter_a auch ein <a> machen, und ein paar Bytes spart es auch noch dabei