New to web design...Need help.

gabeleon · #1 June 14th, 2009, 03:55 PM

Im trying to learn a little about XHTML and CSS. I have a very simple HTML document and a CSS document. When I try to look at the index.html file in my web browser it will not show the CSS. Below is the two different files.

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media=screen>
</head>
<body>

<div id="container">

<div id="header">this is the header</div>

<div id="leftnavr">this is the lheader</div>

<div id="rightnav">this is the rheader</div>

<div id="body">this is the bheader</div>

<div id="footer">this is the fheader</div>

</div>

</body>
</html>

#container {

width: 900px;

}

#header {

width: 900px;
height: 100px;
background-color: #898989;
border-bottom:2px solid #000000;

}

#leftnav {

float: left;
width: 140px;
height: 400px;
background-color: #898989;
bordor-right: 1px dashed #694717;

}

#rightnav {

float: right;
width: 140px;
height: 400px;
background-color: #898989;
bordor-right: 1px dashed #694717;

}

#body {

width: 620;

}

#footer {

clear: both;
bacgground-color: #898989;

}

Can anybody tell me what im doing wrong.

**MishY** · #2 June 14th, 2009, 04:00 PM

The CSS shows up for me in Firefox and IE8.

Below is your style.css without typos:

Code:

#container {

width: 900px;

}



#header {

width: 900px;
height: 100px;
background-color: #898989;
border-bottom:2px solid #000000;

}

#leftnav {

float: left;
width: 140px;
height: 400px;
background-color: #898989;
border-right: 1px dashed #694717;

}

#rightnav {

float: right;
width: 140px;
height: 400px;
background-color: #898989;
border-right: 1px dashed #694717;

}

#body {

width: 620px;

}

#footer {

clear: both;
background-color: #898989;

}

Also replace: <link href="style.css" rel="stylesheet" type="text/css" media=screen> with <link href="style.css" rel="stylesheet" type="text/css" media="screen">

gabeleon · #3 June 14th, 2009, 04:18 PM

For some reason it still will not work for me. I made the changes you suggested and corrected the errors. Any other ideas. This is driving me crazy. Thanks for the quick response. Gabe.

gabeleon · #4 June 14th, 2009, 04:31 PM

For the life of me I cannot figure this out. Looking at online tutorials and what MishY posted above, I have no idea what is going wrong for me. I've tried looking at it in Firefox and IE7 and still cannot see it. I have both files in the same folder on my desktop. If anybody can help it would be appreciated. Thanks.

**MishY** · #5 June 14th, 2009, 04:47 PM

This is going to sound silly, but both style.css and your HTML file are in the same folder ?

The HTML file should contain only:

Code:

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media=screen>
</head>
<body>

<div id="container">

<div id="header">this is the header</div>

<div id="leftnavr">this is the lheader</div>

<div id="rightnav">this is the rheader</div>

<div id="body">this is the bheader</div>

<div id="footer">this is the fheader</div>

</div>


</body>
</html>

and your style.css file should contain only:

Code:

#container {

width: 900px;

}



#header {

width: 900px;
height: 100px;
background-color: #898989;
border-bottom:2px solid #000000;

}

#leftnav {

float: left;
width: 140px;
height: 400px;
background-color: #898989;
border-right: 1px dashed #694717;

}

#rightnav {

float: right;
width: 140px;
height: 400px;
background-color: #898989;
border-right: 1px dashed #694717;

}

#body {

width: 620px;

}

#footer {

clear: both;
background-color: #898989;

}

gabeleon · #6 June 14th, 2009, 06:16 PM

I think my problem was how i was saving the CSS file. For some reason it was putting a txt extension on the end of the file name. Now it works, except the left nav does not show. Everything else looks good. Thanks for the help MishY. Gabe

**rockboy** · #7 June 14th, 2009, 07:51 PM

There is a typo in the html code.

Change

Code:

<div id="leftnavr">this is the lheader</div>

to

Code:

<div id="leftnav">this is the lheader</div>

gabeleon · #8 June 14th, 2009, 08:41 PM

If i remove that R, it will not work. I'm trying now to add a horizontalnav and cannot get this to work for me.

#horizontalnav {

width: 900px;
hight: 30px;
position: relative;
background-color: #808080;
border-bottom: 2px solid #000000;

}

I added the above and it will not show on the browser.

**rockboy** · #9 June 14th, 2009, 09:26 PM

Quote:

Originally Posted by gabeleon

....
Now it works, except the left nav does not show. Everything else looks good.
...

In the css, it's written...

Code:

#leftnav {

In the html it's written...

Code:

<div id="leftnavr">this is the lheader</div>

The spelling of leftnav must match or it won't function.

gabeleon · #10 June 14th, 2009, 09:35 PM

Ok, this is what i have so far...

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>

<div id="container">

<div id="header">this is the header</div>

<div id="horizontalnav">

<div class="navlinks">

