login  Naam:   Wachtwoord: 
Registreer je!
 Forum

hover menu (Opgelost)

Offline san - 28/03/2010 15:56 (laatste wijziging 28/03/2010 16:12)
Avatar van sanHTML interesse Ik probeer een menu te maken waarbij 2 afbeeldingen wisselen maar ik ben al een tijdje aan het experimenteren maar het lukt niet. Ik wil dit in css doen.
Heb nu de volgende code maar er gebeurt niets. Wie zou mij kunnen vertellen wat ik fout doe???
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .menu {
  2. 	float: left; 
  3. 	width: 900px;
  4. 	height: 53px;
  5. 	margin-top: 60px;
  6. 	background: #FFFFFF;
  7. 	text-align: center;
  8. }
  9. .menu .home a {
  10. background:url(menu/menu1a.png);
  11. }
  12. .menu .home a:hover {
  13. background:url(menu/menu1a.png);
  14. }

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="menu">
  2.   <div class="home"><a href="home.html"><img src="menu/menu1.png" width="120" height="30" border="0" alt=""></a></div>
  3. </div>

12 antwoorden

Gesponsorde links
Offline nick5556 - 28/03/2010 16:01
Avatar van nick5556 PHP beginner Komt dat niet omdat je in je css bij a en a:hover het zelfde plaatje hebt?
Offline san - 28/03/2010 16:04
Avatar van san HTML interesse Heb het veranderd maar nog steeds werkt het niet...
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .menu .home a {
  2. background:url(menu/menu1.png);
  3. }
  4. .menu .home a:hover {
  5. background:url(menu/menu1a.png);
  6. }
Offline Jelmerholland - 28/03/2010 16:19
Avatar van Jelmerholland PHP beginner omdat je een <img src"xxx"> doet, die moet je weghalen, en gewoon een width en height aan je <a> meegeven.
Offline san - 28/03/2010 16:25
Avatar van san HTML interesse Bedoel je dit? Dan komt er helemaal geen afbeelding meer.
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="menu">
  2.   <div class="home"><a href="home.html" width="140" height="43" border="0" alt=""></a></div>
  3. </div>
Offline Jelmerholland - 28/03/2010 16:28
Avatar van Jelmerholland PHP beginner
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="menu">
  2.   <div class="home"><a href="home.html" width="140px" height="43px"></a></div>
  3. </div>




css code - Bekijk de code zonder highlighting - Klap code in 
  1. .menu .home a {
  2. background:url(menu/menu1.png);
  3. }
  4. .menu .home a:hover {
  5. background:url(menu/menu1a.png);
  6. }


En als dit niet werkt (wat wel zo zou moeten zijn) kijk dan even of '.menu .home a' wel kan/mag
Offline san - 28/03/2010 16:43
Avatar van san HTML interesse Er komt nog steeds totaal geen afbeelding tevoorschijn. Heb het ook geprobeerd met andere class-waardes.
Offline Jelmerholland - 28/03/2010 18:12
Avatar van Jelmerholland PHP beginner What the hack? Waar upload jij je site?
Offline lemoinet - 28/03/2010 18:59
Avatar van lemoinet PHP gevorderde als menu en home maar één keer voorkomen op je pagina kan je er beter een id van maken ipv een class
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #menu {
  2.     float: left; 
  3.     width: 900px;
  4.     height: 53px;
  5.     margin-top: 60px;
  6.     background: #FFFFFF;
  7.     text-align: center;
  8. }
  9.  
  10. #home
  11. {
  12. 	background-image: url(menu/menu1.png);
  13. 	height: 43px;
  14. 	width: 140px;
  15. 	display: block;
  16. 	cursor: pointer;
  17. 	}
  18. #home:hover
  19. {
  20. 	background-image: url(menu/menu1a.png);
  21. 	}


html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="menu">
  2.     <a id="home" href="home.html"></a>
  3. </div>


als dit niet werkt, dan ligt het probleem ergens bij jou.
Ik heb het getest in IE5.5, IE6, IE7, IE8, IE9, FF3.6, Safari/Chrome en Opera.
Bedankt door: san
Offline Jelmerholland - 28/03/2010 19:50
Avatar van Jelmerholland PHP beginner Lemoinet, jij zet de background-image nou op de '#home' hij wilt 'm op de '<a>' 

En je kan beter zo doen
css code - Bekijk de code zonder highlighting - Klap code in 
  1. background:url(menu/menu1a.png) no-repeat;


Niet background-image, want nou kan je de repeat erbij gooien 


@san,
wat is het voor afbeelding? Kan je 'm is ergens uploaden en een linkje geven?
Offline lemoinet - 29/03/2010 01:03
Avatar van lemoinet PHP gevorderde @Jelmerhollan

als je mijn code zou doornemen dan zal je zien dat je commentaar op mijn post kant noch wal raakt.
Offline Jelmerholland - 29/03/2010 08:39
Avatar van Jelmerholland PHP beginner Oops, ik had je html code niet gezien, mijn fout ;)

Maar je background-image kan je wel beter veranderen naar gewoon background, want dan kan je er een no-repeat bij doen, daar krijg je ook vaak problemen mee.
Offline san - 29/03/2010 11:40
Avatar van san HTML interesse Hij doet het nu inderdaad. Heel erg bedankt voor de hulp.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.208s