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
Justin Esders
9,154 PointsBanner/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
28,148 PointsJust 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.
Véronique Bellamy
20,810 PointsTo 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
28,148 PointsAgreed! Chrome DevTools are what I used to inspect it, and that foundations course helped me figure out how to use it properly. :)
Nachiket Kumar
3,590 PointsYou 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
39,199 PointsA quick and dirty way to do this is:
- float the
lis to make basic horizontal nav - put an
imgin the middle - make a CSS "banner"
- line up the
imgwith the banner - use nth-child to space out the
<li>s
Try it out on codepen and let us know how it goes