<ul>
<li><a href="http://www.fhfracing.com">Nav Link 1</a></li>
<li><a href="http://www.fhfracing.com">Nav Link 2</a></li>
<li><a href="http://www.fhfracing.com">Nav Link 3</a></li>
<li><a href="http://www.fhfracing.com">Nav Link 4</a></li>

</div>

</div>

<div id="leftnav">this is the lheader</div>

<div id="rightnav">this is the rheader</div>

<div id="body">this is the bheader</div>

<div id="footer">this is the fheader</div>

</div>

</body>
</html>

#container {

width: 900px;

}

#header {

width: 900px;
height: 100px;
background-color: #898989;
border-bottom:2px solid #000000;

}

#horizontalnav {

width: 900px;
position: relative;
background-color: #808080;
border-bottom: 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 7px;
text-decoration: none;
font-size: 16px;
font-family: verdana;

}

.navlinks li a:hover{

color: #ffffff;
background-color: #000000;
text-decoration: underline;

}

#leftnavr {

float: left;
width: 140px;
height: 1400px;
background-color: #898989;
border-right: 1px dashed #694717;

}

#rightnav {

float: right;
width: 140px;
height: 1400px;
background-color: #898989;
border-left: 1px dashed #694717;

}

#body {

width: 620px;

}

#footer {

clear: both;
background-color: #898989;

}

For some reason it will not show the horizontalnav bar when i look at it in my browser. Any ideas?

gabeleon · #11 June 14th, 2009, 09:59 PM

Sorry rockboy, I have the leftnav thing taken care of now. Thanks.

**rockboy** · #12 June 14th, 2009, 10:02 PM

You're missing the end tag for ul

Code:

<ul>
<li><a href="http://www.fhfracing.com">Nav Link 1</a></li>
<li><a href="http://www.fhfracing.com">Nav Link 2</a></li>
<li><a href="http://www.fhfracing.com">Nav Link 3</a></li>
<li><a href="http://www.fhfracing.com">Nav Link 4</a></li>

Should have /ul

Code:

<ul>
<li><a href="http://www.fhfracing.com">Nav Link 1</a></li>
<li><a href="http://www.fhfracing.com">Nav Link 2</a></li>
<li><a href="http://www.fhfracing.com">Nav Link 3</a></li>
<li><a href="http://www.fhfracing.com">Nav Link 4</a></li>
</ul>

There may be other problems but that one jumped out first.

**rockboy** · #13 June 14th, 2009, 10:12 PM

In your newest code you also changed your css to

Code:

#leftnavr {

It should read the same as your html (leftnav)

Code:

#leftnav {

gabeleon · #14 June 14th, 2009, 10:21 PM

I put the </ul> tag in there and it's still not showing the horizontalnav in the browser. Does it show for you? I fixed the leftnavr thing. Thanks again.

gabeleon · #15 June 14th, 2009, 10:22 PM

#container {

width: 900px;

}

#header {

width: 900px;
height: 100px;
background-color: #898989;
border-bottom:2px solid #000000;

}

#horizontalnav {

width: 900px;
position: relative;
background-color: #808080;
border-bottom: 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: #00ffff;
padding: 5px 12px 7px;
text-decoration: none;
font-size: 16px;
font-family: verdana;

}

.navlinks li a:hover{

color: #ffffff;
background-color: #ff0000;
text-decoration: underline;

}

#leftnavr {

float: left;
width: 140px;
height: 1400px;
background-color: #898989;
border-right: 1px dashed #694717;

}

#rightnav {

float: right;
width: 140px;
height: 1400px;
background-color: #898989;
border-left: 1px dashed #694717;

}

#body {

width: 620px;

}

#footer {

clear: both;
background-color: #898989;

}

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

<html xmlns="http://www.w3.org/1999/xhtml">
<title>FHF Racing</title>

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>

<div id="container">

<div id="header">this is the header</div>

<div id="horizontalnav">

<div class="navlinks">

<ul>
<li><a href="http://www.fhfracing.com">Nav Link 1</a></li>
<li><a href="http://www.fhfracing.com">Nav Link 2</a></li>
<li><a href="http://www.fhfracing.com">Nav Link 3</a></li>
<li><a href="http://www.fhfracing.com">Nav Link 4</a></li>
</ul>

</div>

</div>

<div id="leftnavr">this is the lheader</div>

<div id="rightnav">this is the rheader</div>

<div id="body">this is the bheader</div>

<div id="footer">this is the fheader</div>

</div>

</body>
</html>

Similar Topics
Topic	Topic Starter	Forum	Replies	Last Post
New to Web Design	Jale1966	Web Development & Graphic Design	3	June 24th, 2009 11:39 PM
Web Design	kh0513	Web Development & Graphic Design	2	January 5th, 2007 12:59 PM
Design	Shorthorn	Comments & Suggestions	4	August 12th, 2004 07:37 AM
WAN design	paras	Networking	15	June 15th, 2001 09:34 AM