Ir para conteúdo

POWERED BY:

Arquivado

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

McrOnline

Pequenos espaços indesejados na DIV

Por , em Desenvolvimento frontend

Recommended Posts

McrOnline    0

McrOnline
Postado

Estou criando as divs e colocando imagens que fazer parte do topo do meu site. acontece que o no IE (no FireFox não acontece), estão aparecendo pequenos espaçamentos abaixo da imagens.

 

ai vai o html e css:

 

body{	text-align:center;	background:#FFF;	font-family:verdana,arial,helvetica,sans-serif;	font-size:80%;	margin:0px;	padding:0px;	height:100%;	width:100%;}#principal{	width:778px;	height:100%;	text-align:center;	vertical-align:top;	margin:0 auto;}<body>				<div id="principal">		<div style="width:85px; height:62px; float:left;"><img src="images/topo_1.jpg" /></div>		<div style="width:460px; height:62px; float:left;"><img src="images/banner_topo.jpg" /></div>		<div style="width:41px; height:62px; float:left;"><img src="images/topo_2.jpg" /></div>		<div style="width:192px; height:62px; float:left;">				<div style="height:37px; padding:0px;"><img src="images/topo_3.jpg" /></div>				<div style="height:25px; padding:0px;"><img src="images/atendimento_status.jpg" /></div>		</div>	</div></body>

obrigado pela atenção

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado 

<div id="principal">		<div style="width:85px; height:62px; float:left;"><img src="images/topo_1.jpg" /></div>		<div style="width:460px; height:62px; float:left;"><img src="images/banner_topo.jpg" /></div>		<div style="width:41px; height:62px; float:left;"><img src="images/topo_2.jpg" /></div>		<div style="width:192px; height:62px; float:left;">				<div style="height:37px; padding:0px;"><img src="images/topo_3.jpg" /></div>				<div style="height:25px; padding:0px;"><img src="images/atendimento_status.jpg" /></div>		</div>	</div>
Não entendi pq tanta div nesse trecho de código, o que você pretende fazer? Um menu?

 

McrOnline, recomendo a você estudar mais as css antes de aplica-las.

O link a seguir ensina muito bem, basta tirar um tempo para ler.

CSS Link Collection

 

Estude. Se mais dúvidas surgirem ai posta aqui novamente.

 

[]´s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Meu caro McrOnline, estava analisando seu código, mas estava meio sem tempo e não pûde concluir... Mas só 1 pergunta: pq você resolveu fatiar esta imagem? O total dela não ultrapassa 24 Kb! Na minha opinião, não é o caso de fatiamento... Além do q, acredito q dá pra diminuir ainda mais esse tamanho sem perder qualidade...

 

Bom, eu acho isso, não é necessário fatiar... Td bem q problemas aparecem e devem ser resolvidos, mas esse caso aki não é uma situação "normal", como o próprio gio! disse, pra q tanta div? Pra fatiar a imagem sem usar tabelas? A idéia, se for essa, sim, é boa, mas está de maneira imprópria... Tenta ver se melhora o código... Ok? Um abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

McrOnline    0

McrOnline
Postado

Meu caro McrOnline, estava analisando seu código, mas estava meio sem tempo e não pûde concluir... Mas só 1 pergunta: pq você resolveu fatiar esta imagem? O total dela não ultrapassa 24 Kb! Na minha opinião, não é o caso de fatiamento... Além do q, acredito q dá pra diminuir ainda mais esse tamanho sem perder qualidade...

 

Bom, eu acho isso, não é necessário fatiar... Td bem q problemas aparecem e devem ser resolvidos, mas esse caso aki não é uma situação "normal", como o próprio gio! disse, pra q tanta div? Pra fatiar a imagem sem usar tabelas? A idéia, se for essa, sim, é boa, mas está de maneira imprópria... Tenta ver se melhora o código... Ok? Um abraço!

amigo Paulo, O fatiamento é necessario pois existe um banner ao centro, que será alterado dinamicamente, e ao lado direito há também a área onde será exibida o status do atendimento online, que será alterado a todo momento. Eu poderia pegar a imagem inteira, e colocar o banner e os Status do atendimento por cima, mas a imagem ficaria maior do que o necessário.

Quanto a dispoção das Divs, essa foi exatamente minha dúvida, após a resposta do Gio. Como estou começando com Tableless, talvez eu esteja com a idéia errada da construção, por isso se fosse possivel me ajudar fazendo uma versão que vocês acham mais adequada apenas desse topo, para que eu tenha uma idéia melhor de qual o melhor jeito de se fazer.

 

agradeço a atenção

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poe    0

Poe
Postado

Bem, só pra resolver esses divs aí:

 

Se você PRECISA MESMO fatiar, então você resolver assim:

 

<div id="principal"><img src="images/topo_1.jpg" /><img src="images/banner_topo.jpg" /><img src="images/topo_2.jpg" /><img src="images/topo_3.jpg" /><img src="images/atendimento_status.jpg" /></div>

 

Assim mesmo, sem espaço entre as tags, porque isso vai criar espaços em brancos nos IE (sim, ele dá pau e interpreta espaço em branco no código como espaço na visualização).

 

Então, você parte para o CSS:

 

#principal img {  width: 150px /* onde o 150 é o valor correspondente ao tamanho horizontal das suas imagens */  float: left;}
E tem outros erros nos seu código: você não atribuiu atributos ALT e nem mesmo de WIDTH ou HEIGHT, obrigatórios em XHTML Transitional e Strict.

 

Agora, os outros conselhos aí do Paulo são essenciais, viu? Eu acho que você resolveria esse seu layout muito bem com uma divisao de topo, corpo e rodapé. No topo você usaria a imagem do banner principal, os grafismos como fundo e a inserção do banner lateral acima do conteúdo, talvez usando z-index + position:absolute, tal qual coloquei em um site que fiz pra mim por esses dias.

Compartilhar este post

Link para o post
Compartilhar em outros sites

McrOnline    0

McrOnline
Postado

mas enfim, tem como tirar esses espaços que estão aparecendo abaixo das divs no IE? (Essa era meu problema de inicio) :)

 

