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

alexvaz

AJUDA - Fazer separadores arredondados com CSS

12 mensagens neste tópico

Boa noite.

Estou-me a iniciar nos CSS através de um trabalho escolar.

Já consegui fazer o layout quase todo da página, utilizando divs sobrepostos, mas estou com dificuldade para fazer a parte dos botões, que deverão funcionar como separadores.

O efeito pretendido é o seguinte:

site.jpg

Já tenho as imagens para fazer os rectangulos com as pontas arredondadas (esquerda, centro e direita) cujo tamanho deve ser dinamico, adaptando-se ao texto. O botão com cor laranja simula quando o rato passa por cima, devendo ser azul por defeito ou cinza caso seja a página onde se está.

Os links têm que ser algo do tipo:

<ul class="nav">

  <li><a href="morango">Inicio</a></li>

  <li ><a href="maca">Encomendas</a></li>

  <li ><a href="Banana">Preços</a></li>

  <li ><a href="pessego">Albuns</a></li>

</ul>

mas estou com dificuldade em fazer o css disto e deve faltar algures uns divs...

Será que alguém me consegue dar umas ideias para resolver isto?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Porquê que os links tem de ser numa lista? Sabes o que significa uma lista? Significa que um item vai aparecer abaixo do outro, e alinha-los horizontalmente usando <li>, não me parece... tas a complicar de mais o problema... Como tudo, isto há imensas maneiras de fazer isto... Uma das maneiras:

- 1 div que representa o botão que vai englobar outros divs. este div tera um background dinâmico conforme o tamanho

- 1 div com float à esquerda e outro div com float à direita

- em ambos os divs anteriores, adicionas a respectiva imagem, pode até mesmo ser <img>

Para cada botão, copias o código html. Há, e cada botão, na sua classe, tem também de ter um float, neste caso, todos à direita penso que faz o que tu queres.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Porquê que os links tem de ser numa lista? Sabes o que significa uma lista? Significa que um item vai aparecer abaixo do outro, e alinha-los horizontalmente usando <li>, não me parece... tas a complicar de mais o problema... Como tudo, isto há imensas maneiras de fazer isto... Uma das maneiras:

- 1 div que representa o botão que vai englobar outros divs. este div tera um background dinâmico conforme o tamanho

- 1 div com float à esquerda e outro div com float à direita

- em ambos os divs anteriores, adicionas a respectiva imagem, pode até mesmo ser <img>

Para cada botão, copias o código html. Há, e cada botão, na sua classe, tem também de ter um float, neste caso, todos à direita penso que faz o que tu queres.

com uma lista parece-me mais fácil, usando depois o

li{
display:inline;
}

li a{
background:url(imagem.jpg);
width:100%;
}
li a:hover{
backround:url(imagem2.jpg);
}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

yep, a lista é a solução mais practica, inclusivé para acrescentar mais botões é só mais uma linha de código por botão...

se queres exemplos de menus em css, vai a www.cssplay.co.uk/menus e, em "menus - tabbed" tens vários exemplos com código para fazeres o que queres...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Tou a ver os exemplos desse site e há alguns interessantes... Mas como vejo o código?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

basta veres o source da página que está lá tudo com comentários :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

com uma lista parece-me mais fácil, usando depois o

li{
display:inline;
}

li a{
background:url(imagem.jpg);
width:100%;
}
li a:hover{
backround:url(imagem2.jpg);
}

Não percebo como é que com este código consegues ter os cantos perfeitamente arredondados e com largura dinâmica...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

a imagem de fundo é mais larga que o tamanho normal das tabs e tem o lado direito da curva e há um span que tem o lado esquerdo da curva... depois, no <li>, fica <li><a href=.........><span class="esq"></span>texto</a></li>

no css, o "li a" tem de ter "display:block", para que funcione o li completo como link em vez de ser só o texto do <a>...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Porquê que os links tem de ser numa lista?(...)

Semanticamente, um menu não é mais do que uma lista de links, daí usar-se uma lista. Não dá particurlamente mais jeito do que usar divs ou spans, mas é mais correcto.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Porquê que os links tem de ser numa lista?(...)

Semanticamente, um menu não é mais do que uma lista de links, daí usar-se uma lista. Não dá particurlamente mais jeito do que usar divs ou spans, mas é mais correcto.

e é também por uma questão de acessibilidade, como diz no artigo, que explica como fazer os cantos arredondados, deve-se usar uma lista para fazer os menus, porque se um browser não ler CSS o menu não fica distorcido se estiver feito com listas.

Nuno.

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