[Resolvido] não consigo centralizar meu site

semitico · Fevereiro 11, 2012

Estou começando com css agora e só o topo do site fica centralizado , agora o corpo e o rodapé eu não consigo de nenhum jeito ¬¬

CSS

  

/* Inicio */

body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;}
#geral {margin:auto; width:1000px;}

/* background:url(imagens/bg.gif); /

/* Topo */

#logomarca span {display:none;}
#logomarca h1 {background:url(imagens/logomarca.jpg) no-repeat; width:151px; height:43px;}

/*
#lateral1 {background:url(imagens/topol.jpg) no-repeat; width:130px; height:100px; position:absolute;}
*/

#lateral1 {position:absolute; left:-35px; top:-460px;}
#lateral3 {position:absolute; left:744px; top:-460px;}

#lateral4 {background:url(imagens/lat2.jpg) repeat-y; position:absolute; width:15px; height:1020px; left:893px; top:196px; }
#lateral5 {background:url(imagens/lat1.jpg) repeat-y; position:absolute; width:15px; height:1020px; left:115px; top:196px;}

#topo {background:url(imagens/topom.jpg) repeat-x; height:100px; width:895px; position:absolute;}

#logomarca {position:absolute; width:151px; height:43px; left:200px; bottom:33px;}


/* Menu Principal */

#menup {position:absolute; width:480px; left:350px; bottom:28px;}
#menup ul {margin:0; padding:0;}
#menup li {float:left; list-style:none; margin:7px; padding-top:11px; padding-bottom:10px;}
#menup li a {text-transform:uppercase; color:#fff; font-size:12px; font-weight:bold; text-decoration:none; padding:5px;}
#menup li a:hover {background:url(imagens/fundo_menu.gif) repeat-x; color:#fff;}
#menup li a.current {background:url(imagens/fundo_menu.gif) repeat-x; color:#fff;}

/* --------------------------- */

#botaotopo {no-repeat; position:absolute; right:20px; top:4px;}
#botaotopo2 {no-repeat; position:absolute; right:133px; top:3.5px;}

#lateral2 {background:url(imagens/topor.jpg) no-repeat; width:130px; height:100px; position:absolute; right:-129px;}

#flash { no-repeat; position:relative; bottom:-100px;}

#corpo {position:absolute; left:300px; top:220px;} 

/*pag produtos*/

#produtos {position:absolute; width:480px; left:450px; bottom:-50px; }
#produtos ul {margin:0; padding:0;}
#produtos li {float:left; list-style:none; margin:7px; padding-top:11px; padding-bottom:10px;}
#produtos li a {text-transform:uppercase; color:#fff; font-size:12px; font-weight:bold; text-decoration:none; padding:1px;}
#produtos li a:hover {background:url(imagens/fundo_menu2.gif) repeat-x; color:#fff;}
#produtos li a.current {background:url(imagens/fundo_menu2.gif) repeat-x; color:#fff;}

#produtos2 {position:absolute; width:480px; left:520px; bottom:-80px;}
#produtos2 ul {margin:0; padding:0;}
#produtos2 li {float:left; list-style:none; margin:7px; padding-top:11px; padding-bottom:10px;}
#produtos2 li a {text-transform:uppercase; color:#fff; font-size:12px; font-weight:bold; text-decoration:none; padding:1px;}
#produtos2 li a:hover {background:url(imagens/fundo_menu2.gif) repeat-x; color:#fff;}
#produtos2 li a.current {background:url(imagens/fundo_menu2.gif) repeat-x; color:#fff;}

#corpoprodutos1 {position:absolute; left:300px; top:-10px; font-size:11px;}
#corpoprodutos2 {position:absolute; left:300px; top:170px; font-size:11px;}
#corpoprodutos3 {position:absolute; left:300px; top:345px; font-size:11px;}
#corpoprodutos4 {position:absolute; left:300px; top:530px; font-size:11px;}
#corpoprodutos5 {position:absolute; left:300px; top:710px; font-size:11px;}

#corpo {position:absolute; margin:auto; left:300px; top:220px; }

/* rodape site */


#rodape {background:url(imagens/rodape.jpg) repeat-x; height:68px; width:770px; position:absolute; left:127px; bottom:-270px}
#rodape2 {background:url(imagens/rodape.jpg) repeat-x; height:68px; width:770px; position:absolute; left:127px; bottom:-620px}


#textorodape { font-family:"Comic Sans MS", cursive, cursive; color:#333333; font-size:12px; font-weight:600; position:absolute; left:150px; bottom:25px;}

#emilia {background:url(imagens/emilia.gif) no-repeat; width:60px; height:38px; position:absolute; right:190px; bottom:13px;}

#twitter {no-repeat; width:65px; height:46px; position:absolute; right:60px; bottom:8px; }

