a: hover mit img und Firefox

[Gast] Foren Web allgemein HTML und CSS / Stylesheets a: hover mit img und Firefox

Web allgemein

Themen

Beiträge

Moderatoren

Letzter Beitrag

HTML und CSS / Stylesheets

1193

6413

FSt

19. Dez 2022, 21:28

Vitus

1 2

matmax

Beiträge gesamt: 626

7. Feb 2007, 00:11
Beitrag # 1 von 30
Bewertung:
(6311 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo!
Ich habe eine Navigation folgendermaßen erstellt:
(Menuepunkt 1 ist aktiv, das kästchen ist permanent zu sehen (habe ich dadurch gelöst indem ich img einfach nach a gesetzt habe und nicht innen drin))

Code

<div id="navigation">  
   
<h1><a href="index.html">Menuepunkt1&nbsp;</a><img src="Kaestchen.gif" alt="" width="9" height="8"/></h1> 
<p><a href="Menuepunkt.html">Menuepunkt&nbsp;<img src="Kaestchen.gif" alt="" width="9" height="8"/></a></p> 
<p><a href="Menuepunkt.html">Menuepunkt&nbsp;<img src="Kaestchen.gif" alt="" width="9" height="8"/></a></p> 
		 
<h2><a href="Menuepunkt.html">Menuepunkt&nbsp;<img src="Kaestchen.gif" alt="" width="9" height="8"/></a></h2> 
<p><a href="Menuepunkt.html">Menuepunkt&nbsp;<img src="Kaestchen.gif" alt="" width="9" height="8"/></a></p> 
 
</div>

und im stylesheet

Code

 
#navigation a:link {	 
color: black;  
text-decoration: none; 
} 
							 
#navigation a:visited {	 
color: black;  
text-decoration: none; 
}				 
									 
#navigation a:link img { 
visibility: hidden; 
} 
 
#navigation a:visited img { 
visibility: hidden; 
} 
 
#navigation a:hover img	 { 
visibility: visible; 
}							 
 
#navigation a.aktuell:link { 
visibility: visible; 
}

In Safari funktioniert alles.
InternetExplorer für OSX auch.

In Firefox auf OSX und WINXP nicht. Das img wird komisch groß dargestellt und die Lage der Menüpunkte springt.
InternetExplorer für WINXP funktioniert der hover Effekt gar nicht.

Weiß jemand was ich falsch mache?!
Und wie man das dann am einfachsten löst?!

Danke!!
matmax

a: hover mit img und Firefox

SabineP

Beiträge gesamt: 7586

