organizar DIVs no html

[logan_pa 0]

GALERIA DE FOTOS USANDO FLOAT:RIGHT

[micox 2]

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.

[logan_pa 0]

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?

[micox 2]

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.

[logan_pa 0]

Obtei pela solução

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

VEJA COMO FICOUTb dei uma organizada no código.

[micox 2]

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

[logan_pa 0]

sim, lado a lado...você testou no mozilla?

[estevao_lucas 0]

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

[micox 2]

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...

[logan_pa 0]

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!

[micox 2]

É 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%.

[estevao_lucas 0]

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

[micox 2]

hehe. diboas...

[logan_pa 0]

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

[micox 2]

Pode ser culpa do padding do h4. tenta trocar por margin, sei lá...

[logan_pa 0]

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.

[micox 2]

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.

[Hunter_ 0]

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

[micox 2]

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?

[logan_pa 0]

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?