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

Alexandre Desbois
Alexandre Desbois
905 Points
Posted by Alexandre Desbois
Alexandre Desbois
905 Points

Problem of vertical position in topbar

Hi, I am having problems with the position of the elements in the topbar and I don't understand why they are not on the same vertical line.

Here is my code.

* {
    box-sizing: border-box;
}

.topbar {
    position: relative;
    width: 1170px;
    margin: 0 auto;
    height: 50px;
}

.topbar-menu {
    position: absolute;
    right: 0;
}

.topbar-title {
    position: absolute;
    left: 0;
}

The html part associated :

<header>
        <div class="topbar-container">
            <div class="topbar">
                <h1 class="topbar-title">Cours de piano à Nancy</h1>
                <nav class="topbar-menu">
                    <a href="#">Articles</a>
                    <a href="#">Cours de piano</a>
                    <a href="#">Qui suis-je ?</a>
                    <a href="#">Témoignages</a>
                    <a href="#">Contact</a>
                </nav>
            </div>
        </div>
    </header>

I tried with display: inline-block but it doesn't change anything. I also tried to modify the width in order for them to fit in the box.

Thanks for your help. I hope I pasted the code correctly in order for you to read easily.

3 Answers

Andrew Chen
Andrew Chen
9,446 Points
Andrew Chen
Andrew Chen
9,446 Points

Hi Alexandre. They’re not aligned as the title’s H1 element has a default margin-top and margin-bottom as defined in the browser’s default CSS / User Agent Style Sheets. To better see this problem visually, you can try inspecting the title element with your browser's developer console.

To solve, this, you could either remove the margin in your H1 element

h1 {
    margin: 0em;
}

OR add in a bit of space on top of your nav

.topbar-menu {
    position: absolute;
    right: 0;
        top: 50%;
}

Hope this helps! :)

Alexandre Desbois
Alexandre Desbois
905 Points
Alexandre Desbois
Alexandre Desbois
905 Points

Hi Andrew, thank you for your clear response. I understand why it didn't work now. It works perfectly for the h1, but for the topbar-menu, in order for my element to by centered I had to add :

.topbar-menu {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translatey(75%);
}

Normaly it's translatey(-50%). When I inspect my elements it says that I have a bottom-position of -18px, why so? How can I have a text perfectly centered verticaly ?

Visually it's nice now, but I would like to know how to do it the correct way in that case.

Thanks again :)

Alexandre Desbois
Alexandre Desbois
905 Points
Alexandre Desbois
Alexandre Desbois
905 Points

I found the solution, I didn't set a height for the container element.