[Resolvido] Bordas nesse modelo

[Junio Araujo 0]

E ai turma! Vejam bem!

 

To fazendo um MENU com nomes escritos sem estilo nenhum: Tipo:

 

Home • Produtos • Contatos

 

Quando passar o mouse em cima de Produtos quero que fique assim:

 

 

Vejam que aparecem as BORDAS arredondadas no entanto a margem superior não pode ser do tamanho total para não fechar a palavra Produtos.

 

Tem como fazer isso?

 

Valew

[GabrielFerrari 41]

Só usar padding. :P

[Junio Araujo 0]

Mas como assim Gabriel? Veja só, o CSS que ta montando as bordas estão assim:

 

position: absolute;

top: 44px; left: 0;

/*background: #fff url(fundo.png) repeat-x;*/

background:#fff;

padding: 10px 10px 0px 10px;

float: left;

border-bottom: solid 2px #b2ac99;

border-left: solid 2px #b2ac99;

border-right: solid 2px #b2ac99;

border-top: solid 2px #b2ac99;

 

/*--Bottom right rounded corner--*/

-moz-border-radius-bottomright: 5px;

-khtml-border-radius-bottomright: 5px;

-webkit-border-bottom-right-radius: 5px;

/*--Bottom left rounded corner--*/

-moz-border-radius-bottomleft: 5px;

-khtml-border-radius-bottomleft: 5px;

-webkit-border-bottom-left-radius: 5px;

display: none;

 

Ai quando passo o Mouse aparece as 4 Bordas do mesmo tamanho. Como faria para elas ficarem de tamanhos diferentes como a imagem??

 

Valew

[Kaue Machado 0]

Mas como assim Gabriel? Veja só, o CSS que ta montando as bordas estão assim:

 

Posta o css completo amigo, de preferência com o markup, ou a página onde está o problema.

Eu acho que o Gabriel quis dizer pra você aplicar padding na sub-lista (sub-menu) pra ele ficar abaixo dos itens do menu principal.

[GabrielFerrari 41]

A única forma de espaçar um conteúdo dentro de uma div é com padding.

Porém é dificil imaginar como está sendo feito.

 

Post a página ou exemplo completo de como está realizando,

assim fica mais fácil entender e solucionar a questão.

[Junio Araujo 0]

O CSS completo é esse:

 

body {

margin: 0; padding: 0;

font: normal 10px Verdana, Arial, Helvetica, sans-serif;

/*background: url(body_bg.png) repeat-x;*/

color:#000;

}

*{

outline: none;

}

 

img {

border: 0px;

}

 

.containermenu {

width: 600px;

padding: 0;

margin: 0 auto;

}

#header {

background: url(header.jpg) no-repeat;

width: 970px; height: 179px;

float: left;

}

ul#topnav {

margin: 0; padding: 0;

float:left;

width: 100%;

list-style: none;

font-size: 1.1em;

}

ul#topnav li {

float: left;

margin: 0; padding: 0;

position: relative;

color:#000;

}

ul#topnav li a {

float: left;

text-indent: -9999px;

height: 44px;

color:#000;

}

ul#topnav li:hover a, ul#topnav li a:hover {

 

background-position: left bottom;

 

}

 

ul#topnav a.home {

background: url(nav_home.png) no-repeat;

color:#000000;

width: 78px;

}

ul#topnav a.products {

background: url(nav_products.png) no-repeat;

width: 117px;

color:#000000;

}

ul#topnav a.sale {

background: url(nav_sale.png) no-repeat;

width: 124px;

color:#000000;

}

ul#topnav a.community {

background: url(nav_community.png) no-repeat;

width: 124px;

}

ul#topnav a.store {

background: url(nav_store.png) no-repeat;

width: 141px;

}

 

ul#topnav li .sub {

position: absolute;

top: 44px; left: 0;

/*background: #fff url(fundo.png) repeat-x;*/

background:#fff;

padding: 10px 10px 0px 10px;

float: left;

border-bottom: solid 2px #b2ac99;

border-left: solid 2px #b2ac99;

border-right: solid 2px #b2ac99;

border-top: solid 2px #b2ac99;

 

/*--Bottom right rounded corner--*/

-moz-border-radius-bottomright: 5px;

