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!

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


Banner/Header Design

Hi I saw this site. I was wondering how you might go about making something similar to this site. http://www.redlinepe.co.uk/ My question is it an image and do you just apply an image map. I would love to be able to create something like this --link--link--Logo--link--logo.

Can someone tell me how this is done.

4 Answers

Kevin Korte
Kevin Korte
28,148 Points

Just looking at their markup -

Their logo comes first in the markup, followed by a huge left padding of 346px. Since they have a fixed container width, they were able to do some simple math to figure that out.

Then, for the menu items, they have your standard unordered list. The first three list items have no class. The fourth list item has a class of "fourth", which adds to it a 274px left margin. Then, list items 5-6-7 are normal again. This empty "fourth" list item pushes the last three menu items far enough to the right clear the logo.

Both the logo div and the nav element have absolute position applied so that they stack like that, and the creators of the code where able to use exact pixels values to push and move elements around.

Take a look at their markup. It'll help.

To add to Kevin's feedback:

I would recommend the Chrome DevTools Basics stage in Technology Foundations, which may help you figure out how elements from the site are designed.

Kevin Korte
Kevin Korte
28,148 Points

Agreed! Chrome DevTools are what I used to inspect it, and that foundations course helped me figure out how to use it properly. :)

Nachiket Kumar
Nachiket Kumar
3,590 Points

You can inspect the source code of any website and usually get to see very accurately how it was created. If you're using Chrome, right click on the header and choose 'Inspect Element'. Now you can see what the HTML markup is and what CSS styles are applied to any given element.

James Barnett
James Barnett
39,199 Points

A quick and dirty way to do this is:

  • float the lis to make basic horizontal nav
  • put an img in the middle
  • make a CSS "banner"
  • line up the img with the banner
  • use nth-child to space out the <li>s

Try it out on codepen and let us know how it goes