Ir para conteúdo

POWERED BY:

Arquivado

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

Newtwo

[Resolvido] Centralizar no CSS

Por , em Desenvolvimento frontend

Recommended Posts

Newtwo    0

Newtwo
Postado

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;
}
body * {
font-size: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
p {
margin-bottom: 1.1em;
margin-top: 0;
}
#main p.lastNode {
margin-bottom: 0;
}
a:link img, a:visited img {
border: none;
}
div.clearFloat {
clear: both;
font-size: 0;
height: 0;
line-height: 0px;
}
li.clearFloat {
clear: both;
}
ul.symbolList {
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;
}
html > body #menu {
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;
}
html > body #Div {
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;
}
.Txt_Portifólio {
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;
}
html > body #Line2 {
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;
}
html > body #Line3 {
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;
}
html > body #rodape {
height: auto;
min-height: 280px;
}
.Txt_Olá {
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;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

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

</div>


#tudo{

margin: 0 auto;

}

 

pegou a ideia?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Newtwo    0

Newtwo
Postado

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...

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

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...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Newtwo    0

Newtwo
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

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:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fernando Gyn    0

Fernando Gyn
Postado

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;

Compartilhar este post

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

Informação importante

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

  Aceito