Ir para conteúdo

POWERED BY:

Arquivado

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

CappiLevi

[Resolvido] Lista não fica sem espaçamento entre itens

Por , em Desenvolvimento frontend

Recommended Posts

CappiLevi    1

CappiLevi
Postado

Olá pessoal! Por acaso estou com o mesmo problema e ainda não consegui tirar os malditos espaços entre os elementos <li>. Tenho o elemento <ul> com padding e margin zerados, list-style: none, border zerados... não sei mais o que fazer... http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

 

O código:

 

<html>
<head>
<style>
font 
{
  color:       #000000;
  font-family: Verdana;
  font-size:   10px;
  text-decoration: none;
}

ul,li
{
  padding: 0px; 
  margin: 0px; 
  list-style: none;
}
</style>
</head>
<body>
<ul>
<li><font>Teste</font></li>
<li><font>Teste</font></li>
</ul>
</body>
</html>

O resultado:

 

Teste

 

Teste

 

O resultado pretendido:

 

Teste

Teste

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dee    0

Dee
Postado

Como está seu código ?

O MENU e o CSS do MENU somente. =)

 

PS: você poderia ter criado ou criar outro tópico.

Compartilhar este post

Link para o post
Compartilhar em outros sites

CappiLevi    1

CappiLevi
Postado

Como está seu código ?

O MENU e o CSS do MENU somente. =)

 

PS: você poderia ter criado ou criar outro tópico.

 

Criar outro tópico? Mas o que mais recomendam aqui no fórum é que não criem novos tópicos se já existirem tópicos relacionados... e pelo que reparei nas mensagens acima, o assunto não foi resolvido. <_<

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

tags <font> não existem mais, envolva em <spans> estilizados.

 

declare um doctype

 

resete as margens e espaçamentos a nível global, como já foi sugerido aqui

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dee    0

Dee
Postado

 

Como está seu código ?

O MENU e o CSS do MENU somente. =)

 

PS: você poderia ter criado ou criar outro tópico.

 

Criar outro tópico? Mas o que mais recomendam aqui no fórum é que não criem novos tópicos se já existirem tópicos relacionados... e pelo que reparei nas mensagens acima, o assunto não foi resolvido. <_<

 

É que o baguio é de 2007 =)

 

Mas enfim, no meu foi normal:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
span
{
  color:       #000000;
  font-family: Verdana;
  font-size:   10px;
  text-decoration: none;
}

ul#menu li
{
  padding: 0px; 
  margin: 0px; 
  list-style: none;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<ul id='menu'>
<li><span>Teste</span></li>
<li><span>Teste</span></li>
</ul>
</body>
</html>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

CappiLevi    1

CappiLevi
Postado

tags <font> não existem mais, envolva em <spans> estilizados.

 

declare um doctype

 

resete as margens e espaçamentos a nível global, como já foi sugerido aqui

 

Tags <font> não existem mais? Aonde foi que você leu sobre isso? É que eu utilizo tags <font> a anos e nunca tive problemas com elas. Também conheço as tags <span>, mas deu o mesmo resultado. Se puder me explicar a diferença da tag <span> e <font> eu agredecia. Em relação ao doctype, ainda não tive tempo para apreder esta tecnologia, apesar de saber do que se trata. Mas para a resolução do problema acima não vejo motivos para utilizar técnicas tão avançadas...

 

 

 

Como está seu código ?

O MENU e o CSS do MENU somente. =)

 

PS: você poderia ter criado ou criar outro tópico.

 

Criar outro tópico? Mas o que mais recomendam aqui no fórum é que não criem novos tópicos se já existirem tópicos relacionados... e pelo que reparei nas mensagens acima, o assunto não foi resolvido. <_<

 

É que o baguio é de 2007 =)

 

Mas enfim, no meu foi normal:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
span
{
  color:       #000000;
  font-family: Verdana;
  font-size:   10px;
  text-decoration: none;
}

