Zur Navigation

a:active und background-image Fragen.

1 Isildur

Moin allerseits.

Ich bastel gerade an einer HP für einen Freund(www.arsobscura.de). Um die a:hover Effekte bei Grafiken nutzen zu können habe ich den Linktext in HTML leer gelassen
<a href="ziel"></a>
und stattdessen mit 
background-image:url(bild);
gearbeitet.

Wie man sieht funktioniert das auch soweit ganz gut, nur wenn ich jetzt a:active in gleicher Weise benutzen will funktioniert das merkwürdiger Weise nicht.
ul li a#bt1:hover , ul li a#bt1:active
	{
			background-image:url(pic/home_pressed.jpg);
	}
Hat jmd. ne Idee woran das liegen könnten?

Zweite Frage ist, wie kriege ich diese Gruppe von Links zentriert. Wenn ich Textlinks habe kann ich ja einfach mit text-align:center arbeiten, hier funktioniert das nicht. Jmd. ne Idee?

Danke fürs Lesen, wenn jmd. noch Infos braucht einfach fragen.

14.06.2007 19:56

2 Jörg Kruse

Hallo Isildur,

a:acrtive funktioniert bei mir mit Hintergrundbildern so wie z.B. mit Textfarben. Firefox und Opera zeigen den Wechsel an, wenn man auf den Link klickt, der Internet Explorer darüber hinaus, wenn man auf die Seite zurückkehrt. Funktioniert der Wechsel bei dir auch in diesen Fällen nicht?

Zweite Frage ist, wie kriege ich diese Gruppe von Links zentriert. Wenn ich Textlinks habe kann ich ja einfach mit text-align:center arbeiten, hier funktioniert das nicht. Jmd. ne Idee?

Du machst die Links zu Blockelemente, gibst ihnen eine Breite und zentrierst sie dann mit margin:auto, z.B.:

display:block;
margin:auto;
width:100px

14.06.2007 20:51

3 Isildur

Mhh also zunächst zum a:active.
Bei mir funktioniert das irgendwie nicht richtig. Vielleicht ist es nur ein winziger Fehler wie so oft... also die Seite ist
Ars Obscura
Und das ist die CSS Datei Link.
ul li a#bt5:link, ul li a#bt5:visited
	{
			background-image:url(pic/kontakt_released.jpg);
	}


ul li a#bt1:hover, ul li a#bt1:active
	{
			background-image:url(pic/home_pressed.jpg);
	}


Das mit dem Zentrieren funktionierte irgendwie auch nicht richtig. Da ich die Seite schnell einem Freund zur Verfügung stellen musste hab ich erstmal nen Workaround mit margin genommen(bei fester Breite kein so großes Problem). Irgend eine Idee was da schief gehen könnte? Falls nicht kann ich das auch nochmal gescheit implementieren und dann zur Verfügung stellen zur genaueren Analyse.

20.06.2007 15:29

4 Jörg Kruse

Hallo Isildur,

das größte Problem, was ich sehe it, dass der IE (7) die Buttons untereinander anordnet.

Was den active-Effekt anbelangt: was möchtest du genau erreichen? Bei mir verhalten sich die Browser hinsichtlih :active wie gesagt sowieso unterschiedlich, nicht nur in Bezug auf Hintergrundbilder. Falls du den Button der aktiven Seite anders kennzeichnen möchtest, solltest du hierfür eine eigene Klasse definieren

Das mit dem Zentrieren funktionierte irgendwie auch nicht richtig. Da ich die Seite schnell einem Freund zur Verfügung stellen musste hab ich erstmal nen Workaround mit margin genommen(bei fester Breite kein so großes Problem).

Wenn du #navi ul mit fester Breite und margin:auto definierst, sollten die Buttons zentriert sein, z.B.:

#navi ul
	{
            width:600px;
            margin:auto;
	}

20.06.2007 17:20

5 Isildur

Zitat von Jörg
Hallo Isildur,

das größte Problem, was ich sehe ist, dass der IE (7) die Buttons untereinander anordnet.
Oh irgendne Idee warum das der Fall ist und wie man das in den Griff bekommt?

Zitat von Jörg

Was den active-Effekt anbelangt: was möchtest du genau erreichen? Bei mir verhalten sich die Browser hinsichtlih :active wie gesagt sowieso unterschiedlich, nicht nur in Bezug auf Hintergrundbilder. Falls du den Button der aktiven Seite anders kennzeichnen möchtest, solltest du hierfür eine eigene Klasse definieren
Genau das will ich erreichen. Eine eigene Klasse? .meineactiveklasse {/*blub*/} oder wie? Ich meine :active ist ja Pseudoklasse, gewissermaßen ein dynamisches Element - wie soll ich das "nachbauen"?

ps:Falls das net klappt könnte ich es natürlich immer noch über JS lösen, das ist zwar net so schön aber da es nicht die Funktionalität beeinträchtigt auch noch akzeptabel.

25.06.2007 16:02

6 Jörg Kruse

Die Listenpunkte benötigen zum Floaten noch eine Breitenagabe:

ul li
	{
	          	 float:left;
	           	 list-style:none;
                 width:119px;
    	}

Firefox und Opera leiten die Breite wohl aus der Breite der dort enthaltenen Links ab, aber der IE ist in diesem Fall wohl nicht so helle ;)

Ich meine :active ist ja Pseudoklasse, gewissermaßen ein dynamisches Element - wie soll ich das "nachbauen"?

Naja, ich war mir halt nicht sicher, ob du wirklich auch die Funktionalität von :active meinst - es gab schon andere, die davon ausgingen, dass diese Pseudoklasse sich auf den Link bezieht, der auf die Seite selbst zeigt.

Ansonsten sehe ich kein Problem speziell mit dem Hintergrundbild, sondern eher ein generelles. Firefox zeigt mir die Hover-Version im Gegensatz zum IE und Opera nicht an, wenn ich auf die Seite zurückkehre - aber dies gilt auch für andere Formatierungen

25.06.2007 16:52

Zum Schreiben einloggen

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]