Forums

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:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
	<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
	<title>Portable Media Players</title>
	<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />
</head>
<body>
	<div id=\"header\">
	</div>
	<div id=\"page-wrap\">
		<ul id=\"nav\">
			<li><a href=\"#\">Home</a></li>
			<li><a href=\"#\">Archos</a></li>
			<li><a href=\"#\">Creative</a></li>
			<li><a href=\"#\">Samsung</a></li>
			<li><a href=\"#\">Others</a></li>
		</ul>
		<p>Main Content</p>
	</div>
	<div id=\"footer\">
	</div>
</body>
</html>

style.css:

* {
	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

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:


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" said:
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

treehouse : what would you like to learn today?

Forums

nav bar links not spacing correctly - my first attempt