#youtube {no-repeat; width:92px; height:37px; position:absolute; right:10px; bottom:8px;}

/* fim rodape site */

/* fim site */

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="imagens/favicon.ico" type="image/x-icon" />
<title></title>

<link href="estilos.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="geral">

	<div id="topo">

           		<div id="lateral1">
                   </div>             

 					<div id="logomarca">
       			<a href="index.htm" title="Página Principal"><img src="imagens/logomarca.jpg" border=0 /></a>
      				</div>


                   <div id="menup">

        			  <ul>
          			  <li><a href="empfilosofia.htm" title="">A Empresa</a></li>
         			  <li><a href="produtos.htm" title="Nossos Produtos">Produtos</a></li>
          			  <li><a href="clientes.htm" title="Nossos Clientes">Clientes</a></li>
           		  <li><a href="localizacao.htm" title="Localize a Nossa Loja">Localização</a></li>
         			  <li><a href="contato.htm" title="Entre em Contato Conosco">Contato</a></li>
        			  </ul>

                   </div> 


				<div id="botaotopo">
                   <img src="imagens/botMapaSite.jpg" border=0 />                 
                   </div>

                   <div id="botaotopo2">
                   <a id="botaotopo2" href="map.htm" title="Mapa do Site"><img src="imagens/bot2MapaSite.gif" border=0 /></a>                
                   </div>   

				    <div id="lateral2">                              
  					</div>


                   <div id="topodestaque1">
                   <img src="imagens/topodestaque.jpg" border=0 />                 
                   </div>

                   <div id="topodestaquetexto">
                   Linhas de Produtos 
                   </div>

                   <div id="linhatexto">
                   ___________________________________________________________________

                   </div>

                   <div id="produtos">

                     <ul>
          			  <li><a href="prodMoveis.htm" title="Móveis">Móveis</a></li>
         			  <li><a href="prodIndustrial.htm" title="Industrial">Industrial</a></li> 
                     <li><a href="proLinhaInstitucional.htm" title="Linha Institucional">Linha Institucional</a></li>          			 

                     </ul>

                  </div>     


                  <div id="produtos2">
                  <ul>
                   <li><a href="proLixeiras.htm" title="Lixeiras">Lixeiras</a></li>                    
                   <li><a href="proOutros.htm" title="Outros">Outros</a></li>
                  </ul>
                  </div>                         

	</div>
               	<div id="lateral4">                                  
                   </div>         

                   <div id="lateral5">                              
                   </div> 

       		<div id="corpo">

                   <a href="prodMoveis.htm" title="Móveis"><img src="imagens/moveis.jpg" border=0 width="250" height="130" /></a>
                   <br />
                   <br />
                  <img src="imagens/barra.gif" border="0" width="700" />
                   <br />
                   <br />                 
       			<a href="prodIndustrial.htm" title="Produtos Industriais"><img src="imagens/industrial.jpg" border=0 width="250" height="130" /></a>
                   <br />
                   <br />
                   <img src="imagens/barra.gif" border="0" width="700" />
                   <br />
                   <br />   
       			<a href="proLixeiras.htm" title="Lixeiras"><img src="imagens/lixeiras.jpg" border=0 width="250" height="130" /></a>

              	    <br />
              		<br />
               <img src="imagens/barra.gif" border="0" width="700" />

                   <br />
                   <br />            
       			<a href="proLinhainstitucional.htm" title="Linha Institucional"><img src="imagens/utilidades.jpg" border=0 width="250" height="130" /></a>
      			<br />
               <br />
               <img src="imagens/barra.gif" border="0" width="700" />
               	<br />
                   <br /> 
       			<a href="proOutros.htm" title="Outros"><img src="imagens/outros.jpg" border=0 width="250" height="130" /></a>
                  <br />

                  <img src="imagens/barra.gif" border="0" width="700" />


                  <div id="corpoprodutos1">

                  	<p><font color="#0000CC" size="+1"><p>Móveis</p></font></p>

				<p>gdfgdfgdfgdg</b></p>



                  	</div>

                   <div id="corpoprodutos2">

                   <p><font color="#0000CC" size="+1"><p>Industrial</p></font></p>

				<p>dsdfsdf</p>

                   </div>

                   <div id="corpoprodutos3">

                   <p><font color="#0000CC" size="+1"><p>Lixeiras</p></font></p>

				<p>ffsfsd</p>

                   </div>

                   <div id="corpoprodutos4">

                   <p><font color="#0000CC" size="+1"><p>Linha Institucional</p></font></p>

				<p>dsadad</p> 

                   </div>

                   <div id="corpoprodutos5">                   

                   <p><font color="#0000CC" size="+1"><p>Outros</p></font></p>

				<p>Cone Sinalizador, Cesto Expositor e Suporte para Válvulas são</p> 
                   <p>os produtos que fazem parte desta linha.</p> 

                  </div>

                   <br />
                   <br />

                   *Fotos Ilustrativas
                   <br />
                   <br />

                   <img src="imagens/barra.gif" border="0" width="700" />

                   <br />
                   <br />
                   <br />
                   <br />

	       		</div>


        			 <div id="rodape2">

                               	<div id="textorodape">
                               	xcfgcgxvxcvxc
                               	</div>

                                   <div id="emilia">
                                   </div>

                                   <div id="twitter">
                                   <a id="twitter" href=""><img src="imagens/twitter.gif" border=0 ></img> </a>
                                   </div>



                                   <div id="youtube">
                                   <a id="youtube" href=""><img src="imagens/youtube.gif" border=0 ></img> </a>
                                   </div>


                               </div>


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

