Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal beleza?
Estou com um problemão aqui, ja pesquizei em varios tutoriais pela net, mas não concegui ainda.
Seguinte: Montei um site aqui e percebi que ao mudar a resolução da tela de 1024x768 para 800x600, as divs que usei position:absolute; mudam de lugar .... o que teoricamente ja era de se esperar.
Mas alguém sabe o que pode ser feito para solucionar esse problema ?
Aguardo uma força ai do pessoal ....
Bem... Uma dica que posso dar é não abusar do position: absolute...
Mas posta o código pra gente entender melhor...
Abraço!
>
Bem... Uma dica que posso dar é não abusar do position: absolute...
Mas posta o código pra gente entender melhor...
Abraço!
Bom dia , agradeço mesmo a participação dos amigos aki pra me ajudar, segue parte do código para podermos ter uma idéia.
Pagina ...
<link href="css/base.css" rel="stylesheet" type="text/css" />
<title>:: meu site ::</title>
</head>
<body><!-- topo -->
<div id="topo"></div>
<!-- conteudo -->
<div id="base">
<div id="base_cont"><!-- menu -->
<div id="menu"><script language=javascript src="js/menu.js"></SCRIPT></div>
<!-- logo -->
<div id="logo"><img src="imagens/logo.jpg" width="189" height="42" /></div>
<!-- menu rápido -->
<div id="menu_home"><script language=javascript src="js/home_mapa.js"></SCRIPT></div>
<!-- globo -->
<div id="globo"><script language=javascript src="js/globo.js"></SCRIPT></div>
Base.css
/ zera atributos /
*{
margin:0px;
padding:0px;
border:0px;
} margin-bottom: 0px;
background-color:#fff;
font: 12px arial,sans-serif; color: #333;
}#base_cont {OVERFLOW: hidden;MARGIN-BOTTOM:0px; width:800px;height:auto;}
#topo {overflow:hidden; height:25px;MARGIN: 0 auto;background-image:url(../imagens/fundo_nav.gif);
background-repeat:repeat-x; text-align:right;}/conteudo/
#cont_meio{margin:0px;padding:0px;border:0px;}
/menu/
#menu {position:absolute;left:25%;top:0%;height:11px;z-index:5;}
/logo/
#logo {position:absolute;left:50%;top:50%;width:190px;height:45px;z-index:1; margin: -200px 0 0 -340px;}
/globo/
#globo {position:absolute;left:60%;top:6%;width:215px;height:55px; z-index:4;}
Valew pessoal, aguardo mais umas opiniões ...
Não é aconselhável trabalhar com position desse maneira. Prefira usar float.
Dica: crie uma div global para a página. Assim terá mais controle sobre a página. ;)
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Mais uma vez uma problema na tal de hierarquia do CSS.
Infelizmente mano tu não pode sair criando um monte de div, colocar position: qualuqer coisa; e achar que vai funcionar.
Pesquise sobre HIERARQUIA de divs e vai decobrir que para o seu código funcioar ele tem que esta mais ou menos assim:
<div id="pai">
<div>qualquer coisa</div>
<div>Sou uma imagem ^^</div>
<div>Sou apenas texto</div>
</div>CSS
#pai{
position:relative;
} position:absolute;
}Ou seja, a posição de sua DIV será referenciada por aquela que MANDA nela, assim como tamanho e qualquer outra coisa que influencie no Layout, sem esse conhecimento você sempre cairá nesses problema de posicionamento de Div.
Se não houver um motivo muito especial para usar 800 x 600, mantenha a resolução 1024 x 768 que é o padrão mais utilizado atualmente e fique em paz com as suas divs.
Mesmo assim, sugiro testar em diversos navegadores, inclusive de outras versões, para ver se também vai funfar.
Divs absolutas ou flutuantes (Draw App Div) são para situações ocasionais, o correto é usar "Insert Div Tag" e formatar o posicionamento via CSS.
Abraços