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 Alexandros S.
Alexandros S.
8,261 Points

Positioning a nav on a header with a logo

So I've designed a website by myself and I tried to build it in code. My the first problem that I encountered was at the header with the nav. No matter what I do I just can't seem to be able to vertically center align the nav. Please help me, here's my code

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- ********************* HEADER ********************* -->
    <header>
        <ul class="logo">
            <li class="logo-1"><img src="../Design/logo/doge.svg"></li>
            <li class="logo-2"><img src="../Design/logo/doge world.svg"></li>
        </ul>


        <ul class="nav">
            <li><a href="#">About</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Locations</a></li>
            <li><i class="ion-android-search"></i></li>
        </ul>
    </header>
<!-- ********************* HEADER END ********************* -->

and the css...

/* ----------------------- GLOBAL ----------------------- */


ul,
li {
  list-style: none;
  display: inline-block;
}
.container {
  max-width: 90%;
  margin: 0 auto;
}
img {
  max-width: 100%;
}
/* ----------------------- HEADER ----------------------- */

header {
  background-image: url('../Design/pics/14635753.jpg');
  background-position: 50% 30%;
  height: 700px;
}

/* ----------- lOGO ----------- */

.logo {
  display: inline-block;
}
.logo-1 img {
  width: 70px;
  height: 70px;
  display: inline-block;
}
.logo-2 img {
  width: 200px;
  height: 20px;
  margin-bottom: 20px;
  display: inline-block;
}

/* ----------- NAV ----------- */
.nav {
  display: inline-block;
  text-align: right;
  width: 80%;
  top: 0;
}
.nav li  {
  display: inline-block;
  color: white;
  margin-left: 20px;
}
.nav li a {
  text-decoration: none;
  color: white;
}

1 Answer

Joe Schultz
Joe Schultz
6,191 Points

In your CSS, try floating the nav to the right, and decreasing the width. Like this:

.nav {
  display: inline-block;
  float: right;
  text-align: right;
  width: 50%;
  top: 0;

In your html, try enclosing the 2 unordered lists in a div, with the class container.

<header>
        <div class="container">
            <ul class="logo">
                <li class="logo-1"><img src="img/papacafe.png"></li>
                <li class="logo-2"><img src="img/Web-scripting-languages.png"></li>
            </ul>


            <ul class="nav">
                <li><a href="#">About</a></li>
                <li><a href="#">Forum</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Locations</a></li>
                <li><i class="ion-android-search"></i></li>
            </ul>
        </div>
    </header>

Hope this helps!

Alexandros S.
Alexandros S.
8,261 Points

Yea it works just like I wanted it to! Thank you so much, I hadn't written code in some time now so I had some trouble remembering some stuff. I was struggling with this for hours.

Joe Schultz
Joe Schultz
6,191 Points

My pleasure. Glad I was able to help!