Se alguma alma caridosa conseguir me dar uma luz , eu não quero que o site fique sem estar centralizado quando as resoluções estiverem diferentes

Diéssica · Fevereiro 11, 2012

Tem bastante position aí... Tentei debugar no Firebug e o problema ou é no HTML ou é nos dois, já que o CSS parece estar certo.

Só que tá muito bagunçado. Pode postar a página online?

Felipe Quirino · Fevereiro 11, 2012

tire os position:absolute; da sua div e coloque margin:0 auto;

semitico · Fevereiro 13, 2012

é eu vi que usar position para diagramar o site não é a forma ideal , a outra propriedade que se usa para isso é o float ? só tem essas 2 então ?

Evandro Oliveira · Fevereiro 13, 2012

é eu vi que usar position para diagramar o site não é a forma ideal , a outra propriedade que se usa para isso é o float ? só tem essas 2 então ?

position, float, clear, margin, padding, border, line-height, text-align, vertical-align, display...

Cada uma tem um propósito específico.

NetBoy16 · Fevereiro 13, 2012

float você usa pra alinhar as divs a esquerda ou direita e clear:both no rodape pra nao deixar nada ao lado do rodape, em geral um layout eh assim:

html(sem a estrutura basica<html>,<body>, etc...

<div id="container">
  <div id="topo">topo aki</div>
  <div id="conteudo">conteudoaki</div>
  <div id="rodape">rodape aki</div>
</div>

css

* {
  padding:0
  margin:0
}

body {
  text-align:center /* alinhar tudo no IE6 */
}
#container {
  text-align:left
  margin:auto
}
#topo{}
#conteudo{}
#rodape {
  clear:both
}

Lembrando que, so fiz a estilizacao necessaria pro exemplo, espero ter ajudado :)

Diéssica · Fevereiro 13, 2012

* {
  padding:0
  margin:0
}

body {
  text-align:center /* alinhar tudo no IE6 */
}
#container {
  text-align:left
  margin:auto
}
#topo{}
#conteudo{}
#rodape {
  clear:both
}

Após determinar os valores, fecha as propriedades com ponto e vírgula (;). Não deixa seletores vazios e explica a utilização de um Reset CSS e essas gambiarras pra IE 6.

Caso contrário, só vai confundir mais quem tá começando :)

é eu vi que usar position para diagramar o site não é a forma ideal , a outra propriedade que se usa para isso é o float ? só tem essas 2 então ?

Usamos float na diagramação para que o elemento flutue para algum lado específico. É uma propriedade como todas as outras.

Um exemplo é um layout de duas colunas:

<div id="conteudo"></div>
<div id="sidebar"></div>

CSS:

#conteudo {
width:500px;
float:left;
}

#sidebar {
width:200px;
float:right;
}

A largura do meu site, no total, é 700 pixels. Determino 500 pixels para "conteudo" e 200 pixels para "sidebar".

Tenho a div do conteúdo que flutua na esquerda (float:left;) e a div do sidebar que flutua na direita (float:right;) ocupando toda essa largura.

Resultado:

Vê a tabela "Property Values" para entender quando usar a propriedade position:

:seta: http://www.w3schools.com/cssref/pr_class_position.asp

Vê a mesma tabela de valores da propriedade float:

:seta: http://www.w3schools.com/cssref/pr_class_float.asp

NetBoy16 · Fevereiro 13, 2012

Após determinar os valores, fecha as propriedades com ponto e vírgula (;). Não deixa seletores vazios e explica a utilização de um Reset CSS e essas gambiarras pra IE 6.

Ops, fiz na pressa e acabei esquecendo do essencial( ; ), foi mal, mas é isso ai que a diéssica disse :thumbsup:

soh me explica oque é css reset que nao sei oque é isso nao :S

Diéssica · Fevereiro 13, 2012

soh me explica oque é css reset que nao sei oque é isso nao :S

* {
  padding:0
  margin:0
}

