Vertical alignment of inline-block navigation list in section
I am a beginner in html and css and I am building my first site based on my psd project, I have just started building it and I cannot solve one problem.
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.grid {
margin: 0 auto;
width: 960px;
}
.primary-header {
position: relative;
background-color: #fff;
height: 85px;
}
.logo {
position: absolute;
top: 29px;
}
.primary-nav {
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
}
.nav {
text-align: right;
}
.nav li {
display: inline-block;
vertical-align: top;
margin: 0 30px;
padding: 11px 30px;
}
.nav li:hover {
border: 1px solid #333;
border-radius: 5px;
background-color: #333;
color: #fff;
}
.nav li:last-child {
margin-right: 0;
}
border:1px solid #333;
border-radius:5px;
background-color:#333;
padding-bottom:10px;
color:#fff;
}
.nav li:last-child {
margin-right: 0;
}
<header class="primary-header">
<div class="grid group">
<a href="index.html">
<img src="http://i58.tinypic.com/2q2prah.png" class="logo" alt="logo">
</a>
<nav class="nav primary-nav">
<ul>
<li>O firmie</li>
<!--
-->
<li>Oferta</li>
<!--
-->
<li>Realizacje</li>
<!--
-->
<li>Kontakt</li>
</ul>
</nav>
</div>
</header>
and here is the effect I achieved:
So the problems are:
-
After pointing the cursor over the menu item, padding-top and padding-bottom are too big, it should be 11px and it now supports 19px
-
According to the margin-top in the ".nav li" my nav should be vertically aligned, but it is a little too much at the bottom, if I set margin-top: 0px; there is still a space than my nav, why?
-
After I find any menu item with the cursor, all the menu items move 1px down, why?
Thanks for your answers, I have been looking for answers for about 2 hours and I still haven't found it ... please help me ..
source to share
Here's my best answer to your questions:
1) Indent in addition to your text. For example, with Firebug, I see OFERTA measured as 15px tall. Add 11px up and down and you get 37px. To get it down to 11px, you'll have to reduce the font size and add minimal padding. If you don't care as long as the menu item isn't too big, then just omit the vertical padding in
padding: 11px 30px;
2) By default the ul element has some margins. Set the field to 0 for navigation to remove it.
3) Earlier, before hovering, CSS rules indicate that the menu item has no border. In nav li: hover, the CSS adds a border that increases the overall area and compensates and stays in the center as the text moves slightly downward. The fix would be to add a border to the nav li.
Besides,
border:1px solid #333;
border-radius:5px;
background-color:#333;
padding-bottom:10px;
color:#fff;
}
seems out of place. Open parenthesis and identifier missing.
source to share
The number 1 displays IE11 fine on my machine. Show 11px padding-top
and -bottom
. So it works as it should. Maybe this is undesirable?
The number 2 is called the location at UL, it 12px
.
.nav ul {
margin-top: 0px;
}
The number 3 is caused by the added border on hover. You need to use an additional add-on or set the transparent border tonav.li
.nav li {
display: inline-block;
vertical-align: top;
margin: 0 30px;
padding: 11px 30px;
border: 1px solid transparent;
}
source to share