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
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.
Kevin Korte28,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.
Nachiket Kumar3,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.