Espaçamento horizontal entre imagens dentro das tags <li>

[Matheus Morais 0]

Olá pessoal, boa tarde!

 

Estou com um pequeno problema, ver código abaixo e/ou link para exemplo:

 

   <nav id="menu">
       <ul>
           <li><a href="a-empresa.php" title="A Empresa"><img src="images/menu/a-empresa.png" width="72" height="22" alt="A Empresa" /></a></li>
    <li><a href="produtos.php" title="Produtos"><img src="images/menu/produtos.png" width="71" height="22" alt="Produtos" /></a></li>
    <li><a href="servicos.php" title="Serviços"><img src="images/menu/servicos.png" width="65" height="22" alt="Serviços" /></a></li>
    <li><a href="fornecedores.php" title="Fornecedores"><img src="images/menu/fornecedores.png" width="93" height="22" alt="Fornecedores" /></a></li>
    <li><a href="localizacao.php" title="Localização"><img src="images/menu/localizacao.png" width="88" height="22" alt="Localização" /></a></li>
    <li><a href="contatos.php" title="Contatos"><img src="images/menu/contatos.png" width="67" height="22" alt="Contatos" /></a></li>
       </ul>
   </nav>

:seta: Ver Exemplo #1 (Cada <li> em uma linha)

 

No exemplo acima, se deixarmos um item <li> por linha, na exibição nos navegadores fica um espaço horizontal entre eles, quebrando a estrutura visual.

 

Mas se juntar todos em somente uma linha esse espaço some como no exemplo abaixo:

 

   <nav id="menu">
       <ul>
           <li><a href="a-empresa.php" title="A Empresa"><img src="images/menu/a-empresa.png" width="72" height="22" alt="A Empresa" /></a></li><li><a href="produtos.php" title="Produtos"><img src="images/menu/produtos.png" width="71" height="22" alt="Produtos" /></a></li><li><a href="servicos.php" title="Serviços"><img src="images/menu/servicos.png" width="65" height="22" alt="Serviços" /></a></li><li><a href="fornecedores.php" title="Fornecedores"><img src="images/menu/fornecedores.png" width="93" height="22" alt="Fornecedores" /></a></li><li><a href="localizacao.php" title="Localização"><img src="images/menu/localizacao.png" width="88" height="22" alt="Localização" /></a></li><li><a href="contatos.php" title="Contatos"><img src="images/menu/contatos.png" width="67" height="22" alt="Contatos" /></a></li>
       </ul>
   </nav>

:seta: Ver Exemplo #2 (Todos <li> em uma única linha)

 

Alguem tem uma solução para isso?

 

Obrigado desde já.

[William Bruno 1501]

salve o documento em UTF8 SEM BOM

[Matheus Morais 0]

salve o documento em UTF8 SEM BOM

Não entendi.

Como assim em "UTF8 SEM BOM"?

 

Andei pesquisando e ví que "BOM" é um código de caractere no início do fluxo de dados do documento unicode.

 

:!: No Dreamweaver já esta desativado a opção "Include Unicode Signature (BOM)".

[Nino Giovanny 0]

faz assim... no seu css:

 

#menu ul li { 	float: left; }

 

deve resolver...

[Nícolas 4]

faz assim... no seu css:

 

#menu ul li { 	float: left; }

 

deve resolver...

 

Cara vê os exemplos dele, não tem nada haver com float.

 

Matheus, qual a vantagem de fazer isso?

 

Deixar tudo em uma única linha embora seja a mesma idéia visual do design é muito mais chato para dar manunteção.

 

Se fosse você deixava embaixo, não influência em nada para o visitante e a manutenção ganha outro nível.

 

Exemplo.

 

No fórum mesmo simule que você vai mudar a extensão da imagens fornecedores.png para fornecedores.jpg e mudar as dimensões da imagem, vê em qual das duas formas você acha essas informações mais rápido.

 

E depois imagina isso em um código muito mais robusto.

 

É só uma dica

;)

[Evandro Oliveira 331]

Certifique-se que seu editor faça as tabulações como tabulações e não espaçamentos.

 

Opte, também, por salvar as quebras de linha como caracteres UNIX.

 

O Windows faz as quebras de linha com a dobradinha \n\r (nova linha + retorno de carro)

 

O Linux faz as quebras como \n (nova linha)

 

O Mac, apesar de ser Unix, faz quebras como \r mas aceita \n como quebra.

 

Em editores fracos, a edição dos arquivos com quebra Unix em Windows pode ficar um pouco estranha, mas até mesmo o WordPad já processa esta quebra normalmente, mesmo que não a escreva.

 

Veja que o navegador processa o caractere [espaço] \s, caso contrário seria necessário 'escrever sempre assim ' (escrever sempre assim). Por este motivo, a marcação formatada renderiza de um jeito e a marcação em linha renderiza de outro.

 

Os caracteres nova linha (\n) e tabulação (\t) são lidos, mas não são renderizados pelos navegadores, gerando uma marcação bem organizada sem afetar o leiaute.

[Matheus Morais 0]

Pessoal, resolví por parte digamos assim.

 

Com a dica do "Nino Giovanny", adicionando "float:left;" no seletor combinado "#menu ul li".

Porém, perco o alinhamento centralizado das imagens de <nav></nav>.

 

Então adicionei "padding-left:8px;" em "#menu ul", para forçar e deixar as imagens centralizadas.

 

:seta: Ver Exemplo #3 (Cada <li> em uma linha) *CSS modificado

 

 

Certifique-se que seu editor faça as tabulações como tabulações e não espaçamentos.

[...]

Certo. Mas como posso me certificar disso?

 

 

:!: Gostaria de pedir aos moderadores que não encerrem o tópico e deixem ver, se o pessoal descobre algum método mais formal se possível.

 

Obrigado a todos pela colaboração até agora.

[Evandro Oliveira 331]

Certo. Mas como posso me certificar disso?

 

Cada editor tem seu caminho. Normalmente é algo similar a:

 

Editar > Preferências > Editor > Tabulação > 'Definir tabulação como' = [ 1 ] [ TAB ]

 

Para verificar, basta navegar com as teclas direcionais pelo recuo no início de cada linha e ver se o cursor pula de espaços em espaços ou se você tem que percorrer um a um.

 

Nota: Para o efeito de menu desejado, definitivamente posicionar os elementos com float: left é a melhor solução. Se estava fazendo como display: inline, este também pode ser um dos motivos.

 

Para mais soluções de menu, verifique nosso tópico específico sobre o assunto.