Jump to content


Photo

Erro:Div Com Float>Left/Right, Problema Qndo Poe Padding


  • Faça o login para participar
2 replies to this topic

#1 Arckyz

Arckyz

    Normal

  • Usuários
  • 93 posts
  • Sexo:Não informado

Posted 03/02/2010, 12:49

Olá pessoal. O site é esse: http://imovelcenter.com.br/teste/

Vejam ele no ie8 e no FF. no FF quebras de linhas nas divs.

O que eu fiz foi colocar as div como float:left/right e coloquei paddings para alinhar o texto. No IE funciona perfeitamente, no FF parece que o padding aumenta o width da div... tanto q se eu tirar o padding funciona perfeitamente

Código de partes do site:
HTML:
<body>
<div id="corpo">
<script>flash('flash/banner.swf',800,250)</script>
<div id="menu_cima" class="fonte_menu_cima"><a href="index.php?page=pesquisa_imovel">Imóveis</a> &nbsp;&nbsp; <a href="index.php?page=empresa">Empresa</a> &nbsp;&nbsp; <a href="index.php?page=contato">Contato</a></div><div id="tels_cima" class="fonte_comum">(13) 3013-9091 / (13) 78xx-xxxx</div>
<div id="menu_lado"><? include("menu.php"); ?></div>
<div id="pagina">
	    <?
	    if(isset($_REQUEST["page"])) 
		   {
		    $page = $_REQUEST["page"];
			if(file_exists("$page.php"))
            {
			 include ("$page.php"); 
			}
			else
			{
			  include ("erro.php"); 
			}
			}
			else
			{
			 include ("principal.php");
			}
     ?>
</div>
<div id="rodape1" class="fonte_comum">  
 <? if ($_SESSION['logado'] == 1) {
   echo '<span id="fonte_login">Bem vindo(a) <b>'.$_SESSION['nome'].'</b> <a class="classe2" href="index.php?page=config">Área restrita</a><a class="classe2" href="index.php?page=logout"> Log out</a></span>';  
  }
  else {
 ?><form name="restrita" action="index.php?page=login" method="post">Plantão - Sábados, Domingos e Feriados - (13) 78xx.xxxx ID: xx*xxxx &nbsp;&nbsp;<span class="fonte_comum2">Login: <input type="text" name="login" size="10"> Senha: <input type="password" name="senha" size="10">&nbsp;<input type="submit" value="Entrar"><? } ?></div>
<div id="rodape2-1"><img src="imagens/imovel_center_rodape.jpg" border="no"></div>
<div id="rodape2-2" class="fonte_comum">
	<table border="0" cellspacing="16" cellpadding="0" class="fonte_comum">
     <tr>
    	<td valign="top">
        	IMÓVEIS A VENDA<br>
            Revenda<br>
            Lançamento
    	</td>
       	<td valign="top">
        	SERVIÇOS<br>
            Documentação<br>
            Financiamento<br>
            Venda seu Imóvel
    	</td>
        <td valign="top">
        	ATENDIMENTO<br>
            Fale Conosco<br>
            Corretora
    	</td>
     </tr>
    </table>
</div>
<div id="rodape3"><a href="http://www.acitech.com.br" class="classe2" target="_blank">Desenvolvimento: ACI TECH</a></div>
</form>
</body>
</html>

CSS:
div#corpo{
	margin:0px auto;
	text-align:left;
	width:800px;
	background-color:#FFF;
	border:0px;
	overflow:auto;


}
#pagina {
	text-align:center;
	width:600px;
	height:100%;
	float:left;	
	padding-top:3;
	padding-left:8;
	background-color:#FFF;
	border:0px;  	

}

div#tels_cima{
	text-align:right;
	width:400;
	height:49px;
	border:0px;
	padding-top:12;
	padding-right:6;
    background-image:url(imagens/fundo_menu_amarelo.jpg);
	float:right;
	margin:inherit;
}

div#menu_cima {
	text-align:left;
	width:400;
	height:49px;
    background-image:url(imagens/fundo_menu_amarelo.jpg);
	border:0px;
	float:left;
	padding-top:12;
	padding-left:30;
	overflow:hidden;
	margin:0;
	
}

div#menu_lado {
	text-align:right;
	width:200px;
	border:0px;
	float:left;
	overflow:inherit;
}
div#rodape1 {
	margin:0px auto;
	width:800px;
	border:0px;  	
	text-align:center;
	background-color:#a9a8a8;
}

div#rodape2-1 {
	margin:0px auto;
	width:200px;
	height:100;
	border:0px;  	
	text-align:left;
	padding-left:5;
	padding-top:30;
	float:left;
	background-color:#dbdada;
}

div#rodape2-2 {
	margin:0px auto;
	width:600px;
	height:100;
	border:0px;
	text-align:right;
	float:right;
	background-color:#dbdada;
}

#rodape3 {
	margin:0px auto;
	width:800px;
	border:0px;
	text-align:right;
	padding-top:4;
	padding-right:5;
	height:25px;
	background-color:#a9a8a8;

}





#2 Édipo Costa Rebouças

Édipo Costa Rebouças

    Veterano

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 09/02/2010, 20:24

colega, não tem nada de errado com o firefox, o padding tem que realmente aumentar o width da div

a largura vai sem o width+padding+border

talvez seja interessante você ver esse tópico:

http://forum.wmonlin...42

que fala sobre esse bug no ie6 e anteriores

#3 André Manoel

André Manoel

    Doutor

  • Usuários
  • 996 posts
  • Sexo:Masculino
  • Localidade:Brasilia

Posted 19/02/2010, 10:46

Você também pode a medida que aumentar o padding diminuir o width para que o texto que vc quer alinhar continue da mesma forma...

Por exemplo vamos supor que vc tenha um width de 800px.

Se você quer adicionar um padding de 10px o tamanho vai para 820px.

Agora vamos esclarecer algumas coisas:

Você pode utilizar

padding-bottom
padding-top
padding-left
padding-right

Se você utilizar qualquer um desses ele vai aumentar o tamanho aonde você definir.
Se você utilizar somente o padding ele vai aumentar em todos ao mesmo tempo.

por exemplo:

padding: 10px

é a mesma coisa que

    padding-bottom: 10px
    padding-top: 10px
    padding-left: 10px 
    padding-right: 10px

Ele vai aumentar a padding em todas as direções.

Eu uso muito isso!
Quando eu tenho uma div global que tem 800px e quero adicionar o padding(espaço entre o conteúdo e a borda), eu coloco o padding e diminuo o width.

Exemplo(antes):

   #global{
       width: 800px;      
   } 

Exemplo(depois com o padding):

   #global{
       width: 780px;     
       padding-bottom: 10px
       padding-top: 10px
       padding-left: 10px 
       padding-right: 10px
   } 

Lembrando que a largura que é o que está te dando problemas agora só é adicionada a quando você coloca padding-left e paddind-right
Então nesse caso serão 20px que você terá que tirar da largura total da div.


E assim você aplica a mesma regra para as outras divs.

Arrocha!
Iniciando na Ajuda On line...

Posted Image Meu post lhe ajudou? Reputar/votar é uma das formas de agradecer.




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq