|
Web Development & Graphic Design Problem Solving for Graphic Design, PHP, ASP, Perl, MySQL, SQL, XML, HTML issues |
![]() |
|
Topic Tools |
#1
|
|||
|
|||
New to web design...Need help.
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. |
#2
|
||||
|
||||
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"> |
#3
|
|||
|
|||
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.
|
#4
|
|||
|
|||
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.
|
#5
|
||||
|
||||
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> 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; } |
#6
|
|||
|
|||
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
|
#7
|
||||
|
||||
There is a typo in the html code.
Change Code:
<div id="leftnavr">this is the lheader</div> Code:
<div id="leftnav">this is the lheader</div> |
#8
|
|||
|
|||
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. |
#9
|
||||
|
||||
Quote:
Code:
#leftnav { Code:
<div id="leftnavr">this is the lheader</div> |
#10
|
|||
|
|||
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? |
#11
|
|||
|
|||
Sorry rockboy, I have the leftnav thing taken care of now. Thanks.
|
#12
|
||||
|
||||
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> 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> |
#13
|
||||
|
||||
In your newest code you also changed your css to
Code:
#leftnavr { Code:
#leftnav { |
#14
|
|||
|
|||
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.
|
#15
|
|||
|
|||
#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> |
![]() |
Bookmarks |
«
Previous Topic
|
Next Topic
»
|
|
![]() |
||||
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 |
All times are GMT +1. The time now is 04:16 PM.