Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal,
Estou com um problema com as divs do meu sistema.
Eu tenho uma div, que fica no topo da pagina, apenas com o usuario logado. Essa div fica alinhada com a div com o conteudo a ser mostrado, o problema é que quando esse conteudo aumenta e, consequentemente, a div conteudo tambem aumenta, a div do topo sae do lugar e isso só acontece no FF. Alguem pode me ajudar?
Meus codigos estao assim:
//HTML
<div id="topo">
<div id="logo"></div>
<div id="menu_topo">
usuario | Inicio | Site | Sair
</div>
</div>
<div id="conteudo"></div>//CSS
#menu_topo{
background: #FFF;
width: 215px;
height: 26px;
margin-left: 605px;
margin-top: -35px;
text-align: right;
}
#conteudo{
background:#FFF;
clear:both;
}Desculpe não ter psotado tudo.
Vou colocar tudo completo aqui, já que o problema ainda persiste.
Meu HTML (pagina inicial):
<?
require_once("../config.php");
include(APP_PATH . "/util/validarSessao.php");
session_start();
?><html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) xml:lang="pt-br">
<head>
<title><?=TITULO_ADMIN;?></title>
<link rel="shortcut icon" href="logo.ico" type="img/x-icon" />
<!-- META -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="pt, pt-br" />
<meta http-equiv="cache-control" content="public" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- CSS -->
<link rel="stylesheet" href="<?=WWW?>/_admin/css/admin.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="<?=WWW?>/_admin/css/admin_ie.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="tudo">
<div id="topo">
<div id="logo"></div>
<div id="menu_superior">
<? require_once("menu_superior.html"); ?>
</div>
</div>
<div id="conteudo">
<div id="texto">
<br />
</div>
<div id="menu_lateral">
<h3 class="menu_nome">
<span class="menu_nome_a"> . Menu </span>
</h3>
<ul class="menu_lateral">
<? require_once("menu_lateral.html"); ?>
</ul>
</div>
<div id="borda_fundo"></div>
</div>
<div id="rodape">
<div id="info_rodape">
<? require_once("rodape.html"); ?>
</div>
</div>
</div>
</body>
</html>CSS das divs:
#topo {
height:1%;
} background: #FFF;
width: 215px;
height: 26px;
margin-left: 655px;
margin-top: -25px;
text-align: right;
}#topo #logo {
background: transparent url("../../imagens/admin/logo.png") no-repeat left center;
width: 410px;
height: 90px;
}
#conteudo {
background: #FFF;
clear: both;
}#conteudo #borda_fundo {
clear: both;
height: 1%;
}#conteudo #texto {
width: 78%;
float: right;
padding-bottom: 20px;
margin: 6px;
}#menu_lateral * {
font-size:1em;
}
#menu_lateral {
width: 18%;
float: left;
margin: 0 1px;
margin-top: 6px;
} font-size: 1em;
}
#rodape {
background: #4F4F4E;
margin: 10px 0;
height: 1%;
}#rodape #info_rodape * {
font-size: 0.95em;
color: #FFF;
}#rodape #info_rodape {
margin: 0 10px;
}É assim que estou fazendo, como a div #conteudo #texto muda de altura automaticamente, de acordo com o conteudo digitado no HTML, a minha div #topo #menu_superior, saí do lugar (vai mais para a esquerda), toda vez que o conteudo a ser exibido dentro da div #texto fica muito grande, mas isso só acontece com o FF.
Conto com a ajuda de vocês e desde já agradeço.
Boa tarde,
Tenta declarar overflow:hidden no #conteudo para ver se corrige.
Dica: Tente imaginar os elementos como caixas (box), para não cair na divmania.
angelo valeu pela ajuda.
Fiz o que você fez, meu CSS ficou assim:
#conteudo {
background: #FFF;
clear: both;
overflow: hidden;
}Mas infelizmente, não resolveu. Coloque um texto muito grande, dentro da div conteudo e voltou a mexer na div menu_superior, mas só no FF.
Vocês acham que estou utilizando muita div?
Essas divisões de div eu peguei de um projeto exemplo de acessibilidade. Achei que seria um bom padrao a ser seguido.
Valeu
Não entendi o porque do:
#topo {
height:1%;
}Veja se esta declaração no início do seu CSS ajudará:
#topo, #conteudo, #rodape {
clear: both;
}Sinceramente, nem eu entendi porque essa altura com 1%. Mas como eu disse, peguei um projeto exemplo pra acessibilidade.
Vou retirar isso e colcoar o que falou.
Valeu pela ajuda.
Continua o mesmo problema
Meu CSS ficou assim:
#tudo {
width: 85%;
margin: 0 auto;
}#topo, #conteudo, #rodape {
clear: both;
}/ DIV TOPO /
#topo * {
font-size:1em;
}#topo #menu_superior{
background: #FFF;
width: 230px;
height: 26px;
margin-left: 625px;
margin-top: -25px;
text-align: center;
}#topo #logo {
background: transparent url("../../imagens/admin/logo.png") no-repeat left center;
width: 410px;
height: 90px;
}/ DIV CONTEUDO /
#conteudo {
background: #FFF;
clear: both;
}#conteudo #borda_fundo {
clear: both;
height: 1%;
}/ DIV CONTEUDO - TEXTO /
#conteudo #texto {
width: 78%;
float: right;
padding-bottom: 20px;
margin: 6px;
overflow: hidden;
}/ DIV MENU /
#menu_lateral {
width: 18%;
float: left;
margin: 0 1px;
margin-top: 6px;
}
#rodape {
background: #4F4F4E;
margin: 10px 0;
height: 1%;
}O layout está assim:
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.uff.br/jonf/imagem.JPG&key=521421ed9066c37f0a6d03c7024d943a0e3427e674357807d38ffda4cf36c85c" alt="Imagem Postada" />
Aí esta no IE, sem problemas, o problema começa quando o conteudo aumenta, e o menu superior com o usuario logado anda um pouco pra direita no FF
Ah, agora deu pra sacar o problema. :)
Você tem o #logo e #menu_superior no mesmo bloco de layout. O correto seria organizá-los com float (left para o #logo, e right para o #menu_superior). E daí sim posicioná-los corretamente.
No caso do #menu_superior, como ele recebe conteúdo dinâmico, evite aplicar uma largura fixa. Faça alguns testes com estes ajustes. ;)
Muito obrigado.
Funcionou.
Voce acha que estou usando muitas divs?
Valeu mesmo.
Boa tarde,
Eu não sei se você nao postou propositalmente o CSS das outras Div's.
No caso é necessário declara-las para você poder definir as regras para estas outras Div's( #logo, #topo )permitindo assim manipula-las a sua necessidade.
Definindo-as é só você dimensiona-las no CSS com width e height que tudo será resolvido.
Espero que ajude.