Sobreposição de Camadas e Centralização HTML5 e CSS [Resolvido]


(Ricardo Soares) #1

Pessoal, boa noite.

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;
}

<!doctype html>

Teste

D81WKH8D-528A-D111-7E2A144


(Ricardo Soares) #2

Resolvi o problema coma ajudade do amigo Mai no instituto Federal, segue a solução:

#HTML

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


<!/div>
<!/body>
<!/html>

CSS
#PhotoBox{

}

#CodigoShow{
top: -50px;
position: relative;
text-align:center;
}