Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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.

Compartilhar este post


Link para o post
Compartilhar em outros 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?

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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...

Compartilhar este post


Link para o post
Compartilhar em outros 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!

Compartilhar este post


Link para o post
Compartilhar em outros 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%.

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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?

Compartilhar este post


Link para o post
Compartilhar em outros 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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.