ul#menu li
{
  padding: 0px; 
  margin: 0px; 
  list-style: none;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<ul id='menu'>
<li><span>Teste</span></li>
<li><span>Teste</span></li>
</ul>
</body>
</html>
</body>
</html>

Olha não deu certo... continua um espaçamento entre o primeiro Teste e o segundo Teste... http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif Só para deixar claro que há um espaçamento ainda, visto que você disse que no seu deu certo.

 

Se eu fizer assim:

 

<span>Teste</span><br>
<span>Teste</span>

Aí já não fica com espaçamento. Mas pretendo fazer isso com listas (<ul><li><li></ul>), só por uma questão de estudos mesmo...

 

Com listas fica com um espaçamento:

 

Teste

Teste

Estive vendo no site do Maujor, na parte das listas, que está sem espaçamentos...

 

http://maujor.com/tutorial/listtut.php

 

Não sei porque aqui fica com espaçamentos...

Compartilhar este post

Link para o post
Compartilhar em outros sites

CappiLevi    1

CappiLevi
Postado

Pessoal, está difícil... Tenho aqui 2 soluções que eu não queria utilizar, mas não vejo outra alternativa.

 

O CSS tem uma propriedade que trabalha com o espaçamento entre linhas, que serve tambem para as listas (<li>), que é o line-height

 

Resolução do problema com a propriedade line-height do CSS:

 

li
{
  line-height: 10px; // Pode ser menos que 10 pixels
}

ul
{
  padding: 0px; 
  margin: 0px; 
  list-style: none;
}

Só não esqueça de zerar as propriedades margin e padding da tag <ul>, como mostrei acima, para não deixar espaços a volta.

 

Depois é só utilizar normalente as listas no corpo da página:

 

<ul>
<li><span>Teste</span></li>
<li><span>Teste</span></li>
</ul>

Resolução do problema, sem utilizar listas, utilizando texto normal e a tag <br>:

 

<span>Teste</span><br>
<span>Teste</span>

Funciona... mas isso é como fazer trapaça. Afinal, as listas deixam sempre um espaço entre elas? Ao contrário de um texto normal sem listas?

 

Se for assim, vou opitar por não utilizar listas, visto que eu terei mais trabalho na formatação das mesmas bem como um código maior.

 

Evandro, obrigado pela dica em relação ao <span>, vou passar a utilizá-lo em vez da tag <font>. Mas depois se puder posta aqui a diferença entre elas por favor.

 

Vlw pessoal! E bons estudos! ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Tags <font> não existem mais? Aonde foi que você leu sobre isso?[1] É que eu utilizo tags <font> a anos e nunca tive problemas com elas.[2] Também conheço as tags <span>, mas deu o mesmo resultado. Se puder me explicar a diferença da tag <span> e <font> eu agredecia.[3] Em relação ao doctype, ainda não tive tempo para apreder esta tecnologia, apesar de saber do que se trata.[4] Mas para a resolução do problema acima não vejo motivos para utilizar técnicas tão avançadas...

 

[1] http://w3schools.com/tags/default.asp

 

[2] O nome disso é manutenção de compatibilidade. Já pensou se de uma hora pra outra, os milhares de WS não desenvolvidos segundo as standards parassem de funcionar?? (tudo bem que quem diagrama em standards ia ganhar rios de dinheiro, mas não vem ao caso)

 

[3] No link do item [1], tem a definição de cada tag. <FONT> era utilizada para

Deprecated. Defines font, color, and size for text

Definir a fonte, cor e tamanho para o texto. Isso vai contra boas normas e procedimentos standards onde separamos estrutura, apresentação e comportamento

(leitura alternativa).

Bom, já definimos <FONT> agora vamos definir <SPAN>

<span> é a prima inline da <div>. Marca uma divisão/sessão dentro da marcação, semanticamente, não tem valor algum, não é lida de forma diferente, não é processada de forma diferente e, a menos que você defina uma apresentação para ela, não é renderizada de forma diferente. Exatamente por isso que ela é utilizada para efetuar modificações em pequenos trechos de texto desde que não haja uma <tag> específica para isso

 

exemplinho ->

errado:

Esta é uma palavra em <span style="text-wheight: bold;">negrito</span>

 

certo:

Esta é uma palavra em <b>negrito</b>

 

certo:

Esta é uma palavra <span style="text-decoration: underline">sublinhada</span>

 

Aí você vem me dizer que existe uma tag <u> para a função de sublinhado. Pelo mesmo link do item [1], vemos que ela também "não existe mais".

 

[4] Não precisa aprender, não precisa sequer abrir um .DTD, evite ter pesadelos. Apenas declare o DOCTYPE de maneira adequada à exibição que você deseja.

Compartilhar este post

Link para o post
Compartilhar em outros sites

CappiLevi    1

CappiLevi
Postado

Bom pessoal, só para concluir... utilizem a propriedade line-height do CSS para tirarem o espaço entre as tags <li>. Eu utilizei abaixo 12px como valor só para exemplificar o uso dessa propriedade. Altere o valor como achar necessário, porque depende muito do tipo de formatação de texto que você esteja utilizando.

 

Eu havia dito para utilizarem esta propriedade na tag <li>, mas o melhor mesmo é utilizar na tag <ul>, porque assim abrange logo todas as <li>. Ao menos que você queira tirar o espaçamento apenas numa das <li>, aí sim você aplica o line-height numa das tags <li>...

 

Fica assim então:

 

<html>
<head>
  <style type="text/css">
  ul
  {
    padding: 0px; 
    margin: 0px; 
    list-style: none;
    line-height: 12px;
  }
  </style>
</head>
<body>
  <ul>
    <li>Menu 1<li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
</body>
</html>

Bom, é isso pessoal! Vlw! ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tatiana Tafur    1

Tatiana Tafur
Postado

Nossa, esse tópico me ajudou muito. Não sabia que podia utilizar o line-height para tirar os espaçamentos dos itens da lista (no meu caso, são imagens - como aqueles plugins sociais do facebook)...hihi

 

Brigada a todos que postaram...

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