CODEWITHSUNDEEP
csshtmlhtml-listsnavbar
joshuatvernon
joshuatvernon

Reputation: 1621

How can I evenly space my navigation bar elements using percentages?

Hey this is my first website and I am trying to make a nav bar with evenly spaced list items and drop down boxes. I've figured out how to make drop down boxes however in the process I am now unable to evenly spread my items out across the nag bar.

Any help would be greatly 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: [email protected]<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 also have other pages though I imagine they are not pertinent to the solution.

Again thank you very much anyone who is able to help me out.

Cheers,

Joshua

Upvotes: 1

Views: 1448

Answers (1)

T J
T J

Reputation: 43156

If ancient browser support is not an issue, you can use css3 flexbox:

#nav ul {
  display: flex;
  justify-content:space-around;
  list-style-type: none;
  height: auto;
  padding-top: 1%;
  padding-bottom: 1%;
  margin: 0px;
  position: relative;
  text-align: center;
}

Demo

Upvotes: 2

Related Questions