Jump to content
Sign in to follow this  
psiico

Retirar avanço de lista.

Recommended Posts

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

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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;
}

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.