• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

psiico

Retirar avanço de lista.

21 mensagens neste tópico

Boas,

eu tenho uma lista de bullets, com um estilo associado,mas queria que a lista ficasse alinhada com o resto do texto em vez de dar aquele avanço, há alguma maneira em CSS?

o estilo associado á lista é este:

.par_row {
list-style:none;
list-style-type:none;
background-image: url(images/par_row.png);
background-repeat:repeat-x;
padding-top: 5px;
padding-left: 15px;
color:#bebebe;
font-family:Segoe UI, Arial;
font-size:10px;
}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

ja tentei,mas o texto tem q levar padding-left se nao fica por cima da imagem q tá no fundo.

se nao der etnho q arranjar outra maneira, divs ou <p>'s

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Eu faria assim:

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

<p>Teste com texto superior.</p>
<ul>
<li>Teste 1</li>
<li>Teste 2</li>
<li>Teste 3</li>
</ul>

Testado no FF, Opera e IE.

Faz mais sentido fazer o alinhamento no ul do que no li.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Lugh obrigado, funciona mesmo como eu equacionei :) Sim muito mais sentido,nem me tinha lembrado disso, lol.

surgiu outro problema q foi, a lista ta bem, mas o texto nao, fica mt em cima, como nesta imagem:

18058120zr9.jpg

Mas tento por padding-top e ela fica assim:

20737341xe3.jpg

O HTML está desta forma:

<p class="menuheader">NewsFeed</p>
          <ul class="ul_menu">
            <li class="impar_row"><a href="#">Teste</a></li>
            <li class="par_row"><a href="#">TEste</a></li>
            <li class="impar_row">adas</li>
            <li class="par_row">asdasd</li>
            <li class="impar_row">asdsad</li>
            <li class="par_row">asdas</li>
          </ul>

.menuheader {
background-image: url(images/headermenu.png);
background-repeat:repeat-x;
padding: 5px;
margin:0;
color:#000000;
font-family:Segoe UI, Arial;
font-weight:bold;
}
.impar_row {
height: 22px;
width:304;
list-style:none;
list-style-type:none;
background-image: url(images/impar_row.png);
background-repeat:repeat-x;
padding-top:5px;
padding-left: 15px;
color:#bebebe;
font-family:Segoe UI, Arial;
font-size:10px;
}

.par_row {
height: 20px;
width:302 px;
list-style:none;
list-style-type:none;
background-image: url(images/par_row.png);
background-repeat:repeat-x;
padding-top:4px;
padding-left: 15px;
color:#bebebe;
font-family:Segoe UI, Arial;
font-size:10px;
}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ei psiico, se quiseres organizar melhor o teu css, podes juntar a formatação das rows numa só classe e fazer uma classe específica para rows pares e outra para rows impares. Cada elemento do HTML pode pertencer a mais que uma classe.

No HTML seguinte repara que as classes estão separadas por espaços:

<p class="menuheader">NewsFeed</p>
          <ul class="ul_menu">
            <li class="impar row"><a href="#">Teste</a></li>
            <li class="par row"><a href="#">TEste</a></li>

No CSS isolei tudo o que estava repetido em impar_row e par_row para a classe row ...

... e mantive os detalhes específicos para cada linha par ou impar

.row {
list-style:none;
list-style-type:none;
background-repeat:repeat-x;
padding-left: 15px;
color:#bebebe;
font-family:Segoe UI, Arial;
font-size:10px;
}

.impar {
height: 22px;
width:304;
background-image: url(images/impar_row.png);
padding-top:5px;
}

.par {
height: 20px;
width:302 px;
background-image: url(images/par_row.png);
padding-top:4px;
}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Obrigado pela organização, fica bem mais simples,mas o problema continua na mesma (mt em cima e o padding top n resolve ):S

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Cria uma class para o topelement e dá-lhe padding-top.

PS: Gosto bastante da webdeveloper bar que apresentaram.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

<ul><li class="firstRow">asdfasf</li><li>asdasda</li></ul>

li.firstRow { padding-top:20px; }

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Metes aquilo num .html e abres :)

Sem a imagem, torna-se complicado :D
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora