login  Naam:   Wachtwoord: 
Registreer je!
 Forum

li menu met afbeeldingen

Offline dizzeenl - 09/10/2008 16:05
Avatar van dizzeenlNieuw lid hallo,

ik ben al een poosje bezig met het optimaliseren van mijn site. nu aangekomen bij het menu. wat voorheen opgemaakt was met een tabel, wil ik nu overstappen op de list methode (<ul> <li>)

echter wil ik weer allerlei aanpassingen waardoor het niet wilt lukken.

mijn code, in het php bestand zijn als volgt;
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul class="menu">
  2. <li><a href="index.php?pagina=<?php echo $tBL1a; ?>"><?php echo $tBL1a; ?></a></li>
  3. <li><a href="index.php?pagina=<?php echo $tBL1b; ?>"><?php echo $tBL1b; ?></a></li>
  4. <li><a href="index.php?pagina=<?php echo $tBL1c; ?>"><?php echo $tBL1c; ?></a></li>
  5. </ul>


met de bijbehorende css
css code - Bekijk de code zonder highlighting - Klap code in 
  1. ul.menu{
  2. padding: 0px;
  3. margin: 0px;
  4. }
  5. .menu li{
  6. padding-left: 18px;
  7. margin: 0px;
  8. width: 100%;
  9. background-image:url(images/linkimg-off.png);
  10. background-repeat: no-repeat;
  11. display:block;
  12. }
  13. .menu li:hover{
  14. background-color: #DDD;
  15. display: block;
  16. }
  17. .menu li:hover{
  18. background-image:url(images/linkimg-on.png);
  19. background-repeat: no-repeat;
  20. }
  21. ul.menu a:link{
  22. text-decoration:none;
  23. color: #666;
  24. display:block;
  25. }
  26. ul.menu a:hover{
  27. text-decoration:none;
  28. color: #000;
  29. display:block;
  30. }
  31. ul.menu a:visited{
  32. text-decoration:none;
  33. color: #8A8A8A;
  34. display:block;
  35. }


nu wordt mijn navigatie menu, verticaal weergegeven, met een eigen afbeelding als list-img, die veranderd wanneer je met de muis over de tekst gaat.
in FF, en chrome werkt het natuurlijk perfect, maar IE laat weer eens van zich afweten, weet iemand hoe dat komt?

alvast bedankt

10 antwoorden

Gesponsorde links
Offline marten - 09/10/2008 16:14
Avatar van marten Beheerder Online voorbeeld?
Offline dizzeenl - 09/10/2008 16:26 (laatste wijziging 09/10/2008 16:26)
Avatar van dizzeenl Nieuw lid DiZE - Treviz ONLINE VOORBEELD
Offline Kr4nKz1n - 09/10/2008 16:38
Avatar van Kr4nKz1n Onbekend Als ik goed kijk in IE wordt de achtergrond onder het plaatje niet grijs.

Maar je zegt het wel fout, je hebt geen eigen afbeelding als list-img. Maar een achtergrond plaatje. En ik zie nergens dat je de list-style-type. Weg haalt
Offline marten - 09/10/2008 16:38
Avatar van marten Beheerder Wat als je van de png bijvoorbeeld jpg maakt? Afbeelding wel even omzetten natuurlijk.
Offline Kr4nKz1n - 09/10/2008 16:46
Avatar van Kr4nKz1n Onbekend Tip: IrFanView 
Offline dizzeenl - 09/10/2008 16:49 (laatste wijziging 09/10/2008 16:54)
Avatar van dizzeenl Nieuw lid @ Kr4nKz1n

dat klopt, maar werken met een achtergrond plaatje was makkelijker, en de list img verdwijnt wanneer ik de background img voor elke li instel.
background img werkt wat makkelijker, en heb daarom die keuze gemaakt.

nu je het zegt  ik zie dat het niet grijs wordt.
wilt dat zeggen dat de hover functie (met display:block) zich beperkt tot voor het plaatje?
en dus de list-img daardoor niet veranderd?

dan zou het aan de display kunnen liggen, ik ga weer ff testen

@marten
dat zou niks uit moeten maken, wel?

++
display:block verwijderd, was niet nodig voor lists, maar geen resultaat voor probleem 
Offline Kr4nKz1n - 09/10/2008 17:02
Avatar van Kr4nKz1n Onbekend Haal je padding-left eens weg.
Offline dizzeenl - 09/10/2008 17:08 (laatste wijziging 09/10/2008 17:14)
Avatar van dizzeenl Nieuw lid gedaan, maar dan gaat de tekst over het plaatje, omdat het geen list-img is.


++
raar, ik heb de
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #
  2. .menu li:hover{
  3. #
  4. background-color: #DDD;
  5. #
  6. display: block;
  7. #
  8. }


weggehaald, maar de hover background kleur blijft verkleuren, ook na 10X F5
Offline Kr4nKz1n - 09/10/2008 17:17
Avatar van Kr4nKz1n Onbekend Ctrl + F5 ?

Maar ik denk dat hij kuren heeft omdat je bij het menu een hover hebt en bij de link.

De padding mag terug 
Offline dizzeenl - 09/10/2008 17:18 (laatste wijziging 09/10/2008 17:41)
Avatar van dizzeenl Nieuw lid oke, dan schakel ik de a: is allemaal uit = geen resultaat.

op een of andere manier, komt de hover functie niet door bij IE maar waarom niet.

bij FF en chrome wel, daarnaast zijn (edit: waren) bij die 2 ook de achtergonden van de plaatjes meekleurend

++
de a: functie weggehaald, er stond namelijk nog een algemene in de style.

++
kan het zijn dat li:hover niet door IE wordt ondersteund?
als ik van de li:hover een a:hover maak, dan geeft hij in ieder geval een plaatje weer, hetzij onder de tekst
++
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .menu a:hover {
  2. background-color:#FF0000;
  3. list-style-image: url(images/linkimg-on.png);
  4. text-indent: 18px;
  5. }


deze code werkt redelijk met IE, maar weer niet in FF en chrome.
daarnaast ben ik ook niet tevreden met deze manier  
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.271s