Borders on each part of the menu

Question

Borders on each part of the menu

Asked 5 years, 5 months ago

Viewed 235 times

1

Opa, I’m creating a site using html + css, I was making a menu but it got a bit buggy the part of the "edge" of it.

I marked in red where the blue bars were missing.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>BurnSec</title>
    <link rel="stylesheet" href="css/style.css">
    <meta charset="utf-8">
</head>
<body>
    <ul class="nav">
    <li id="settings">
        <a href="https://github.com/burnsecurity"><img src="https://designmodo.com/demo/dropdown-menu-search/settings.png" /></a>
    </li>
    <li id="options">
        <a href="#">Serviços</a>
        <ul class="subnav">
            <li><a href="#">PenTest</a></li>
        </ul>
    </li>
    <li>
        <a href="paginas/ferramentas.html">Ferramentas</a>
    </li>
    <li id="options">
        <a href="#">Cursos</a>
        <ul class="subnav">
            <li><a href="certificados.html">Premium</a></li>
            <li><a href="gratuitos.html">Gratuitos</a></li>
        </ul>
    </li>
    <li id="search">
        <form action="" method="get">
            <input type="text" name="search_text" id="search_text" placeholder="Search"/>
            <input type="button" name="search_button" id="search_button"></a>
        </form>
    </li>
    <li id="options">
        <a href="#">Tutoriais</a>
        <ul class="subnav">
            <li><a href="paginas/hacking.html">Hacking</a></li>
            <li><a href="paginas/programacao.html">Programação</a></li>
            <li><a href="paginas/pentest.html">PenTest</a></li>
            <li><a href="paginas/outros.html">Outros</a></li>
        </ul>
    </li>
    <li>
        <a href="paginas/contato.html">Contato</a>
    <li>
        <a href="paginas/sobre.html">Sobre</a>
    </li>
</ul> 
<center><h1>BurnSec</h1></center>
<script src="prefixfree-1.0.7.js" type="text/javascript"></script>
<div id="particles-js"></div>
<script src="js/particles.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>

CSS:

@import url(https://fonts.googleapis.com/css?family=Montserrat);
 body {
  cursor: pointer;
  font-family: 'Source Sans Pro', sans-serif;
  background-image:url('index1.jpg');
  background-attachment:fixed;
  background-size:100%;
  background-repeat:no-repeat;
  background-color:#000;
}

* {
    margin: 0;
    padding: 0;
}
.nav {
    background: black;
    height: 60px;
    display: inline-block;
  width:100%;
}

.nav li {
    float: left;
    list-style-type: none;
    position: relative;
}
.nav li a {
    font-size: 16px;
    color: #0000CD;
    display: block;
    line-height: 60px;
    padding: 0 26px;
    text-decoration: none;
    border-left: 1px solid #0000CD;
    font-family: Montserrat, sans-serif;
    text-shadow: 0 0 1px rgba(0, 0, 205, 0.5);
}
.nav li a:hover {
    background-color: #2e2e2e;
}

#settings a {
    padding: 18px;
    height: 24px;
    font-size: 10px;
    line-height: 24px;
}
#search {
    width: 357px;
    margin: 4px;
}
#search_text{
    width: 297px;
    padding: 15px 0 15px 20px;
    font-size: 17px;
    font-family: Montserrat, sans-serif;
    border: 0 none;
    height: 52px;
    margin-right: 0;
    color: white;
    outline: none;
    background: #00008B;
    float: left;
    box-sizing: border-box;
    transition: all 0.15s;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color: white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: white;
}
#search_text:focus {
    background: rgb(255, 255, 255, 0.5);
}
#search_button {
    border: 0 none;
    background: white url(http://www.clker.com/cliparts/n/C/y/X/u/K/search-icon-md.png) center no-repeat;
    width: 60px;
    float: left;
    padding: 0;
    text-align: center;
    height: 52px;
    cursor: pointer;
}
#options a{
    border-left: 0 none;
}
#options>a {
    background-image: url(triangle.png);
    background-position: 85% center;
    background-repeat: no-repeat;
    padding-right: 42px;
}
.subnav {
    visibility: hidden;
    position: absolute;
    top: 110%;
    right: 0;
    width: 200px;
    height: auto;
    opacity: 0;
    transition: all 0.1s;
    background: #232323;
}
.subnav li {
    float: none;
}
.subnav li a {
    border-bottom: 1px solid #2e2e2e;
}
#options:hover .subnav {
    visibility: visible;
    top: 100%;
    opacity: 1;
}

h1{
    color: #E6E6FA;
    font-size:45px;
    font-family: Awesome;
    text-shadow: 0px 0px 15px;
}
h2{
    color:white;
    font-size: 30px;
    text-shadow: 0px 0px 15px;
}

2 answers

0

Your CSS is a bit confusing but the main error in your markup is that you are repeating id's, which is incorrect in HTML. An id must be unique on the page. In this case, you are repeating id="options" in more than one <li>.

To fix this, switch to class="options" in HTML and CSS change where you have #options for .options. This will apply the edges on the left to all menu items. And to add an edge to the right of the elements you want, create a class for it and add only on the elements that don’t have the edge on the right:

