Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Eae pessoal to tentando descobrir mais sobre posicionamento de divs e nao consegui fazer isso sem posicionamento absoluto
Acho que o posicionamento absoluto qnd a margim ta auto fica ruim com diferentes resolucoes entao...
Como eu posiciono um contador de visitas preso acima dessa div:
div#footer{background:#474747;clear:left;width:100%; margin-top: 20px;}
Dentro dessa div:
div#wrapper{float:left;width:100%}
sem que o contador sobreponha essa div:
div#anuncio{float:left;width:200px;margin-left:-210px; margin-top: 420px; margin-bottom:20px;}
Djonatan, na próxima vez é melhor postar o documento CSS inteiro para entenderem melhor a tua situação.
;]
>
Djonatan, na próxima vez é melhor postar o documento CSS inteiro para entenderem melhor a tua situação.
;]
Eh, notei que nesse caso todo o codigo seria mais util.
Mas como o William me aconselhou tentei pesquisar position.
Descobri que meu site tava completamente sem fluxo, todas as DIVs atiradas num posicionamento fixo, nao foi muito didatico esse link que ele aconselhou e acabei entendo em uma video aula nesse link http://www.tableless.com.br, as proprias videoaulas que vi estavam mal explicadas quanto a referencia, mas a demonstracao elucidou melhor que a narracao do autor.
Usei relative e absolute assim:
html,body{margin:0;padding:0}
/NAVIGATION/
div#navigation{background:#000000; position:absolute;float:left;width:150px;top:20px;}
/CABECALHO/
div#header{background-color:#F3F2ED; background-image: url(banner.jpg); width:900px; height:124px; margin-top: 5px;}
/CONTEUDO/
div#content{margin: 20px 220px 20px 170px; color:#FFFFFF; background-color:#2F2F2F; padding: 8px 15px;}
/ALERTA /
div#alerta{padding-bottom:10px;border-style:solid;border-color:#2F2F2F;background-color:#000000;float:left;width:150px;top: 400px; left:7px ; position: absolute;}
/CONTADOR VISITAS/
div#contador{float:right;width:150px;right:10px;bottom:50px;position:absolute;}
/ANUNCIO ADSENSE/
div#anuncio{float:right;width:200px;position:absolute; top:400px; left:690px;}
/ LINKS/
div#extra{background:#2F2F2F; color:#FFFFFF;float:right;width:200px;padding: 20px 0px 10px 0px;position:absolute;top:20px;left:690px;}
/RODAPE/
div#footer{background:#474747;clear:left;width:100%; margin-top: 20px;position:relative;}
Acabei de notar que meu content nao ta com o position setado, tentei setar pra absolute dentro do wraper e o rodape se foi embora e avacalhou tudo, vai ficar assim por enquanto. Notem que me esforco pra eliminar gambiarras entao se tiverem dicas nesse sentido por favor compartilhem.
Assim ficou a estrutura, o fluxo do site:
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<script type="text/javascript"></script>
<div id="container">
<div id="header"></div>
<div id="wrapper">
<div id="navigation">
<ul>
<li>botao 1</li>
<li>botao 2</li>
<li></li>
<li></li>
</ul>
</div>
<div id="extra">
<h1>Links Úteis</h1>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="anuncio">
<script type="text/javascript"><!--
Bla bla bla adsense
</script>
</div>
<div id="alerta">
<h3>Quer treinar?</h3>
<h4>Mais informações</h4>
<p>Cel: 8431-7208</p>
<h4>Orkut</h4>
<a href="[http://www.orkut.com.br/Main#Community?cmm=41110053">Antiqua](http://www.orkut.com.br/Main#Community?cmm=41110053) no Orkut</a>
</div>
<div id="content">
bla bla bla conteudo
</div>
</div>
<div id="footer">
<p class="center">Copyright © 2009 - Desenvolvido por Antiqua Rugby Clube</p>
<div id="contador">
<!--************CODE GEOUSER************-->
BLA BLA BLA contador de visitas
<!--************END CODE GEOUSER************-->
</div>
</div>
</div>Eu uso em dois arquivos .php que incluo em cada arquivo ficando apenas o conteudo e os includes em cada arquivo..
Bom nao deu certo, perdi toda a orientacao da DIV content que eu tinha anteriormente.
Funciona quando a content eh maior que toda estrutura de menus e propaganda dos lados, quando nao, o wraper acaba assim que fexa a margin do content...
complicou :/
Creio que continua sendo uma deficiencia de conhecimento do fluxo...
Poste como está todo o teu arquivo .css
ou um link para o site.
para estruturar, prefira usar float, margin, padding..
para usar position, é necessário saber e muito bem oque está fazendo.
deixe essa propriedade apenas para pequenos slices, até você aprender para oque ela realmente serve, e oq ela realmente pode fazer.
ps: se usar float, não use position.
>
Poste como está todo o teu arquivo .css
ou um link para o site.
para estruturar, prefira usar float, margin, padding..
para usar position, é necessário saber e muito bem oque está fazendo.
deixe essa propriedade apenas para pequenos slices, até você aprender para oque ela realmente serve, e oq ela realmente pode fazer.
ps: se usar float, não use position.
http://www.antiqua.rugby.esp.br/
Eu enviei o backup do CSS que eu tinha antes de futricar tudo... o CSS que ta funcionando inteiro eh esse
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center;background-image: url(grama.jpg);background-repeat: repeat;}
p{margin:12px 10px 10px; text-align:justify;}
a{padding:5px; text-decoration:none; color:#000000;}
.center{text-align:center;}
.right{text-align:right; float:right;}
.tabela{ margin:auto; color:#FFFFFF; background-color: #212121;font-family: Verdana, Helvetica, sans-serif; font-size: 14px;}
.indice{background-color:black; color: #FFFF00; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 16px;}
/CABECALHO/
div#header{background-color:#F3F2ED; background-image: url(banner.jpg); width:900px; height:124px; margin-top: 5px;}
div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}
/CONTENT/
div#content{margin: 20px 220px 20px 170px; color:#FFFFFF; background-color:#2F2F2F; padding: 8px 15px;}
div#content p{line-height:1.4; color: #FFFFFF; font-family: Verdana, Helvetica, sans-serif; font-size: 13px; font-weight: bold;}
div#content p.legenda{font-size: 10px; text-align:right;}
div#content a{padding:5px; text-decoration:underline; color:#FFFFFF;}
div#content a:hover{padding:5px; text-decoration:underline; color:#1E90FF;}
/NAO IMPLEMENTADO/
div#jogadores ul{margin:15px 0px 0px 20px; padding:0; list-style-type:none;}
div#jogadores li{margin-bottom:5px; background-color:aqua;}
/NAVIGATION Menu lateral/
div#navigation ul{margin:15px 0px 0px 20px; padding:0; list-style-type:none;}
div#navigation li{margin-bottom:5px;}
div#navigation{background:#000000;float:left;width:150px;margin-left:-900px; margin-top: 20px; }
/AVISO PARA CONTATO/
div#alerta{padding-bottom:10px;border-style:solid;border-color:#2F2F2F;background-color:#000000;float:left;width:150px;margin-left:-893px; margin-top: 420px;}
div#alerta h3{margin-top:0; padding: 10px 2px;text-align: center; background-color:#2F2F2F; color: #FFFF00; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 16px;}
div#alerta h4{margin-top:0; padding: 10px 2px;text-align: center; color: #990033; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 15px;}
div#alerta p{background-color:#000000; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px;}
div#alerta a{margin:12px 10px 10px; padding:0px; text-decoration:underline; color:#FFFFFF; font-size:14px;}
div#alerta a:hover{text-decoration:underline; color:#1E90FF;}
/CONTADOR DE VISITAS/
div#contador{float:right;width:150px;right:10px;bottom:50px;}
/ADSENSE/
div#anuncio{float:left;width:200px;margin-left:-210px; margin-top: 420px; margin-bottom:20px;}
/container/
div#container{text-align:left;width:900px;margin:0 auto; background-color: #000000}
div#container h1{text-align: center; color: #FFFF00; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 24px;}
div#container h2{text-align: center; color: #FFFF80; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 18px;}
/WRAPPER/
div#wrapper{float:left;width:100%}
/Links uteis/
div#extra{background:#2F2F2F; color:#FFFFFF;float:left;width:200px;margin-left:-210px; margin-top: 20px; margin-bottom:20px; padding: 20px 0px 10px 0px;}
div#extra ul {list-style: none; padding: 0px; margin:0px;} / pad e marg pra funcionar nos browsers/
div#extra li {border-bottom: 5px solid #2F2F2F; margin: 0px 5px 0px 5px;}
div#extra li a {display: block;padding: 5px 5px 5px 0.5em;background-color: #212121;color: #333385;text-decoration: none;}
div#extra li a:hover {background-color: #444444;color: #1E90FF;text-decoration:underline;}
/RODAPE/
div#footer{background:#474747;clear:left;width:100%; margin-top: 20px;}
div#footer p{margin:0;padding:5px 10px}
A unica intencao era entender melhor o posicionamento e adicionar um contador de visitas preso ao rodape que nao sobrepusesse o adsense e nao criasse um espaco vazio de wrapper entre o content e o rodape, a menos que isso fosse necessario, exemplo: o content exibido tem altura menor que LINKS UTEIS+adsense+contador de visitas.
Bom galera, apanhei mas resolvi, infelizmente parece que não adiantou postar aqui todo código porém dei uma estudada e cheguei a algumas conclusões:
1 - Quando tu ta aprendendo copia coisa sem entender, faz parte do processo mas te judia na hora de interpretar as coisas
2 - Existem no minimo dois metodos de fazer um layout de 3 colunas + topo e rodape. Eu utilizava um css pronto que organizava os box de esquerda centro e direito diferente do fluxo que eles estavam dispostos, o que era meio confuso pra quem nao entende direito. Alem disso eu tentava posicionar novos boxes na mesma coluna (ou esquerda ou centro ou direita) colocando o codigo abaixo dela.
3 - Bastou eu entender melhor o tutorial que usa float para criar o layout de 3 colunas, e adicionar novas DIVS dentro das divs que definiam as 3 colunas. http://forum.imasters.com.br/index.php?/topic/222275-layout-fixo-3-colunas/
4 - Resolvido isso, consegui posicionar cada box exatamente na coluna desejada toda vez... e criei uma segunda div rodape para que eu pusesse posicionar o contador de visitas (aceito outras sugestões) com {clear:both; float: right;}
5 - Como não sei muito sobre IE Hacks aceito sugestões...
6 - Eu estava tendo problemas com contador orientado ao rodape e fiz do jeito que podem ver, criei um rodape e coloquei a div dentro dele... com clear:both
URL: www.antiqua.rugby.esp.br
CSS:
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center;background-image: url(grama.jpg);background-repeat: repeat;}
div#header{background-color:#F3F2ED; background-image: url(banner.jpg); width:900px; height:124px; margin-top: 5px;}
div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}
div#navigation {background:#000000;width:175px;margin-top: 20px; float:left; }
div#extras{width:210px;float:right;}
div#footer{clear:both;width:100%;}
div#content{float:left; width: 500px;margin-top: 20px;}
div#contador{float:right;margin-bottom: 10px; background-color: black;}
div#conteudo {color:#FFFFFF; background-color:#2F2F2F; padding: 8px 15px;}
div#alerta{border-style:solid;border-color:#2F2F2F;width:150px; margin-left: 10px; padding-bottom: 10px}
div#container{text-align:left; width:900px;margin:0 auto; background-color: #000000}
div#link {color:#FFFFFF;width:200px; margin-top: 20px; margin-right: 20px; padding: 20px 0px 10px 0px;}
div#previsao{margin-top: 30px}
div#rodape{background:#474747; clear:both;}
div#contador{float:right;margin-bottom: 10px; background-color: black;}
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Antiqua Rugby - O primeiro time de rugby do Sul do RS</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navigation">
<div id="menu">
<ul>
<li><a href="link proxima pagina"> </a></li>
</ul>
</div>
<div id="alerta">
</div>
<div id="previsao" class="center">
</div>
</div>
<div id="content">
<div id="conteudo">
CONTEUDO AQUI
</div>
</div>
<div id="extras">
<div id="link">
<h2>Links Úteis</h2>
<ul>
<li class="center"><a href="[http://www.irb.com/"](http://www.irb.com/) target="_blank">International Rugby Board</a></li>
</ul>
</div>
<div id="anuncio">
</div>
</div>
<div id="footer">
<div id="contador">
</div>
<div id="rodape">
</div>
</div>
</div>
</body>
não é bem assim não...
primeiro, tente entender a diferença entre relative e absolute
http://www.cssnolanche.com.br/diferenca-entre-position-static-relative-absolute-e-fixed/
e depois, pense se é necessário usar position na tua situação.