Jump to content
Sign in to follow this  
alexvaz

AJUDA - Fazer separadores arredondados com CSS

Recommended Posts

alexvaz

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?

Share this post


Link to post
Share on other sites
Nazgulled

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.

Share this post


Link to post
Share on other sites
joaoqalves

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);
}


Não peças ajuda por PM! A tua dúvida vai ter menos atenção do que se for postada na secção correcta do fórum!Queres estar na moda? Utiliza a pesquisa e evita criar um tópico desnecessário.

Share this post


Link to post
Share on other sites
marinheiro

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


há 10 tipos de pessoas: as que sabem binário e as que não sabem...[br][br]todas as nossas vidas não passam de release candidates... com o aperfeiçoamento, um dia chegaremos à versão final..

Share this post


Link to post
Share on other sites
alexvaz

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

Share this post


Link to post
Share on other sites
marinheiro

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


há 10 tipos de pessoas: as que sabem binário e as que não sabem...[br][br]todas as nossas vidas não passam de release candidates... com o aperfeiçoamento, um dia chegaremos à versão final..

Share this post


Link to post
Share on other sites
Nazgulled

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

Share this post


Link to post
Share on other sites
marinheiro

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


há 10 tipos de pessoas: as que sabem binário e as que não sabem...[br][br]todas as nossas vidas não passam de release candidates... com o aperfeiçoamento, um dia chegaremos à versão final..

Share this post


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


"Pensa positivo: tudo pode piorar"

Share this post


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

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  

×
×
  • Create New...

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.