Olá amigos. Estou criando um site, todavia me apareceu alguns problemas. Quero que meu site fique centralizado em qualquer resolução, consegui um código que resolveu, porém apareceu outro problema. Quando colo uma imagem dentro de uma camada, a imagem não fica centralizado, se eu usar sem a camada fica centralizado, o problema é que eu não consigo trabalhar sem usar camadas. Alguém pode me mostrar o código certo ou corrigir meu codigo, que esta abaixo:
Código Original:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>Centrar uma página com CSS</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
body {
margin:0;
padding:0;
background:#ccc;
text-align:center; /* hack para o IE */
}
#tudo {
width: 760px;
margin:0 auto;
padding: 10px;
text-align:left; /* "remédio" para o hack do IE */
}
#conteudo {
padding: 5px;
background-color: #eee;
}
</style>
</head>
<body>
<div id="tudo">
<div id="conteudo">
<h1>Pagina Centrada com CSS sem scroll ate 800x600</h1>
<p> Não use nenhum elemento HTML
(figuras, tabelas, etc...) com largura
superior a 750px.</p>
</div>
</div>
</body>
</html>
Código com a imagem dentro de camada.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>Centrar uma página com CSS</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
body {
margin:0;
padding:0;
text-align:center; /* hack para o IE */
}
#tudo {
width: 760px;
margin:0 auto;
padding: 10px;
text-align:left; /* "remédio" para o hack do IE */
}
#conteudo {
padding: 5px;
background-color: #eee;
}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; left:21px; top:56px; width:272px; height:103px; z-index:1"><img src="../../../Desktop/Site%20MR/Imagens/Body/cabe%E7ariocombarra.jpg" width="700" height="120"></div>
<div id="tudo">
<div id="conteudo">
<h1>Pagina Centrada com CSS sem scroll ate 800x600</h1>
<p> Não use nenhum elemento HTML
(figuras, tabelas, etc...) com largura
superior a 750px.</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</body>
</html>
Este último código as imagens não ficam centralizada. como a imagem abaixo:
Pergunta
NicolasUba
Olá amigos. Estou criando um site, todavia me apareceu alguns problemas. Quero que meu site fique centralizado em qualquer resolução, consegui um código que resolveu, porém apareceu outro problema. Quando colo uma imagem dentro de uma camada, a imagem não fica centralizado, se eu usar sem a camada fica centralizado, o problema é que eu não consigo trabalhar sem usar camadas. Alguém pode me mostrar o código certo ou corrigir meu codigo, que esta abaixo:
Código Original:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Centrar uma página com CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { margin:0; padding:0; background:#ccc; text-align:center; /* hack para o IE */ } #tudo { width: 760px; margin:0 auto; padding: 10px; text-align:left; /* "remédio" para o hack do IE */ } #conteudo { padding: 5px; background-color: #eee; } </style> </head> <body> <div id="tudo"> <div id="conteudo"> <h1>Pagina Centrada com CSS sem scroll ate 800x600</h1> <p> Não use nenhum elemento HTML (figuras, tabelas, etc...) com largura superior a 750px.</p> </div> </div> </body> </html>Código com a imagem dentro de camada.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Centrar uma página com CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { margin:0; padding:0; text-align:center; /* hack para o IE */ } #tudo { width: 760px; margin:0 auto; padding: 10px; text-align:left; /* "remédio" para o hack do IE */ } #conteudo { padding: 5px; background-color: #eee; } </style> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> </head> <body> <div id="Layer1" style="position:absolute; left:21px; top:56px; width:272px; height:103px; z-index:1"><img src="../../../Desktop/Site%20MR/Imagens/Body/cabe%E7ariocombarra.jpg" width="700" height="120"></div> <div id="tudo"> <div id="conteudo"> <h1>Pagina Centrada com CSS sem scroll ate 800x600</h1> <p> Não use nenhum elemento HTML (figuras, tabelas, etc...) com largura superior a 750px.</p> <p> </p> <p> </p> <p> </p> </div> </div> </body> </html>Este último código as imagens não ficam centralizada. como a imagem abaixo:
http://img685.imageshack.us/img685/9343/semttuloljo.png
Obs: a cor cinza é o lugar que esta centralizado, no Dreamweaver, ele está dentro deste cinza
Editado por NicolasUbaLink para o comentário
Compartilhar em outros sites
1 resposta a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.