7. Feb 2007, 09:48
Beitrag # 2 von 30
Beitrag ID: #274803
Bewertung:
(6298 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo matmax,

>> Und wie man das dann am einfachsten löst?!

Mit einer Liste:

<ul>
<li><a href="">Link</a>
<li><a href="">Link</a>
</ul>

Und das Kästchen als Hintergrundbild:

ul li:hover {list-style:none;background:#f00 url(Kaestchen.gif) no-repeat 99% 50%}

Hier gibts noch mehr Beispiele zum Ausrichten von Hintergrundbildern:
http://www.w3.org/.../current/test536.htm

als Antwort auf: [#274755]

a: hover mit img und Firefox

matmax

Beiträge gesamt: 626

7. Feb 2007, 23:10
Beitrag # 3 von 30
Beitrag ID: #275073
Bewertung:
(6277 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Liebe Sabine,

das mit dem positionieren verstehe ich noch nicht ganz.
Bei mir ist beim Überfahren des Links mit der Maus nichts zu sehen …

Kann man denn überhaupt das Kästchen so platzieren, dass es an der Grundlinie des jeweiligen Links ausgerichtet wird.
Ich habe das nämlich schon mal ausprobiert und festgestellt, dass je nach Browser die Liste eine andere Position erhält und somit das Kästchen zu springen scheint …

Geht es nicht auch ohne li, so dass ich ein img in den Link setzen kann?!?!

So wird es in Firefox beim Rollover angezeigt. Oben normal. (siehe Anhang)

Viele Grüße,
matmax

als Antwort auf: [#274803]
(Dieser Beitrag wurde von matmax am 7. Feb 2007, 23:18 geändert)

Anhang:

Bild 36.png (1.04 KB)

a: hover mit img und Firefox

SabineP

Beiträge gesamt: 7586

7. Feb 2007, 23:48
Beitrag # 4 von 30
Beitrag ID: #275075
Bewertung:
(6271 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Gibt es zu dem Bildschirmfoto auch noch einen Link zu dieser Seite, damit man sich den Quellcode ansehen kann?

Gruß Sabine

als Antwort auf: [#275073]

a: hover mit img und Firefox

matmax

Beiträge gesamt: 626

8. Feb 2007, 21:26
Beitrag # 5 von 30
Beitrag ID: #275368
Bewertung:
(6259 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

nein, sorry, hab ich noch nicht.
aber hier kopiert:

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<meta name="robots" content="index, follow" /> 
<meta name="description" content="test" /> 
<meta name="keywords" content="test" /> 
<meta name="creator" content="test" /> 
<meta name="creation_date" content="16.10.2006" /> 
 
 
<title>Test</title> 
 
 
<link rel="stylesheet" type="text/css" href="Stylesheets/test_screen.css" media="screen" /> 
<link rel="SHORTCUT ICON" href="/favicon.ico" type="image/ico" /> 
<link rel="stylesheet" type="text/css" href="Stylesheets/test_print.css" media="print" /> 
 
 
</head> 
 
<body> 
 
<div id="container">  
 
	<div id="logo"><img src="Bilder/Bild_Logo_94.gif" alt="" width="94" height="94"/></div> 
	 
	<div id="schriftzug"><img src="Bilder/Bild_Schriftzug.gif" alt="" width="351" height="95"/></div> 
 
	 
  <div id="navigation">  
   
		<h1><a href="index.html">Link</a><img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></h1> 
		<p><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></p> 
		<p><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></p> 
		<p><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></p> 
		 
		<h2><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></h2> 
 
		<h2><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></h2> 
 
		<h2><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></h2> 
		<p><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></p> 
		<p><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></p> 
		 
		<h2><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></h2> 
		<p><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></p> 
		<p><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></p> 
		<p><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></p> 
		 
		<h2><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></h2> 
		 
		<h2><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></h2> 
		 
  </div> 
	 
	<div id="inhalt">  
		Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt    
	</div> 
	 
	<div id="box1"> 
	     
  </div> 
	 
	<div id="box2">  </div> 
   
  	<div id="box3"> 
	  	  
	   
  	</div> 
 
</div> 
 
</body> 
 
</html>

und das stylesheet, aber etwas durcheinander, da ich viel probiert habe:

Code

 
				 
/* layout 
----------------------------------------------- */					 
	 
* {	 
padding: 0px; 
margin: 0px; 
} 
				 
					 
body { 	 
background-color: white; 
color: black; 
text-align: left; 
font: 12px Helvetica, Verdana, sans serif; 
line-height: 18px; 
font-weight: normal; 
} 
				 
						 
#container { 
width: 950px; 
height: 650px; 
position: relative; 
margin: auto; 
margin-top: 50px; 
background-color: white; 
text-align: left;	 
}			 
						 
							 
#logo {	 
width: 94px; 
height: 94px; 
position: absolute; 
top: 0px; 
left: 30px;	 
}				 
												 
					 
#schriftzug {	 
width: 500px; 
height: 95px; 
position: absolute; 
top: 0px; 
left: 170px; 
text-align: left;	 
}									 
 
 
						 
/* navigation 
----------------------------------------------- */									 
						 
#navigation { 
width: 138px; 
height: 500px; 
position: absolute; 
top: 130px; 
left: 0px; 
text-align: right; 
background-color: white; 
}				 
	 
	 
						 
#navigation a:link {	 
color: black;  
text-decoration: none; 
} 
			 
				 
#navigation a:visited {	 
color: black;  
text-decoration: none; 
}				 
									 
						 
#navigation a:link img { 
visibility: hidden; 
} 
 
#navigation a:visited img	{ 
visibility: hidden; 
} 
 
#navigation a:hover img	{ 
visibility: visible; 
}							 
 
#navigation a.aktuell:link 	{ 
visibility: visible; 
}						 
						 
 
/* inhaltbox 
----------------------------------------------- */ 
						 
#inhalt {	 
width: 500px; 
min-height: 500px;  
position: absolute; 
background-color: #EBEBEA; 
top: 115px; 
left: 150px; 
padding-right: 15px; 
padding-left: 20px; 
padding-top: 15px; 
overflow: visible; 
margin-bottom: 15px; 
} 
		 
				 
* html #inhalt {	 
width: 500px; 
height: 500px; 						 
} 
 
						 
#inhalt a:link {	 
color: black; 
} 
						 
			 
#inhalt a:visited {	 
color: black; 
} 
						 
			 
#inhalt a:hover {	 
color: white; 
} 
 
 
/* box1 
----------------------------------------------- */ 
 
#box1 { 
width: 205px; 
height: 120px; 
position: absolute; 
top: 115px; 
left: 699px; 
padding-right: 15px; 
padding-left: 0px; 
padding-top: 15px; 
text-align: left; 
} 
						 
