Hello, this is my first attempt at creating a website and I am currently working on designing a navigation bar with evenly spaced list items and dropdown boxes. While I have successfully implemented the dropdown boxes, I am struggling to evenly distribute the items across the navigation bar. Any assistance or guidance would be highly appreciated. CSS:
body {
background-image: url('paper.png');
background-repeat: repeat;
z-index: -1;
}
h1 {
font-size: 32px;
text-decoration: none;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 19px;
}
h4 {
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
color: #E24000;
padding: 0px 0px 0px 1%;
text-shadow: 0.5px 0.5px 1px #333333;
font-weight: normal;
}
h5 {
font-size: 13px;
}
h6 {
font-size: 11px;
}
p {
font-size: 11px;
font-family: Tahoma, Geneva, sans-serif;
padding: 0px 0px 0px 1%;
}
#logo {
padding-top: 5%;
padding-bottom: 2.5%;
display: block;
margin-left: auto;
margin-right: auto;
height: 18%;
width: 18%;
}
#top_image {
background-image: url('family.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
#nav {
background-color: #A1C6E5;
}
#nav_wrapper {
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 1% 1% 1% 1%;
font-size: 20px;
font-family: Tahoma, Geneva, sans-serif;
text-align: justify;
text-shadow: 1px 1px 2px #333333;
background-color: #A1C6E5;
}
#nav ul{
list-style-type: none;
height: auto;
padding-top: 1%;
padding-bottom: 1%;
margin: 0px;
position: relative;
display: block;
text-align: center;
}
#nav ul li{
display: inline-block;
text-align: center;
}
#nav ul li:hover{
}
#nav ul li a,visited{
color: #FFFFFF;
display: block;
padding: 5%;
text-decoration: none;
}
#nav ul li a:hover {
color: #E24000;
text-decoration: none;
}
#nav ul li:hover ul{
display: block;
}
#nav ul ul{
display: none;
position: absolute;
background-color: #A1C6E5;
}
#nav ul ul li{
display: block;
}
#nav ul ul li a,visited{
color #CCC;
}
#nav ul ul li a:hover{
color: #E24000;;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Vitalita</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="top_image">
<a href="Home.html"><img id="logo" src="logo.png" alt="Vitalita"></a></br>
</header>
<nav id="nav">
<nav id="nav_wrapper">
<ul>
<li><a href="About.html">About</a>
<ul>
<li><a href="Contactus.html">Contact Us</a></li>
<li><a href="Feedbackform.html">Feedback</a></li>
<li><a href="Helpdesk.html">Helpdesk and FAQ</a></li>
<li><a href="Privacy.html">Privacy Policy</a></li>
</ul>
</li>
<li><a href="Health.html">Health</a></li>
<li><a href="Media.html">Media</a></li>
<li><a href="Tools.html">Tools</a></li>
<li><a href="Forum.html">Forum</a></li>
<li><a href="Account.html">Account</a></li>
</ul>
</nav>
</nav>
</br>
<section>
<article>
<header>
<br><h4>Featured article: Best time of the day to exercise</h4><br>
</header>
<p> The best time of day to exercise is long disputed. In the morning? You'll be worn out for the rest of the day. Before a meal? You won't have enough energy to push yourself. After eating? The food will weigh you down! Before bed? The endorphins will keep you up. We'll take to through the pros and cons of each time.</p>
</article>
</section>
<aside>
<br><h4>Tip of the day!</h4><br>
<p>Clouds don't block all UV rays. Wear sunscreen, even in bad weather!</p>
</aside>
<section>
<header>
<br><h4>About us</h4><br>
</header>
<p>We are a group of uni students dedicated to making the world a healthier place, starting with our own friends. We try our best to make Vitalita a fun, supportive environment that fosters healthy lifestyles, and is a source for reputable information on obesity. We hope you enjoy yourself here.</p>
</section>
<section>
<header>
<br><h4>Contact Us</h4><br>
</header>
<p>Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceb8a7baafa2a7baaf8ea9a3afa7a2e0ada1a3">[email protected]</a><br>School of IT<br>The University of Sydney<br>Australia<br>Or by this online form!</p>
</section>
<footer>
<p>Copyright Vitalita 2014</p>
</footer>
</body>
<html>
I do have other pages as well, but I assume they may not be relevant to the current query.
Thank you sincerely to anyone who can offer their assistance.
Cheers,
Joshua