Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jason Nelson
Jason Nelson
9,127 Points

Help with Navigation menu

Hi, I'm attempting to make a Nav menu with 2 items. I would like the items to be far apart from each other. The "Work" item seem to be ok, but I'm having trouble with the "Contact" item. I would like it to be relative same distance from the right far end of the screen as the Work item is from the left side. However, I can't get the positioning of the Contact item to be "responsive" with the screen when it's adjusted.

I'm sure there is some simple fix, but I'm drawing a blank.

<!doctype html>
<html>
<head>


    <link rel="stylesheet" href="style.css">

    <title>My site</title>

<style>

    @font-face {
    font-family: myfont;
    src: url(Track.otf)
}

</style>


</head>

<body>
<nav class="trwork">
    <ul>
        <li><a class="first" href="work">Work</a></li>
        <li><a class="me" href="contact">Contact</a></li>
    </ul>

</nav>

<br></br>

<div class="text">
    <h1>Test Site</h1>
    <h2>It's me</h2>
</div>

</body>
</html>

CSS

* {
    box-sizing: border-box;
}


body {
    margin: 0;
    background-color: #E2CD8C;
}

/* Navigation */

a:link {
    text-decoration: none;
    font-family: myfont;
    color: white;
    }

.trwork ul {
    list-style-type: none;
    }

/* list items */

.trwork ul li {
    float: left;
    }



.me {
    padding-left: 1000px;
    position: fixed;
    }


/* headlines */

.text {
    margin-top: 100px;
    margin-left: 0;

}

/*headlines */

h1,
h2 {
    text-align: center;
    font-family: myfont;
    color: white;
}

h1 {
    font-size: 70px;
    margin-top: 400px;
}

1 Answer

Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

Remove

.trwork ul li {
   float: left;
}

And add

.trwork {
   text-align: center;
   list-style-type: none;
}

.trwork ul li {
   display: inline-block; /* displays everything in a line */
   width: 49.7%; /* gives it half of the width of the nav to the 2 list item */
}

Hope it helps. Here is a pen to see if that's what you are looking for http://codepen.io/Jesusz0r/pen/PwdowN

Jason Nelson
Jason Nelson
9,127 Points

Hmm It does give the desired effect, but is there a way to have the work and contact links further apart from each other? I'm trying to put one close to the end of the left side and the other close to the end of the right side of the screen. When setting the ul li width: >49.7% the contact link breaks the line and goes directly under the work link.

* {
    box-sizing: border-box;
}


body {
    margin: 0;
    background-color: #E2CD8C;
}

/* Navigation */



a:link {
    text-decoration: none;
    font-family: myfont;
    color: white;
    }

.trwork  {
    text-align: center;
    list-style-type: none;
    width: 100%;


    }

/* list items */



.trwork ul li {
    display: inline-block;
    width: 49.7%;
    margin: 0;

    }



.me {


    }


/* headlines */

.text {
    margin-top: 100px;
    margin-left: 0;

}

/*headlines */

h1,
h2 {
    text-align: center;
    font-family: myfont;
    color: white;
}

h1 {
    font-size: 70px;
    margin-top: 400px;
}