21 de agosto de 2009

CSS Tutorial - Usando uma imagem como marcador em listas.

Vou ensinar agora como colocar uma imagem ou foto no lugar daqueles marcadores normais
como: circle, disc e square usando CSS.

Vamos usar a propriedade list-style-image para fazer isso,
vamos aplicar essa propriedade na tag <li> do HTML:

Vamos aplicar essa propriedade, onde o valor será o endereço da imagem (GIF, JPEG, etc) como mostrado abaixo:

li{list-style-image:url('aqui-o-url-da-imagem.gif');}

Usamos essa propriedade no código HTML:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Vai ficar assim:

Item 1

Item 2

Item 3

Ok, espero que tenha ajudado :)

5 comentários:

  1. Ae amigo...gostaria de saber como colocar ...tipo assim, [discografia iron maiden] sobre uma imagem pequena nos marcadores...entendeu... e o lugar onde devo incluir o codigo no html. Dá uma força ae... Tks

    ResponderExcluir
  2. Não sei se vc vai entender... mas dá uma olhada no meu blog...http://rock-flash.blogspot.com/ e olha nos marcadores... A-ha, AC\DC, então gostaria de colocar o nome das bandas sobre uma imagem e deixar ela no lugar dos nomes entendeu? Claro que seria um link para as discografia ...entendeu... Acho q sim.. Brigadão por enquanto e desculpa te madar outro comentario.. To no aguardo .. Brigado cara.

    ResponderExcluir
  3. @Rock-flash: Amigo, vi seu blog. É o seguinte, acho que entendi, vê as imagens dos posts desse site: abduzeedo.com , acho que deve ser esse efeito que você quer nos marcadores.
    Fica meio complicado te explicar só nesse comentário, então vê esse link, acho que pode ajudar você: http://blog.foitestado.com/2009/11/imagem-sob-texto-div-encima-de-image.html

    ResponderExcluir
  4. Sinceramente Danilo... Esse sera meu blog de tirar duvidas... pronto atendimento é prioridade heim..vlw. Vô dá uma olhada e depois te comunico amigo... Abraços

    ResponderExcluir
  5. Amigo agora dano heim... o problema é onde e quais comandos eu coloco no html do meu blog para solucionar o meu problema, mas vlw pela atenção...

    ResponderExcluir