DesigntheWorld
New Member
Hey community,
Hope you all doing just fine! I have yet another question for you all.
I am practicing coding navigation menus. I am trying to do an html5 nav, so I found an updated tutorial here to follow along: http://multimedia.journalism.berkeley.edu/tutorials/css-layout/nav-menu/
Here is the html and css for this tut:
Question 1:
I was wondering what would be the best way to center the nav..from what I've read I could achieve this using various methods, such as declaring a width on the nav ul and then doing a margin 0 auto......or positioning it absolute and then push it from the left x amount of pixels, but what is the best way to center this navigation menu? Should I be targeting the nav or the nav ul to achieve this?
Question 2:
Is it bad practice to wrap the entire navigation in a div and then target that div in the css and set it to margin 0 auto in order to center it? Or is doing this just adding extra unnecessary html markup?
Hope you all doing just fine! I have yet another question for you all.
I am practicing coding navigation menus. I am trying to do an html5 nav, so I found an updated tutorial here to follow along: http://multimedia.journalism.berkeley.edu/tutorials/css-layout/nav-menu/
Here is the html and css for this tut:
HTML:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a>
<ul>
<li><a href="/crew">Our Crew</a></li>
<li><a href="/history">Plumbing History</a></li>
<li><a href="/vision">Plumbing Vision</a></li>
</ul>
</li>
<li><a href="/products">Products</a>
<ul>
<li><a href="/pipes">Pipes</a></li>
<li><a href="/wrenches">Wrenches</a></li>
<li><a href="/solder">Soldering Tools</a></li>
<li><a href="/pbc">PVC Joints</a></li>
<li><a href="/sprockets">Spacely Sprockets</a></li>
</ul>
</li>
<li><a href="/services">Services</a>
<ul>
<li><a href="/visites">Site Visits</a></li>
<li><a href="/spot">Spot Welding</a></li>
<li><a href="/tig">TiG Welding</a></li>
<li><a href="/mig">MiG Welding</a></li>
<li><a href="/drain">Drain Service</a></li>
</ul>
</li>
<li><a href="/contact">Contact</a>
<ul>
<li><a href="/email">Via Email</a></li>
<li><a href="/contact_form">Web Form</a></li>
<li><a href="/pigeon">Carrier Pigeon</a></li>
</ul>
</li>
</ul>
</nav>
Code:
/* START NAV MENU */
nav {
background-color:#2C5463;
height:40px;
}
nav ul {
font-family: Arial, Verdana;
font-size: 20px;
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: block;
position: relative;
float: left;
}
nav li ul {
display: none;
}
nav ul li a {
display: block;
text-decoration: none;
padding: 7px 15px 3px 15px;
background: #2C5463;
color: #ffffff;
margin-left: 1px;
white-space: nowrap;
height:30px; /* Width and height of top-level nav items */
width:90px;
text-align:center;
}
nav ul li a:hover {
background: #617F8A;
}
nav li:hover ul {
display: block;
position: absolute;
height:30px;
}
nav li:hover li {
float: none;
font-size: 11px;
}
nav li:hover a {
background: #3A464F;
height:30px; /* Height of lower-level nav items is shorter than main level */
}
nav li:hover li a:hover {
background: #95A9B1;
}
nav ul li ul li a {
text-align:left; /* Top-level items are centered, but nested list items are left-aligned */
}
/* END NAV MENU */Question 1:
I was wondering what would be the best way to center the nav..from what I've read I could achieve this using various methods, such as declaring a width on the nav ul and then doing a margin 0 auto......or positioning it absolute and then push it from the left x amount of pixels, but what is the best way to center this navigation menu? Should I be targeting the nav or the nav ul to achieve this?
Question 2:
Is it bad practice to wrap the entire navigation in a div and then target that div in the css and set it to margin 0 auto in order to center it? Or is doing this just adding extra unnecessary html markup?
