Exibir imagem em uma lista <li>

[daniel.afonso 0]

Boa noite pessoal, tudo bem?

 

Eu tenho um projeto e no HTML da página eu recebo uma lista com vários parâmetros e faço um foreach para listar essas infos. A estrutura esta assim...

<div>
   <ul>
      @foreach(var objeto in listaObjetos)
      {
         <li>
            .....
            .....
            .....
         </li>
      }
   </ul>
</div>

Existe um parâmetro que eu preciso ler que se tiver uma determinada informação, devo colocar uma imagem "por cima" dessa lista (<li>). A ideia seria como se fosse um "carimbo" por cima dessa lista, entende?

 

Como nesse exemplo aqui..

 

Como devo proceder para conseguir isso? Preciso de uma função js/jquery para alterar o css? Como colocar a imagem por cima, deixando ela "transparente" para as informações da lista abaixo continuar a aparecer?

 

Abraços e obrigado!

[Giovani 104]

Pra colocar essa imagem por cima você vai precisar trabalhar com position.

Agora, não sei se é uma boa ideia colocar essa imagem no li.

 

O ul tem altura fixa? Será que não seria interessante colocar a imagem fora do ul e quando essa determinada informação aparecer colocar a imagem sobre a lista?

[daniel.afonso 0]

Olá Giovani,

Na verdade, não sei nada de css e quando disse de colocar no li, me referi que tenho várias informações repetidas e que somente algumas delas terá a imagem, portanto, assumi que isso teria que ser feito no li.

Segue abaixo o css que tenho aqui:

.select-project-ul {
    list-style: none;
}

.select-project-li {
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 20px 0 0;
    padding: 20px;
    width: 860px;
}

Qual seria a maneira correta de se fazer isso? Fazer como você sugeriu? Colocar a imagem fora do ul?

Obrigado!

[Public2004 79]

Existem algumas soluções para se chegar ao resultado mas que devem ser analisadas para melhor aplicação.

Uma delas seria inserir este carimbo diretamente na imagem;

Outra como o @Giovai mencionou, trabalhar com "position" e "z-index". Além da imagem principal do item, crie também a imagem do carimbo (.png transparente), ao fazer o loop dos seus dados, crie uma condição para verificação se necessário ou não o carimbo e se necessário, insira o carimbo sobre a imagem principal através de uma simples classe de css. O posicionamento e ordem você define no css ref ao item da lista.

 

Att.

[Giovani 104]

Na verdade, não sei nada de css e quando disse de colocar no li, me referi que tenho várias informações repetidas e que somente algumas delas terá a imagem, portanto, assumi que isso teria que ser feito no li.

 

Se for dessa forma tem que ser dentro, imaginei que ficasse sobre a lista inteira.

Imaginemos que a lista será gerada, independente de ter ou não a imagem, deva ficar mais ou menos assim:

#teste ul { list-style: none; }
	
#teste li {
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 20px 0 0;
    padding: 20px;
    position: relative;
    width: 860px;
}
	
#teste li img{
	position: absolute;
	left: 0;
	top: 5px;
}

<div id="teste">
	<ul>
		<li>Texto 01</li>
		<li>Texto 02 <img src="imagens/imagem.png" alt="" /></li>
	</ul>
</div>

Não testei .... acabei fazendo direto aqui, tem que ver se funciona corretamente :/

[daniel.afonso 0]

Olá Public2004/Giovani,

 

Obrigado pela ajuda! Estive resolvendo outra coisa e voltei a mexer com isso agora. Irei testar as opções que vocês me passaram e volto a postar aqui. Acredito já ter informação o suficiente para conseguir resolver.

 

Obrigado e até mais! ;)

[Giovani 104]

Manda bala aí @daniel.afonso e depois nos avisa se conseguiu :)

[daniel.afonso 0]

Valeu Giovani, funcionou certinho aqui!

Obrigado pela ajuda! ;)

[Giovani 104]

Que bom @daniel.afonso :joia: