Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

psiico

Retirar avanço de lista.

Mensagens Recomendadas

psiico

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;
}

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
djthyrax

Tira o padding-left (i.e., muda o valor).


Não peças ajuda por PM! A tua dúvida vai ter menos atenção do que se for postada na secção correcta do fórum!

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
djthyrax

Aquele estilo tá aplicado ao ul ou ao li?


Não peças ajuda por PM! A tua dúvida vai ter menos atenção do que se for postada na secção correcta do fórum!

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
djthyrax

Mete padding-left negativo no ul.


Não peças ajuda por PM! A tua dúvida vai ter menos atenção do que se for postada na secção correcta do fórum!

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
lugh

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.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
psiico

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;
}

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
pmg

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;
}


What have you tried?

Não respondo a dúvidas por PM

A minha bola de cristal está para compor; deve ficar pronta para a semana.

Torna os teus tópicos mais atractivos e legíveis usando a tag CODE para colorir o código!

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
pmg

Já experimentaste a extensão Web Developer?

São diferentes nas funcionalidades para o Firefox ou para o Internet Explorer, mas ajudam bastante a acertar o CSS.

Firefox: https://addons.mozilla.org/en-US/firefox/addon/60

Internet Explorer: http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en


What have you tried?

Não respondo a dúvidas por PM

A minha bola de cristal está para compor; deve ficar pronta para a semana.

Torna os teus tópicos mais atractivos e legíveis usando a tag CODE para colorir o código!

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
pmg

Já agora, há outro extensão para o Firefox que eu gosto muito: o FireBug

https://addons.mozilla.org/en-US/firefox/addon/1843


What have you tried?

Não respondo a dúvidas por PM

A minha bola de cristal está para compor; deve ficar pronta para a semana.

Torna os teus tópicos mais atractivos e legíveis usando a tag CODE para colorir o código!

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
djthyrax

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

PS: Gosto bastante da webdeveloper bar que apresentaram.


Não peças ajuda por PM! A tua dúvida vai ter menos atenção do que se for postada na secção correcta do fórum!

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
djthyrax

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

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


Não peças ajuda por PM! A tua dúvida vai ter menos atenção do que se for postada na secção correcta do fórum!

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
djthyrax

Metes aquilo num .html e abres :)

Sem a imagem, torna-se complicado :D

Não peças ajuda por PM! A tua dúvida vai ter menos atenção do que se for postada na secção correcta do fórum!

Partilhar esta mensagem


Ligação 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

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.