nav bar links not spacing correctly – my first attempt

[Brussells]

Ok – First techy post.

Firstly, I’m a complete newb to CSS so please don’t shoot me down :D

Have been watching the video podcasts and started on a Photoshop mockup ala Podcast #1, 2 & 3. Now, I’m struggling to get the nav links to line up correctly. Also, I was in thinking that the text links should have an area around them which can be clicked for the link? Is that correct? (therefore making it look like a button is the a link and not just the text) Hope this all makes sense with my non technical use of language :lol:

Now. URL is http://www.portable-media-players.co.uk

code I have created so far is:
Index:

Code:

• Home
• Archos
• Creative
• Samsung
• Others

Main Content

style.css:

Code:

* {
margin: 0;
padding: 0;
}
body {
font-size: 1.3em
font-family: Helvetica, sans-serif;
background: url(images/banner-slice.jpg) repeat-x top #eff4a4;
}
li {
font-size: 0.9em;
}
div#page-wrap {
width: 792px;
margin: 0 auto;
}
ul#nav {
height: 216px;
background: url(images/banner.jpg) no-repeat ;
list-style: none;
padding-left: 430px;
}
ul#nav li {
display: inline;
}
ul#nav li a {
display: block;
width: 70px;
float: left;
margin-top: 170px;
color: white;
font-weight: bold;
text-decoration: none;
}

Hopefully you can see what I am getting at.
I’m wondering whether it’s due to the nav buttons being off center and using the div#page-wrap is causing the width to act from the center of the page? Purely guessing really but that’s the only difference I could initially see between mine and the example in the podcast.

Anyways, hoping someone can aid me in getting my first CSS site working :)

Thanks in advance
Ben

[friendofpugs]

Hi!

I think you want to add

Code:

ul#nav li a {
text-align: center;
}

to your CSS. That should center the text for the links.

Hope that helps!

[Brussells]

Thanks ‘FriendofPugs’

Code worked perfectly – tweaked the padding-left, after adding the suggested code, and now it’s centered in the button, and also has equal ‘active’ space to each word.

Should there be an area above and below the word, to the edges of the button image which should be clickable? Or is that something I’d have to add as an addition, and is something beyond what a CSS starter should attempt? :D

[apostrophe]

It’s not ideal that you have your whole header background attached to your nav list, but this will give you what you want:

Code:

ul#nav li a {
color:white;
display:block;
float:left;
font-weight:bold;
margin-top:160px;
padding:10px 0;
text-decoration:none;
width:72px;
}

[Brussells]

Thanks Apostrophe. Worked perfectly!

Am still learning the basics at the moment but may come back to you about the header background image sometime in the future to learn how it could be different.

Onwards and Upwards!!

[AshtonSanders]

"BrittanyAdina" wrote:

help me, any tutorial site for same kind of problem, I want to master css.

You realize this website is called CSS Tricks, and there’s endless information on the "articles" and "videos" tab at the top of the page…. ? lol

[Author]

Posts