Menu CSS - Cantos Arredondados

[Riovani 0]

Ola pessoal, não estou conseguindo ajustar a altura das imagens para formar o menu.

 

Codigo CSS

 

 .wrapper ul {  
   padding:0; 
   margin:0; 
   border:12px; 
   height:80px;
   }
      .wrapper ul li { 
   float:left; 
   margin:0; 
   padding:0 10px; 
   border:12px; 
   line-height:12px;
   }
      .wrapper ul li a {
   float:left; 
   margin:0; 
   padding:40px 0; 
   color:#fff; 
   font:normal 18px Arial, Helvetica, sans-serif; 
   text-decoration:none; 
   line-height:18px;
   }
      .wrapper ul li a span {
   padding:12px;
   background:none;

   }
      .wrapper ul li a:hover { 
   color:#434343; 
   background: url(images/r_menu.png) no-repeat right;
   }
      .wrapper ul li a:hover span { 
   color:#434343; 
   background:url(images/l_menu.png) no-repeat left;
   }
      .wrapper ul li a.active { 
   color:#434343; 
   background:url(images/r_menu.png) no-repeat right;
   }
      .wrapper ul li a.active span { 
   color:#434343; 
   background:url(images/l_menu.png) no-repeat left;
   }

 

Codigo HTML

 

 

 <div class="wrapper">
                               <ul>
                               <li><a href="index.html" class="active"><span>Hotel</span></a></li>

                                <li><a href="services.html"><span>Acomodações</span></a></li>

                                <li><a href="portfolio.html"><span>Estrutura</span></a></li>

                                <li><a href="contact.html"><span>Reservas</span></a></li>

                               </ul>
                       </div>

 

 

Dem uma olhada. Oque estou esqucendo de colocar ai, ou o que esta errado no codigo.

Segue link da imagem de como esta ficando o menu, a tirinha esquerda não consigo ajustar a altura com a maior.

 

http://imageshack.us/photo/my-images/809/menuzl.jpg/

[Fernando Gyn 0]

posta um endereço onde eu possa ver,

e também você colocou os cantos apenas no hover.

 

bom dependendo dos browser que vai dar suporte pode usar border-radius

[Riovani 0]

Opa. segue o lick para ver o site, http://www.comporganico.com.br/

so que não aparece as imagens do menu, não sei o que esta acontesendo, me ajudem.

[Fernando Gyn 0]

bom pelo que vi no seu site e caminho errado

 

tipo

 

isso

 

 

background: url(images/r_menu.png) no-repeat right;

 

deveria ser assim:

 

background: url(Images/r_menu.png) no-repeat right;

 

pelo que vejo o endereço esta errado.

 

tipo você coloca images e as imagens estão em Images

[Riovani 0]

Opa já arrumei, pode acessar novamente o linck, http://www.comporganico.com.br/

agora as imagens do menu aparecem, so q com o problema dos tamanhos... :(

[Fernando Gyn 0]

bom não seria pedir muito, você mostrar uma imagem de como deveria estar?

[crf_h0m3r 5]

Tá parecendo que a borda que você fez, é fixa, de único tamanho, e as palavras, obviamente, como tem tamanhos variados, maior ou menor quantidade de caracteres então ocorre esse erro.

[Riovani 0]

Segue lick da imagem do site total com a idéia do menu também.

http://imageshack.us/photo/my-images/580/sitehotelfiorini.jpg/

 

 

Se alguem tem alguma dica de como fazer esse menu, fiquem a vontade para me ajudar...

[Riovani 0]

Bom desisto vo fazer o menu em flash mesmo, vlw ha q tento ajudar ai. :joia:

[Giovani 104]

Você poderia trabalhado com um li > a normalmente e colocado a imagem branca como hover.

Isso poderia ser feito criando um imagem pra cada um deles, devido ao tamanho diferente ou criando uma imagem pra um lado do hover e outra para o outro, assim o item do menu poderia ter a largura que fosse :)