Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Okay, eu to com um problema que eu não sei resolver.
Eu estou fazendo um menu drop-down pro meu site.
E ele está ficando mais ou menos assim:
/applications/core/interface/imageproxy/imageproxy.php?img=http://static.wixstatic.com/media/92a8cb_ed6ed2fc8eea4e6491519c924d2490f1.jpg/v1/fill/w_600,h_432,al_c,q_80,usm_0.66_1.00_0.01/92a8cb_ed6ed2fc8eea4e6491519c924d2490f1.jpg&key=8101eaac9d40e3b68ef0132a360461f194c49765e91058f9e6e3bc991f071fa3" alt="92a8cb_ed6ed2fc8eea4e6491519c924d2490f1." />
PORÉM, eu preciso que ele fique o mais parecido possível disso aqui:
/applications/core/interface/imageproxy/imageproxy.php?img=http://static.wixstatic.com/media/92a8cb_5bb592f672b44fd4bb5cde193e0e6ed3.jpg/v1/fill/w_600,h_371,al_c,q_80,usm_0.66_1.00_0.01/92a8cb_5bb592f672b44fd4bb5cde193e0e6ed3.jpg&key=ffa75b8065a49edcea3cdab17b90b21f7802999004cf8e2af6b3b3281be87b6a" alt="92a8cb_5bb592f672b44fd4bb5cde193e0e6ed3." />
Mas é possível, notar uma diferença na imagem 1. As bordas. Eu preciso que todas as bordas tenham o mesmo tamanho e grossura, apenas na parte de cima e na parte de baixo. Porém toda a vez que eu adiciono
"border-bottom-width: 2px;
border-top-width: 2px;"
as duas bordas se juntam e forma uma linha muito grossa. Eu queria uma solução, talvez manter a borda de top, somente na primeira parte e não se repetir. Não sei, só sei que preciso de ajuda.
>
Na verdade essa dúvida é um pouco de falta de atenção e erro matemático.
Se você quer 2px acima e 2px abaixo, é só somar 1 + 1 para obter 2px de borda. Ou seja, você precisa deixar dessa forma:
.menu li a {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}O seus últimos itens do menu vão ficar com somente um pixel, idem ao superior, então você seleciona eles especificamente através dos métodos nth-child, first-child e/ou last-child. Isso é só uma maneira de você selecionar um filho da classe pai de acordo com seu posicionamento (se é o primeiro elemento, ou segundo, ou terceiro...).
Para os primeiros, faça isso:
.menu li a:first-child {
border-top-width: 2px;
}E para os últimos:
.menu li a:last-child {
border-bottom-width: 2px;
}Pior que eu tentei isso, e ainda ta dando o mesmo problema. :x
Tipo, as linhas da "opção 2" estão muito grossas em cima e em baixo.
E assim com todas as outras opções que estão entre sempre entre a 1° e a ultima opção.
Mas obrigada, vou continuar tentando.
Cola seu código css do menu aqui para darmos uma olhada.
Sem o seu código CSS pra análise fica difícil, mas mesmo assim ainda dá pra tentar ajudar.
A linha SOMENTE da opção 2 está ficando maior? Se sim, você também pode usar a propriedade nth-child pra ela.
Ex.:
/ A numeração aqui deve ser trocada pela numeração onde seu elemento se encontra /
.classe-div-pai li:nth-child(2) {
border-bottom: 1px solid #000;
}Problemática: Se isso não funcionar, talvez exista alguma propriedade CSS que esteja interferindo na sua nova propriedade.
Bom, aqui é basicamente todo o meu codigo:
ul {list-style:none;width:350px;float: left; }
ul li {
position:relative; }
ul li a {
display:block;
list-style: none;
background: transparent;
color: #072D18;
font-family: Calibri, serif;
text-decoration: none;
padding: 40px;
border-style: solid;
border-bottom-width: 1px;
border-top-width: 1px;
border-right-width: 0;ul li a:last-child {
border-bottom-width: 2px;
}ul li a:first-child {
border-top-width: 2px;
}ul li a:hover {
background: #a3a3a3;
transition-duration: 0.5s; }
ul li ul {
display:none;
position: absolute; }
ul li:hover ul {
display:block;
position:absolute;
left: 306px;
top: 0;
min-width: 100%;
}mas vou tentar de novo nessa forma, muitooo obrigada.
CARA NEM PRECISA DE MAIS NADA, VOCÊ SALVOU A MINHA VIDA. AUSHAUHSAUHSUHAS OBRIGADA, DE VERDADE!
Na verdade essa dúvida é um pouco de falta de atenção e erro matemático.
Se você quer 2px acima e 2px abaixo, é só somar 1 + 1 para obter 2px de borda. Ou seja, você precisa deixar dessa forma:
.menu li a {
O seus últimos itens do menu vão ficar com somente um pixel, idem ao superior, então você seleciona eles especificamente através dos métodos nth-child, first-child e/ou last-child. Isso é só uma maneira de você selecionar um filho da classe pai de acordo com seu posicionamento (se é o primeiro elemento, ou segundo, ou terceiro...).
Para os primeiros, faça isso:
.menu li a:first-child {
E para os últimos:
.menu li a:last-child {