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 Mark Bacolcol
Mark Bacolcol
7,354 Points

UL Alignment

Hey, so I'm working on something for fun, but I'm having trouble finding the best way to align and position a UL I have created for a navigation bar.

So the goal was to get it vertically centred and somewhere along the right side of the header. I somewhat got the UL to the position I was going for, but I feel my method was sort of ineffective in terms of precisely positioning within the header. Please give my CSS a look and help me to understand what I could have done differently. Feel free to also point out any unrelated improvements that can be made.

Cheers, Mark

body {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    height: 7em;
    background-color: #dc0405;
    background-image: url("FNALogo.jpg");
    background-repeat: no-repeat;
    background-size: 25%;
    background-position: 1.5em 50%;
    border-bottom: solid gray 0.33em;

}

.header ul {
    margin: 0;
    padding: 0;
    text-align: right;
}

.header ul li {
    list-style: none;
    display: inline-block;
    margin: 3em 5em 3em 3em;
}

.header ul li a {
    text-decoration: none;
    color: white;
}

EDIT!

I've applied some changes and have somewhat achieved the positioning I wanted but I was wondering how can I precisely vertically centre the nav as well as the .Logo within the header by using percentages instead of em's or pixels. I'm finely positioning the elements by guessing, but I feel this is really ineffective and that's an easier and simpler way to do so.

Here's both my HTML and CSS. Your input will be greatly appreciated.

    <body>

        <header>
            <a href="#"><img class="Logo" src="FNALogo.jpg"><a>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Accounts</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </nav>
        </header>

    </body>

body {
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    height: 7em;
    background-color: #dc0405;
    border-bottom: solid gray 0.33em;
}

.Logo {
    width: 25%;
    position: relative;
    top: 18%;
    left: 1.5em;
}

nav {
    float: right;
    margin: 3em;
}

nav ul {
    margin: 0 3em;
}

nav ul li {
    list-style: none;
    display: inline-block;
    padding: 0 2em;
}

nav ul li a {
    text-decoration: none;
    color: white;
}

2 Answers

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

Hi Mark l agree with the code above. You need to float the Ul element to the right. That shouldn't help in other cases you can use positioning relative to do the job but for starters l think using float right is something you need to get a hand on and understand. Checkout the css layout courses. They got good stuff there and again also recommend css frameworks because they make your life easier when you understand how to use them.

Mark Bacolcol
Mark Bacolcol
7,354 Points

Will "float: right;" vertically centre the UL?

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

that should work l get a felling you are targeting the wrong ellemnts lets have a look at your html code aswell.

Did a little demo for you probz that helps check if out on here Here

Mark Bacolcol
Mark Bacolcol
7,354 Points

I've applied some changes and have somewhat achieved the positioning I wanted but I was wondering how can I precisely vertically centre the nav as well as the .Logo within the header by using percentages instead of em's or pixels. I'm finely positioning the elements by guessing, but I feel this is really ineffective and that's an easier and simpler way to do so.

Here's both my HTML and CSS. Your input will be greatly appreciated.

    <body>

        <header>
            <a href="#"><img class="Logo" src="FNALogo.jpg"><a>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Accounts</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </nav>
        </header>

    </body>

body {
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    height: 7em;
    background-color: #dc0405;
    border-bottom: solid gray 0.33em;
}

.Logo {
    width: 25%;
    position: relative;
    top: 18%;
    left: 1.5em;
}

nav {
    float: right;
    margin: 3em;
}

nav ul {
    margin: 0 3em;
}

nav ul li {
    list-style: none;
    display: inline-block;
    padding: 0 2em;
}

nav ul li a {
    text-decoration: none;
    color: white;
}
Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

Don,t want to spoil the fun check out this Course it tell you exactly what you need to know. it uses relative and absolute position to align the elements.IF after you are still struggling to do it then l would do you another demo on codepen to explain.

l think you would learn alot by studying how to do it than me passing you the code.

Mark Bacolcol
Mark Bacolcol
7,354 Points

Awesome, I thought it was something I have missed along the way, but instead it's something I have yet to learn. Thanks a lot for your help, really appreciate it!

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

no worries we are all here to help each other thats the beautiful of the tech community and treehouse does one of the best jobs at that with this forum.if you happen to get stuck on anything again just ask on the forum and someone will get to you.

All the best and good luck

Garrett Sanderson
Garrett Sanderson
12,735 Points
Garrett Sanderson
Garrett Sanderson
12,735 Points

Hi Mark,

If you want the nav ul to be placed on the right hand side of the header then you have to use the css rule, float.

In your html, give the ul list that you have a parent tag of "nav"

Also you can change the div with the class header to just header

<header>

<nav>

<ul>

<li>home</li>
<li>about</li>

</ul>

</nav>

</header>

header {
    width: 100%;
    height: 7em;
    background-color: #dc0405;
    background-image: url("FNALogo.jpg");
    background-repeat: no-repeat;
    background-size: 25%;
    background-position: 1.5em 50%;
    border-bottom: solid gray 0.33em;

}

nav {
float: right;
}

nav ul {
    margin: 0;
    padding: 0;
    text-align: right;
}

nav ul li {
    list-style: none;
    display: inline-block;
    margin: 3em 5em 3em 3em;
}

nav ul li a {
    text-decoration: none;
    color: white;
}
Mark Bacolcol
Mark Bacolcol
7,354 Points

Will "float: right;" vertically centre the UL?

Mark Bacolcol
Mark Bacolcol
7,354 Points

I've applied some changes and have somewhat achieved the positioning I wanted but I was wondering how can I precisely vertically centre the nav as well as the .Logo within the header by using percentages instead of em's or pixels. I'm finely positioning the elements by guessing, but I feel this is really ineffective and that's an easier and simpler way to do so.

Here's both my HTML and CSS. Your input will be greatly appreciated.

    <body>

        <header>
            <a href="#"><img class="Logo" src="FNALogo.jpg"><a>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Accounts</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </nav>
        </header>

    </body>

body {
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    height: 7em;
    background-color: #dc0405;
    border-bottom: solid gray 0.33em;
}

.Logo {
    width: 25%;
    position: relative;
    top: 18%;
    left: 1.5em;
}

nav {
    float: right;
    margin: 3em;
}

nav ul {
    margin: 0 3em;
}

nav ul li {
    list-style: none;
    display: inline-block;
    padding: 0 2em;
}

nav ul li a {
    text-decoration: none;
    color: white;
}