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  
RuiGomes

Alinhar horizontalmente (e mais algumas dúvidas)

Recommended Posts

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!

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


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

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.