193 posts Test Subject at Envato Science
  • Member of the Envato Team
  • Has been part of the Envato Community for over 7 years
  • Attended one of our Meetups around the world
  • Helped several times protecting Envato Market against copyright violations
+6 more
Ibby Envato team 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
  • Has been part of the Envato Community for over 6 years
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+3 more
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.

201 posts
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Attended one of our Meetups around the world
+4 more
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 :)

193 posts Test Subject at Envato Science
  • Member of the Envato Team
  • Has been part of the Envato Community for over 7 years
  • Attended one of our Meetups around the world
  • Helped several times protecting Envato Market against copyright violations
+6 more
Ibby Envato team 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.

193 posts Test Subject at Envato Science
  • Member of the Envato Team
  • Has been part of the Envato Community for over 7 years
  • Attended one of our Meetups around the world
  • Helped several times protecting Envato Market against copyright violations
+6 more
Ibby Envato team 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 sold $125,000+ on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
+10 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.

193 posts Test Subject at Envato Science
  • Member of the Envato Team
  • Has been part of the Envato Community for over 7 years
  • Attended one of our Meetups around the world
  • Helped several times protecting Envato Market against copyright violations
+6 more
Ibby Envato team says

done! thanks guys! =D

Cheers!

1950 posts Do the Needful
  • Has sold $125,000+ on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
+10 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;
}
193 posts Test Subject at Envato Science
  • Member of the Envato Team
  • Has been part of the Envato Community for over 7 years
  • Attended one of our Meetups around the world
  • Helped several times protecting Envato Market against copyright violations
+6 more
Ibby Envato team 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!

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by