percebam que eu ja coloquei 

*{ margin: 0; padding:0; }

mas nao funcionou...

 

obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poe    0

Poe
Postado

Se você construir seu código de outro jeito vai ser MUITO mais fácil.

 

Você só vai usar uma UMA imagem dentro do seu div e o resto vai ser background ou elemento externo.

 

O espaçamento acontece por conta do tamanho inexato das imagens.

 

A melhor estrutura que você usa para esse topo é assim:

 

<div id="principal">
 <div id="topo">
   <a href="url" class="banner"><img src="url da img" width="00" height="00" alt="texto de descrição alternativa"></a>
   <h1>Atendimento instantâneo</h1>
   <p>Aviso se o corretor está online ou não.</p>
   <p>Clique para falar com ele agora.</p>
 </div>
</div>

 

Toda a formatação da sua barra entrará aqui.

 

Parece difícil mas não é.

 

Você vai trabalhar separando os fundos do layer e atribuindo espaçamento.

 

Seu CSS, completando o que você já inseriu, ficaria algo parecido com:

 

#topo {  width: 780px /* aqui você insere o tamanho horizontal do seu documento */  height: 150px /* aqui você insere o tamanho vertical/altura do seu topo */  background: (url da imagem) no-repeat #ffffff; /* coloque a imagem de fundo do seu topo, com a cor correta */  float: left;}#topo .banner {  width: 480px; /* aqui você insere tamanho do seu banner */  margin: 0 0 0 40px; /* aqui entra o espaço que ele tem da lateral esquerda do seu site */  float: left;}#topo h1 {  width: 100px;  background: (url da imagem) no-repeat #ffffff; /* coloque a imagem de fundo do box título, com a cor correta */  float: left;}#topo p { width: 100px; background: (url da imagem) no-repeat #ffffff; /* coloque a imagem de fundo do box título, com a cor correta */ float: left;}#topo .encerra { width: 100px; background: (url da imagem) no-repeat #ffffff; /* coloque a imagem de fundo do box título, com a cor correta */ float: left;}
Insira o DIV externo, através da TAG link (entre a tag title e o final da head):

 

<link href="url do css e nome do arquivo" rel="stylesheet" type="text/css" />

 

Dei a ti o caminho dos barcos e mostrei como pescar, agora, é contigo! :D

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito