divs rodape e webdesing bagunçadas

navegador2 · 25 de julho de 2013

Caros colegas estou fazendo um layout de um site com algumas divs uma embaixo da outra exceto a left e right que ficam a esquerda e direita da conteudo, como 2 faixas estreitas:

O problema esta dando que criei uma div rodape e em baixo uma webdesing, o conteudo digitado na rodape esta ficando embolado no lado direito da pagina ou sobreposto ao da webdesing. posto o codigo abaixo e o css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"][url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url][/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"][url]http://www.w3.org/1999/xhtml[/url][/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Symontec Painéis Elétricos</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id= "tudo">
 <div id= "topo"></div>
 <div id= "menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a href="#">Empresa</a>    </li>
  <li><a href="#">Produtos</a></li>
  <li><a href="#">Serviços</a>    </li>
  <li><a href="#">Visita Online</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div> <!-- Fim da div menu --> 
 <div id= "left"></div> <!-- div do lado esquerdo da conteudo --> 

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

   <div id= "right"></div> <!-- div do lado direito da conteudo -->

  <div id= "rodape"> Fone: (31) 3398-8855 / 8752-3748</div>
  <div id= "webdesing">Copyright @ 2012 -Todos os Direitos Reservados - Álvaro César</div>
</div> <!-- Fim da Div tudo --> 
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

CSS

#menu {
 height:50px;
 width:1000px;
 background-color:#000;
}
#left {

 background-color:#000;
 float:left; 
 height:440px;
 width:60px;

}

#conteudo {
 background-color:#333;
 float:left;
 height:440px;
 width:880px;
 padding-left:0px;
 padding-right:0px;
 padding-top:0px;

}
#right {

 background-color:#000;
 float:right;
 height:440px;
 width:60px;

}

#rodape {

 background-color:#000;
 height:50px;
 width:1000x;
 padding-top:0px;
 text-align:center;
 color:#F90;
}
#webdesing {

 background-color:#333;
 height:50px;
 width:1000x;
 text-align:center;
 padding-top:10px;
 color:#F90;
}

manoelps · 25 de julho de 2013

ai no seu css tem os seguintes problemas:


#right {
 background-color:#000;
 float:left; /*estava marcado como right coloque left que vai se aninhar ao lado do div centro*/
 height:440px;
 width:60px;
}


#rodape {
 background-color:#000;
 height:50px;
 width:1000px;  /* estava faltando a letra P do 1000px*/
 padding-top:0px;
 text-align:center;
 color:#F90;
 clear:both; /*adicionado clear:both para vir para baixo e criar o rodape (O valor de clear "both" faz com que o elemento se coloque onde não haja elementos flutuando, tanto à direita quanto à esquerda ou embaixo que é o nosso caso.)*/
}

no seu html fiz o seguinte ajuste:


  <div id= "rodape"> Fone: (31) 3398-8855 / 8752-3748
        <div id= "webdesing">Copyright @ 2012 -Todos os Direitos Reservados - Álvaro César</div>
  </div>

Coloquei a div webdesing dentro da div rodapé.

Obs: Seu codigo do css está cheio de especificações de tamanho em pixel faltando o P apenas com o X;

.. testei aqui após a correção e tudo apareceu 100%....

navegador2 · 25 de julho de 2013

ai no seu css tem os seguintes problemas:


#right {
 background-color:#000;
 float:left; /*estava marcado como right coloque left que vai se aninhar ao lado do div centro*/
 height:440px;
 width:60px;
}


#rodape {
 background-color:#000;
 height:50px;
 width:1000px;  /* estava faltando a letra P do 1000px*/
 padding-top:0px;
 text-align:center;
 color:#F90;
 clear:both; /*adicionado clear:both para vir para baixo e criar o rodape (O valor de clear "both" faz com que o elemento se coloque onde não haja elementos flutuando, tanto à direita quanto à esquerda ou embaixo que é o nosso caso.)*/
}

no seu html fiz o seguinte ajuste:


  <div id= "rodape"> Fone: (31) 3398-8855 / 8752-3748
        <div id= "webdesing">Copyright @ 2012 -Todos os Direitos Reservados - Álvaro César</div>
  </div>

Coloquei a div webdesing dentro da div rodapé.

.. testei aqui após a correção e tudo apareceu 100%....

Ok. Muito obrigado. Realmente resolveu o problema...

Meu erro So não entendi porque criar uma div dentro da outra, ja que tinha espaço, mas isto realmente resolveu.

Quando ao float imaginei que colocando o float como right ela flutuaria do lado direito da div conteudo, ja que na div left, usei left e deu certo....

O clear both é um comando para mim ainda complexo vou pesquisar sobre ele.