listitem square EN tekst > beide verschillende kleur - Softwareontwikkeling

zaterdag 26 juli 2003 23:22

Acties:

Verwijderd

Topicstarter

Heb al lopen klooien in mn pagina en in de stylesheet.. wil maar niet lukken.

Iemand die mij kan helpen?

Wat wil ik voor elkaar krijgen dan:
Ik heb een list:

code:

 <ul type="square">
   <a class="L1" href="#"><li> Link1 </li></a>
   <a class="L1" href="#"><li> Link2 </li></a>
 </ul>

De squares zijn blauw en de links zijn geel. Wanneer ik over een link hover moeten de tekst EN de squares beide een lichtere tint krijgen (dus ieder in hun eigen kleur).

Hoe krijg ik dat voor elkaar? of kan dit niet

zaterdag 26 juli 2003 23:30

Acties:

Verwijderd

Wat je daar doet mag sowieso niet. In een <ul> mag niet direct een <a> staan, er mogen alleen <li>'s staan. Binnen die <li> mag je wel je <a> zetten.

Verder is het waarschijnlijk een kwestie van javascript om de kleur van het list-item apart aan te passen. De kleur van het linkje kan wel automatisch, met CSS

zaterdag 26 juli 2003 23:37

Acties:

Verwijderd

Topicstarter

hoezo mag dat niet? het werkt wel nml.... (ik heb dit gedaan, zodat bij een link-hover de square ook meegepakt wordt in de 'hover'. Hmmm, de li zal er toch wel buiten moeten zie ik, anders krijgt de square de kleur van de link:hover... is het nog te volgen?)

Maar nu de rest nog... ik vroeg me dus af of hetgeen wat ik wil kan zonder javascript... ik kan nml. niet javascript proggen.
(ik gebruik al een stylesheet, wat ervoor zorgt dat t linkje veranderd van kleur bij een HOVER)

[ Voor 72% gewijzigd door Verwijderd op 26-07-2003 23:49 ]

zondag 27 juli 2003 11:56

Acties:

Verwijderd

HTML:

1
2
3

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

Cascading Stylesheet:

1
2
3

ul { list-type-style:square; }
li { color:#F00; }
li:hover { color:#FF0; }

Dit wordt alleen nog niet door IE ondersteund. Als je dat ook wil, zul je de bullets helemaal weg moeten halen en ze simuleren als een achtergrondplaatje van de A-tags.

Cascading Stylesheet:

1
2
3

ul { list-type-style:none; }
li a { display:block; background:url(myimage1.gif); }
li a:hover { background:url(myimage2.gif); }

zondag 27 juli 2003 12:18

Acties:

Verwijderd

ul {list-style-image: url(myImage.gif); }

kan ook

zondag 27 juli 2003 12:24

Acties:

Verwijderd

Verwijderd schreef op 27 July 2003 @ 12:18:
ul {list-style-image: url(myImage.gif); }
kan ook

Ja, maar de resultaten daarvan zijn cross-browser zo verschillend (qua positionering van het plaatje, dat het practisch onbruikbaar is.

zondag 27 juli 2003 12:28

Acties:

Verwijderd

dan kan je ook nog iets doen als http://www.axxo.nl/index2.html (menu)
dan gebruik je geen list-items, maar pas je gewoon de <a>-tag aan dat er aan de linkerkant een margin staat en dat ie een achtergrondplaatje heeft. Als je in de source kijkt zie je dat 't heel erg simpel is.

zondag 27 juli 2003 12:36

Acties:

Verwijderd

Verwijderd schreef op 27 July 2003 @ 12:24:
[...]

Ja, maar de resultaten daarvan zijn cross-browser zo verschillend (qua positionering van het plaatje, dat het practisch onbruikbaar is.

ligt eraan hoeveel eisen je stelt aan je positionering

Verwijderd schreef op 27 July 2003 @ 12:28:
dan kan je ook nog iets doen als http://www.axxo.nl/index2.html (menu)
dan gebruik je geen list-items, maar pas je gewoon de <a>-tag aan dat er aan de linkerkant een margin staat en dat ie een achtergrondplaatje heeft. Als je in de source kijkt zie je dat 't heel erg simpel is.

imho ben je met een dergelijk menu altijd bezig met een list, dus bij voorkeur oplossen met lust items (eventueel een a erin uiteraard) (zie ook sig, ik ben tagpurist

)