Beste,

Ik ben bezig met het basen van een layout. Maar nu stuit ik op een klein probleempje.

Ik wil namelijk een list gebruiken voor Nieuws headlines. Hierbij worden dus de standaard rondjes voor een list vervangen door een afbeelding als icoon.

Hier het stukje code:

Code:

<div class="headlines">
    <ul>
        <li><a href="#">Nieuws bericht post 1</a></li>
        <li><a href="#">Nieuws bericht post 2</a></li>
        <li><a href="#">Nieuws bericht post 3</a></li>
        <li><a href="#">Nieuws bericht post 4</a></li>
        <li><a href="#">Nieuws bericht post 5</a></li>
    </ul>
</div>

CSS Code

Code:

/* Nieuws headlines */
    .headlines ul { list-style-type:none; line-height: normal; list-style-image: url(../images/newsicon.png);list-style-position: inside;}
    .headlines li {display: block; background-image: url(../images/newsicon.png) no-repeat; } 
    .headlines a {font-family:Tahoma, Verdana, Arial; padding:8px 11px 0px 11px;font-size: 10px;color: #908A87; text-decoration:none;}
    .headlines a:hover {color: #726861; text-decoration: underline;}

Het werkt wel in IE, maar niet in FireFox.

Wie zou me hiermee kunnen helpen, wat doe ik verkeerd?


Alvast bedankt!

Code:

/* Nieuws headlines */
    .headlines ul { list-style-type:none; line-height: normal; list-style-image: url(../images/newsicon.png);list-style-position: inside; display: block;}
    .headlines li { background-image: url(../images/newsicon.png) no-repeat; } 
    .headlines a {font-family:Tahoma, Verdana, Arial; padding:8px 11px 0px 11px;font-size: 10px;color: #908A87; text-decoration:none;}
    .headlines a:hover {color: #726861; text-decoration: underline;}

Zo werkt het wel (display: block; bij .headlines li is weg).

Origineel gepost door gast153

Code:

/* Nieuws headlines */
    .headlines ul { list-style-type:none; line-height: normal; list-style-image: url(../images/newsicon.png);list-style-position: inside; display: block;}
    .headlines li { background-image: url(../images/newsicon.png) no-repeat; } 
    .headlines a {font-family:Tahoma, Verdana, Arial; padding:8px 11px 0px 11px;font-size: 10px;color: #908A87; text-decoration:none;}
    .headlines a:hover {color: #726861; text-decoration: underline;}

Zo werkt het wel (display: block; bij .headlines li is weg).

Heel erg bedankt!

background-image: url(../images/newsicon.png) no-repeat;

Dit lijkt me ook niet te werken (of iig niet goed). Die no-repeat hoort bij een background-repeat

Origineel gepost door Dirk Bonhomme

background-image: url(../images/newsicon.png) no-repeat;

Dit lijkt me ook niet te werken (of iig niet goed). Die no-repeat hoort bij een background-repeat

Dit is het short-hand code schrijven. Hierbij kan je bijvoorbeeld meer functies bij een atribuut instellen.

Origineel gepost door Jeroen Marechal

Dit is het short-hand code schrijven. Hierbij kan je bijvoorbeeld meer functies bij een atribuut instellen.

Het zou short-hand code zijn bij BACKGROUND, niet bij BACKGROUND-IMAGE. Ik heb het even opgezocht en volgens mij mag er echt alleen een url opgegeven worden en niet een repeat...

(http://www.w3.org/TR/CSS21/colors.ht...und-properties)

Ik gebruik voor een achtergrond meestal gewoon het simpele :
background: #FFFFFF url(bg.jpg) no repeat;

1 regel ipv 3 :D Maakt alles wat netter weet je wel ;)