The Apple Blog

**Yuiichi** · 10-13-2008

Hey guys,

Well, I need your help and I need it as quickly as possible, if I can be so bold to ask

I have an assignment coming due this Friday and I seem to have run into two problems with my coding. First of all, I'll show you how I want it to look:

I have two bugs within my code.
1. The navigation at the top will not go above the line underneath the text.
2. The main text won't follow my margin rules.

Here's my code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<style type="text/css">


#body {
	font-family: Helvetica, Verdana, Arial;
	background-color: white;
}

#main-wrapper {
	width: 960px;
	margin: 10px auto 0 auto;
	}

#header {
	position: relative;
	border-bottom-color: black;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	width: 100%;
	margin-bottom:20px;
}

h1#header {
	color: black;
	font-size: 27px;
	font-family: sans-serif, Helvetica, Verdana, Arial;
	margin-bottom: 5px;
}

ul#nav {
	list-style-type: none;
	font-size: 27px;
	position: absolute;
	top:40px;
	right:0;
	}
	
ul#nav li {
	display: inline;
	text-decoration: none;
	margin-left:-6px;
	font-size: 20px
	}
	
	
ul#nav li a {
	text-decoration: none;
	color: black;
	background:none;
	}
	
.content {
		margin-left: 25%;
		margin-right: 25%;
	}
	
h2#title {
	text-decoration: underline;
	color: black;
	font-size: 25px;
	font-family: sans-serif, Helvetica, Verdana, Arial;
	}
	
p {
	font-family: sans-serif, Helvetica, Verdana, Arial;;
	font-size: 12px;
	line-height: 22px;
	margin-bottom:10px;
	}

		
</style>
	<title>CSC104 Assignment 1 - Jonathan Pike and Maros Pupava</title>
</head>

<body>

<div class="main-wrapper">
	<div class="header">
		<h1 id="header">Jonathan Pike & Maros Pupava</h1> 		
		<ul id="nav">
			<li id="nav">Choose:</li>
			<li><a href="itunes.html"><img src="itunesicon.jpg"></a></li>
			<li><a href="winamp.html"><img src="winampicon.jpg"></a></li>
		</ul>
	</div>
		
		
		<h2 id="title">iTunes</h2>

<div id="content">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque rhoncus rhoncus enim. Morbi fermentum. Nulla tristique. In hac habitasse platea dictumst. Proin scelerisque aliquam nunc. Nam dui felis, tristique et, consequat vel, sagittis sed, pede. Sed ut magna sit amet mauris tincidunt lacinia. Fusce augue. Ut at arcu. Nunc nec tellus. Suspendisse eu dolor. Aenean dui nisl, viverra quis, accumsan et, lacinia sed, eros. Etiam elit neque, ultrices quis, adipiscing non, facilisis a, ipsum. Donec non magna et nisl auctor eleifend. Integer enim felis, sollicitudin pellentesque, rutrum et, tincidunt nec, ligula.</p>

<p>Mauris lobortis. Maecenas bibendum justo eget risus. Quisque sit amet tellus. Donec nec pede. In vitae turpis. Nam sit amet metus. Cras imperdiet velit at arcu. In non ipsum. Praesent orci odio, cursus a, pellentesque vel, feugiat eu, magna. Proin ultrices viverra nisl. Donec dui mauris, semper quis, malesuada a, cursus sed, velit. Suspendisse turpis. Cras sed ante at quam mattis tincidunt. Phasellus arcu. Vivamus euismod nisi vitae dui. Sed cursus. Suspendisse eget tortor a felis rhoncus gravida. Suspendisse vitae dui sit amet augue commodo tempor.</p>

<p>Sed ornare ipsum et ante. Donec lacinia massa et sapien. Duis sem erat, ullamcorper at, sodales vel, venenatis eget, massa. Quisque blandit molestie magna. Vivamus et leo sed dolor mattis feugiat. Donec quis metus. Mauris suscipit tortor sit amet turpis. Aenean ut pede. Aliquam eget ante ac est adipiscing ornare. Donec eu felis. Maecenas tortor mauris, volutpat nec, ullamcorper eget, dapibus et, lorem. Aenean rutrum lacinia enim. Morbi viverra volutpat tortor. Pellentesque sit amet lorem. Vestibulum eu augue ut eros tincidunt facilisis. Sed iaculis. Aliquam interdum massa non arcu viverra posuere.</p>

