✔ anklickbare divs mit rollover hintergrundfarbe

[Borgforum]

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:

<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:

.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 ;-)

 

[Maik]

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.

 

[Sven Mintel]

(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.

 

[Borgforum]

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

aber wir kommen schon weiter ;-)

 

[Maik]

Probier es mal so:

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

.reiter_b a:hover {
	background-color: #333333;
}

 

[Sven Mintel]

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

.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;
}

.....

<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>

 

[Borgforum]

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?

 

[Maik]

[...] 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).

 

[Borgforum]

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

 

[Maik]

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