applying one stylesheet to two index pages

**pellerbe** · Feb 17, 2009 19:20

I have one index page that looks fine with the stylesheet. The stylesheet puts a background image and a left border on each page.

I have a second index page that is reachable only if you know what to put after the backslash in the address, which is in a different folder on the site. I put a copy of the same stylesheet in the same folder as is the second index page, but no background image or left border show up.

The same stylesheet is referenced in the heading of both index pages.

What am I doing wrong?

Thanks!

Polly

**Dan Schulz** · Feb 17, 2009 20:49

Hi Polly,

It sounds like you're using a relative path for your stylesheet. If you preceed the path with a forward slash or just use an absolute link, you should be able to get the stylesheet to display properly on all your pages (link references in your image URIs included).

Hope that helps.

**pellerbe** · Feb 18, 2009 05:36

Thanks so much for answering!

I see what you are saying. But I don't know how to implement it, because I am really new at this!

This is the HTML that says which stylesheet to use:

<head>
<title>Unitarian Church of Montpelier</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles2.css" rel="stylesheet" type="text/css">
</head> 

How do I know it is a relative path, and how do I change it to an absolute path?

Thanks again!

Polly

**Dan Schulz** · Feb 18, 2009 12:46

It's a relative path because you're not listing the full link (like it would appear in your browser's address bar). What I typically do is create a folder in the same "directory" that the home page appears called "styles" (I do the same for images), and then reference it by adding a forward slash, like so:

HTML Code:

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

That way, no matter where the page is on the server, it'll still look to the "root" for the "styles" folder and then look for the style sheet inside it.

**pellerbe** · Feb 18, 2009 13:16

Oh, I see. Just like I stuff all my images into a folder named "graphics," so I refer to an image in there as "graphics/image1", not just image1.

So:
<link href="styles/styles2.css" rel="stylesheet" type="text/css">

Unfortunately, I still can't get it to work; I still don't see the images.

I made a copy of the graphics folder and put it into the folder where the second copy of the index page is, and it still doesn't work.

Do you need to see anything else?

Thanks very much!

Polly

**Dan Schulz** · Feb 18, 2009 13:22

You need to put a forward slash BEFORE the folder name. Like so:

/styles/

/graphics/

Then it should work (but not on your desktop unless you have a server installed there - but it will work online).

**pellerbe** · Feb 18, 2009 13:54

Even if I have the entire website on my desktop in a folder?

Polly

**Dan Schulz** · Feb 18, 2009 14:42

It won't work on a desktop folder. You'll have to install a server to do that.

One easy server to use is XAMPP. It's so easy even my 65 year old mother could install it. (And she knows nothing about computers, not even how to turn one on.) http://www.apachefriends.org/en/xampp.html

Another (for intermediate users) is WampServer 2 (formerly WAMP). http://www.wampserver.com/en/

Just download and install the server, move your Web site's folder contents to the server in your C: drive (under Program Files, followed by the server name and the HTTP folder, usually www or public_html, sometimes http), and then go to http://localhost to see your site.

**RetroNetro** · Feb 18, 2009 15:29

Originally Posted by Dan Schulz

It won't work on a desktop folder. You'll have to install a server to do that.

One easy server to use is XAMPP. It's so easy even my 65 year old mother could install it. (And she knows nothing about computers, not even how to turn one on.) http://www.apachefriends.org/en/xampp.html

Another (for intermediate users) is WampServer 2 (formerly WAMP). http://www.wampserver.com/en/

Just download and install the server, move your Web site's folder contents to the server in your C: drive (under Program Files, followed by the server name and the HTTP folder, usually www or public_html, sometimes http), and then go to http://localhost to see your site.

You shouldn't have to go through all that to test some .html files and a stylesheet locally. No need for a web server to do this. Unless I have missed something?

**Dan Schulz** · Feb 18, 2009 15:33

Makes it easier to move from the computer to the server without having to edit files afteword.

**pellerbe** · Feb 20, 2009 16:50

Okay, I didn't download and install a server on my desktop; instead, I uploaded to a personal webpage space that my ISP allows me. That way I can ask others to look at it too.

I still can't get the index in the second folder to use the stylesheet, even though I have written
<link href="/styles/styles2.css" rel="stylesheet" type="text/css">

and have put styles2.css in a folder named styles that is in with the rest of the webpages.

I also tried not putting styles2.css in a separate folder, but rather putting a / in front of the name, and that doesn't work either.

I would very much appreciate help, as I can't think of what to do next!

Polly

**RetroNetro** · Feb 20, 2009 17:21

Okay imagine this as the directory structure:

Server Root

styles (is a folder that contains the styles2.css file)
index.html
index2.html

The styles directory and the 2 index files go in the same location, then this in teh <head> of the 2 .html files loads the stylesheet (this will work both locally and on a server):

Code HTML4Strict:

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

Note: I removed the first / slash from the beginning of teh path.

Though lets say you wanted to put the index2.html file in it's own directory:

Server Root

styles (is a folder that contains the styles2.css file)
index.html
about (is a folder that contains index2.html)

In this instance index2.html will not load the .css file as it does not find it in the location it was told to look. It is looking in the 'about' folder for another folder named styles (containing a styles2.css file)

So you can modify this line in index2.html:

Code HTML4Strict:

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

Note: I added the ../ in front, this says to look one directory up for a folder named styles with a .css file in it named styles2.css (which is there so it loads the stylesheet)

You can use as many ../'s as needed to go up one level for each ../ Using this method will allow for this to work both locally and online with no need to install a server locally (as you might not be quite ready for that yet).

**pellerbe** · Feb 20, 2009 18:04

The page structure is there, the navigation and all that!

And I understand what you did too.

Amazing what two periods will do.

One more thing: the background image:

In the styles2 CSS:

html {
background-image: url(graphics/leftsideborder.gif);
background-repeat: repeat-y;
}

Whether I put that image in the "about" folder, or leave it in the original graphics folder, index2 doesn't see it.

How do I tell the index page where to look?

Yippee! I'm almost there!

Thanks so much!

And you're not kidding I'm not ready to install a server! [g!]

**RetroNetro** · Feb 20, 2009 18:25

Cool, if you hang around here long enough you'll be a pro before you know it.

Okay, well NOT having seen your page.

I would first change this:

Code CSS:

html {
  background-image: url(graphics/leftsideborder.gif);
  background-repeat: repeat-y;
}

to be on the body element:

Code CSS:

body {
  background-image: url(graphics/leftsideborder.gif);
  background-repeat: repeat-y;
}

Though also keep whatever properties:values are already applied to the body selector.

As far as why the image is not appearing on index2.html, my guess is the same issue you we're having with the index2.html not loading the stylesheet.

The path to the file!

If the graphics folder/directory is in the root with the styles folder than the path to the images would be:

Code CSS:

background-image: url(../graphics/leftsideborder.gif);

Look one directory up for a folder named graphics containing an image named leftsideborder.gif.

If the image is in the about folder than the path from the stylesheet would be:

Code CSS:

background-image: url(../about/leftsideborder.gif);

Look one directory up for a folder named about containing an image named leftsideborder.gif.

If the graphics folder is also moved to the about folder the path would be:

Code CSS:

background-image: url(../about/graphics/leftsideborder.gif);

Look one directory up for a folder named about that contains a folder named graphics that contains an image named leftsideborder.gif.

Kinda confusing to read but is really simple once you get used to it.

Hope this is helping and not discouraging you.

Also just so it is said, you can not worry about all this path stuff by using an absolute path: http://yourdomain.com/styles/style2.css Though this will NOT work locally.

**pellerbe** · Feb 21, 2009 09:31

That took a bit of figuring out, since I had to isolate the newsletter page! [g!]

But two of the three images I wanted are there in the proper places, and that will do.

Now, just one more question (on this topic anyway!), and I don't think this is a path question! [g!].

I put the newsletter page up at http://www.sover.net/~polly50/newsletter/ and the entire site at
http://www.sover.net/~polly50/.

You will notice that in the navigation bar on the newsletter page the link Home is moved over onto the border, which is not true in the other pages. Yet all navigation divs are id'ed the same. What did I do wrong?

My entire CSS, because you never know when one thing you do will change something you did earlier, is below.

Thanks again!

Polly

PS: there was a reason why the b.g image is part of the HTML element, I think because I needed 2 b.g images and was having no luck any way but that way. But I'll look again when I get this page figured out.

/* uu site*/

html {
background-image: url(graphics/leftsideborder.gif);
background-repeat: repeat-y;
}

html, body {
height;100%;
}

/* this rule is so I can see where the divs are*/
#tophead, #navigation, #contentindex, #footer, #contentother, #subhead, .left, .right, #centertext, #contentlist, #contentshort, .clearfloats #calendar, #newsletterpage, .fairphoto {
border: 1px solid red;
padding: 2px;
margin-bottom: 2px;
}