#box1 a:link {	 
color: black;  
text-decoration: none; 
} 
			 
				 
#box1 a:visited {	 
color: black;  
text-decoration: none; 
}				 
	 
			 
#box1 a:hover {	 
font-weight: bold;	 
}		 
 
												 
#box1 ul { 
margin: 0px 0px 0px 0px; 
list-style-type: none; 
list-style-position: outside; 
padding-left: 0px; 
}	 
 
						 
#box1 li { 
margin: 0px 0px 0px 0px; 
list-style-type: none; 
list-style-position: outside; 
padding-left: 11px; 
}							 
 
						 
#box1 li.aktiv { 
font-weight: bold; 
padding-left: 0px; 
}					 
 
 
/* box2 
----------------------------------------------- */ 
 
#box2 { 
width: 225px; 
height: 225px; 
position: absolute; 
top: 215px; 
left: 700px; 
padding-right: 0px; 
padding-left: 0px; 
padding-top: 0px; 
}	 
	 
					 
#box2 a:link {	 
color: black; 
}	 
 
 
#box3 {	 
width: 210px; 
height: 165px; 
position: absolute; 
top: 455px; 
left: 700px; 
padding-right: 5px; 
padding-left: 10px; 
padding-top: 10px; 
background-color: #EBEBEA; 
}								 
 
/* box3 
----------------------------------------------- */ 
						 
#box3 a:link {	 
color: black; 
} 
						 
			 
#box3 a:visited {	 
color: black; 
} 
						 
			 
#box3 a:hover {	 
color: #CCCCCC; 
}						 
						 
						 
						 
/* typography 
----------------------------------------------- */											 
								 
h1 {	 
font: 12px Helvetica, Verdana, sans serif; 
line-height: 18px;	 
font-weight: bold; 
margin-bottom: 0px; 
} 
			 
			 
h2 {	 
font: 12px Helvetica, Verdana, sans serif; 
line-height: 18px;	 
font-weight: bold; 
margin-bottom: 0px; 
margin-top: 18px;	 
} 
			 
				 
p {	 
font: 12px Helvetica, Verdana, sans serif; 
line-height: 18px; 
margin-bottom: 0px; 
margin-top: 0px;	 
}							 
									 
			 
.bold { 
font-weight: bold; 
} 
						 
						 
.backwards {  
unicode-bidi: bidi-override;  
direction: rtl;  
}

Ich hoffe das geht so … Danke!
Beste Grüße,
matmax

