Ir para conteúdo

POWERED BY:

Arquivado

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

Amilton Aquino

Conciliar menus com CSS e a identação das listas

Por , em Desenvolvimento frontend

Recommended Posts

Amilton Aquino    0

Amilton Aquino
Postado

Para que os menus CSS feitos com listas funcionem corretamente, precisamos zerar a margem e o padding das listas. Isto, no entanto, cria um problema, pois nos textos, as identações não aparecem (nem os bullets). Tentei fazer uma classe para as listas, mas não funcionou. Alguém sabe como resolver este problema?Abraço,Amilton

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Não entendi o seu problema, menus com listas não têm complicação nenhuma ;)

 

[]'s http://forum.imasters.com.br/public/style_emoticons/default/natal_noel.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Amilton Aquino    0

Amilton Aquino
Postado

Vamos ver se consigo me fazer entender.Para aplicar estilos CSS em uma lista em transforma-la em um menu, precisamos zerar o padding e a margem das listas. Aliás, quem trabalha com CSS normalmente zera as tags principais para ter um total domínio sobre as tags, evitando assim que o browser utilize suas configurações default. Algo mais ou menos assim:/* CSS Reset */body, h1, h2, h3, h4, h5, h6, form, div, span, dl, ul, ol,li, p, address,a { margin:0; padding:0; }Este código zera a identação das listas, permitindo, por exemplo, que um menu seja alinhado precisamente na posição top=0 e left=0. No entanto, cria um problema no corpo dos textos, pois as indentações das listas (neste caso desejáveis) não aparecem. A questão é como fazer com que a identação apareça nos textos. Alguém sabe como?Abraço,Amilton Aquino

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Eu já intendi, olha, no caso coloque manualmente o margin e padding na sua lista que não for um menu

 

[]'s http://forum.imasters.com.br/public/style_emoticons/default/natal_noel.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Amilton Aquino    0

Amilton Aquino
Postado

Olá Inside,Apliquei um estilo especificamente na lista, mas também não funcionou. Segue o teste que fiz:<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css"><!--body, h1, h2, h3, h4, h5, h6, form, div, span, dl, ul, ol,li, p, address,a { margin:0; padding:0; }ul.estilo { list-style-type: square; margin:5; padding:5; font-weight: bolder;}--></style></head><body><ul class="estilo"> <li>sdsdsds</li> <li>sadsadasd </li> <li>dffgdsfgf</li> <li>fdgfdgdfg</li></ul></body></html>Abraço,Amilton

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Amigo, primeiramente, pra zerar tudo faça assim:

* {margin:0;padding:0;}
E se naum me engano o margin/padding deve ser colocado no li, e não no ul ;)

 

[]'s http://forum.imasters.com.br/public/style_emoticons/default/natal_noel.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Amilton Aquino    0

Amilton Aquino
Postado

Olá Inside,Infelizmente não resolveu o problema, mesmo colocando o estilo apenas no <li>. Segue meu último teste:<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css"><!--* {margin:0;padding:0;}li.estilo {list-style-type: square;margin:5;padding:5;font-weight: bolder;}--></style></head><body><ul> <li class="estilo">sdsdsds</li> <li class="estilo">sadsadasd </li> <li class="estilo">dffgdsfgf</li> <li class="estilo">fdgfdgdfg</li> <li class="estilo"></li></ul></body></html>

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