/* rules applying to all pages start here.*/

#tophead {
font-size: 24px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin-left: 250px;
width: 535px;
}

#subhead {
font-size: 20px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin-left: 250px;
margin-top: 20px;
width: 535px;
}

.left {
float: left;
}

.right {
float: right;
}

.clearfloats {
clear:both;
}

.clearright {
clear:right;
}

.clearleft {
clear:left;
}

.padding30 {
padding-top: 30px;
}

.padding10 {
padding-top: 10px;
}

.spacing {
margin-top: 10px;
}

/* rules applying to all pages end here.*/

/* navigation rules start here.*/
#navigation {
font-size: 16px;
font-weight: bold;
width: 200px;
letter-spacing: 0.03em;
line-height: 200%;
margin-left: 20px;
float: left;
top: 0;
left: 0;
}

/* need this separately so that the rule overrides what the browser will do.*/
a {
text-decoration: none;
}

#navigation ul {
list-style-type: none;
margin-top: 0;
}

a:link {
color: #6600CC; /* bright purple*/
}

a:visited {
color: #6699FF; /* light blue*/
}

a:hover {
color: #993333; /* rust*/
}

a:active {
color: #000099; /* dark blue*/
}

/* navigation rules end here.*/

/* rules applying only to the index page start here.*/

#contentindex {
line-height: 150%;
margin-left: 250px;
padding-top: 5px;
background: url(graphics/church.jpg) no-repeat;
background-position: top;
width: 600px;
height: 750px;

}
#welcome {
width: 250px;
}

/* rules applying only to the index page end here.*/

/* rules for other than the index page start here.*/

img {
margin-left: 10px;
margin-right: 10px;
border: 1px solid black;
}

#contentother {
margin-left: 250px;
background: url(graphics/screenedchurch.jpg) no-repeat;
background-position: top;
width: 600px;
min-height: 100%;
}

#service { /* for "your first visit" page only*/
margin-left: 95px;
}

#centertext { /* for directions page only*/
margin-left: 150px;
line-height: 150%;
}

#centermap { /* for directions page only*/
margin-left: 68px;
padding-top: 30px;
padding-bottom: 30px;
}

#contentlist { /* for RE page only*/
line-height: 150%;
}

#contentlist ul { /* for RE page only*/
list-style-type: none;
margin-top: 10px;
}

#contentlist a { /* for RE page only*/
text-decoration: none;
}

#contentshort { /* in a short page, to force the footer down
below the background image*/
margin-left: 250px;
background: url(graphics/screenedchurch.jpg) no-repeat;
background-position: top;
width: 600px;
height: 750px;
}

#calendar { /* for calendar page only*/
margin: 10px;
}

.fairphoto { /* for Fair photos page only*/
padding: 20px;
}

.fairphoto img { /* for Fair photos page only*/
margin: 10px;
}

#newsletterpage { /* for newsletter page only*/
margin-left: 250px;
width: 600px;
}

/* rules for other than the index page end here.*/

/* footer rules start here.*/
#footer {
margin-left: 250px;
width: 535px;
height: 80px;
clear: both;
}

#footer img {
float: left;
margin-right: 10px;
{

/* footer rules end here.*/

**RetroNetro** · Feb 21, 2009 11:41

Hello

On the one page you have:

Code HTML4Strict:

<div id="navigation"> 
  <!-- use an id because there is only one navigation area-->
   <ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="believe.html">What We Believe</a></li>
	<li><a href="visit.html">Your First Visit</a></li>
	<li><a href="directions.html">Directions</a></li>
	<li><a href="education.html">Religious Education</a></li>
	<li><a href="music.html">Music</a></li>
	<li><a href="staff.html">Our Staff</a></li>
	<li><a href="http://prem.calendars.net/ucofm/">Upcoming Events</a></li>
	<li><a href="news.html">News</a></li>
	<li><a href="governance.html">Governance</a></li>
	<li><a href="history.html">History</a></li>
	<li><a href="links.html">UU Links</a></li>
  </ul>
</div> <!-- close navigation div-->

on the other you have:

Code HTML4Strict:

<div id="navigation"> 
   <a href="www.sover.net/~polly50">Home</a>	
</div><!--close navigation div-->

So you need to add the unordered list stuff:

Code HTML4Strict:

<ul>
 <li><a href="www.sover.net/~polly50">Home</a></li>
</ul>

**pellerbe** · Feb 21, 2009 14:36

oh for heaven's sake, of course!

Thank you again!

Polly

**RetroNetro** · Feb 21, 2009 15:51

No problem at all, glad to be of assistance! If ya got more questions just come back and ask.

User Tag List

Thread: applying one stylesheet to two index pages

Thread Tools

Display

applying one stylesheet to two index pages

Bookmarks

Bookmarks

Posting Permissions