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 Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Positioning , again.

Hi,

What could i do to improve my layout on banner? apart from repeating my self .

http://codepen.io/anon/pen/NPGqBb

3 Answers

Bob Puccini
Bob Puccini
7,011 Points
Bob Puccini
Bob Puccini
7,011 Points

Looks awesome to me! How do you get the white fade-in on your top buttons?

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Well, but i mean the code is messy :(

Like this:

.top-nav li a{
 font-weight:bold;
    border-radius:6px;
    padding:0.5em 1em;
    background:#696969;
    margin-right:10px;
    transition:all 0.4s ease;
}
.top-nav li a:hover{
    background:#fff;
    color:#696969;
}
Salman Akram
PLUS
Salman Akram
Courses Plus Student 40,065 Points
Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Hi Gayle,

You see, white fade-in is specifically called hover where mouse came to link bar, the style will change its colors. 

a:hover {

<You choose any colors and background> 

}

23 Great Examples of Innovative Navigation

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Um you just pointed only a hover stare.

As i pasted the code above the specific code line is : transition: all 0.4s ease.

If you look close , its not an instant hover, its a slow cover with 0.4s .

Im just pointing it out ^^

Ryan Duchene
PLUS
Ryan Duchene
Courses Plus Student 46,022 Points
Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Your banner has a very simple, clean design/layout with clear calls to action. It gets an A from me. ;) Never be afraid to make something too simple.

As an aside, I'll say that it should be responsive, but your minimal design should make responsive behavior a snap to integrate.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

It will be responsive but with media queries.

But the code inside, the positioning is it it ok? because it look a bitvmessy to me :/