Styling in menus

Asked

Viewed 36 times

-1

I’m creating a menu for a classified site, and I wanted to put a rounded border (border-Radius) on the 'publish advertisement' item, using css.

I leave my menu code here:

    <nav class="menu" id="menu">
<img src="images/site.jpg" width="200px">

<a href="publicar" class="pub">Publicar anúncio</a>

<a href="login" class="regi">Login</a>

<a href="registo" class="log">Registar</a>

<a href="categorias">Categorias</a>

<a href="blog">Blog da equipa</a>

<a href="#">Home</a>

<a href="" class="icon" id="icon">

<i class="fa fa-bars"></i>

</a>

</nav>

Anyway, I can’t identify the 'publish advertisement' item in css.

html css menu

  • And what is the difficulty?

  • have you looked at any documentation? https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

3 answers

1


To refer to item publicar anuncio in css, you should do this way:

.pub {
    border: 1px solid black;
    border-radius: 100%;
}

In this example, you would leave a black border, of 1px, with 100% of radius, on all tags that own the property class="pub".

More about border:

Border CSS

1

Brother you already have a "pub" class with it you can identify it in CSS!

.pub {
  border-radius: 30px;
  border: 1px solid #FFF;
  color: #FFF;
  padding: 4px 12px;
  text-decoration: none;
  font-family: Arial;
  font-size: .9em;
  transition: all ease-in-out .4s;
}

.pub:hover {
  color: #333;
  background: #FFF
}

.menu {
  width: 100%;
  background: #333;
  padding: 10px;
}
<nav class="menu" id="menu">
  <a href="publicar" class="pub">Publicar anúncio</a>
</nav>

0

CSS

.pub{
border: 1px black solid;
border-radius: 10px;
}

Browser other questions tagged html css menu

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