Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,109 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,109 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