Jump to content
Sign in to follow this  
aneew

Como posicionar a borda onde eu quero?

Recommended Posts

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:

 

92a8cb_ed6ed2fc8eea4e6491519c924d2490f1.

 

PORÉM, eu preciso que ele fique o mais parecido possível disso aqui:

 

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.

 

 

Share this post


Link to post
Share on other sites

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;
}
  • +1 2

Share this post


Link to post
Share on other sites

 

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.

Share this post


Link to post
Share on other sites

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

SE e somente SE você for publicar o código inteiro, agradeço se usar o JSFiddle para isso, já que fica muito confuso ler 3000 mil linhas de código aqui no fórum.

Problemática: Se isso não funcionar, talvez exista alguma propriedade CSS que esteja interferindo na sua nova propriedade.

  • +1 1

Share this post


Link to post
Share on other sites

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;
border-left-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.

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  

  • Similar Content

    • By Vinicius Bazan
      Bom dia, Boa tarde e Boa noite!
       
        Estava eu aqui brincando um pouco com JS para entender um pouco melhor essa linguagem, pois eu preciso fazer um relógio em uma pagina HTML e um contador que aumente seu número em +1 de tempos em tempos ( no caso eu estava testando em aumentar a cada 5 segundos, considerando que esse número não vai começar do 0, pois ele teria que pegar todos os segundos que já se passaram nesse dia e dividir por 5, assim seu resultado inteiro seria exibido).
        O relógio com bastante esforço e pesquisa eu consegui fazer e está funcionando, até aqui sem dificuldades, o real problema está no contador, eu fui testar sem colocar um setInterval só para ver se o número aparece na tela e... NADA!
       Então como eu não manjo de JS e tentei fazer a partir do que eu usei pra fazer o relógio eu devo ter errado feio em muita coisa.
       
      <!DOCTYPE html> <html> <head> <title>javascript</title> <meta charset="utf-8"> <script type="text/javascript"> function relogio() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); if (horas < 10) { horas = "0"+horas; } if (minutos < 10) { segundos = "0"+minutos; } if (segundos < 10) { segundos = "0"+segundos; } document.getElementById("relogio").innerHTML=horas+":"+minutos+":"+segundos; } window.setInterval("relogio()",1000); // Aqui começa a função que eu tentei fazer para o contador function contador() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); var cont = ((minutos + (horas * 60))*60) + segundos ; document.getElementById("contador").innerHTML= Math.floor(cont/5); } </script> <style type="text/css"> #relogio { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } #contador { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } </style> </head> <body onload="relogio();"> <div id="relogio"> </div> <hr> <div id="contador"> </div> </body> </html>  
       Se alguém puder me ajudar eu agradeço!
    • By egalauber
      Tenho o seguinte trecho de código:
       
      #anima {
              width:600px;
              height:300px;
              margin:auto;
              
              animation: banner 10s infinite;
          }
       
      @keyframes banner {
              0%, 33% {
                      background:#009;
                  }
              34%, 66% {
                      background:#C00;
                  }
              67%, 100% {
                      background:#390;
                  }
          }
       
      No HTML tenho uma div com id=anima.
      Esse código faz a cada 3 segundos mudar a cor dessa div, tipo como se fosse um slide show.
       
      O que eu preciso fazer, é colocar 3 botões, cada botão mudando pra uma cor. Cada botão mudando pra um pedaço da execução do @keyframes banner.
       
      Botão1 - pula para-> 0%, 33% { background:#009; }
      Botão2 - pula para-> 34%, 66% { background:#C00; }
      Botão3 - pula para-> 67%, 100% { background:#390; }
       
      Como?
    • By Carlos Web Soluções Web
      Olá pessoal !!
      Estou desenvolvendo um menu em CSS, e eu gostaria de colocá-lo no CSS Responsive:
       
      @media screen and (max-width: 800px) {
      }
       
      O link do menu de como está atual se encontra em:
      MENU Link

      e o que eu desejo alcançar é:
      MENU RESPONSIVE

      Por favor me ajudem.....abraço !!
    • By lordstarlight
      Olá galera,
       
      Tenho um código que abre uma janela modal clicando num botão .
      Como faço para adaptar esse código para abrir usando um <input type="image" ... ?
       
      Abraço !!!
      <script type="text/javascript"> $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) </script> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Janela Modal</h4> </div> <div class="modal-body"> <p>Texto<br> Mais Texto<br> </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.