als Antwort auf: [#275075]

a: hover mit img und Firefox

matmax

Beiträge gesamt: 626

8. Feb 2007, 21:42
Beitrag # 6 von 30
Beitrag ID: #275374
Bewertung:
(6251 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Juhu!
Erste Hürde genommen: Firefox hat einen Rahmen um das Kaestchen.gif gemacht.
Lösung:
img {border: none;}

Jetzt muss ich nur noch den IE auf WINXP zum leben erwecken … warum will der das Hover-Kaestchen nicht zeigen …?!

als Antwort auf: [#275075]

a: hover mit img und Firefox

minou

Beiträge gesamt: 135

9. Feb 2007, 07:27
Beitrag # 7 von 30
Beitrag ID: #275386
Bewertung:
(6231 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo matmax,

meines Wissens kann der IE 6 (7 weiss ich nicht sicher) nicht hoovern. Ich habe da auch schon lange herumprobiert und kam schliesslich nur mit Javascript weiter.

Jedenfalls wird das Hoover gemäss eines Referenzbuches (HTML und XHTML) vom IE nicht unterstützt.

Es gibt aber auch diverse Lösungsansätze, meist halt nur mit Javascript.

Gruss

Fredi

als Antwort auf: [#275374]

a: hover mit img und Firefox

FSt

Beiträge gesamt: 1965

9. Feb 2007, 07:55
Beitrag # 8 von 30
Beitrag ID: #275387
Bewertung:
(6227 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo minou

Doch, doch, der IE kann hovern ...

http://www.hilfdirselbst.ch/..._P212407.html#212407

Gruss
Martin

als Antwort auf: [#275386]

a: hover mit img und Firefox

minou

Beiträge gesamt: 135

9. Feb 2007, 07:56
Beitrag # 9 von 30
Beitrag ID: #275388
Bewertung:
(6227 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo matmax,

habe noch etwas in deinem CSS gesehen. Warum machst du das was du vorhast nicht mit a.active??.
Das ist ähnlich wie der hoover Effekt.

Gruss

als Antwort auf: [#275386]

a: hover mit img und Firefox

minou

Beiträge gesamt: 135

9. Feb 2007, 09:54
Beitrag # 10 von 30
Beitrag ID: #275422
Bewertung:
(6214 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Fst,

danke für deine konstruktive Aussage. Die neuen Standards und neuen Sprachen überschlagen sich in letzter Zeit.

Jetzt habe ich auch wieder was gelernt...

Gruss

minou

als Antwort auf: [#275387]

a: hover mit img und Firefox

FSt

Beiträge gesamt: 1965

9. Feb 2007, 11:56
Beitrag # 11 von 30
Beitrag ID: #275461
Bewertung:
(6204 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo minou

Antwort auf [ minou ] Die neuen Standards und neuen Sprachen überschlagen sich in letzter Zeit.

???
Versteh ich nicht ganz. HTML 4.01 ist seit Weihnachten 1999 unverändert. CSS2 ist seit Mai 1998 fast unverändert (Ausnahme ist CSS 2.1 im Juni 2005).

Gruss
Martin

als Antwort auf: [#275422]

a: hover mit img und Firefox

matmax

Beiträge gesamt: 626

9. Feb 2007, 14:45
Beitrag # 12 von 30
Beitrag ID: #275503
Bewertung:
(6197 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo! Danke für die Antworten!

Woie ist das mit "a.active" ist das JavaScript?
Oder ist es a:active?

als Antwort auf: [#275388]

a: hover mit img und Firefox

minou

Beiträge gesamt: 135

9. Feb 2007, 15:53
Beitrag # 13 von 30
Beitrag ID: #275530
Bewertung:
(6189 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo zusammen,

entschuldige, mein Fehler. Es ist a:active, also kannst du es mit CSS steuern.
a:active ist wenn du die Taste aktiviert hast, also angeklickt.
Wenn du durch den Klick z.B. eine Datei öffnest, bleibt dieser "Button" schön gedrückt, bis man etwas Neues ansieht.
Mit border inset und outset geht das recht gut.

@ Fst:
Sorry, ich habe mich sehr undeutlich ausgedrückt. Ich meinte das für mich persönlich mit dem überschlagen. Ich bin noch ein ziemlicher Anfänger und verlasse mich dann halt teilweie auf Bücher von 2003 :-(

Grüsse euch

minou

als Antwort auf: [#275503]
(Dieser Beitrag wurde von minou am 9. Feb 2007, 15:56 geändert)

a: hover mit img und Firefox

FSt

Beiträge gesamt: 1965

9. Feb 2007, 19:09
Beitrag # 14 von 30
Beitrag ID: #275568
Bewertung:
(6173 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo minou

Kein problem, wie Du siehst sind Deine Bücher absolut up to date, wenns um HTML und CSS geht ...

Gruss
Martin

PS:
Ich hab hier Bücher aus dem 2000 oder noch älter, die ich zum Teil immer noch konsultiere ...

als Antwort auf: [#275530]

a: hover mit img und Firefox

matmax

Beiträge gesamt: 626

12. Feb 2007, 22:08
Beitrag # 15 von 30
Beitrag ID: #275892
Bewertung:
(6129 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo!
Ich muss noch mal nachfragen:
Die Geschichte zusätzlich padding:0; einzusetzen funktioniert nicht. Der IE zeigt immer noch nichts an! Und außerdem ist die Zeilenhöhe nicht richtig. :((

Was ist nun das einfachste zu tun?
Ich möchte ja einfach nur mit der Maus auf ein Wort fahren und rechts daneben, in der gleichen Zeile, immer an der gleichen Stelle (ohne Verrutschen) soll ein kleines schwarzes Kästchen erscheinen.

Soll ich dies nun mit einer Liste und JavaScript machen (dann müsste ich mich da einarbeiten, bis jetzt habe ich nur Scripte zu AUSTAUSCH von Grafiken gefunden. Eine Grafik ein und wieder auszublenden habe ich bisher nur so vorgefunden, dass es ein festes div war, in dem die verscheidenen Grafiken auftauchten. Meine wechseln aber den Ort, sind ja in jeder Zeile und ich will nicht 15 divs für alle Menüpunkte anlegen!) oder geht es irgendwie doch, das ohne Liste zu machen, so dass man ein img in die Zeile setzen kann?!

Danke!
matmax

als Antwort auf: [#275387]

1 2

Aktuell

PDF / Print

NEU: PitStop 2024.03 verfügbar!

| 16.04.2024

Weitere Events

Neuste Foreneinträge

Quark Objekte lassen sich nicht neben Layout ziehen.

Mit Preflight Registerfarbe ALL nach Grau konvertieren geht nicht

Absatzsetzer in CC24 ME lösen Probleme aus

Barrierefreie PDFs | Mögliche unangebrachte Verwendung des Strukturelements xy

Barrierefreiheit in indesign 2022: figure-Tags haben als Attributobjekt "block" statt "inline"?

Kontrollkästchen in PDF-Formular

Indesign Tabelle ausrichten

Mehrfach geschichtete und übereinander gelagerte PDFs bereinigen

InDesign 19.2 konvertiert 19.3-Dateien beim Öffnen ungefragt

Platzierte Vektorgrafiken skalieren

Weitere Stellenangebote