.borda-direita{
   border-right: 1px solid #0000CD;
}

For example, apply to li where it has the text "Courses" and in the last li where it has the text "About":

                   ↓↓↓↓↓↓↓↓↓↓↓↓↓
<li class="options borda-direita">
  <a href="#">Cursos</a>
  <ul class="subnav">
      <li><a href="certificados.html">Premium</a></li>
      <li><a href="gratuitos.html">Gratuitos</a></li>
  </ul>
</li>

Your code will look like this (as it is not responsive, run the code below in full screen):

@import url(https://fonts.googleapis.com/css?family=Montserrat);
 body {
  cursor: pointer;
  font-family: 'Source Sans Pro', sans-serif;
  background-image:url('index1.jpg');
  background-attachment:fixed;
  background-size:100%;
  background-repeat:no-repeat;
  background-color:#000;
}

* {
    margin: 0;
    padding: 0;
}
.nav {
    background: black;
    height: 60px;
    display: inline-block;
  width:100%;
}

.nav li {
    float: left;
    list-style-type: none;
    position: relative;
}
.nav li a {
    font-size: 16px;
    color: #0000CD;
    display: block;
    line-height: 60px;
    padding: 0 26px;
    text-decoration: none;
    border-left: 1px solid #0000CD;
    font-family: Montserrat, sans-serif;
    text-shadow: 0 0 1px rgba(0, 0, 205, 0.5);
}
.nav li a:hover {
    background-color: #2e2e2e;
}

#settings a {
    padding: 18px;
    height: 24px;
    font-size: 10px;
    line-height: 24px;
}
#search {
    width: 357px;
    margin: 4px;
}
#search_text{
    width: 297px;
    padding: 15px 0 15px 20px;
    font-size: 17px;
    font-family: Montserrat, sans-serif;
    border: 0 none;
    height: 52px;
    margin-right: 0;
    color: white;
    outline: none;
    background: #00008B;
    float: left;
    box-sizing: border-box;
    transition: all 0.15s;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color: white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: white;
}
#search_text:focus {
    background: rgb(255, 255, 255, 0.5);
}
#search_button {
    border: 0 none;
    background: white url(http://www.clker.com/cliparts/n/C/y/X/u/K/search-icon-md.png) center no-repeat;
    width: 60px;
    float: left;
    padding: 0;
    text-align: center;
    height: 52px;
    cursor: pointer;
}
.options a{
    border-left: 0 none;
}
.options>a {
    background-image: url(triangle.png);
    background-position: 85% center;
    background-repeat: no-repeat;
    padding-right: 42px;
}
.subnav {
    visibility: hidden;
    position: absolute;
    top: 110%;
    right: 0;
    width: 200px;
    height: auto;
    opacity: 0;
    transition: all 0.1s;
    background: #232323;
}
.subnav li {
    float: none;
}
.subnav li a {
    border-bottom: 1px solid #2e2e2e;
}
.options:hover .subnav {
    visibility: visible;
    top: 100%;
    opacity: 1;
}

h1{
    color: #E6E6FA;
    font-size:45px;
    font-family: Awesome;
    text-shadow: 0px 0px 15px;
}
h2{
    color:white;
    font-size: 30px;
    text-shadow: 0px 0px 15px;
}

.borda-direita{
   border-right: 1px solid #0000CD;
}

    <ul class="nav">
    <li id="settings">
        <a href="https://github.com/burnsecurity"><img src="https://designmodo.com/demo/dropdown-menu-search/settings.png" /></a>
    </li>
    <li class="options">
        <a href="#">Serviços</a>
        <ul class="subnav">
            <li><a href="#">PenTest</a></li>
        </ul>
    </li>
    <li>
        <a href="paginas/ferramentas.html">Ferramentas</a>
    </li>
<li class="options borda-direita">
  <a href="#">Cursos</a>
  <ul class="subnav">
      <li><a href="certificados.html">Premium</a></li>
      <li><a href="gratuitos.html">Gratuitos</a></li>
  </ul>
</li>
    <li id="search">
        <form action="" method="get">
            <input type="text" name="search_text" id="search_text" placeholder="Search"/>
            <input type="button" name="search_button" id="search_button"></a>
        </form>
    </li>
    <li class="options">
        <a href="#">Tutoriais</a>
        <ul class="subnav">
            <li><a href="paginas/hacking.html">Hacking</a></li>
            <li><a href="paginas/programacao.html">Programação</a></li>
            <li><a href="paginas/pentest.html">PenTest</a></li>
            <li><a href="paginas/outros.html">Outros</a></li>
        </ul>
    </li>
    <li>
        <a href="paginas/contato.html">Contato</a>
    <li class="borda-direita">
        <a href="paginas/sobre.html">Sobre</a>
    </li>
</ul> 
<center><h1>BurnSec</h1></center>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Edson Filho • 92 points · Answer 1 · 2019-06-17T22:33:06+00:00

you can edit the following class in your case by adding the size of the border, followed by the style along with the color:

#options a{
    border-left: 1px solid red;
}

Since your margins are all left, to add a right margin only to the last child of the menu, you can add to your code:

.nav li:last-child {
  border-right: 1px solid blue;
}

Look at this PEN