Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
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;
}

Editado por dif
Inserir a tag CODE. Não usar a mesma, infringe as [URL="http://forum.clubedohardware.com.br/regras-forum-atualizadas/756056"]Regras Gerais[/URL] Ítem 3.6. Att, Dif

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

Editado por manoelps
Colocar a tag CODE

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

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

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






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

×