Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

soaresra

Sobreposição das camadas e centralização

Por , em Desenvolvimento frontend

Recommended Posts

soaresra    0

soaresra
Postado

Olá pessoal....

 

Eu tenho um problema que não estou conseguindo resolver.

Eu fiz dois modelos, um usando tabela que não quero mais usar e o outro usando DIV e CSS

HTML: http://www.alsoa.com.br/testes/index2.htm

Versão com Divs e CSS: http://www.alsoa.com.br/testes/index.htm

Eu preciso colocar uma marca dágua nas minhas fotos que coloco na web.
A marca é um simples código tipo D81WKH8D-528A-D111-7E2A144 que deve ficar por cima da imagem e centralizado.

Eu até consegui fazer só usando div e css, mas não consigo centralizar na página e o código ficou compactado.

 

/* Códigos CSS */

#PhotoBox{
z-index: 0;
position: absolute;    
margin-left: auto;
margin-right: auto;
}

#PhotoShow{
z-index: 1;
position: absolute;
}

#CodigoShow{
z-index: 2;
position: absolute;    
float: right;
}

<!-- HTML -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Teste</title>
<link href="teste.css" rel="stylesheet" type="text/css">
</head>
<body align="center">
<div id="PhotoBox">
   <div id="PhotoShow">
       <img src="HondaCafe.jpg"/>
   </div>
   <div id="CodigoShow">
       <p>D81WKH8D-528A-D111-7E2A144</p>
   </div>
</div>
</body>
</html>

imaster-css-html5.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aphrodi    10

Aphrodi
Postado

Esse é o jeito mais simples que conheço, porém tem que determina um tamanho fixo para a imagem, e dependendo de aonde você for usar tem que refazer o código, qualquer coisa avise.

  

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Teste</title>

<style type="text/css">
	
#PhotoBox {
    background: url(http://www.alsoa.com.br/testes/HondaCafe.jpg) center no-repeat;
    background-size: contain;
    width: 322px;
    height: 386px;
}
#PhotoBox:before {
    content: ' código ';
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
}
</style>
</head>
<body align="center">
<div id="PhotoBox">
</div>
  </body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • Milene Vieira
      Problema com z-index
      Por Milene Vieira
      Estou fazendo um web site para um projeto, neste site existem botões fixos na parte debaixo da tela, que por sua vez estão acima de todos os outros. Até aí tudo bem. O problema é que quando coloco um div que fica por baixo destes botões, nada clicável funciona (links). Gostaria de saber se tem como resolver ou se de fato você não tem acesso a nada, a não ser visual, abaixo de um z-index fixo. Obrigada, aguardo!
       
      Segue a foto da página:

    • giovannaalves
      Z-index
      Por giovannaalves
      Estou desenvolvendo um site e tenho um menu que tem um submenu (um ul dentro de um li) e logo abaixo ele tem um slider.
      Quando eu passo o mouse para o submenu aparecer, ele fica pra baixo do slider.
      Eu sei que meu problema pode ser resolvido com o z-index, mas não sei exatamente como.
    • joaoT
      Slideshow em Z-Index pelo javascript
      Por joaoT
      Bom dia pessoal,
       
                 Preciso de uma mãozinha pois nao consigo interpretar este codigo muito bem. Preciso arrumar este codigo no javascript para que  a transição de imagens seja feita via z-index, ou seja, as imagens tem que ter o efeito de transição scrollleft (botao esquerda) ou scrollright  (botao direita), sendo que a proxima imagen tem que sair debaixo da outra do z-index e ficar do lado da atual e "empurra-la" para a direção selecionada com o botão.
       
                   Por via das duvidas, deixei o arquivo do site aqui, nele contem o CSS e o javascript todo junto com o html.
      index.html
    • joaoT
      Slideshow em Z-Index pelo javascript
      Por joaoT
      Bom dia pessoal,
       
                 Preciso de uma mãozinha pois nao consigo interpretar este codigo muito bem. Preciso arrumar este codigo no javascript para que  a transição de imagens seja feita via z-index, ou seja, as imagens tem que ter o efeito de transição scrollleft (botao esquerda) ou scrollright  (botao direita), sendo que a proxima imagen tem que sair debaixo da outra do z-index e ficar do lado da atual e "empurra-la" para a direção selecionada com o botão.
       
                   Por via das duvidas, deixei o arquivo do site aqui, nele contem o CSS e o javascript todo junto com o html.
      index.html
    • mruoppolo
      Posicionamento de elementos com z-index
      Por mruoppolo
      Olá, tudo bem?
       
      Estou tentando fazer um o logo se sobrepor ao slider, porém já tentei utilizar o z-index em todas as divs e nada faz funcionar. Ele precisa ficar da seguinte forma:

       
      Mas no momento esta assim:
       
      https://goo.gl/FBEnhw
       
      Como eu posso modificar isso??
       
      Muito obrigado :D
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito