Espaçamento entre uma div e outra.

[Leon Santiago 0]

Boa tarde, pessoal!

 

Estou iniciando no CSS e tentando montar um layout válido (sintaxe e semântica) para ser padrão em um site.

 

cheguei aqui, é bem próximo do que eu preciso:

 

http://www.leooon.org/ia/estrutura/

 

embora eu ache que quando começar a "povoar" vai dar mais alguns pauzinhos...

 

Desde o começo do aprendizado (começei zeradinho hehe) o arquivo do fórum já me ajudou muito, mas tem um detalhezinho que realmente não consigo corrigir com as sugestões dadas em outros tópicos, então resolvi perguntar.

 

O topo é uma div com uma imagem dentro. A imagem de teste é esse retangulo bege feioso, e a div usa uma class com background azul (apenas para melhor visualização). No firefox, entre a div em que está a imagem e as divs das colunas existe um espaçamento que eu preciso corrigir.

 

Notem que esse espaçamento só aparece no FF, o IE mostra corretamente E que eu não posso usar uma altura fixa, pois a imagem será inserida dinâmicamente e elas possuem altura (não largura) variada.

 

Se algum puder me ajudar, agradeço bastante! ;D

[brcontainer 16]

essa faixa azul não aparece no IE porque não há "conteudo" dentro da sua DIV

o que você quer fazer relamente?

[Leon Santiago 0]

Bom, exatamente...

o que eu preciso é que a DIV que tem a imagem (a class topo) fique exatamente do tamanho da imagem (seu conteúdo), grudando nas colunas abaixo.

 

Esse espaçinho de alguns pixels entre o topo e as colunas me atrapalha e eu não entendo porque ele existe.

 

Valeu! ;D

[cassiano óliver 1]

tira o clear: both; da div.topo

[Leon Santiago 0]

Olá, pessoal!

Obrigado pelas dicas mas ainda não resolvi o problema. ;D

 

Eu tirei o "clear: both;" e apesar de eu não saber o que ele fazia ali, não mudou nada no final.

Quanto ao comentário do SilverFox, na verdade dentro da DIV está a imagem propiamente dita, a faixa azul é o espaçamento que eu quero eliminar.

 

Bom, eu fuçei e pesquisei mais um pouco e descrobri que a faixa só aparece na declaração STRICT, que é a que eu quero usar. Na TRANSITIONAL a faixa some, mesmo no Firefox e no Opera. Será que não existe um jeito de fazer o STRICT retirar essa faixa? É uma limitação do padrão?

[donato 0]

seu site está fora do ar

[Maujor 144]

Declare:

 

.topo img {display:block;}

[Leon Santiago 0]

Olá, Maujor (e pessoal)!

Sua dica funcionou realmente, vou pesquisar mais sobre "display", obrigado!

 

ps. não entendi porque declarar o display no ".topo img" funciona e declarar do ".topo" não... a imagem não está dentro da div?

[Guilherme Rambo 4]

@Leon: Mas o elemento que precisa se comportar como bloco é a imagem, não a div.

Os atributos são herdados, mas não dessa forma http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif

 

Dê uma estudada nisso http://forum.imasters.com.br/public/style_emoticons/default/natal_happy.gif

 

[]'s

[Leon Santiago 0]

Certeza, estou estudando mais. Não sabia que algumas coisas não herdavam! ;D

 

Continuando o assunto... depois que consegui tirar o espaçamento do topo, tentei declarar as imagens da minha lista como "block" também, pois elas também estão com o espaçamento padrão. Mas, como era de se esperar elas entraram todas umas em baixo das outras, mesmo as que estão no mesmo item da lista (e precisam ficar juntas).

 

Mudei o código então, pensando na seguinte lógica:

 

Declarar cada item da lista como "block" para retirar o espaço e as imagens dentro de cada item como "inline", para ficarem lado a lado. Mas o "block" no item da lista não retirou o espaço.

 

Agora travei... não peguei a idéia de como tirar o espaçamento que as imagens estão pondo entre cada item da lista.

 

Alguma sugestão? ;D

[Guilherme Rambo 4]

Para fazer uma galeria por exemplo, a marcação seria mais ou menos assim:

[url="http-~~-//december.com/html/4/element/ul.html"]<ul>[/url]
[url="http-~~-//december.com/html/4/element/li.html"]<li>[/url][url="http-~~-//december.com/html/4/element/a.html"]<a[/url] href="...">[url="http-~~-//december.com/html/4/element/img.html"]<img[/url] src="..." alt="..."></a></li>
[url="http-~~-//december.com/html/4/element/li.html"]<li>[/url][url="http-~~-//december.com/html/4/element/a.html"]<a[/url] href="...">[url="http-~~-//december.com/html/4/element/img.html"]<img[/url] src="..." alt="..."></a></li>
[url="http-~~-//december.com/html/4/element/li.html"]<li>[/url][url="http-~~-//december.com/html/4/element/a.html"]<a[/url] href="...">[url="http-~~-//december.com/html/4/element/img.html"]<img[/url] src="..." alt="..."></a></li>
[url="http-~~-//december.com/html/4/element/li.html"]<li>[/url][url="http-~~-//december.com/html/4/element/a.html"]<a[/url] href="...">[url="http-~~-//december.com/html/4/element/img.html"]<img[/url] src="..." alt="..."></a></li>
</ul>

 

E a formatação:

ul li {
float:left;
}

[]'s

[Leon Santiago 0]

Atualizei o html com a sua sugestão, #INSIDE#, mas o espaçamento continua:

 

http://www.leooon.org/ia/estrutura/

 

Não entendo como tirar esse espaçamento entre os <li>

[Kikitten 0]

Cuidado quando zerar isso tudo ai... o Maujor falou em um tópico sobre o hr... pois com border: 0 esse elemento não aparece. Eu so coloco border: 0 para img

[Guilherme Rambo 4]

SEMPRE, eu disse SEMPRE, coloque isso no seu CSS:

 

* {
margin:0;
padding:0;
list-style:none;
}

[]'s

[Leon Santiago 0]

#INSIDE#, o CSS da página já estava assim:

 

*{
margin: 0px;
border: 0px;
padding: 0px;
list-style: none;
font-weight: normal;
text-decoration: none;
}

Mas agora eu pus exatamente do seu modo, mas repare como os espaços entre as <li> estão firmes e fortes hehe