Guest treeb Posted October 5, 2007 Share Posted October 5, 2007 I'm new to CSS and am trying to layout this page. I'm using Dreamweaver and it looks fine as I'm coding it, but when I try to preview in browser, only the html shows up. no css styles are applied.I've saved the CSS in a folder called CSS, and also tried to save the CSS in the root folder to see if it was because of where I saved it.So I'm thinking it must be something in my code.Any suggestions would be greatly appreciated. THE HTML CODE ----------------------------------<!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=iso-8859-1" /><title>Name</title><link href="CSS/main.css" rel="stylesheet" type="text/css" media="all" /></head><body><div id="topOfPageAnchor"></div><div id="wrapper"> <div id="masthead"> <div id="navigation"> <ul> <li><a href="#">Sculpture</a></li> <li><a href="#">Furniture</a></li> <li><a href="#">About</a></li> <li><a href="#">Events</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <div class="separator"></div> <div id="mainpanel"> <div id="leftpanel"> <p>Content </p> </div> <p>Content</p> <div class="separator"> </div> </div> <div id="footer">Name | Address | Phone | Email </div> </div></body></html>THE CSS CODE ----------------------------------------#wrapper { width: 800px; margin: 0 auto; body { text-align: center; }#leftpanel { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #999966; text-decoration: none; background-color: #000000; padding: 20px 10px 20px 20px; float: left; width: 150px; margin-right: 20px;}#mainpanel { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #CCCCCC; text-decoration: none; background-color: #000000; text-align: left; border: thin solid #666666;}#masthead { background-color: #000000; width: 800px; height: 25px; padding-top: 115px;}.separator { clear: both; height: 0px;}#topOfPageAnchor { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;}#navigation { height: 25px; background-color: #333333;}#navigation ul { color: #FFFFFF; list-style-type: none; margin: 0px; padding: 0px;}#navigation li { display: inline; margin: 0px; padding: 0px;}#navigation a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; text-transform: capitalize; color: #FFFFFF; text-decoration: none; display: block; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; height: 25px; width: 120px; float: right; text-align: center; line-height: 25px;}#navigation a:hover { background-color: #003333;}#navigation a:active { background-color: #333333;}#footer { background-color: #333333; padding-bottom: 5px; padding-top: 5px; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; text-decoration: none; padding-right: 20px; padding-left: 20px; color: #FFFFFF;} Link to comment Share on other sites More sharing options...
S@m Posted October 5, 2007 Share Posted October 5, 2007 have you tried using relative paths to your css file(s) <link rel="stylesheet" type="text/css" media="screen, projection" href="../../whatever/yourfile/whatever" /> Link to comment Share on other sites More sharing options...
jlhaslip Posted October 6, 2007 Share Posted October 6, 2007 as per above, this is clearly a referencing problem.Is the css file in a subfolder named CSS? If not, it should be. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.