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

Sign in to follow this  
Knitter

Como fazer uma lista aparecer na mesma linha que o texto?

Recommended Posts

Knitter

Boas,

Estou aqui às voltas com um problema que não vejo como resolver, preciso que um conjunto de links seja apresentado na horizontal, o conjunto é composto por alguns links "normais" e por outros dentro de uma lista.

O CSS que criei permite mostrar a lista na horizontal, usando display: inline; que apliquei aos elementos li, o problema é que os links que são colocados na lista mudam de linha, ficando numa única linha, e o restante texto ora fica acima ora abaixo, consoante surja antes ou depois da lista.

A imagem seguinte pode dar uma ideia melhor do que está a acontecer:

http://img413.imageshack.us/img413/780/44564243fn7.th.png

O CSS que estou a aplicar é:

.horizontalfeeds li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: inline;
} 
O HTML criado é:
<div class="footer">
   © Portugal-a-Programar |
   <ul class="horizontalfeeds">
       <li><a href="rss-articles/" title="RSS Articles">RSS Articles</a></li>
       <li><a href="rss-comments/" title="RSS Comments">RSS Comments</a></li>
   </ul>
   <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> e <a href="http://validator.w3.org/check?uri=referer">XHTML</a> [/url] |
   <a href="#" title="Login">Login</a>
</div>

Não sei que voltas dê para colocar tudo na mesma linha.

Share this post


Link to post
Share on other sites
pedrotuga

Isto são coisas que tambem me baralham todo, mas olha que estás a aplicar esse estilo só aos elementos li só a tua ul é que tem é da classe horizontalfeeds.

Eu nunca percebi bem como é que o cascate é feito, ou seja, como é que os estilos sao herdados em alguns casos.

Mas olha este exemplo aqui... o css é aplicado explicitamente à lista e aos seus elementos:

http://css.maxdesign.com.au/listutorial/horizontal04.htm

Gostava de ajudar mais mas isto não é de todo a minha especialidade :P

Share this post


Link to post
Share on other sites
lugh

Caro,

O problema é que ao aplicar o <ul> ele muda automaticamente de linha.

Sugiro portanto que incluas tudo num único <ul>

Tipo:

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

li {
  display: inline;
}

<div class="footer">
   <ul>
<li>© Portugal-a-Programar | </li>
       <li><a href="rss-articles/" title="RSS Articles">RSS Articles</a></li>
       <li><a href="rss-comments/" title="RSS Comments">RSS Comments</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> e <a href="http://validator.w3.org/check?uri=referer">XHTML</a>  | <a href="#" title="Login">Login</a></li>
   </ul>
</div>

Se precisares de fazer alguma formatação especial dentro do <li> crias um estilo adicional.

Peço desculpa de não formatar tal como tens na imagem mas.. teste de Álgebra e bué de cenas.

Share this post


Link to post
Share on other sites
Knitter

pedrotuga, estou a aplicar aos elementos li que estejam dentro de um elemento de classe horizontalfeeds

(...) O problema é que ao aplicar o <ul> ele muda automaticamente de linha. (...)

Aplicar tudo dentro de um lista poderá ser a opção, nem me tinha lembrado disso, obrigado, o problema de aplicar CSS é que neste caso, os elementos li são fornecidos por um sistema externo e não os posso controlar. Mas vou ver o que consigo fazer agora que me abriram um pouco os olhos :P

Share this post


Link to post
Share on other sites
Knitter

Bem, alterei tanto o CSS como o HTML para corrigir alguns pontos, ou pelo menos colocar algum código que fazia mais sentido, e embora os links já estejam todos na mesma linha, e o texto que não é link também. Tenho uma situação estranha, dois elementos li estão colados, não existindo espaço entre eles, enquanto que todos os outros elementos estão normais, com algum espaço.

O novo CSS que coloquei está desta forma:

.footer li {
/*   margin-left: 5px;*/
  list-style-type: none;
  display: inline;
  text-align: center;
}

O resultado HTML é:

<ul>
   <li>© Portugal-a-Programar</li>
   <li><a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></li>
   <li><a href="http://validator.w3.org/check?uri=referer">XHTML</a></li>
   <li><a href="http://localhost/devteam/login/" title="Login">Login</a></li>
   <li><a href="rss-articles/" title="RSS Articles">RSS Articles</a></li><li><a href="rss-comments/" title="RSS Comments">RSS Comments</a></li>
</ul>

Ora, não há nada no HTML, pelo menos que eu veja, ou no CSS, que faça com que o texto dos feeds rss apareça colado, RSS ArticlesRSS Comments

Share this post


Link to post
Share on other sites
lugh

Aplicar tudo dentro de um lista poderá ser a opção, nem me tinha lembrado disso, obrigado, o problema de aplicar CSS é que neste caso, os elementos li são fornecidos por um sistema externo e não os posso controlar. Mas vou ver o que consigo fazer agora que me abriram um pouco os olhos :D

Eu arriscaria dizer que dá sempre para controlar. Ou com uma classe no ficheiro de css, ou com uma classe no próprio ficheiro onde está o html ou com um style dentro do <li> (desaconselho as últimas duas).

Bem, alterei tanto o CSS como o HTML para corrigir alguns pontos, ou pelo menos colocar algum código que fazia mais sentido, e embora os links já estejam todos na mesma linha, e o texto que não é link também. Tenho uma situação estranha, dois elementos li estão colados, não existindo espaço entre eles, enquanto que todos os outros elementos estão normais, com algum espaço.

Parece-me tudo ok. Experimenta meter um background de outra cor para teres 1 percepção do que se está a passar.

Por ex.

background: red;

Se quiseres dar mais espaço entre os li's basta especificares a propriedade margin, tipo:

.footer li {
  list-style-type: none;
  display: inline;
  text-align: center;
  /*background:red;*/
  margin:0 10px;
}

Cheers!

Share this post


Link to post
Share on other sites
Knitter

Já tinha colocado uma margem, neste momento está comentada, e era uma opção mas a margem não ficava correcta.

Actualmente está neste estado:

http://img402.imageshack.us/my.php?image=screenshotah9.png

De reparar que, aquilo que me parecem ser dois elementos diferentes, os dois últimos, aparecem colados, enquanto que os outros não.

Não faço ideia do que se esteja a passar, já estive a olhar para o código PHP que gera esses dois links e não vejo nada de mais.

Desculpem lá a imagem tão grande mas não tive oportunidade de a cortar, estou um pouco atolado em trabalho.

Share this post


Link to post
Share on other sites
pmg

Separa os dois últimos li's com um espaço (ou um enter)


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
lugh

Em  vez de:

<li><a href="rss-articles/" title="RSS Articles">RSS Articles</a></li><li><a href="rss-comments/" title="RSS Comments">RSS Comments</a></li>

Tens que meter:

<li><a href="rss-articles/" title="RSS Articles">RSS Articles</a></li>
<li><a href="rss-comments/" title="RSS Comments">RSS Comments</a></li>

:P

Share this post


Link to post
Share on other sites
Knitter

Ora aí está uma coisa que julgava não ser importante, o espaço existente entre os elementos  de uma lista, já deu para aprender de forma a não repetir :P

Mas aí está também um problema, não eu que crio o os elementos, e não posso, sem alterar o sistema que está por trás, fazer essa alteração, enfim, vai obrigar-me a ter atenção aos updates futuros do sistema.

Bem, obrigado pela ajuda.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

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.