Página não centraliza

wellysonfr · Setembro 16, 2011

Estou fazendo um site seguindo os passos de uma videoaula. Quero deixar claro que os meus conhecimentos de HTML/CSS são básicos e portanto não consegui resolver esse problema que é bobagem.

O site não centraliza.

Vejam a imagem do site:

http://bit.ly/q36qyU

CSS:

*{margin:0; padding:0;}

#box {width:960px margin:0 auto;}

#header {height:125px; background:#FFF;}
#logo {float:left; margin:5px 30px;}
#headersp {height:25px; background:url(images/header.jpg) no-repeat;}

/*MENU*/
#menu {height:30px; background:url(images/menu.jpg) no-repeat;}
#menu a {float:left; text-decoration:none; color:#FFF; font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; padding:5px 15px;}
#menu a:hover {background:url(images/menu_hover.jpg) repeat-x;}
#menu img {float:left;}

#search input {background:#FFF; border:1px solid #09F; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#333; padding:3px 4px;}
.pesquisar {color:#FFF; font:14px Tahoma, Geneva, sans-serif;}

#search {float:right;}
#spacer {height:25px; background:url(images/spacer.jpg) no-repeat;}

HTML:

<!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>Datatec</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="box">

   <div id="header"
   
     <div id="logo">
     <img src="images/logo.jpg" />
     </div><!--logo-->
     
   </div><!--header-->
   
     <div id="headersp">
     </div><!--headersp-->
     
       <div id="menu">
       <a href="#">Inicio</a>
       <img src="images/separador_menu.jpg" />
       <a href="#">Empresa</a>
       <img src="images/separador_menu.jpg" />
       <a href="#">Expediente</a>
       <img src="images/separador_menu.jpg" />
       <a href="#">Mural</a>
       <img src="images/separador_menu.jpg" />
       <a href="#">Fale Conosco</a>
       
       <div id="search">
        <form id="forml" name="forml" method="post" action="">
         <table border="0" align="right" cellpadding="3" cellspacing="3">
          <tr>
            <td><span class="pesquisar">Pesquisar por:</span></td>
            <td><input name="search" type="text" id="search" size="38" /></td>
            <td><input type="submit" name="buscar" id="buscar" value="Buscar" /></td>
          </tr>
        </table>
      </form>
    </div><!--search-->
    </div><!--menu-->
    
       
         <div id="spacer">
         </div><!--spacer-->
         
  <div id="content">
  
    <div id="conteudo">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div><!--conteudo-->
    
      <div id="sidebar">
Sidebar
<br />
<br />
<br />
<br />
      
      </div><!--sidebar-->
      <div id="divclear"</div>
      </div><!--content-->

</div><!--box-->

<div id="footer">
</div><!--footer-->

</body>
</html>

Não sei em parte do código eu errei. Me mostrem onde o problema se encontra!!!

Mika-san · Setembro 16, 2011

#box {width:960px margin:0 auto;}

Faltou ";" depois do 960px Mas para deixar o site inteiro centralizado, aconselho criar uma div segurando todas as outras, acrescentando o css abaixo:

#principal {
   width:1000px;
   margin:auto;
}

<body>
<div id="principal">
   <!-- Colocar as divs aqui -->
</div>
</body>

Experimente fazer assim

wellysonfr · Setembro 16, 2011

Todas as minhas div's estão dentro da #box:

<body>
<div id="box">  conteudo do site  </div><!--box-->
</body>

Realmente eu esqueci do ponto e vírgula. Mesmo resolvendo isso o problema persiste:

#box {width:960px; margin:0 auto;}

A droga não centraliza. Ah, eu uso o firefox, faz diferença??

O interessante é que depois de ter adicionado o ponto e a vírgula, somente o logotipo da empresa centralizou (hehe). O menu e o texto abaixo dele continua no mesmo lugar!

Editado Setembro 16, 2011 por wellysonfr

Mika-san · Setembro 17, 2011

<div id="header"
   
     <div id="logo">
     <img src="images/logo.jpg" />
     </div><!--logo-->
     
   </div><!--header-->

<div id="divclear"</div>
     
</div><!--content-->

As divs "header" e "divclear" estão abertas, é só fechar que vai dar certo

wellysonfr · Setembro 18, 2011

Eu uso o Dreamweaver sempre na visualização de código. A cada mudança feita, salvo e visualizo no navegador, raramente recorro ao modo design. Pois é, estou lá mexendo e de repente aperto no modo design sem querer, e tá lá mostrando as Div's que eu deixei abertas.

Rapaz eu sou muito desatento. Putz! Me deu uma raiva esse negócio. Resolvido o problema o site centralizou legal.

O meu Dreamweaver sempre dá erro fatal quando eu fecho ele. Já reinstalei, mais o problema persiste. O que será isso?

Editado Setembro 18, 2011 por wellysonfr

Entrar

Página não centraliza

Pergunta

wellysonfr

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

Mika-san

Link para o comentário

Compartilhar em outros sites

wellysonfr

Link para o comentário

Compartilhar em outros sites

Mika-san

Link para o comentário

Compartilhar em outros sites

wellysonfr

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades