I'm trying to round the edges of a navigation bar through a class and it does not work.
I've marked a <ul> element with the class navbar , removed the padding, the margin and changed the font weight, even though the borders do not catch:
.navbar{
list-style-type:none;
padding:0px;
margin:0px;
font-weight:bold;
border-radius:5px;
}
It's time to fill the bag, it looks like it's one way but it's another in CSS hehe.
You should apply border-radius to li .
But only the first ( .navbar li:first-of-type ) and the last ( .navbar li:last-of-type ).
See FIDDLE updated and working: link
Run the code snippet below and see it working:
.navbar{
list-style-type:none;
padding:0px;
margin:0px;
font-weight:bold;
}
.navbar li{
float:left;
padding:10px;
background-color:#1A1A1A;
}
.navbar li:first-of-type{
border-radius:5px 0px 0px 5px;
}
.navbar li:last-of-type{
border-radius:0px 5px 5px 0px;
}
.navbar a{
text-decoration:none;
color:#E8142D
}<ul class="navbar">
<li><a href="#home">Início</a></li>
<li><a href="#artigos">Artigos</a></li>
<li><a href="#contato">Contato</a></li>
<li><a href="#sobre">Sobre</a></li>
</ul> An alternative would be to use inline-block instead of float (if the bar has full width is even better). Here's an example:
.navbar{
padding:0;
margin:0;
border-radius:5px;
background-color:#1A1A1A;
overflow:hidden;
list-style-type:none;
}
.navbar li,.navbar a {
display:inline-block;
}
.navbar a {
padding:10px;
font-weight:bold;
color:#E8142D;
text-decoration:none;
}
/* daqui pra baixo nem precisa, é só para
demonstrar como fazer diversas configurações */
.right {text-align:right}
.short {display:inline-block;text-wrap:none}
.navbar a:hover { color:#000; background:#666; }
ul.navbar {margin-bottom:10px}<ul class="navbar">
<li><a href="#home">Início</a></li>
<li><a href="#artigos">Artigos</a></li>
<li><a href="#contato">Contato</a></li>
<li><a href="#sobre">Sobre</a></li>
</ul>
<ul class="navbar right">
<li><a href="#home">Início</a></li>
<li><a href="#artigos">Artigos</a></li>
<li><a href="#contato">Contato</a></li>
<li><a href="#sobre">Sobre</a></li>
</ul>
<ul class="navbar short">
<li><a href="#home">Início</a></li>
<li><a href="#artigos">Artigos</a></li>
<li><a href="#contato">Contato</a></li>
<li><a href="#sobre">Sobre</a></li>
</ul>Points of interest:
other settings I've changed to their proper places too, so the CSS logic gets more organized according to the function of the elements
We changed the background color to the top element, so we can apply the rounded border to a
We use ul , so that overflow:hidden does not have square corners
I've added an example of :hover to understand the :hover advantage directly on the link.
As mentioned by @Guilherme, if you want to avoid spaces between inline blocks , here are several examples of how to avoid:
The problem is that the background is in elements inside the UL and not in the UL and these elements are floating right.
I think that because of the effect of the image you want the background to limit the area of the links, so you can do it in two ways, using display: inline-block; with overflow: hidden; (similar to @Bacco):
In both example I moved the background to ul
.navbar{
list-style-type:none;
padding:0px;
margin:0px;
font-weight:bold;
border-radius:5px;
display: inline-block;
background-color:#1A1A1A;
}
.navbar li{
display: inline-block;
padding:10px;
}
.navbar a{
text-decoration:none;
color:#E8142D
}<ul class="navbar">
<li><a href="#home">Início</a></li>
<li><a href="#artigos">Artigos</a></li>
<li><a href="#contato">Contato</a></li>
<li><a href="#sobre">Sobre</a></li>
</ul> However, elements inline or with display: inline-* usually generate a small margin below the elements (not always, depending on the situation and / or use of the font), this can be a bit annoying to solve, so you can use float no ul and a pseudo-element ( ::after or :after for older browsers) with clear:both;
.navbar{
list-style-type:none;
padding:0px;
margin:0px;
font-weight:bold;
border-radius:5px;
float:left;
background-color:#1A1A1A;
}
.navbar::after, .navbar:after{
clear: both;
content: " ";
height: 0;
display: block;
}
.navbar li{
float:left;
padding:10px;
}
.navbar a{
text-decoration:none;
color:#E8142D
}<ul class="navbar">
<li><a href="#home">Início</a></li>
<li><a href="#artigos">Artigos</a></li>
<li><a href="#contato">Contato</a></li>
<li><a href="#sobre">Sobre</a></li>
</ul>
<div style="background: #fc0;">oi</div> I talked to @Bacco, I think that two solutions that can be applied to resolve the spacing in inline-block would be font-size:0 (aside from the examples that bacco mentioned) and create a parent element, this way it will not generate the extra space and will not stick to the side of another element, for example:
.navbar {
font-size: 0;
}
.navbar ul {
font-size: 10pt; /*ou font-size: initial;*/
list-style-type:none;
padding:0px;
margin:0px;
font-weight:bold;
border-radius:5px;
display: inline-block;
background-color:#1A1A1A;
}
.navbar li{
display: inline-block;
padding:10px;
}
.navbar a{
text-decoration:none;
color:#E8142D
}<div class="navbar">
<ul>
<li><a href="#home">Início</a></li>
<li><a href="#artigos">Artigos</a></li>
<li><a href="#contato">Contato</a></li>
<li><a href="#sobre">Sobre</a></li>
</ul>
</div>
<div style="background: #fc0;">oi</div>And with the float it would look like this:
.navbar ul {
list-style-type:none;
padding:0px;
margin:0px;
font-weight:bold;
border-radius:5px;
float:left;
background-color:#1A1A1A;
}
.navbar::after, .navbar:after, /*aplica quebra no para o element pai*/
.navbar ul::after, .navbar ul:after { /*aplica quebra no para o UL*/
clear: both;
content: " ";
height: 0;
display: block;
}
.navbar li{
float:left;
padding:10px;
}
.navbar a{
text-decoration:none;
color:#E8142D
}<div class="navbar">
<ul>
<li><a href="#home">Início</a></li>
<li><a href="#artigos">Artigos</a></li>
<li><a href="#contato">Contato</a></li>
<li><a href="#sobre">Sobre</a></li>
</ul>
</div>
<div style="background: #fc0;">oi</div>