191 posts Test Subject at Aperture Science
  • Envato Studio (Microlancer) Beta Tester
  • Envato Staff
  • Support Staff
  • Has been a member for 7-8 years
  • Attended a Community Meetup
  • Beta Tester
  • Bought between 50 and 99 items
  • Exclusive Author
  • Interviewed on the Envato Notes blog
+3 more
Ibby Staff says

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

164 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 10 and 49 users
  • Sold between 50 000 and 100 000 dollars
  • Won a Competition
tonyc says

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.

197 posts
  • Attended a Community Meetup
  • Elite Author
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 200 and 499 users
  • Sold between 250 000 and 1 000 000 dollars
themeva says

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 :)

191 posts Test Subject at Aperture Science
  • Envato Studio (Microlancer) Beta Tester
  • Envato Staff
  • Support Staff
  • Has been a member for 7-8 years
  • Attended a Community Meetup
  • Beta Tester
  • Bought between 50 and 99 items
  • Exclusive Author
  • Interviewed on the Envato Notes blog
+3 more
Ibby Staff says

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.

191 posts Test Subject at Aperture Science
  • Envato Studio (Microlancer) Beta Tester
  • Envato Staff
  • Support Staff
  • Has been a member for 7-8 years
  • Attended a Community Meetup
  • Beta Tester
  • Bought between 50 and 99 items
  • Exclusive Author
  • Interviewed on the Envato Notes blog
+3 more
Ibby Staff says

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!

1950 posts Do the Needful
  • Has been a member for 4-5 years
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • United States
  • Has attended an Envato Live event
  • Author had a Free File of the Month
  • Envato Studio (Microlancer) Beta Tester
  • Contributed a Blog Post
  • Beta Tester
+6 more
JamiGibbs says
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!
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.

191 posts Test Subject at Aperture Science
  • Envato Studio (Microlancer) Beta Tester
  • Envato Staff
  • Support Staff
  • Has been a member for 7-8 years
  • Attended a Community Meetup
  • Beta Tester
  • Bought between 50 and 99 items
  • Exclusive Author
  • Interviewed on the Envato Notes blog
+3 more
Ibby Staff says

done! thanks guys! =D

Cheers!

1950 posts Do the Needful
  • Has been a member for 4-5 years
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • United States
  • Has attended an Envato Live event
  • Author had a Free File of the Month
  • Envato Studio (Microlancer) Beta Tester
  • Contributed a Blog Post
  • Beta Tester
+6 more
JamiGibbs says

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;
}
191 posts Test Subject at Aperture Science
  • Envato Studio (Microlancer) Beta Tester
  • Envato Staff
  • Support Staff
  • Has been a member for 7-8 years
  • Attended a Community Meetup
  • Beta Tester
  • Bought between 50 and 99 items
  • Exclusive Author
  • Interviewed on the Envato Notes blog
+3 more
Ibby Staff says
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!

by
by
by
by
by
by