Hello guys, fairly new to Web development, I have following questions.
I am making a project, first step is to make a navigation bar, and I think I’ already finished.
Here is my code https://jsfiddle.net/05gtnrve/
So I have two questions
- The hover button was not working as intended, meaning it wasn’t the background wasn’t covering the entire block of text, not until I started playing around padding
.nav li a{
text-decoration: none;
font-family:arial;
color:white;
font-weight:bold;
padding:13px;
Anything shorter than 13px was small, more than 13px went over my red/orange border
So the question is why 13px, how did it calculate it?
Second question, I’m trying to position the blue “NSM” list in the center, but with no avail, I have tried text-align:center but it doesn’t work, any ideas?
Thanks
Since you gave .nav{height:40px}
and .nav li{height:40px;}
and accroding to this when you gave .nav li a{padding:13px}
then height of a
element is equal to 40px
and when you set padding less than 13px then height of a
element is shorter then its parent and when you use padding larger than 13px then height of a
element is larger than its parent ,so to fix this problem you need some changes, remove height:40px;
property from both .nav
and .nav li
and add overflow:auto;
property to .nav
now add display:inline-block;
property to .nav li a
and remove padding:10px 0px 10px 0px;
property from ul
.
second to position "NSM"
to center of its parent set width:75%;
property of the .button
and width:25%;
of the .logo
(note :you can give width of both .button
and .logo
according to your requirement but be sure that sum of both width should be equal to 100%).
and give float:right;
and text-align:center;
to the .logo
.
hope you find my answer correct.