:seta: http://imasters.com.br/artigo/8505/css/conheca_e_use_o_css_reset/

semitico · Fevereiro 13, 2012

obrigado pelas explicações galera , eu andei estudando mais sobre posicionamento e vi aonde eu errei , estou refazendo a estrutura do site por completo e centralizando pouco a pouco , topo , corpo , rodapé , o meu erro foi aprender o position absolute e sair colocando ele em tudo :thumbsup: !

NetBoy16 · Fevereiro 13, 2012

obrigado pelas explicações galera , eu andei estudando mais sobre posicionamento e vi aonde eu errei , estou refazendo a estrutura do site por completo e centralizando pouco a pouco , topo , corpo , rodapé , o meu erro foi aprender o position absolute e sair colocando ele em tudo :thumbsup: !

Dá nada, eu tb era assim, usava position pra tudo pois me ensinaram assim, mas o importante é aprender com o errado e fazer o certo ;D

G10 · Fevereiro 23, 2012

é eu vi que usar position para diagramar o site não é a forma ideal , a outra propriedade que se usa para isso é o float ? só tem essas 2 então ?

Cara muito pelo contrário , não há uma regra definida em relação a qual método utilizar

mas para utilizar Position:Absolute é nescessário definir uma div 'PAI' com algumas propriedas,e ai sim

estruturar todo o conteudo dentro dela com Position:absolute !

um exemplo de como utilizo seria assim

//CSS
<style>

#Center {
position: absolute;
width: 550px;
height: 1280px;
left: 50%;
top:0%;
margin-left: -300px;

} 
</style>

//HTML

<div id="Center">
<div id="Teste" style="position:absolute; width:200px; height:115px; z-index:1; left: 172px; top: 14px;"><a href="#">INICIAL</a>
</div>
</div>

Desta forma todas as div's definidas com 'Position:absolute' que se encontram dentro da div PAI "CENTER"

serão exibidas de acordo como foram alinhadas !

é um processo um pouco mais manual pois voce terá que alinhar ao seu gosto layer por layer conforme for inserindo

as mesmas dentro da div PAI, a aceitação dos dos navegadores por esse método é 100% ,nunca tive problema

estruturando site dessa maneira.

voce pode também alinha uma div sobreposta a outra utilizando a propriedade "z-index"

sugiro que deixe elas sequenciais em cada div "z-index:1 , "z-index:2...

:thumbsup:

Diéssica · Fevereiro 23, 2012

G10, apenas não é a forma ideal.

Pense semanticamente :)

NetBoy16 · Fevereiro 23, 2012

Nunca fiz layout por position absolute, antes sempre utilizava position relative, e tinha que alinhar div por div(top, left...), dava um trabalho e muitas vezes enquanto no GC, FF era de um jeito, no IE por incrivel que pareca, dava uma pequena(as vezes media/grande) diferenca de espaco, agora nao, eu faco da forma semanticamente correta, sem alterar o valor do position assim deixando o default(static),é susse e fica uma maravilha, quando o layout é só uma coluna(muito comum em sites institucionais) você nem precisa ficar alinhando, caso contrário, você só vai ter um pouco de trabalho pra mecher com floats e clear, e em casos de layout muito complexos você vai ter que mecher com margin(ai nesse caso é praticamente a mesma dificuldade que o alinhamento com top e left).

G10 · Fevereiro 23, 2012

G10, apenas não é a forma ideal.

Pense semanticamente :)

Sim concordo

semanticamente falando não é viavel !

mais como eu disse nao tem uma regra referente a isso

o que existe é uma semantica a ser seguida,ai vai do desenvolvedor

aplicar a semantica correta ou fazer do jeito que acha mais fácil !

NetBoy16 · Fevereiro 23, 2012

Isso eu concordo, é semanticamente correto mas nao obrigatorio, mas se você seguir os padroes web sua vida de desenvolvedor se tornará mais facil, acredite em mim, e eu acho bem mais facil deixando position default doque fazendo por absolute, faca um teste pra você ver.

Evandro Oliveira · Fevereiro 23, 2012

Queridos, tenho minhas dúvidas se um tópico taggeado como [Resolvido] seria o melhor lugar mas, quero levantar uma questão:

Qual o conceito de semântica para vocês???

Pelo que eu entendo, nada tem a ver com CSS. Enfim, postem suas opiniões que eu me prontifico a rebatê-las.

Vinicius Ianni · Fevereiro 23, 2012

Por favor, crie um novo topico com a sua duvida, será muito mais produtivo do que prosseguir com um assunto que foge do inicialmente proposto neste topico.

Arquivado

[Resolvido] não consigo centralizar meu site

Recommended Posts

semitico 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Felipe Quirino 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

semitico 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

semitico 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

G10 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

G10 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vinicius Ianni 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Fóruns

Tempo Real