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

Brian Thomas
Brian Thomas
8,947 Points
Posted by Brian Thomas
Brian Thomas
8,947 Points

How to separate text/links that’s overlapping?

I’m doing a small project for myself and I can’t seem to get the text/links in the right of the navbar to separate inline within in each other. I have my code here along with one screenshot of what I have and the 2nd screen shot of what I’m trying to execute.

<header class=“fixed-header”>

        <h1 class=“logo”>IPhone X</h1>

    <nav class=“fixed”>
        <a href=“overview.html” class=“fixed-links”>Overview</a>
        <a href=“ios.html”class=“fixed-links”>IOS</a>
        <a href=“TS.html”class=“fixed-links”>Tech Specs</a>
        <a href=“buy.html”class=“fixed-links”>Buy</a>
    </nav>
</header>

.fixed-header{

position: fixed;
width: 100%;
border-bottom: 1px solid #323232;
height: 50px;

}

.fixed-links{

position: absolute;
top: 20px;
right: 40px;

}

.logo{

font-size: 20px;
padding-left: 150px;

}

This is what I want the end result to look like. I’m not worried about the actual hover styling and button styling yet.

2 Answers

Robbie Thomas
Robbie Thomas
31,093 Points
Robbie Thomas
Robbie Thomas
31,093 Points

Your HTML looks a little bit off, I corrected it for you (or at least I think I did):

<h1 class=“logo”>IPhone X</h1>

    <nav class=“fixed”>
        <a href=“overview.html” class=“fixed-links”>Overview</a>
        <a href=“ios.html” class=“fixed-links”>IOS</a>
        <a href=“TS.html” class=“fixed-links”>Tech Specs</a>
        <a href=“buy.html” class=“fixed-links”>Buy</a>
    </nav>
</header>

There needs to be a space between a href="ios.html" and class="fixed-links"

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

There's two issues here. First, the HTML code has word-processor style ("curly") quotes which the browser probably will not interpret correctly (my Chrome sure doesn't). For example:

    <h1 class=“logo”>IPhone X</h1>  <!-- original line with curly quotes -->
    <h1 class="logo">IPhone X</h1>  <!-- corrected with standard quotes instead -->

Then, the "fixed-links" are all being absolutely positioned directly on top of each other. I suspect you meant to create that rule for the whole nav ("fixed") instead:

.fixed {   /* not ".fixed-links" */
  position: absolute;
  top: 20px;
  right: 40px;
}