<p>Curabitur vestibulum sodales quam. Pellentesque quis nisl. Praesent adipiscing, dolor in facilisis facilisis, nisi lectus porttitor lorem, in hendrerit mauris nulla at erat. Duis ante nulla, ultrices a, elementum eget, laoreet at, eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer diam magna, auctor vitae, facilisis eu, congue vel, sem. Quisque quis metus et sapien dictum varius. Vestibulum ipsum. Donec condimentum dignissim mi. Proin nec nisl sed mauris facilisis dignissim. Etiam massa nibh, eleifend nec, malesuada eu, placerat eget, tellus. &@#%&@#%&@#% sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla fringilla leo in libero lobortis luctus. Vestibulum viverra massa sed ligula. Duis in erat sed metus venenatis blandit. Donec dictum, ligula vitae hendrerit pellentesque, est lacus interdum arcu, ac semper urna risus id nunc. In ullamcorper. Ut quis odio sed nulla cursus dapibus. Sed eros ligula, sollicitudin non, varius at, blandit at, neque. Suspendisse vel tortor id diam commodo volutpat.</p>

<p>Etiam quam. Integer molestie euismod velit. Cras eu diam nec erat fermentum tincidunt. Vivamus ligula est, lacinia nec, tincidunt ac, auctor sit amet, pede. Donec vel mauris quis ante vehicula iaculis. Praesent augue. Donec vitae mi. Nam et justo eget turpis vestibulum tristique. Donec sed ipsum. Donec tortor. Pellentesque at libero.</p>
</div>
</div>
</body>
</html>

If you can help at all, I'd be really grateful!

Thanks!

philbowell · 10-13-2008

I'll start with the one I definately know how to answer. The main text isn't following your margin rules because you have defined it in the html as an id, but in the CSS you have defined it as a class. Remember id = # and class = .

Infact I believe that is why you are having trouble with the header as well. You have defined it as a id in html but in the CSS it is a class.

**bendrucker** · 10-13-2008

Phil is absolutely right. If you are allowed to for this project, I'd separate the CSS into a .css file just to make things cleaner. But if it has to be one page, all you need to do is fix the id/class issue.

**Yuiichi** · 10-13-2008

Thanks a lot for the replies guys!

@Phil - you're a genius Phil! That fixed my content straight away. Unfortunately, didn't fix the navigation - it's still appearing below the line. I also want to know: what's the difference between a class and an id? Am I using them properly?

@BBB - I'd like to do so, as I agree with you. Unfortunately, this class doesn't even want me using CSS. They tried to teach me tables. I said "this isn't 1997 guys". So, I went about my own business. I think for my own sanity, I better keep it all in one file so that they don't lose it and break my layout.

Here's the updated code, in case you can help me fix my navigation:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<style type="text/css">


#body {
	font-family: Helvetica, Verdana, Arial;
	background-color: white;
}

#main-wrapper {
	width: 960px;
	margin: 10px auto 0 auto;
	}

#header {
	position: relative;
	border-bottom-color: black;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	width: 100%;
	margin-bottom:20px;
}

h1#h1header {
	color: black;
	font-size: 27px;
	font-family: sans-serif, Helvetica, Verdana, Arial;
	margin-bottom: 5px;
}

ul#nav {
	list-style-type: none;
	font-size: 27px;
	position: absolute;
	top:40px;
	right:0;
	}
	
ul#nav li {
	display: inline;
	text-decoration: none;
	margin-left:-6px;
	font-size: 20px
	}
	
	
ul#nav li a {
	text-decoration: none;
	color: black;
	background:none;
	}
	
.content {
		margin-left: 10%;
		margin-right: 10%;
	}
	
h2#title {
	margin-right: 10%;
	margin-left: 10%;
	text-decoration: underline;
	color: black;
	font-size: 25px;
	font-family: sans-serif, Helvetica, Verdana, Arial;
	}
	
p {
	font-family: sans-serif, Helvetica, Verdana, Arial;;
	font-size: 12px;
	line-height: 22px;
	margin-bottom:10px;
	}

		
</style>
	<title>CSC104 Assignment 1 - Jonathan Pike and Maros Pupava</title>
</head>

<body>

<div id="main-wrapper">
	<div id="header">
		<h1 id="h1header">Jonathan Pike & Maros Pupava</h1> 		
		<ul id="nav">
			<li id="nav">Choose:</li>
			<li><a href="http://theappleblog.com/community/development/2448-html-css-help-needed/itunes.html"><img src="http://theappleblog.com/community/development/2448-html-css-help-needed/itunesicon.jpg"></a></li>
			<li><a href="http://theappleblog.com/community/development/2448-html-css-help-needed/winamp.html"><img src="http://theappleblog.com/community/development/2448-html-css-help-needed/winampicon.jpg"></a></li>
		</ul>
	</div>
		
		
		<h2 id="title">iTunes</h2>

<div class="content">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque rhoncus rhoncus enim. Morbi fermentum. Nulla tristique. In hac habitasse platea dictumst. Proin scelerisque aliquam nunc. Nam dui felis, tristique et, consequat vel, sagittis sed, pede. Sed ut magna sit amet mauris tincidunt lacinia. Fusce augue. Ut at arcu. Nunc nec tellus. Suspendisse eu dolor. Aenean dui nisl, viverra quis, accumsan et, lacinia sed, eros. Etiam elit neque, ultrices quis, adipiscing non, facilisis a, ipsum. Donec non magna et nisl auctor eleifend. Integer enim felis, sollicitudin pellentesque, rutrum et, tincidunt nec, ligula.</p>

<p>Mauris lobortis. Maecenas bibendum justo eget risus. Quisque sit amet tellus. Donec nec pede. In vitae turpis. Nam sit amet metus. Cras imperdiet velit at arcu. In non ipsum. Praesent orci odio, cursus a, pellentesque vel, feugiat eu, magna. Proin ultrices viverra nisl. Donec dui mauris, semper quis, malesuada a, cursus sed, velit. Suspendisse turpis. Cras sed ante at quam mattis tincidunt. Phasellus arcu. Vivamus euismod nisi vitae dui. Sed cursus. Suspendisse eget tortor a felis rhoncus gravida. Suspendisse vitae dui sit amet augue commodo tempor.</p>

<p>Sed ornare ipsum et ante. Donec lacinia massa et sapien. Duis sem erat, ullamcorper at, sodales vel, venenatis eget, massa. Quisque blandit molestie magna. Vivamus et leo sed dolor mattis feugiat. Donec quis metus. Mauris suscipit tortor sit amet turpis. Aenean ut pede. Aliquam eget ante ac est adipiscing ornare. Donec eu felis. Maecenas tortor mauris, volutpat nec, ullamcorper eget, dapibus et, lorem. Aenean rutrum lacinia enim. Morbi viverra volutpat tortor. Pellentesque sit amet lorem. Vestibulum eu augue ut eros tincidunt facilisis. Sed iaculis. Aliquam interdum massa non arcu viverra posuere.</p>

<p>Curabitur vestibulum sodales quam. Pellentesque quis nisl. Praesent adipiscing, dolor in facilisis facilisis, nisi lectus porttitor lorem, in hendrerit mauris nulla at erat. Duis ante nulla, ultrices a, elementum eget, laoreet at, eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer diam magna, auctor vitae, facilisis eu, congue vel, sem. Quisque quis metus et sapien dictum varius. Vestibulum ipsum. Donec condimentum dignissim mi. Proin nec nisl sed mauris facilisis dignissim. Etiam massa nibh, eleifend nec, malesuada eu, placerat eget, tellus. &@#%&@#%&@#% sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla fringilla leo in libero lobortis luctus. Vestibulum viverra massa sed ligula. Duis in erat sed metus venenatis blandit. Donec dictum, ligula vitae hendrerit pellentesque, est lacus interdum arcu, ac semper urna risus id nunc. In ullamcorper. Ut quis odio sed nulla cursus dapibus. Sed eros ligula, sollicitudin non, varius at, blandit at, neque. Suspendisse vel tortor id diam commodo volutpat.</p>

<p>Etiam quam. Integer molestie euismod velit. Cras eu diam nec erat fermentum tincidunt. Vivamus ligula est, lacinia nec, tincidunt ac, auctor sit amet, pede. Donec vel mauris quis ante vehicula iaculis. Praesent augue. Donec vitae mi. Nam et justo eget turpis vestibulum tristique. Donec sed ipsum. Donec tortor. Pellentesque at libero.</p>
</div>
</div>
</body>
</html>

**Yuiichi** · 10-13-2008

Hey guys,

Well, after some looking, I actually fixed my navigation problem. It seems that just the positioning was set wrong (silly me - that was so simple!). Here's the code snippit:

Code:

ul#nav {
	list-style-type: none;
	font-size: 27px;
	position: absolute;
	top:-35px;
	right:0;
	}

While this appears to work almost equally well within Firefox and Safari, there is a subtle change in positioning. I'm wondering if there's a more efficient way to do so, just incase the person grading this decides to use something completely retarded, such as Internet Explorer.

Thanks!

geoff · 10-27-2008

Quote:

Originally Posted by Yuiichi

I also want to know: what's the difference between a class and an id?

An id is an identifier that may only exist once within a page. A class may exist as many times as you'd like. Since they're unique, you can actually link to an id (like you can with a name) using a pound/number sign (#) in the URL. For example:

<a href="http://www.example.com/index.html#content">Link</a>

In terms of how you're using them, I'd say it looks like you have a good grasp on when to use each attribute. Things like main-wrapper, header, and nav should be IDs, since you can expect to only use them once per page. Content should be an id if you plan to have all content within it, but it should be a class if you plan on splitting each paragraph into its own "content" class.

Quote:

Originally Posted by Yuiichi

Unfortunately, this class doesn't even want me using CSS. They tried to teach me tables. I said "this isn't 1997 guys". So, I went about my own business.

I'm proud of you for doing this. Table-based layouts are truly decades behind the times, and it's sad that schools are still teaching this backward method. A lot of people blame the browser makers for not catching up with CSS and web standards, when in fact a lot of the blame should be on those who perpetuate outdated methods of design.

Edit to add:

Code:

<ul id="nav">
<li id="nav">Choose:</li>

Whoops. You can't have two instances of an ID.

**Yuiichi** · 10-27-2008

First of all, welcome to the TAB forums, Geoff! Hope you enjoy your stay!

Secondly, thanks for those tips! As far as this assignment goes, it was handed in last week or so. I know I was using IDs improperly (thanks for the heads up guys), but under the time constraints and with the constant badgering of my partner, it worked.

Horror story from this project (if anyone is interested): we had to use three methods of coding a web page - through a plain text editor, through something like Word, and through something like DreamWeaver. I took over the first two methods, as they both required coding knowledge (and a good sense of copy and past

), and my partner did the WYSIWYG part. Well... he used Frontpage 2002. And it was awful. I mean... really awful. I actually went into the code the night before and got rid of a lot of the crazyness that that program does and made it look a little more like the original design. But man, Frontpage is bad.

10-13-2008	#2 (permalink)
philbowell Mac Genius Join Date: Dec 2006 Location: Over the road from the Queen, UK Posts: 1,067	I'll start with the one I definately know how to answer. The main text isn't following your margin rules because you have defined it in the html as an id, but in the CSS you have defined it as a class. Remember id = # and class = . Infact I believe that is why you are having trouble with the header as well. You have defined it as a id in html but in the CSS it is a class. __________________ My Mac's: 20" iMac Core Duo with 2gb RAM; 14" iBook G4 My Blog

10-13-2008	#3 (permalink)
bendrucker Assistant Store Manager Join Date: Nov 2006 Location: New Jersey Posts: 2,655	Phil is absolutely right. If you are allowed to for this project, I'd separate the CSS into a .css file just to make things cleaner. But if it has to be one page, all you need to do is fix the id/class issue. __________________ iMac Intel Core Duo 17" 1.83Ghz, 2GB Crucial RAM \| iPhone 3GS (16GB) Twitter \| Business Twitter \| Maplewood, New Jersey Professional Photographer: Ben Drucker Photography

10-13-2008	#5 (permalink)
Yuiichi Assistant Store Manager Join Date: Nov 2006 Location: Ontario, Canada Posts: 2,168	Hey guys, Well, after some looking, I actually fixed my navigation problem. It seems that just the positioning was set wrong (silly me - that was so simple!). Here's the code snippit: Code: ul#nav { list-style-type: none; font-size: 27px; position: absolute; top:-35px; right:0; } While this appears to work almost equally well within Firefox and Safari, there is a subtle change in positioning. I'm wondering if there's a more efficient way to do so, just incase the person grading this decides to use something completely retarded, such as Internet Explorer. Thanks! __________________ My Mac(s): MacBook, white - 2.0 GHz, 2 GB RAM, 80 GB HDD therewascake. - my personal blog. The Pike Chronicle - a daily log of life.

10-27-2008	#7 (permalink)
Yuiichi Assistant Store Manager Join Date: Nov 2006 Location: Ontario, Canada Posts: 2,168	First of all, welcome to the TAB forums, Geoff! Hope you enjoy your stay! Secondly, thanks for those tips! As far as this assignment goes, it was handed in last week or so. I know I was using IDs improperly (thanks for the heads up guys), but under the time constraints and with the constant badgering of my partner, it worked. Horror story from this project (if anyone is interested): we had to use three methods of coding a web page - through a plain text editor, through something like Word, and through something like DreamWeaver. I took over the first two methods, as they both required coding knowledge (and a good sense of copy and past ), and my partner did the WYSIWYG part. Well... he used Frontpage 2002. And it was awful. I mean... really awful. I actually went into the code the night before and got rid of a lot of the crazyness that that program does and made it look a little more like the original design. But man, Frontpage is bad. __________________ My Mac(s): MacBook, white - 2.0 GHz, 2 GB RAM, 80 GB HDD therewascake. - my personal blog. The Pike Chronicle - a daily log of life.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)