Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde,
em um projeto tenho alguns itens para o cliente acessar, é como um menu onde os itens são imagens e a descrição encontra-se sobre a imagem.
A imagem onde está o bonequinho ao telefone deve ficar embaixo da div em amarelo com a descrição.
Ao lado desse item, haverá outro, e outro, cadastrados pelo cliente para acessos a informações,
Estou fazendo da seguinte forma:
div.itembox {width:140px;height:50px;height:auto !important;min-height:50px;margin:-55px 0 0 25px;padding:0;font:bold 10px "Open Sans Regular", Arial, Helvetica, sans-serif;z-index:1000}
div.itembox p{text-align:center;margin:10px 15px;}
Mas não estou conseguindo fazer o background aparecer, ele fica atrás da imagem do bonequinho
E o texto também não fica centralizado.
Se alguém puder ajudar eu agradeço.
Olá
Meu html está assim:
<div class="item"><a href="servico.php" title="servico.php"><img src="imagens/EMPRESTIMO2.jpg" alt="Empréstimo" title="Empréstimo"></a><div class="itembox"><p><a href="servico.php?cod=4" title="servico.php">Empréstimo</a></p></div></div>
<div class="item"><a href="contato.php" title="contato.php"><img src="imagens/FALE_CONOSCO2.jpg" alt="Fale Conosco" title="Fale Conosco"></a><div class="itembox"><p><a href="contato.php" title="contato.php">Fale Conosco</a></p></div></div>Obrigada
Utilize a imagem do avatar como background com css, e não diretamente via html <img>.
Olá Andreia,
Veja uma solução com a sua marcação HTML (que pode ser simplificada)
Muito obrigada Maujor,
Sinto-me muito honrada em ter sua ajuda, tenho muito a aprender e seu site me ajuda muito.
Parabéns pelo trabalho e novamente muito obrigada
Andreia,
Depende muito de como você acaba estruturando seu HTML, normalmente ele não deveria aparecer atrás. Você pode definir a ordem das "camadas" utilizando a propriedade z-index.
Exemplo:
div.itembox {
Abraços!