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

RuiGomes

Alinhar horizontalmente (e mais algumas dúvidas)

Mensagens Recomendadas

RuiGomes

Boas pessoal,

Estou a construir um site e surgiu-me agora uma dúvida.

Eu tenho várias "caixas" construídas com <li> e preciso de alinhar essas caixas horizontalmente, mas não estou a conseguir :s

O url é: www.ruigomes.eu/renato

Em vez de uma nova caixa aparecer assim:

                    [Caixa 1]

                    [Caixa 2]

                    [Caixa 3]

queria que aparece-se tipo assim:

[Caixa 1] [Caixa 2] [Caixa 3]

[Caixa 4] [Caixa 5] [Caixa 6]

Se alguém me conseguisse dar um jeito a isso ou explicar-me como se faz, agradecia!

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
NCS_One

Boas.

No style dos LIs coloca "float: left;" e por exemplo no teu exemplo coloca um "<br />" depois da "Caixa 3".


Se a vida te voltar as costas aproveita e apalpa-lhe o cu.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
mjamado

No style dos <li> tens que definir o display como inline (ao invés de block, que é o valor por defeito) e ainda, se quiseres, remover a "bala" dos itens. É melhor mesmo remover a "bala", até porque alguns browsers, com o display inline, tiram-na logo.

A melhor maneira é definires uma classe à <ul> e depois um estilo para as <li> dentro dela, tipo isto:

ul.listaHz li
{
  display: inline;
  list-style-type: none;
}

E depois:

<ul class="listaHz">
  <li>Caixa 1</li>
  <li>Caixa 2</li>
  <li>Caixa 3</li>
  <li> ... </li>
</ul>


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
RuiGomes

O menu já está personalizado e a funcionar, só que está a alinhar as coisas verticalmente :\

Tentei agora essas sugestões, e não resultou (quer dizer, o float:left; corrigiu um bug que tinha, mas não tinha nada a ver).

Se pudessem dar uma vista de olhos e perder um minutinho no firebug ou assim para me dar uma ajuda agradecia. o endereço é www.ruigomes.eu/renato

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
mjamado

Eh pá, eu admiro-me é como é que o browser faz o render dessa salganhada...  :)

Ouve lá, desde quando é que um <div> pode ser filho de um <ul>? E desde quando é que os <li> podem ser filhos de um <div>?

Tira esse <div> de lá, para começar. Depois, não usaste a recomendação que te dei, não percebo como queres que funcione...


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
ByMySlf

Corrige as situações referidas pelo mjamado no post anterior e depois tenta o seguinte código:

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:120px;
}

ATENÇÃO: A width que defini ali foi ao acaso. Escolhe a width que achares mais conveniente para o teu caso.

Se pretenderes uma navigation bar mais atractiva, usa as pseudo-classes a:link, a:visited, a:hover, a:active e aplica estilos diferentes às mesmas.

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.