[CSS] li-items met background ZONDER a-tekst

[SURFivor]

ik ben de hele tijd al aan het knutselen aan een menu

HTML:

<ul id="navigatie">
  <li id="home"><a href="#">home</a></li>
  <li id="news"><a href="#">news</a></li>
  <li id="contact"><a href="#">contact</a></li>
</ul>

Cascading Stylesheet:

ul#subnavigation {
  list-style: none;
}

ul#subnavigation li {
  height: 100px;
  width: 20px;
}

li#home {background: url(button_home_normal.png);}
li#news {background: url(button_news_normal.png);}
li#contact {background: url(button_contact_normal.png);}

hoe krijg ik het nou voor elkaar dat de a href NIET wordt ge-output maar het plaatje van de li-tag? dus ik wil gewoon plaatjes klikken in plaats van tekst (van a tags) met een plaatje erachter...

Let even op het feit dat code blokken ook talen accepteren voor kleurtjes

[ Voor 21% gewijzigd door BtM909 op 19-03-2007 23:35 ]

[crisp]

HTML:

<ul id="navigatie">
  <li id="home"><a href="#"><span>home</span></a></li>
  <li id="news"><a href="#"><span>news</span></a></li>
  <li id="contact"><a href="#"><span>contact</span></a></li>
</ul>

Cascading Stylesheet:

ul#subnavigation li a {
  display: block;
}
ul#subnavigation li a span {
  display: none;
}

[SURFivor]

bedankt!

ik kon het gewoon NIET vinden...

[Verwijderd]

Het nadeel van die methode is dat sommige screenreaders die spans niet willen oplezen. Ik gebruik altijd "text-indent: -9999px" op de a, en daarmee heb je dat probleem niet. En het scheelt weer een overbodig element

[ Voor 16% gewijzigd door Verwijderd op 20-03-2007 09:01 ]

[crisp]

Verwijderd schreef op dinsdag 20 maart 2007 @ 09:01:
Het nadeel van die methode is dat sommige screenreaders die spans niet willen oplezen. Ik gebruik altijd "text-indent: -9999px" op de a, en daarmee heb je dat probleem niet. En het scheelt weer een overbodig element

En het nadeel daarvan is weer dat die tekst in beeld kan scrollen als je tekst selecteerd of bij het zoeken naar een woord op een pagina...
Oudere browsers hebben ook weer problemen met negatieve text-indent.

[ Voor 6% gewijzigd door crisp op 20-03-2007 09:46 ]

[BtM909]

Verwijderd schreef op dinsdag 20 maart 2007 @ 09:01:
Het nadeel van die methode is dat sommige screenreaders die spans niet willen oplezen. Ik gebruik altijd "text-indent: -9999px" op de a, en daarmee heb je dat probleem niet. En het scheelt weer een overbodig element

Wat ik zelf een mooi oplossing vind is de height op 0 en de padding-top en width gebruiken met de achtergrond size

[Verwijderd]

crisp schreef op dinsdag 20 maart 2007 @ 09:45:
[...]

En het nadeel daarvan is weer dat die tekst in beeld kan scrollen als je tekst selecteerd of bij het zoeken naar een woord op een pagina...
Oudere browsers hebben ook weer problemen met negatieve text-indent.

True, al zou ik eerder kiezen voor toegankelijkheid voor alternatieve user agents dan voor de ondersteuning van "antieke" browsers (al is dat afhankelijk van je doelgroep).

@BtM909: Hoe moet ik dat precies voor me zien?

[BtM909]

@BtM909: Hoe moet ik dat precies voor me zien?

Ehm, als je mijn kreten eens in een class of id in CSS zet, welk deel begrijp je dan niet of werkt niet?

[Verwijderd]

BtM909 schreef op dinsdag 20 maart 2007 @ 10:58:
[...]

Ehm, als je mijn kreten eens in een class of id in CSS zet, welk deel begrijp je dan niet of werkt niet?

Ik begrijp simpelweg niet wat je bedoelt met "padding-top en width gebruiken met de achtergrond size". Het kan aan mij liggen, maar ik weet niet hoe ik dit moet interpreteren. Maar sorry for asking.

[BlackBull]

moet je niet ook achter de url wat tussen haakjes staat tussen ' ' zetten?

li#contact {background: url(button_contact_normal.png);}

dus zo:

li#contact {background: url('button_contact_normal.png');}

[BtM909]

Maar sorry for asking.

Helemaal niet erg, maar een klein beetje moeite doen misschien

Cascading Stylesheet:

h1{
  background-image: url(plaatje.gif);
  background-repeat: no-repeat;
  height: 0;
  overflow: hidden;
  /* Background image height and width */
  padding-top: 150px;
  width: 900px;
  margin: 0 auto;
}

HTML:

<h1>BtM909</h1>

[Verwijderd]

Een hele interessante waar ik nog nooit van gehoord had. Al heeft dit neem ik aan dezelfde 'problemen' als de negatieve text-indent oplossing waar crisp op wees.

[BtM909]

Verwijderd schreef op dinsdag 20 maart 2007 @ 11:53:
Een hele interessante waar ik nog nooit van gehoord had. Al heeft dit neem ik aan dezelfde 'problemen' als de negatieve text-indent oplossing waar crisp op wees.

nope