Hey guys.

I’m on my way to learn css. I would really appreciate your help in the following issue.

I made this quick mockup http://cl.ly/41e7b74d53c4aff837aa and this is what I have done so far in css http://ibrarodriguez.com/UglyWebsite/

Css code: https://gist.github.com/6066abd15fdc7b1fca1e

My question is: How do I align the menu just like I did in the mockup. I think that should be 16px from right, because logo has 16px from left. I mean I just want the menu in the very same place as mockup.

Thanks

By giving your link items a left and right padding of 35px you are pushing the navigation 51px to the right.

So you should either use only left padding or adjust the last element to have 0 right padding etc.

There are many different ways of achieving what you want in this situation.

Personally I wouldn’t use absolute positioning at all in this situation as I tend to use floats more.

Hi,

Just taken a quick look, because you have 35px padding left,right of the menu item you won’t get the menu that close to the right hand side.

I’m not sure if you are making it dynamic, but you could add a class the last menu item e.g.

navigation li a.last { padding: 0 0 0 35px; }

Also, you have set a static width of 500px; remove this so that the menu items make up the width or reduce the size.

Hope that helps

hey guys thanks for replying. Would you mind writing the code for me? I can understand what you are just saying but I don’t really know where to apply it within the code.

Thanks in advance.

ok I think I made it. http://ibrarodriguez.com/UglyWebsite/

I have removed absolute positioning and wrote float: left but it goes out of the position again. How could I make this using floating?

Thanks guys!

ok I think I made it. http://ibrarodriguez.com/UglyWebsite/

I have removed absolute positioning and wrote float: left but it goes out of the position again. How could I make this using floating?

Thanks guys!

#navigation {
color:#FFFFFF;
float:right;
font-family:"Trebuchet MS",Arial,Verdana;
font-size:14px;
font-weight:bold;
margin:55px 20px 0 0;
text-transform:uppercase;
}

...and adjust the position of the navigation by changing the margin numbers.

done! thanks guys! =D

Cheers!

Also, to make the spacing between each link match more closely to your mock-up design, you just need to adjust the padding of this element:

#navigation a {
color:#FFFFFF;
padding-left:50px;
text-decoration:none;
}

Replace #navigation with this:

#navigation {
color:#FFFFFF;
float:right;
font-family:"Trebuchet MS",Arial,Verdana;
font-size:14px;
font-weight:bold;
margin:55px 20px 0 0;
text-transform:uppercase;
}

...and adjust the position of the navigation by changing the margin numbers.

oh thank you so much JamiGibbs. =D doing this right away!