CSS linija ( pomoc )

Programiranje
1

Pozz, zna li itko kako se zove ova linija izmedju linkova kao na slici i kako je napravit, trazim dva sata vec po netu i nebi da si pita.

2

Slika je vrhunskog kvaliteta :slight_smile:

Mislim da je ovo najbolje rijesiti pomocu :after ili :before selektora, tako sto ces pod content: ""; staviti te linije.

Napisem kasnije, kad budem imao vise vremena.

3

Nemoj gledat sliku previse :smiley:

Probo sam i sa :after i :before ali kad stavim pod content:"--------------------"; bude mi isprekidano, jedino da stavim neku sliku to jos nisam probo, ali sto manje slika to bolje :smiley:

Evo malo bolja slika

e sad trebam se rijesit ovih razmaka izmedju crtica.

4

Mozda da iskoristis nesto iz nekog iconic fonta ? Tipa glyphicons, ili mozda font awesome ?

5

Gledo sam i to nema nista sto meni treba a i ovo je samo instalacijska skripta tako da netrebam nista specijalno.

6 
nav {
  background-color: #333;
  padding: 0;
  margin: 0;
}
a {
  color: #bbb;
  text-decoration: none;
  background-color: #333;
  display: inline-block;
  margin: 0 5px;
  font-size: 16px;
  vertical-align: middle;
}

ul:before,
ul:after {
  display: table;
  content: ' ';
  clear: both;
}

ul {
  padding: 15px;
}

li:before,
li:after {
  border-top: 1px solid #999;
  content: '';
  display: inline-block;
  padding: 0 30px;
  position: relative;
  height: 1px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

li {
  display: block;
  float: left;
}

a ovo je pripadajuci html

<nav>
  <ul>
    <li>
      <a href="#">Index</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Products</a>
    </li>
    <li>
      <a href="#">Services</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

probaj pa javi jel ti tako stima.

Evo i link pa se poigraj: https://embed.plnkr.co/GkYESkX9Z7MIH6eEx46J/

2 Likeova
7

Hvala to je to, uz malu modifikaciju :wink:

8

Evo problem https://plnkr.co/edit/vdOKNuBqscVWL4noph9O?p=preview, nemogu da maknem zadnju crtu :frowning:

9

/* remove last */
li:last-child:after {
border-top: none;
}

1 Like
10

To je to hvala :smiley: