Web Hosting Forum | Lunarpages


*
Welcome, Guest. Please login or register.
Did you miss your activation email?


Login with username, password and session length
May 25, 2012, 07:48:40 AM

Pages: [1]   Go Down
« previous next »
  Print  
Author Topic: My index.html does not recognize my external style sheet- please help  (Read 1159 times)
abc
Pong! (the videogame) Master
*****
Offline Offline

Posts: 23
« on: December 10, 2011, 07:30:54 PM »
My index.html recognizes my css on my desktop using safari but when uploading to Lunarpages, my style sheet is not recognized. Have spent all day trying to figure this out so please help.
Here is my style.css and below is the beginning of my index.html:

body {
  text-align: center;
  margin-top:10px;
  margin-bottom:10px;
  color:#666666;
  background-color: #E0E0E0;
}

A:link {
   COLOR: #0000FF; text-decoration: none;
}
A:visited {
   COLOR: #0000FF; text-decoration: none;
}
A:active {
   COLOR: #0000FF; text-decoration: none;
}
A:hover {
   COLOR: #FF0000; text-decoration: underline;
}

#page_wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 98%;
  text-align: left;
  background: #FFFFFF;
  border: 8px solid #FFFFFF;
}

#header_wrapper {
  background: #4E7DD1 url('../img/menu_bg.gif') bottom left repeat-x;
  margin:0px; padding:0px;
}

#header {
  height: 80px;
  padding:15px;
  background: url('../img/header_bg.gif') top right no-repeat;
  margin:0px;
}

#header h1 {
  margin:0px;
  font-family: verdana, arial, sans-serif;
  font-size: 28px;
  color:#ffffff;
  letter-spacing: -1px;
}

#header h2 {
  margin:0px;
  font-family: verdana, arial, sans-serif;
  font-size: 14px;
  color:#B1C6EB;
  letter-spacing: 1px;
}
#header p {
margin: 0px;
font-family: verdana, arial, sans-serif;
font-size: 10px;
color: #ffffff;
letter-spacing: 1px;
}

#left_side {
  margin-top: 10px;
  float: left;
  width: 200px;
  background: #F1F6FE url('../img/side_bg.gif') bottom left repeat-x;
}

#right_side {
  margin-top: 10px;
  float: right;
  width: 200px;
  background: #F1F6FE url('../img/side_bg.gif') bottom left repeat-x;
}

#content {
  margin-top: 20px;
  margin-bottom: 0px;
  margin-left: 200px;
  margin-right: 200px;
}

#footer {
  height: 50px;
  background-color: #4E7DD1;
  clear: both;
  text-align: center;
  padding-top:12px;
  color: #B6CEF9;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  line-height: 18px;
}

#footer A:link {
   COLOR: #FFFFFF; text-decoration: none;
}
#footer A:visited {
   COLOR: #FFFFFF; text-decoration: none;
}
#footer A:active {
   COLOR: #FFFFFF; text-decoration: none;
}
#footer A:hover {
   COLOR: #FFFFFF; text-decoration: underline;
}

#left_side p, #right_side p {
  margin:10px;margin-top:15px;margin-bottom:15px;
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #333333;
}

#left_side h3, #right_side h3 {
  margin-top:5px; margin-bottom:10px; margin-left:5px; margin-right:5px;
  padding:4px;
  font-family: verdana, arial, sans-serif;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 14px;
  color: #FFFFFF;
  border:1px solid #0F3974;
  background-color: #2153AA;
}

#left_side h4, #right_side h4 {
  margin-top:0px;margin-bottom:0px;margin-left:10px;
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 12px;
  color: #2153AA;
}

#content p {
  margin-top:15px; margin-bottom: 15px;
  font-family: verdana, arial, sans-serif;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  color: #333333;
}

#content h3 {
  margin-top:5px; margin-bottom: 10px;
  font-family: verdana, arial, sans-serif;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  line-height: 18px;
  color: #2153AA;
}

#content h4 {
  margin-top:0px;margin-bottom:0px;
  font-family: verdana, arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 12px;
  color: #2153AA;
}

#navlist
{
  margin-top:1px;
  margin-bottom:0px;
  text-align:center;
  padding: 5px 0;
  margin-left: 0;
  border-bottom: 1px solid #0F3974;
  font: bold 14px Verdana, sans-serif;
}

#navlist li
{
  list-style: none;
  margin: 0;
  display: inline;
}

#navlist li a
{
  color: #F1F6FE;
  padding: 5px 15px;
  margin-left: 3px;
  border: 1px solid #0F3974;
  border-bottom: none;
  background: #2153AA url('../img/tab_bg.gif') bottom left repeat-x;
  text-decoration: none;
}

#navlist li a:link { color: #F1F6FE; }
#navlist li a:visited { color: #F1F6FE; }

#navlist li a:hover
{
  color: #FFFFFF;
  background: #3364BB;
  border-color: #0F3974;
}

#navlist li a#current
{
  color: #000;
  background: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

.float_left {
  float: left;
  margin-right: 10px;
}

.float_right {
  float: right;
  margin-left: 10px;
}

.featurebox_center {
  background-color: #fffff6;
  margin:0px;
  padding:10px;
  border: 1px solid #DFE8F7;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  line-height: 18px;
  color: #333333;
}

.featurebox_side {
  background-color: #fffff6;
  margin:0px;margin-left:10px;margin-right:10px;margin-bottom:15px;
  padding:10px;
  border: 1px solid #DFE8F7;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  line-height: 18px;
  color: #333333;
}
________________________________________________
index.html (partial code to beginning of document)

<!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 Data -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Chester Medical Associates Provides Primary Care in Chester New Jersey." />
<meta name="keywords" content="Chester Medical Associates, Chester New Jersey, Primary Care" />


<title>Chester Medical Associates</title>

<!-- Link to Style External Sheet -->
<link href="css/style.css" type="text/css" rel="stylesheet" />

</head>

<body>

<div id="page_wrapper">

<div id="header_wrapper">

<div id="header">
<!--<img src="building.jpg" align="right" alt="CMA building" width ="101" height ="90"/>-->
<h1>CHESTER MEDICAL ASSOCIATES<font color="#FFDF8C"></font></h1>
<p>385 Route 24, Suite 1C</p>
<p>Chester, New Jersey 07930</p>
<p>Telephone 908-879-6277</p>
_____________________________________
The style sheet is called style.css and written on a text editor

Thank you for your help
AC
Logged
MrPhil
Senior Moderator
Berserker Poster
*****
Offline Offline

Posts: 5219
« Reply #1 on: December 11, 2011, 08:00:03 AM »
Nothing looks terribly wrong at first glance. If your main page is /index.html, is your CSS file /css/style.css? Have you looked at the style.css file via your control panel's file manager > view (or edit) to see if it transferred OK? It should look just like you posted here (please put code in [code] tags next time). If all the lines are run together, or have extra spaces between lines, then you didn't upload it correctly. How are you uploading the files... FTP or control panel upload or some page editor like Dreamweaver? When you look at your page source via your browser (View > Page Source or similar), does the CSS link line show anything different? Does it present a full http:....css URL? If you click on it, do you see the source you showed before, or does it look different? If you make a minor change to the CSS, do you see anything different? Have you either cleared your browser cache, or pressed Ctrl-F5 to force a complete reload?
Logged
Visit My Site

E-mail Me
 
-= From the ashes shall rise a sooty tern =-
abc
Pong! (the videogame) Master
*****
Offline Offline

Posts: 23
« Reply #2 on: December 11, 2011, 08:11:59 AM »
I uploaded again using Fetch to Lunarpages.
I see that my style sheet says style.css and not css/style.css- could this be the problem?
If you go to chestermedicalnj.com you will see how it looks but the style sheet is not kicking in.
thank you

AC
Logged
MrPhil
Senior Moderator
Berserker Poster
*****
Offline Offline

Posts: 5219
« Reply #3 on: December 11, 2011, 09:37:00 AM »
The style sheet (CSS) is in the root (/style.css), while your page is looking for it in /css/style.css. Either move it to /css or change the link tag to just href="style.css". I suggest the former.
Logged
Visit My Site

E-mail Me
 
-= From the ashes shall rise a sooty tern =-
abc
Pong! (the videogame) Master
*****
Offline Offline

Posts: 23
« Reply #4 on: December 11, 2011, 11:17:03 AM »
Mr Phil
Thank you for your help. I will attempt to correct
This when I get home today. You are giving advise to someone who knows practically nothin. Could you walk me through the first recommended option?
Logged
MrPhil
Senior Moderator
Berserker Poster
*****
Offline Offline

Posts: 5219
« Reply #5 on: December 11, 2011, 12:31:36 PM »
Either upload style.css again (using FTP or your control panel file upload) to the /css directory (and then erase the old one), or use your control panel to move the file: click on the name, select move, click on the public_html directory and then the css directory (that's the way it's done in cPanel; if you have LPCP it might be different). If you used a page/site editor such as Dreamweaver or Expression Web to set this up in the first place, you need to tell it where style.css actually is (it apparently has the wrong setup).
Logged
Visit My Site

E-mail Me
 
-= From the ashes shall rise a sooty tern =-
abc
Pong! (the videogame) Master
*****
Offline Offline

Posts: 23
« Reply #6 on: December 11, 2011, 02:05:40 PM »
Professor Phil,
Thank you so much for your recommendations.  It was easier for me to just change the href="style.css" as I couldn't figure it out using the cPanel.  Anyway it is now working and I am one happy camper!   Bouncin for Joy
AC
Logged
Pages: [1]   Go Up
  Print  
« previous next »
 
Jump to: