Novice who needs help...

**RJFT** · 02-08-2010 10:04 AM

I watched the 2create a web site css tutorial videos and attempted to learn by trying to recreate what Lisa did in the video. No matter how hard I try and no matter how many times I watch the videos or tweak my work , the design still doesn't work.

I've been on this for weeks and I'm very frustrated; I really have no other source of help but this forum. I'm just about ready to give up.

If I emailed my index and style sheet can someone, anybody please take a look at my work and tell me what I'm doing wrong?

I can really use some help.

Thank You.

**Ron** · 02-08-2010 11:07 AM

Originally Posted by RJFT

I watched the 2create a web site css tutorial videos and attempted to learn by trying to recreate what Lisa did in the video. No matter how hard I try and no matter how many times I watch the videos or tweak my work , the design still doesn't work.

I've been on this for weeks and I'm very frustrated; I really have no other source of help but this forum. I'm just about ready to give up.

If I emailed my index and style sheet can someone, anybody please take a look at my work and tell me what I'm doing wrong?

I can really use some help.

Thank You.

Just post it here. One post for the css and one for the html and we can have a look.

The template is not all that complex so the mistake should be easily spotted. In the mean time, go through your code and make sure ALL the punctuation and spellings are correct. If they are not, it will be broken.

Cheers,
Ron

**zomex** · 02-08-2010 11:15 AM

Originally Posted by Ron

Just post it here. One post for the css and one for the html and we can have a look.

The template is not all that complex so the mistake should be easily spotted. In the mean time, go through your code and make sure ALL the punctuation and spellings are correct. If they are not, it will be broken.

Cheers,
Ron

I agree post the HTML/CSS here

Although I don't see why spelling and grammar are a problem.

**Ron** · 02-08-2010 11:28 AM

Originally Posted by sequencehosting

I agree post the HTML/CSS here

Although I don't see why spelling and grammar are a problem.

If you are missing a colon or semicolon, or, mispelled an ID in the css file or misspelled the function call in the html document, it will break the site.

Cheers,
Ron

**zomex** · 02-08-2010 11:32 AM

Originally Posted by Ron

If you are missing a colon or semicolon, or, mispelled an ID in the css file or misspelled the function call in the html document, it will break the site.

Cheers,
Ron

I see. I thought you meant spelling and grammar of the text

The issue properly is due to a mispellt ID/Class that's why the OP is looking for help.

**RJFT** · 02-08-2010 11:46 AM

Here is my index page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title> Practice Web Page </title>

<meta name="Generator" content="Alleycode HTML Editor">
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">

<link Rel="stylesheet" Type="Text/css" HREF="kirbystylesheet.css">
</head>

<body>

<div id=“container”>

<div id=“header’>

<a href=“http://www.website.com”>This is the header</a>

<div class=“Horizlinks”>

<ul>

<li><a href=“http://www.website.com”>Header Link 1</a></li>

<li><a href=“http://www.website.com”>Header Link 2</a></li>

<li><a href=“http://www.website.com”>Header Link 3</a></li>

<li><a href=“http://www.website.com”>Header Link 4 </a></li>

</ul>

</div>

<p>Header Text</p>

<p class=“smalltext”>Small Text</p>

</div>

<div id=“horizontalnav”>

<div class=“navlinks”>

<ul>

<li><a href=“http://www.website.com”>Nav Link 1</a><li>

<li><a href=“http://www.website.com”>Nav Link 2</a><li>

<li><a href=“http://www.website.com”>Nav Link 3</a><li>

<li><a href=“http://www.website.com”>Nav Link 4</a><li>

</div>

</div>

<div id=“leftnav”>This is the leftnav</div>

<div id=“rightnav”>This is the right nav</div>

<div id=“body”>This is the body <br><div class=“box”><h2>This is the title</h2>Text inside the box</div></div>

<div id=“footer”>This is the footer</div>

</body>

</html>

**RJFT** · 02-08-2010 11:48 AM

Here is my style sheet:

#container {

Width: 900px;

}

#header {

Width: 900px;

Height: 100px;

Position: relative;

Background-image: url(Rockswebpages/headerBG.jpg);

Border-bottom: 2px solid #000000;

}

Header a {

Color: #ffffff;

Text-decoration: underline;

Font-weight: bold;

Font-family: verdana;

Font-size: 14px;

}

#header a:visited {

Color: #000000;

Text-decoration: underline;

Font-weight: bold;

}

#header a:hover {

Color: #cc0000;

Text-decoration: none;

Font-weight: bold;

}

.Horizlinks {

Position: absolute; top: 77px; left: 180px;

}

.Horizlinks ul {

Margin: 0px;

}

.Horizlinks li {

Margin: 0px 15px 0px 0px;

List-style-type: none;

Display: inline;

}

#horizonnav {

Width: 900px;

Height: 30px;

Position: relative;

Background-color: #F2D6AF;

Border-botttom: 2px solid #000000;

}

.navlinks {

Position: absolute; top: 4px; left: 140px;

}

.navlinks ul {

Margin: auto;

}

.navlinks li {

Margin: 0px 18px 0px 0px;

List-style-type: none;

Display: inline;

}

.navlinks li a {

Color: #000000;

Padding: 5px 12px 7 px;

Text-decoration: none;

Font-size: 16px;

Font-family: verdana;

}

.navlinks li a:hover {

Color: #ffffff;

Background-image: url(Rockswebpages/Bghover.jpg);

/*If you want to use a color for the background instead replace above line with text-decoration: underline;

}

#header p {

Color: #000000;

Font-family: arial;

Font-weight: bold;

}

.smalltext {

Font-size: 9px;

Font-family: arial;

}

#leftnav {

Float: left;

Width: 140px;

Height: 400px;

Background-color: #F8AA3C;

Border-left: 1px dashed #694717;

}

#rightnav {

Float: right;

Width: 140px;

Height: 400px;

Background-color: #F8AA3C;

Border-left: 1px dashed #694717;

}

#body {

Margin: auto;

Width: 600px;

Padding: 10px 0px 0px 10px;

}

}

#footer {

Clear: both;

Background-color: #D1c0A7:

}

.box {

Margin-top: 10px;

Padding: 5px 5px 5px 5px;

Backround-color: #dddddd;

Border: 2px solid #d22929;

Width: 350px;

Color: #000000;

}

H2 {

Font-size: 20px;

Color: #cc0000;

Padding: 10px;

Font-family: verdana;

}

**zomex** · 02-08-2010 11:53 AM

Ok so if you let us know what doesn't work we will be able to find the problem for you.

Jack

**zomex** · 02-08-2010 11:58 AM

It can be hard to see what the issue is without seeing it on a browser.

If you like I can upload it to a folder on my site. That will make it easier to see what the problem is. If you would like me to do that feel free to send me the files (HTML, CSS, images) to:

jack (at) sequencehosting .com

Jack

**zomex** · 02-08-2010 03:14 PM

Hello,

You did a fantastic job. You only made 3 minor mistakes. These tiny mistakes affected the whole layout.

1

The link to your CSS file had a different name that what it was. This
was your biggest mistake but also the easiest to fix. For example your
link to the CSS file was:

Code:

<link rel="stylesheet" type="text/css" href="kirbystylesheet.css">

but your CSS file was actually named: kirbystyle.css. So all you had to
was change the line to:

Code:

<link rel="stylesheet" type="text/css" href="kirbystyle.css">

2

Your 2 images where located the same as your HTML and CSS file but in
the CSS it showed:

Code:

background-image: url(Rockswebpages/headerBG.jpg);

So all you had to do there was either create a folder called:
Rockswebpages and place your image inside or change the code to:

Code:

Background-image: url(headerBG.jpg);

3

Your last mistake is why most of the styles didn't show on the site. You made a note on the CSS file but forgot to close the note. If the note is not closed it stops all of the styles below from working. So here is the note you had:

Code:

 /*If you want to use a color for the background instead replace above line with background-color: [insert color here with # sign in front];

Now /* is the tag to start the note which you had but you were missing the tag to close the note which is */ Here is what that line should have looked like:

Code:

 /*If you want to use a color for the background instead replace above line with background-color: [insert color here with # sign in front];*/

If you start from the begging but remember the points above I am 100% sure you will end up with Lisa's exact example:

https://www.sequencehosting.com/test/index.html

Jack

**Dee** · 02-08-2010 06:53 PM

It seems always to be those little nitpicking things that'll mess up your code and cause you to pull out your hair.

**chicoi08** · 02-09-2010 06:39 AM

Originally Posted by RJFT

I watched the 2create a web site css tutorial videos and attempted to learn by trying to recreate what Lisa did in the video. No matter how hard I try and no matter how many times I watch the videos or tweak my work , the design still doesn't work.

I've been on this for weeks and I'm very frustrated; I really have no other source of help but this forum. I'm just about ready to give up.

If I emailed my index and style sheet can someone, anybody please take a look at my work and tell me what I'm doing wrong?

I can really use some help.

Thank You.

It is better to learn HTML first before anything.

**RJFT** · 02-09-2010 09:04 AM

I accidentally unsubscribed from the thread I started, does anyone know how I undo this action?

Thanks

**RJFT** · 02-11-2010 07:56 AM

Jack, here is the updated html you requested:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title> Practice Web Page </title>

<meta name="Generator" content="Alleycode HTML Editor">
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">

<link Rel="stylesheet" Type="text/css" href="kirbystyle.css">
</head>

<body>

<div id="container">

<div id="header">

<a href="http://www.website.com">This is the header</a>

<div class="Horizlinks">

<ul>

<li><a href="http://www.website.com">Header Link 1</a></li>

<li><a href="http://www.website.com">Header Link 2</a></li>

<li><a href="http://www.website.com">Header Link 3</a></li>

<li><a href="http://www.website.com">Header Link 4 </a></li>

</ul>

</div>

<p>Header Text</p>

<p class="smalltext">Small Text</p>

</div>

<div id="horizontalnav">

<div class="navlinks">

<ul>

<li><a href="http://www.website.com">Nav Link 1</a></li>

<li><a href="http://www.website.com">Nav Link 2</a></li>

<li><a href="http://www.website.com">Nav Link 3</a></li>

<li><a href="http://www.website.com">Nav Link 4</a></li>

</div>

</div>

<div id="leftnav">This is the leftnav</div>

<div id="rightnav">This is the right nav</div>

<div id="body">This is the body <br><div class="box"><h2>This is the title</h2>Text inside the box</div></div>

<div id="footer">This is the footer</div>

</body>

</html>

**RJFT** · 02-11-2010 07:57 AM

Jack, here is the updated css you requested:
html, body {
margin:0;
padding:0;
border:none;
}

#container {
Width: 900px;
}

#header {

Width: 900px;

Height: 100px;

Position: relative;

Background-image: url(images/headerBG.jpg);

Border-bottom: 2px solid #000000;

}

#header a {

Color: #ffffff;

Text-decoration: underline;

Font-weight: bold;

Font-family: verdana;

Font-size: 14px;

}

#header a:visited {

Color: #000000;

Text-decoration: underline;

Font-weight: bold;

}

#header a:hover {

Color: #cc0000;

Text-decoration: none;

Font-weight: bold;

}

.Horizlinks {

Position: absolute; top: 77px; left: 180px;

}

.Horizlinks ul {

Margin: 0px;

}

.Horizlinks li {

Margin: 0px 15px 0px 0px;

List-style-type: none;

Display: inline;

}

#horizonnav {

Width: 900px;

Height: 30px;

Position: relative;

Background-color: #F2D6AF;

Border-botttom: 2px solid #000000;

}

.navlinks {

Position: absolute; top: 4px; left: 140px;

}

.navlinks ul {

Margin: auto;

}

.navlinks li {

Margin: 0px 18px 0px 0px;

List-style-type: none;

Display: inline;

}

.navlinks li a {

Color: #000000;

Padding: 5px 12px 7 px;

Text-decoration: none;

Font-size: 16px;

Font-family: verdana;

}

.navlinks li a:hover {

Color: #ffffff;

Background-image: url(images/Bghover.jpg);

/*If you want to use a color for the background instead replace above line with text-decoration: underline:[#dddddd];*/

}

#header p {

Color: #000000;

Font-family: arial;

Font-weight: bold;

}

.smalltext {

Font-size: 9px;

Font-family: arial;

}

#leftnav {

Float: left;

Width: 140px;

Height: 400px;

Background-color: #F8AA3C;

Border-left: 1px dashed #694717;

}

#rightnav {

Float: right;

Width: 140px;

Height: 400px;

Background-color: #F8AA3C;

Border-left: 1px dashed #694717;

}

#body {

Margin: auto;

Width: 600px;

Padding: 10px 0px 0px 10px;

}

}

#footer {

Clear: both;

Background-color: #D1c0A7:

}

.box {

Margin-top: 10px;

Padding: 5px 5px 5px 5px;

Backround-color: #dddddd;

Border: 2px solid #d22929;

Width: 350px;

Color: #000000;

}

H2 {

Font-size: 20px;

Color: #cc0000;

Padding: 10px;

Font-family: verdana;

}

Thread: Novice who needs help...

LinkBack

Thread Tools

Display

Novice who needs help...

Posting Permissions