Hey hey allemaal,
Ik wil een menu maken (onder elkaar) en dan wil ik bij elke menu optie hetzelfde plaatje erin zetten. maar het plaatje wordt erboven gezet ipv erin

dit is me code:
ul.menu {
  list-style: square inside url(arrow.gif);
  margin: auto;
  padding: 5px 8px 5px 8px;
}
.menu a {
  display: block;
  width: 125px;
  height: 18px;
  padding-top: 3px;
  padding-left: 5px;
  font-family: "Microsoft Sans Serif", Verdana, Arial, sans-serif;
  font-size: 13px;
  text-decoration: none;
  background-color: darkgreen;
  color: white;
  border-left: 5px solid white;
}
.menu a:hover {
  background-color: white;
  color: black;
  border-left: 5px solid darkgreen;
}


vb:
http://ajweb.nl/vb/menu/

Wat doe ik fout :S:S??
omdat het in je "ul" staat ipv "li"?
Een plaatje in een lijst kun je beter niet via list-style doen (het zou trouwens list-style-image moeten zijn).

Het is veel gemakkelijker om je <li> een background-image te geven en dan wat padding aan de linkerkant:

    ul.nav_main li {
        background: #fff url(images/bullet.gif) left top no-repeat;
        padding-left: 32px;
    }

Geef je menu-<ul> nu de class "nav_main", dan krijgen de <li>'s in die <ul> vanzelf de goede style.
[tegen erik]
Nee werkt niet, had ik al geprobeert, in het online voorbeeld heb ik het alsnog veranderd.
[/tegen erik]

dit heb ik gedaan:
ul.menu {
  list-style: none;
  margin: auto;
  padding: 5px 8px 5px 8px;
}
.menu a {
  background-image: url(arrow.gif);
  background-repeat: no-repeat;
  background-position: left center;
  display: block;
  width: 125px;
  height: 18px;
  padding-top: 3px;
  padding-left: 15px;
  font-family: "Microsoft Sans Serif", Verdana, Arial, sans-serif;
  font-size: 13px;
  text-decoration: none;
  background-color: darkgreen;
  color: white;
  border-left: 5px solid white;
}
.menu a:hover {
  background-color: white;
  color: black;
  border-left: 5px solid darkgreen;
}
en dat werkt

[tegen Jan Koehoorn]
Bedankt :-)
het komt op hetzelfde neer als wat ik uiteindelijk heb gedaan. Alsnog bedankt :D
[/tegen Jan Koehoorn]
Graag gedaan. Ik was ook al met je CSS aan de gang en had er dit van gemaakt:

ul.menu {
  list-style: none;
  margin: auto;
  padding: 5px 8px 5px 8px;
}
.menu li {
  background: #fff url(arrow.gif) 2px 4px no-repeat;
  padding-left: 16px;
}
.menu a {
  display: block;
  width: 125px;
  height: 18px;
  padding-top: 3px;
  padding-left: 5px;
  font-family: "Microsoft Sans Serif", Verdana, Arial, sans-serif;
  font-size: 13px;
  text-decoration: none;
  background-color: darkgreen;
  color: white;
  border-left: 5px solid white;
}
.menu a:hover {
  background-color: white;
  color: black;
  border-left: 5px solid darkgreen;
}
Jah maar nu staat het pijltje ervoor en dat is juist wat ik niet wil :P

Zoals het net was moet het zijn ^^

Reageren