Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Riovani

Menu CSS - Cantos Arredondados

Recommended Posts

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/

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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 :)

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.