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

Knitter

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

10 mensagens neste tópico

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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:

screenshotah9.th.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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

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