-khtml-border-radius-bottomright: 5px;

-webkit-border-bottom-right-radius: 5px;

/*--Bottom left rounded corner--*/

-moz-border-radius-bottomleft: 5px;

-khtml-border-radius-bottomleft: 5px;

-webkit-border-bottom-left-radius: 5px;

display: none;

}

ul#topnav li .row {

clear: both;

float: left;

width: 100%;

margin-bottom: 10px;

}

 

ul#topnav li .rowcursos {

clear: both;

float: left;

width: 100%;

margin-bottom: 0px;

background: url(cursos.png) no-repeat right bottom;

}

 

ul#topnav li .sub ul{

list-style: none;

margin: 0; padding: 0;

width: 150px;

float: left;

}

ul#topnav .sub ul li {

width: 100%;

color: #fff;

}

ul#topnav .sub ul li h2 {

padding: 8px; margin: 0 0 10px 0px;

font-size: 1.2em;

font-weight: normal;

color:#000;

background:#b2ac99;

}

ul#topnav .sub ul li h2 a {

background-image: none;

color: #b2ac99;

}

ul#topnav .sub ul li a {

float: none;

text-indent: 0; /*--Reset text indent--*/

height: auto;

/*background: url(navlist_arrow.png) no-repeat 5px 12px;*/

padding: 7px 0px 7px 0px;

display: block;

text-decoration: none;

color: #333;

}

ul#topnav .sub ul li a:hover {

color: #3399FF;

background-position: 5px 12px ;}

 

2 Problemas:

 

• Os links são Imagens e eu queria passá-los para Textos e não dá. Digito o texto e não troca pela imagem, e quando comento a imagem não aparece o Texto.

 

• Gabriel o Padding nos textos estão Ok. Quero mesmo é fazer com que as Bordas fiquem arredondadas como esta na Imagem. To conseguindo, mas porém nas 4 Bordas iguais e preciso fazer com que o contorno no Link seja menor que no (sub-menu).

[GabrielFerrari 41]

http://www.border-radius.com/

[Junio Araujo 0]

Valeu Gabriel pela atenção, mas ainda NÃO é isso!

Tipo:

 

No menu vai estar assim:

 

EMPRESA • PRODUTOS • CONTATO • ÁREA RESTRITA

 

Ai, quando eu parar o mouse sobre o link Produtos eu quero que apareça assim:

 

 

Mas ta fincando assim:

 

 

Viu? Ta fechando a aba e queria que não tivesse linha fechando.

 

Valew

[GabrielFerrari 41]

aaaa sim!

eu fiz isso uma vez

 

http://gruposelex.com.br/

 

fiz uma gambiarrinha

entre o botão da aba e o conteúdo

 

<div style="float: right; width: 722px; height: 1px; background: #ddd;" class="linha"></div>

 

da uma olhada no código-fonte que você pega como faz :)

[Junio Araujo 0]

Gabriel, você fez com imagem neh?

 

Tem como fazer só com Border??

 

:mellow:

[GabrielFerrari 41]

tem cara,

é que o meu tinha uma linha em diagonal.

 

Você faz normal, a div superior do botão fica sem border-bottom

e a outra com os itens fica sem border-top

 

ok?

 

entre essas duas você faz uma div de 1px com a cor da borda

e largura até onde precisa.

 

entendeu? :P

[Junio Araujo 0]

rs... Verdade!!

Vou tentar aqui e qualquer coisa aviso.

 

Valew brother pela mãozinha. Qualquer dúvida chamo ai.

 

flw

[GabrielFerrari 41]

foi dificil entender mas é isso ae,

qualquer coisa só postar.

[Junio Araujo 0]

Ai Gabriel, veja só!

 

Fiz o menu e ele ta funcionando. Só que esse menu ta numa página separada e ele usa CSS com Jquery.mim

 

Quando ele ta na página separada que eu fiz funciona blza, mas quando coloco na index da pau em um Banner que tem lá porque ele usa um Jquery e Jquery.easing.

 

Tem como fazer algo ou tem um Menu do tipo que falei só com CSS ??

 

Valeu brother, fico no aguardo.

 

Até

[GabrielFerrari 41]

Cara não entendi sua dúvida,

qual a relação do jquery com o menu?