Jump to content

Archived

This topic is now archived and is closed to further replies.

logan_pa

organizar DIVs no html

Recommended Posts

Afhh. foi malz. hehehIsso aí é simplao.Todo elemento que tiver com o float deve estar escrito ANTES no html.sua solução: ou coloque o float left nos outras notícias (já que no html ele tá antes do galeria de fotos)ou coloque o galeria de fotos ANTES do outras noticias no html.

Share this post


Link to post
Share on other sites

RESULTADO

 

Micox, coloquei um float:right em "galeria" e um float:left em "outras notícias". No IE ficou bom, no mozilla ele deu uma distância maior entre uma notícia e outra, e também não posicionou a DIV "Galeria".

Será que a teremos que apelar por um hack?

Share this post


Link to post
Share on other sites

coloquei um float:right em "galeria" e um float:left em "outras notícias".

naonaonao nao...

 

você tem que escolher entre UMA das soluções que eu dei.

ou coloque o float left nos outras notícias (já que no html ele tá antes do galeria de fotos)

ou coloque o galeria de fotos ANTES do outras noticias no html.

Share this post


Link to post
Share on other sites

Uai crins, pra mim aqui o 'galeria' ficou abaixo do 'outras noticias'. você não queria eles lado a lado?

Share this post


Link to post
Share on other sites

E awe Cris! beleza???aee.....me entrometendo, mas desculpa ai galera!!eu dei uma olhada no seu cod cris, e vi que lah q você fez uma div pra cada Outras Noticias, mas você naum agrupou todas as divs de outras noticias em uma soh, pra depois pedir pra dah um float:left!! entendeu??um exemplo<div id="outrasnoticias_geral">aki dentro fica todas as divs outras noticias</div>e lah no css você bota #outrasnoticias_geral { float:left; width:350px;}acho q isso iria resolver!flw

Share this post


Link to post
Share on other sites

aee.....me entrometendo, mas desculpa ai galera!!

Tem que dar pitaco aí mesmo uai... sinão eu não dou conta. heheh. Ce tava sumido.PS: Crins faz isso ae que o estevao falou...

Share this post


Link to post
Share on other sites
TA FICANDO BOM GALERA...-O box posicionou belza ao lado de "Outras Notícias". Fiz o que o estevão falou. Além disso deixei um float:right na div "galeria".Agora só o chato do mozilla esta desalinhando o background, repare no box galeria.

ee.....me entrometendo, mas desculpa ai galera!!Tem que dar pitaco aí mesmo uai... sinão eu não dou conta. heheh. Ce tava sumido.

Obrigado pela força galera!

Share this post


Link to post
Share on other sites

É só tirar a altura (height) da class galeria (pai).Antes, você tava precisando definir a altura pois os 'detalhes' tinham float .Como agora eles não tem mais float. Não precisa.PS.: Seu código tá ficando muito bom. Qd finalizar ele, não esquece de colocar o css em um arquivo css separado pra ficar 100%.

Share this post


Link to post
Share on other sites

tah ficando bom mesmo! muito bom! toh gostando desse esqueminha!mas sugiro uma coisa lah no galeria! tira a height que você especificou.....ficau um tamanho menor! dah uma olhada lah;ah.......outra!você tah botando muita coisa repetida no ceu css! lembra q eu falei sobre reciclar o css?? isso eh muito importante pra você.......economiza muito tempo cara! uma opniaum!ah micox! tava sumido mesmo!tava fazendo um freela! q por sinal....meu primeiro! e agora jah apareceu um outro! depois vou botar o link aki pra boterem avaliar ta ok?? e eu tmb to estudando pra Olimpiada Brasileira de Informatica!toh pensando se vou fazerkkkkkkkkkkkkkk!!flw a mesma coisa q eu!foi malz ai

Share this post


Link to post
Share on other sites

Galera, a div galeria ficou assim:

 

.galeria {width:310px; height:auto; margin: 10px; background-color:#E6F7FF; text-align:center; float:right;}
.

 

Dexei height:auto.

Meeeeesmo assim há um espaço "à toa" no background da galeria. Abram no mozilla e no IE. Depois comparem, notará a diferença.

 

COMPAREM NO MOZILLA

 

COMPAREM NO IE

Share this post


Link to post
Share on other sites

Usei margin:5px 0 10px 15px; no h4 e ficou do jeito que eu queria.

 

Na div galeria:

.galeria {width:310px; height:auto; margin: 10px; background-color:#E6F7FF; text-align:center; float:right;}
...esta dando diferença de posicionamento no mozilla. No IE ficou jóia.

 

PÁGINA

 

- Adicionei um menu (no topo) que também ficou desalinhado no mozilla.

Share this post


Link to post
Share on other sites

Ae crins, de acordo com nossa cabeça agente acaba achando que todos os elementos de um html deveriam ter, por padrão, sua margem e espaçamento igual a zero (margin e padding).

 

Porém, cada navegador, decidiu definir seus próprios valores padrão de margin e padding , diferentes para cada elemento.

Assim, o margin de um H (header) no IE é um no FF é outro, o padding de uma div no IE é um no FF é outro, etc...

 

Para corrigir este problema, a malandragem em geral usa o seguinte código no começo de seus css para evitar maiores problemas e poder definir tudo ao seu gosto:

* { padding: 0px; margin: 0px;}
Esta é a forma certa de se resolver seu problema (como consequencia, você terá que ajustar o margin e padding de todos seus outros elementos, porém não terá mais problemas futuros).

No seu caso basta fazer isto para poder aproveitar o código que você já colocou no seu body:

* , body { padding: 0px; margin: 0px; }

Outra forma (preguiçosa e não recomendada) de você resolver seu problema é ir na classe do h6 do ".outras" e definir o margin só dela.

 

PS.: Quando estiver tendo problemas de posicionamento, uma boa forma de descobrir a causa do problema, é colocar bordas coloridas nos elementos que tão dando problema. Assim fica mais fácil de ver quem é o causador do problema. Foi isso que eu fiz neste caso pra achar a solução.

Share this post


Link to post
Share on other sites

Sugestão, compilar (posso até fazer isso) esse tópico e lançar um artigo no imasters, muita gente veria várias coisas básicas intermediarias e avançadas de CSS, ainda teria um exemplo prático... sugestão http://forum.imasters.com.br/public/style_emoticons/default/devil.gif

 

[ ]'s

Share this post


Link to post
Share on other sites

Sugestão, compilar (posso até fazer isso) esse tópico e lançar um artigo no imasters, muita gente veria várias coisas básicas intermediarias e avançadas de CSS, ainda teria um exemplo prático... sugestão

Por mim, sugestão acatada. É só colocar meus nomes nos créditos tb. heheh :)A propósito, comé que manda um artigo pro imasters?

Share this post


Link to post
Share on other sites

Obrigado pelas dicas micox. Quanto ao disponibilizar um artigo sobre o assunto, achei interessante a idéia. Só acho justo deixar os créditos para o micox que deu a força nos tópicos.Pergunta: Depois de tornar um artigo, será possivel continuar os tópicos de discussão?

Share this post


Link to post
Share on other sites

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.