Ir ao conteúdo
  • Cadastre-se
navegador2

divs rodape e webdesing bagunçadas

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×