Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Não consigo centralizar essa pagina.
Já tentei de tudo.
Alguém pode me ajudar...
index
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SITE</title>
<link rel="stylesheet" type="text/css" href="./index.css" media="all" />
</head>
<body>
<div id="menu">
</div>
<div id="Div">
</div>
<div class="Txt_Home">
<p class="lastNode">Home
</p>
</div>
<div class="Txt_Design">
<p class="lastNode">Design Gráfico
</p>
</div>
<div class="Txt_Web">
<p class="lastNode">Web Design
</p>
</div>
<div class="Txt_Contato">
<p class="lastNode">Contato
</p>
</div>
<div class="Txt_Portifólio">
<p class="lastNode">Portifólio
</p>
</div>
<div class="Txt_Convites">
<p class="lastNode">Convites
</p>
</div>
<div class="Txt_O">
<p class="lastNode">O QUE ESCOLHER PARA MINHA EMPRESA ??
</p>
</div>
<div class="Txt_DESTAQUES">
<p class="lastNode">DESTAQUES
</p>
</div>
<div id="Line">
</div>
<div class="Txt_ARTIGO">
<p class="lastNode">ARTIGO
</p>
</div>
<div class="Txt_ARTIGO2">
<p class="lastNode">ARTIGO
</p>
</div>
<div class="Txt_ARTIGO3">
<p class="lastNode">ARTIGO
</p>
</div>
<div id="Line2">
</div>
<div id="Line3">
</div>
<div class="Txt_O2">
<p class="lastNode">O QUE PODE SER CONSIDERADO UM BOM LOGOTIPO
</p>
</div>
<div class="Txt_IDENTIDADE">
<p class="lastNode">IDENTIDADE VISUAL
</p>
</div>
<div class="Txt_WEB">
<p class="lastNode">WEB DESIGN
</p>
</div>
<div class="Txt_Quando">
<p class="lastNode">Quando se pensa em web design a primeira coisa que nos vem a mente é a parte visual: imagens, gráficos, cores... mas web design é mais do que isso. O web design deve considerar, de forma geral, a facilidade com que o usuário realiza as ações que desejamos nas páginas do web site. Por exemplo: um site de e-commerce deve propiciar ao usuário a concretização da compra de forma fácil e rápida, ao percorrer as etapas necessárias à compra com o mínimo possível de atrito.<br />
</p>
</div>
<div class="Txt_Projetar">
<p class="lastNode">Projetar um bom logotipo (ou logomarca) é uma das tarefas mais desafiadoras para um designer gráfico.
</p>
</div>
<div class="Txt_Identidade">
<p class="lastNode">Identidade Visual pode ser resumidamente definida como o conjunto de peças e elementos gráficos que representam visualmente e de forma sistemática uma idéa, produto ou serviço.
</p>
</div>
<div class="Txt_Sintetizar">
<p class="lastNode">Sintetizar em poucos traços a alma de uma instituição, produto, serviço ou idéia requer muito mais que habilidade e senso artístico. Requer horas de pesquisa, estudo, técnica e muita experiência. Além de único, singular, um logotipo bem resolvido precisa ser esteticamente agradável, equilibrado e tecnicamente viável.<br />
</p>
</div>
<div class="Txt_Criados">
<p class="lastNode">Criados de maneira exclusiva, equilibrada e coerente com o desenho da marca e a filosofia da empresa, esse conjunto de elementos é fundamental para fortalecer a presença da marca em todos os pontos de contato.<br />
</p>
</div>
<div class="Txt_Leia">
<p class="lastNode">Leia mais...
</p>
</div>
<div class="Txt_Leia2">
<p class="lastNode">Leia mais...
</p>
</div>
<div class="Txt_Leia3">
<p class="lastNode">Leia mais...
</p>
</div>
<div id="rodape">
</div>
<div class="Txt_Olá">
<p>Olá. Nossa empresa, iDesign Web Design Services, tem em sua direção o Designer Bruno Batista, que no ano de 2011 teve a iniciativa de abrir um espaço dedicado a transformar o conceito de Design.<br />Nosso intuito é oferecer total dedicação para que sua Empresa tenha um Design inovador, e assim melhorando e otimizando a indentidade visual de sua <br />Marca ou Empresa.</p><p class="lastNode">A iDesign fica localizado na cidade de Queimados - RJ.
</p>
</div>
<div class="Txt_iD">
<p class="lastNode">iD
</p>
</div>
<div class="Txt_Copyright">
<p class="lastNode">Copyright © 2011 Bruno Batista – iDesign Web Design Services. Todos os Direitos Reservados.
</p>
</div>
<img src="i/logo-idesign.jpg" id="logo-idesign" alt="" />
<img src="i/lupa.jpg" id="lupa" alt="" />
<img src="i/slide.jpg" id="slide" alt="" />
<img src="i/google-adsense.jpg" id="google-adsense" alt="" />
<img src="i/conteudo.jpg" id="conteudo" alt="" />
<img src="i/destaque-1.jpg" id="destaque-1" alt="" />
<img src="i/destaque-2.jpg" id="destaque-2" alt="" />
<img src="i/artigo-1.jpg" id="artigo-1" alt="" />
<img src="i/artigo-2.jpg" id="artigo-2" alt="" />
<img src="i/artigo-3.jpg" id="artigo-3" alt="" />
<img src="i/orkut.jpg" id="orkut" alt="" />
<img src="i/facebook.jpg" id="facebook" alt="" />
<img src="i/msn.jpg" id="msn" alt="" />
<img src="i/skype.jpg" id="skype" alt="" />
</body>
</html>css
@charset "utf-8";
body {
background-color: #fff;
background-attachment: scroll;
background-image: url(i/bbb.jpg);
background-repeat: repeat-x;
font-size: 62.5%;
margin: 0;
padding: 0;
}font-size: 100%;
}font-weight: normal;
}margin-bottom: 1.1em;
margin-top: 0;
}margin-bottom: 0;
}border: none;
}clear: both;
font-size: 0;
height: 0;
line-height: 0px;
}clear: both;
}display: inline;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
.AbsWrap {
position: relative;
width: 100%;
}
.rowWrap {
width: 100%;
}
#menu {
left: 0px;
position: absolute;
top: 0px;
margin-bottom: 0;
background-color: #000;
background-attachment: scroll;
background-image: url(i/menu-fundo.jpg);
background-position: center center;
background-repeat: repeat-x;
width: 984px;
padding-top: 0px;
height: 45px;
}height: auto;
min-height: 45px;
}
#Div {
left: 789px;
position: absolute;
top: 10px;
margin-bottom: 0;
background-color: #fff;
width: 185px;
padding-top: 0px;
height: 24px;
}height: auto;
min-height: 25px;
}
.Txt_Home {
font-family: Arial, Helvetica, sans-serif;
font-size: 130%;
text-align: left;
color: #fff;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 179px;
position: absolute;
top: 13px;
margin-bottom: 0;
}
.Txt_Design {
font-family: Arial, Helvetica, sans-serif;
font-size: 130%;
text-align: left;
color: #fff;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 245px;
position: absolute;
top: 13px;
margin-bottom: 0;
}
.Txt_Web {
font-family: Arial, Helvetica, sans-serif;
font-size: 130%;
text-align: left;
color: #fff;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 363px;
position: absolute;
top: 13px;
margin-bottom: 0;
}
.Txt_Contato {
font-family: Arial, Helvetica, sans-serif;
font-size: 130%;
text-align: left;
color: #fff;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 628px;
position: absolute;
top: 13px;
margin-bottom: 0;
}font-family: Arial, Helvetica, sans-serif;
font-size: 130%;
text-align: left;
color: #fff;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 544px;
position: absolute;
top: 13px;
margin-bottom: 0;
}
.Txt_Convites {
font-family: Arial, Helvetica, sans-serif;
font-size: 130%;
text-align: left;
color: #fff;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 463px;
position: absolute;
top: 13px;
margin-bottom: 0;
}
.Txt_O {
font-family: Arial, Helvetica, sans-serif;
font-size: 160%;
font-weight: bold;
text-align: left;
color: #333;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 16px;
position: absolute;
top: 411px;
margin-bottom: 0;
}
.Txt_DESTAQUES {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
text-align: left;
color: #999;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 9px;
position: absolute;
top: 850px;
margin-bottom: 0;
}
#Line {
left: 0px;
position: absolute;
top: 1021px;
margin-bottom: 0;
border-bottom: 1px solid #ccc;
width: 984px;
height: 1px;
overflow: hidden;
}
.Txt_ARTIGO {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
text-align: left;
color: #999;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 9px;
position: absolute;
top: 1027px;
margin-bottom: 0;
}
.Txt_ARTIGO2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
text-align: left;
color: #999;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 658px;
position: absolute;
top: 1027px;
margin-bottom: 0;
}
.Txt_ARTIGO3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
text-align: left;
color: #999;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 334px;
position: absolute;
top: 1027px;
margin-bottom: 0;
}
#Line2 {
left: 653px;
position: absolute;
top: 1031px;
margin-bottom: 0;
background-color: #fff;
border-left: 1px solid #fff;
height: 350px;
width: 1px;
}height: auto;
min-height: 350px;
}
#Line3 {
left: 328px;
position: absolute;
top: 1031px;
margin-bottom: 0;
background-color: #fff;
border-left: 1px solid #fff;
height: 350px;
width: 1px;
}height: auto;
min-height: 350px;
}
.Txt_O2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 110%;
font-weight: bold;
text-align: left;
color: #06c;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 340px;
position: absolute;
top: 1196px;
margin-bottom: 0;
}
.Txt_IDENTIDADE {
font-family: Arial, Helvetica, sans-serif;
font-size: 110%;
font-weight: bold;
text-align: left;
color: #06c;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 664px;
position: absolute;
top: 1196px;
margin-bottom: 0;
}
.Txt_WEB {
font-family: Arial, Helvetica, sans-serif;
font-size: 110%;
font-weight: bold;
text-align: left;
color: #06c;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 15px;
position: absolute;
top: 1196px;
margin-bottom: 0;
}
.Txt_Quando {
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
text-align: left;
color: #141414;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 18px;
position: absolute;
top: 1214px;
margin-bottom: 0;
width: 298px;
}
.Txt_Projetar {
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
text-align: left;
color: #151515;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 343px;
position: absolute;
top: 1222px;
margin-bottom: 0;
width: 323px;
}
.Txt_Identidade {
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
text-align: left;
color: #151515;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 667px;
position: absolute;
top: 1222px;
margin-bottom: 0;
width: 307px;
}
.Txt_Sintetizar {
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
text-align: left;
color: #151515;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 343px;
position: absolute;
top: 1263px;
margin-bottom: 0;
width: 315px;
}
.Txt_Criados {
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
text-align: left;
color: #151515;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 667px;
position: absolute;
top: 1292px;
margin-bottom: 0;
width: 298px;
}
.Txt_Leia {
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
text-align: left;
color: #06c;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 905px;
position: absolute;
top: 1368px;
margin-bottom: 0;
}
.Txt_Leia2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
text-align: left;
color: #06c;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 257px;
position: absolute;
top: 1368px;
margin-bottom: 0;
}
.Txt_Leia3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
text-align: left;
color: #06c;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 583px;
position: absolute;
top: 1368px;
margin-bottom: 0;
}
#rodape {
left: 0px;
position: absolute;
top: 1400px;
margin-bottom: 0;
background-color: #000;
background-attachment: scroll;
background-image: url(i/rodape-fundo.jpg);
background-position: center center;
background-repeat: repeat-x;
width: 984px;
padding-top: 0px;
height: 280px;
}height: auto;
min-height: 280px;
}font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
text-align: left;
color: #999;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 28px;
position: absolute;
top: 1423px;
margin-bottom: 0;
width: 452px;
}
.Txt_iD {
font-family: 'Dekers_Bold', Arial, Helvetica, sans-serif;
font-size: 1300%;
font-weight: bold;
text-align: left;
color: #1e1e1e;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 776px;
position: absolute;
top: 1465px;
margin-bottom: 0;
}
.Txt_Copyright {
font-family: Arial, Helvetica, sans-serif;
font-size: 110%;
text-align: left;
color: #fff;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
left: 9px;
position: absolute;
top: 1661px;
margin-bottom: 0;
width: 529px;
}
#logo-idesign {
left: 9px;
position: absolute;
top: 0px;
height: 45px;
margin-bottom: 0;
width: 150px;
}
#lupa {
left: 952px;
position: absolute;
top: 14px;
height: 18px;
margin-bottom: 0;
width: 18px;
}
#slide {
left: 8px;
position: absolute;
top: 75px;
height: 331px;
margin-bottom: 0;
width: 956px;
}
#google-adsense {
left: 821px;
position: absolute;
top: 411px;
height: 602px;
margin-bottom: 0;
width: 162px;
}
#conteudo {
left: 0px;
position: absolute;
top: 433px;
height: 393px;
margin-bottom: 0;
width: 807px;
}
#destaque-1 {
left: 16px;
position: absolute;
top: 867px;
height: 113px;
margin-bottom: 0;
width: 390px;
}
#destaque-2 {
left: 420px;
position: absolute;
top: 867px;
height: 145px;
margin-bottom: 0;
width: 390px;
}
#artigo-1 {
left: 16px;
position: absolute;
top: 1041px;
height: 147px;
margin-bottom: 0;
width: 303px;
}
#artigo-2 {
left: 341px;
position: absolute;
top: 1041px;
height: 147px;
margin-bottom: 0;
width: 303px;
}
#artigo-3 {
left: 665px;
position: absolute;
top: 1041px;
height: 147px;
margin-bottom: 0;
width: 303px;
}
#orkut {
left: 731px;
position: absolute;
top: 1609px;
height: 71px;
margin-bottom: 0;
width: 57px;
}
#facebook {
left: 791px;
position: absolute;
top: 1609px;
height: 71px;
margin-bottom: 0;
width: 57px;
}
#msn {
left: 850px;
position: absolute;
top: 1609px;
height: 71px;
margin-bottom: 0;
width: 55px;
}
#skype {
left: 907px;
position: absolute;
top: 1609px;
height: 71px;
margin-bottom: 0;
width: 65px;
}Caro amigo.
Já tentei essa e outra 10 coisas diferentes.
O que o Gabriel Ferrari postou está correto.
Se não funcionou com você é por que fez algo errado, tente novamente.
>
Já tentei essa e outra 10 coisas diferentes.
você tentou setar o width nessa div que engloba todo o conteudo? pois tem que ser como no exemplo abaixo, vamos supor que é uma pagina pro padrao 1024x768:
<style>
body {
text-align:center; / em algumas versoes do IE você tem que fazer isso pra forcar a centralizacao do site, pois dai entendesse que text-align:center no body, é pra centralizar tudo /
}
#container {
width:1000px;
margin:auto; /* acredito que o 0 nao seja necessário */
text-align:left; /* aqui retornamos com o alinhamento padrão */
}
</style><!-- apenas vou colocar a div que importa aqui -->
<div id="container">
<!-- conteudo aki -->
</div>
Espero ter ajudado ;)
tentei sim amigo...
Vou te explicar.
estou começando a estudar CSS agora.
E Fiz uma Layout pelo Firewoks CS5.1
Ai exportei com CSS.
Ai ficou essa bosta ai em cima...
Entao cara, esse negocio de exportar pelo FW/PS ou fazer fatia e exportar a pagina toda eu nao gosto muito por que dá nessas coisas e ele nao gera um codigo bonito, o negocio é você faze na mao, aqui onde eu trampo eu pego o psd do layout e vejo o que tem e dai faco o html na mao baseado no layout.
Faça o css "braço", não use nenhum programa pra fazer isso. Leia esse link, vai te ajudar a entender :thumbsup:
>
Ai exportei com CSS.
Não use palavrões aqui no fórum, é feio ;)
>
Ai ficou essa bosta ai em cima...
Desculpa ADM.
Ainda não sei CSS.
Por isso não fiz na mão.
Eu sei que esse codigo esta muito ruim.
Queria algo que centralizasse na marra.
Ate eu aprender CSS
Defina uma largura para uma div que vai englobar tudo e aplica o que foi dito no post#2.
>
Queria algo que centralizasse na marra.
Infelizmente nao tem uma magica que faca isso, sauduhdhashdu, pesquise no google sobre oque você precisa, caso nao encontre pergunte aqui, e tente aprender css, um excelente site é esse:Clique aqui
Qualquer coisa soh dar um tok que estamos ai :thumbsup:
Bom como a galera falou o mais fácil é englobar todo o conteúdo numa div depois do body.
mas pode também tentar no body usar text-align:center;
uma coisa que não tinha visto tanto absolute;Resolvido galera....
ficou assim...
#tudo{
margin: 0 auto;
width: 984px;
position: relative;
}Obrigado a todos...
O jeito mais prático de centralizar tudo é englobando tudo em uma div e colocando a propriedade margin: 0 auto;
exemplo
<div id="tudo">
<!-- TODO CÓDIGO DO BODY -->
pegou a ideia?