|
External Stylesheet wont link
02-10-2009, 07:55 PM
|
External Stylesheet wont link
|
Posts: 19
Name: Terry Scarr
|
Hi, im new to the css world after finally getting feed up with tables.
I recoded a site I have, embedded on all the pages as the tables were and it looks better, go figure, then I thought why not make an external css page so when it gets bigger load time wont be an issue.
Only problem is that the new stylesheet wont link and screw up the page when viewed from harddrive and server but looks great in dreamweaver.
So what am I looking past or most probably havent learnt yet thats doing my head in.
I know there are a fair few useless bits in here but I just havent gotten to them yet.
Thanks in advance
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<link href="ts_style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#ffffff">
<div id="container">
<div id="Table_01" class="ts-1">
<div class="ts-1-1">
</div>
<div class="ts-1-2"></div>
<div class="ts-1-3"></div>
<div class="ts-1-4"></div>
<div align="right" class="ts-1-5">
</div>
<div class="ts-1-6"></div>
<div class="ts-1-7"></div>
<div class="ts-1-8"></div>
<div class="ts-1-9"></div>
<div class="ts-1-10"></div>
<div class="ts-1-11"></div>
<div class="ts-1-12"></div>
<div class="ts-1-13"></div>
<div class="ts-1-14"></div>
<div class="ts-1-15"></div>
<div class="ts-1-16"></div>
<div class="ts-1-17"></div>
<div class="ts-1-18"></div>
<div class="ts-1-19"></div>
<div class="ts-1-20"></div>
<div class="ts-1-21"></div>
<div class="ts-1-22"></div>
<div class="ts-1-23"></div>
<div class="ts-1-24"></div>
<div class="ts-1-25"></div>
<div class="ts-1-26"></div>
<div class="ts-1-27"></div>
<div class="ts-1-28"></div>
<div class="ts-1-29"></div>
<div class="ts-1-30"></div>
<div class="ts-1-31"></div>
<div class="ts-1-32"></div>
<div class="ts-1-33"></div>
<div class="ts-1-34"></div>
</div>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
<!--/*--><![CDATA[/*><!--*/
img.preload { display: none; }
/*]]>*/-->
#container{
position:relative;
width:800px;
text-align:center;
margin:0 auto 0;
a:link {
color: black;
}
a:hover {
color: red;
}
a:visited {
color: black;
}
a:active {
color: black;
}
h1 {
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-shadow: #ccc 2px 0.2em 3px;
font-size: 7mm;
}
h2 {
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-shadow: #ccc 2px 0.2em 3px;
font-size: 6mm;
}
h3 {
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-shadow: #ccc 2px 0.2em 3px;
font-size: 5mm;
}
h4 {
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 4mm;
}
h5 {
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 3mm;
}
h6 {
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 2.5mm;
text-align: center;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.ts-1 {
border: none;
height: 660px;
position: relative;
text-align: left;
width: 801px;
}
.ts-1-1 {
border: none;
height: 20px;
left: 0px;
padding: 0px;
position: absolute;
top: 0px;
width: 800px;
}
.ts-1-2 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 15px;
left: 800px;
line-height: 15px;
padding: 0px;
position: absolute;
top: 0px;
width: 1px;
}
.ts-1-3 {
background: url(images/Header.jpg) no-repeat left center;
border: none;
height: 127px;
left: 0px;
line-height: 127px;
padding: 0px;
position: absolute;
top: 20px;
width: 800px;
}
.ts-1-4 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 127px;
left: 800px;
line-height: 127px;
padding: 0px;
position: absolute;
top: 15px;
width: 1px;
}
.ts-1-5 {
border: none;
height: 27px;
left: 0px;
padding: 0px;
position: absolute;
top: 142px;
width: 581px;
}
.ts-1-6 {
background: url(images/hand-right.jpg) no-repeat left center;
border: none;
height: 27px;
left: 581px;
line-height: 27px;
padding: 0px;
position: absolute;
top: 147px;
width: 55px;
}
.ts-1-7 {
background: url(images/col-right2.jpg) no-repeat left center;
border: none;
height: 149px;
left: 636px;
line-height: 149px;
padding: 0px;
position: absolute;
top: 142px;
width: 14px;
}
.ts-1-8 {
background: url(images/col-right1.jpg) no-repeat left center;
border: none;
height: 130px;
left: 650px;
line-height: 130px;
padding: 0px;
position: absolute;
top: 147px;
width: 150px;
}
.ts-1-9 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 27px;
left: 800px;
line-height: 27px;
padding: 0px;
position: absolute;
top: 142px;
width: 1px;
}
.ts-1-10 {
border: none;
height: 401px;
left: 0px;
overflow: hidden;
padding: 0px;
position: absolute;
top: 169px;
width: 40px;
}
.ts-1-11 {
border: none;
height: 401px;
left: 40px;
padding: 0px;
position: absolute;
top: 169px;
width: 596px;
}
.ts-1-12 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 103px;
left: 800px;
line-height: 103px;
padding: 0px;
position: absolute;
top: 169px;
width: 1px;
}
.ts-1-13 {
border: none;
height: 38px;
left: 650px;
line-height: 38px;
padding: 0px;
position: absolute;
top: 272px;
width: 150px;
}
.ts-1-14 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 19px;
left: 800px;
line-height: 19px;
padding: 0px;
position: absolute;
top: 272px;
width: 1px;
}
.ts-1-15 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 279px;
left: 636px;
line-height: 279px;
padding: 0px;
position: absolute;
top: 291px;
width: 14px;
}
.ts-1-16 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 19px;
left: 800px;
line-height: 19px;
padding: 0px;
position: absolute;
top: 291px;
width: 1px;
}
.ts-1-17 {
background: url(images/col-right.jpg) no-repeat left center;
border: none;
height: 9px;
left: 650px;
line-height: 9px;
padding: 0px;
position: absolute;
top: 310px;
width: 150px;
}
.ts-1-18 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 9px;
left: 800px;
line-height: 9px;
padding: 0px;
position: absolute;
top: 310px;
width: 1px;
}
.ts-1-19 {
border: none;
height: 69px;
left: 650px;
line-height: 69px;
padding: 0px;
position: absolute;
top: 319px;
width: 150px;
}
.ts-1-20 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 69px;
left: 800px;
line-height: 69px;
padding: 0px;
position: absolute;
top: 319px;
width: 1px;
}
.ts-1-21 {
background: url(images/col-right-09.jpg) no-repeat left center;
border: none;
height: 11px;
left: 650px;
line-height: 11px;
padding: 0px;
position: absolute;
top: 388px;
width: 150px;
}
.ts-1-22 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 11px;
left: 800px;
line-height: 11px;
padding: 0px;
position: absolute;
top: 388px;
width: 1px;
}
.ts-1-23 {
border: none;
height: 40px;
left: 650px;
line-height: 40px;
padding: 0px;
position: absolute;
top: 399px;
width: 150px;
}
.ts-1-24 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 40px;
left: 800px;
line-height: 40px;
padding: 0px;
position: absolute;
top: 399px;
width: 1px;
}
.ts-1-25 {
border: none;
height: 131px;
left: 650px;
line-height: 131px;
padding: 0px;
position: absolute;
top: 439px;
width: 150px;
}
.ts-1-26 {
border: none;
height: 131px;
left: 800px;
overflow: hidden;
padding: 0px;
position: absolute;
top: 439px;
width: 1px;
}
.ts-1-27 {
border: none;
height: 89px;
left: 0px;
padding: 0px;
position: absolute;
top: 570px;
width: 800px;
}
.ts-1-28 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 89px;
left: 800px;
line-height: 89px;
padding: 0px;
position: absolute;
top: 570px;
width: 1px;
}
.ts-1-29 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 1px;
left: 0px;
line-height: 1px;
padding: 0px;
position: absolute;
top: 659px;
width: 40px;
}
.ts-1-30 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 1px;
left: 40px;
line-height: 1px;
padding: 0px;
position: absolute;
top: 659px;
width: 541px;
}
.ts-1-31 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 1px;
left: 581px;
line-height: 1px;
padding: 0px;
position: absolute;
top: 659px;
width: 55px;
}
.ts-1-32 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 1px;
left: 636px;
line-height: 1px;
padding: 0px;
position: absolute;
top: 659px;
width: 14px;
}
.ts-1-33 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 1px;
left: 650px;
line-height: 1px;
padding: 0px;
position: absolute;
top: 659px;
width: 150px;
}
.ts-1-34 {
border: none;
height: 1px;
left: 800px;
overflow: hidden;
padding: 0px;
position: absolute;
top: 659px;
width: 1px;
}
Last edited by TS153; 02-10-2009 at 07:57 PM..
|
|
|
|
|
02-10-2009, 08:02 PM
|
Re: External Stylesheet wont link
|
Posts: 489
Name: Adam
|
1) Don't use dreamweaver to make any website, its utterly horrible.
2)
Code:
<link href="ts_style.css" rel="stylesheet" type="text/css" />
3) Check to see if the file locations/names are correct. |
|
|
|
|
02-10-2009, 09:19 PM
|
Re: External Stylesheet wont link
|
Posts: 19
Name: Terry Scarr
|
Quote:
Originally Posted by Decaf
1) Don't use dreamweaver to make any website, its utterly horrible.
2)
Code:
<link href="ts_style.css" rel="stylesheet" type="text/css" />
3) Check to see if the file locations/names are correct. |
Really I only use dreamweaver to make sure what im doing does what I want it to. As Im only new to it really, things have changed alot since the mid 90's.
I have already tried ending the link with /> and numerous other things, renaming and different file locations and nothing seems to work. |
|
|
|
|
02-10-2009, 09:53 PM
|
Re: External Stylesheet wont link
|
Posts: 489
Name: Adam
|
Ok, can you give us a file structure of the web site?
|
|
|
|
|
02-10-2009, 11:20 PM
|
Re: External Stylesheet wont link
|
Posts: 1,584
Location: Kokkola, Finland
|
rightlick on any file/folder within your files panel where you have your site defined choose 'check links' and 'entire total site'
there's nothing in the least bit wrong in using DW if you know how to code and know what you are doing.
|
|
|
|
|
02-11-2009, 02:16 AM
|
Re: External Stylesheet wont link
|
Posts: 19
Name: Terry Scarr
|
There really isnt a file structure to speak of at the moment as I have only built a template page, a style sheet and an image folder.
I checked the links and the stylesheet isnt mentioned. So dont know what happened there.
Is there something I should know about moving the embedded css from a html page to its own stylesheet and linking them that im missing. As all I did was cut and paste it.
And still the embedded page displays beautifully
|
|
|
|
|
02-11-2009, 03:39 AM
|
Re: External Stylesheet wont link
|
Posts: 30
Name: Arjan Nijmeijer
Location: Stadskanaal
|
Quote:
Originally Posted by Decaf
1) Don't use dreamweaver to make any website, its utterly horrible.
2)
Code:
<link href="ts_style.css" rel="stylesheet" type="text/css" />
3) Check to see if the file locations/names are correct. |
Dreamweaver doesnt have to be horrible! Just dont use the WYSIWYG-editor! :P
But point 2 of decaff is 100% correct UNLESS your css is not in the same folder as your index.html/htm/php or whatever you use. Is there a way I can check your site online? Cause I think your href doesn't correctly point at your stylesheet...
__________________
The Eagle Soars Above You!
Please login or register to view this content. Registration is FREE
|
|
|
|
|
02-11-2009, 05:04 AM
|
Re: External Stylesheet wont link
|
Posts: 19
Name: Terry Scarr
|
I figured it out thanks for the ideas guys.
The problem was that in my embedded css on the original page I was trying to seperate the css into its own stylesheet there were two seperate groups of styles
Code:
<style type="text/css">the fonts listed here</style>
<style type="text/css">div properties listed here</style>
But when I went to make the external stylesheet I just combined then together.
What I did was seperate them again, basically the first half into one sheet(upto .ts-1 in the css) and the second half into another, linked as they were and now it works.
So if you guys can explain why this happened or why its works now that would be great. |
|
|
|
|
02-11-2009, 09:59 AM
|
Re: External Stylesheet wont link
|
Posts: 10,017
Location: Tennessee
|
Quote:
|
What I did was seperate them again, basically the first half into one sheet(upto .ts-1 in the css) and the second half into another, linked as they were and now it works.
|
That really is not necessary, 1 file will work just fine.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
02-12-2009, 09:26 AM
|
Re: External Stylesheet wont link
|
Posts: 19
Name: Terry Scarr
|
Thats what I thought. But none of the browsers recognise the link unless they are seperated.
Ill try combine them again one I develop it further hopefully once I fix things up it will sort itself out
|
|
|
|
|
02-12-2009, 10:07 AM
|
Re: External Stylesheet wont link
|
Posts: 1,584
Location: Kokkola, Finland
|
why not post a url of what you have so far as something is obviously not working  |
|
|
|
|
02-12-2009, 03:38 PM
|
Re: External Stylesheet wont link
|
Posts: 10,017
Location: Tennessee
|
Quote:
|
But none of the browsers recognise the link unless they are seperated
|
Then it has to be the way you're doing it because I rarely use more then 1 CSS file.
We definitely need to see the code.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
02-12-2009, 09:43 PM
|
Re: External Stylesheet wont link
|
Posts: 19
Name: Terry Scarr
|
This was it on one sheet
http://hyperaustralia.terryscarr.com/template3.html
This is how it turned out once seperated
http://hyperaustralia.terryscarr.com/template2.html
Now I also have 2 other probs now.
1. I have a background image that should display behind the whole page that was working and now isnt, so I must have done something to make it not display.
2. Although Im new to css and have worked out how to get most things I want to display, Im to workout how to get them to behave the way I want.
Basically I want the content div ts-1-11 to expand with the content and have the lower div ts-1-27 to stay at the bottom.
I have tried some things but only manage to make things worst. lol.
New html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TerryScarr.com</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<link href="layout.css" rel="stylesheet" type="text/css" />
<link href="font.css" rel="stylesheet" type="text/css" />
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="Table_01" class="ts-1">
<div class="ts-1-1">
<center style="margin-top: 7px;">
<script type="text/javascript">
<!--
google_ad_client = "pub-3755004834864601";
/* 728x15, created 11/23/08 */
google_ad_slot = "8898690895";
google_ad_width = 728;
google_ad_height = 15;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></center>
</div>
<div class="ts-1-3"></div>
<div class="ts-1-5">
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="">Rides </a>
<ul>
<li><a href="20inch.html">20 Inch</a></li>
<li><a href="4xer.html">4x MTB</a></li>
</ul>
</li>
<li><a href="">Training</a>
<ul>
<li><a href="racetraining.html">Race Training</a></li>
<li><a href="jobtraining.html">Job Training</a></li>
</ul>
</li>
<li><a href="results.html">Results</a></li>
<li><a href="Gallery.html">Gallery</a></li>
<li><a href="">Projects</a>
<ul>
<li><a href="makingmoney.html">Making Money</a></li>
<li><a href="mycar.html">My Car</a></li>
</ul>
</li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact</a></li>
</div>
</div>
<div class="ts-1-6"></div>
<div class="ts-1-7"></div>
<div class="ts-1-8"></div>
<div class="ts-1-10"></div>
<div class="ts-1-11">
<h2>All </h2>
</div>
<div class="ts-1-13"><a href="http://www.blackmanbicycles.com.au/"><img border="0" alt="" src="images/blackmanbicycles.jpg" width="150" height="38"></a></div>
<div class="ts-1-15"></div>
<div class="ts-1-17"></div>
<div class="ts-1-19"><a href="http://www.musclebeach.com.au/"><img border="0" alt="" src="images/musclebeach.jpg" width="150" height="69"></a></div>
<div class="ts-1-21"></div>
<div class="ts-1-23"><a href="http://www.carbocage.com/"><img border="0" alt="" src="images/carbocage.jpg" width="150" height="40"></a></div>
<div class="ts-1-25"><img alt="" align="top" src="images/col-right-11.jpg" width="150" height="131"> </div>
<div class="ts-1-27">
<img alt="" src="images/bottom.jpg" width="800" height="36">
<center><script type="text/javascript">
<!--
google_ad_client = "pub-3755004834864601";
/* 728x15, created 11/23/08 */
google_ad_slot = "6109955547";
google_ad_width = 728;
google_ad_height = 15;
//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></center>
<center>
<h6><a href="index.html">Home</a> <a href="20inch.html">20Inch</a> <a href="4xer.html">4Xer</a> <a href="racetraining.html">Race Training</a> <a href="jobtraining.html">Job Training</a> <a href="results.html">Results</a> <a href="gallery.html">Gallery</a> <a href="makingmoney.html">Making Money</a> <a href="mycar.html">My Car</a> <a href="links.html">Links</a> <a href="contact.html">Contact</a></h6>
</center>
</div>
</div>
</div>
</body>
</html>
New css layout
Code:
@charset "utf-8";
/* CSS Document */
.ts-1 {
border: none;
height: 660;
position: relative;
text-align: left;
width: 801px;
}
.ts-1-1 {
border: none;
height: 20px;
left: 0px;
padding: 0px;
position: absolute;
top: 0px;
width: 800px;
}
.ts-1-3 {
background: url(images/Header.jpg) no-repeat left center;
border: none;
height: 127px;
left: 0px;
line-height: 127px;
padding: 0px;
position: absolute;
top: 20px;
width: 800px;
}
.ts-1-5 {
border: none;
height: 27px;
left: 0px;
padding: 0px;
position: absolute;
top: 142px;
width: 581px;
}
.ts-1-6 {
background: url(images/hand-right.jpg) no-repeat left center;
border: none;
height: 27px;
left: 581px;
line-height: 27px;
padding: 0px;
position: absolute;
top: 147px;
width: 55px;
}
.ts-1-7 {
background: url(images/col-right2.jpg) no-repeat left center;
border: none;
height: 149px;
left: 636px;
line-height: 149px;
padding: 0px;
position: absolute;
top: 142px;
width: 14px;
}
.ts-1-8 {
background: url(images/col-right1.jpg) no-repeat left center;
border: none;
height: 130px;
left: 650px;
line-height: 130px;
padding: 0px;
position: absolute;
top: 147px;
width: 150px;
}
.ts-1-10 {
border: none;
height: 401px;
left: 0px;
overflow: hidden;
padding: 0px;
position: absolute;
top: 169px;
width: 40px;
}
.ts-1-11 {
border: none;
height: 401px;
left: 40px;
padding: 0px;
position: absolute;
top: 169px;
width: 596px;
}
.ts-1-13 {
border: none;
height: 38px;
left: 650px;
line-height: 38px;
padding: 0px;
position: absolute;
top: 272px;
width: 150px;
}
.ts-1-15 {
background: url(images/spacer.gif) no-repeat left center;
border: none;
height: 279px;
left: 636px;
line-height: 279px;
padding: 0px;
position: absolute;
top: 291px;
width: 14px;
}
.ts-1-17 {
background: url(images/col-right.jpg) no-repeat left center;
border: none;
height: 9px;
left: 650px;
line-height: 9px;
padding: 0px;
position: absolute;
top: 310px;
width: 150px;
}
.ts-1-19 {
border: none;
height: 69px;
left: 650px;
line-height: 69px;
padding: 0px;
position: absolute;
top: 319px;
width: 150px;
}
.ts-1-21 {
background: url(images/col-right-09.jpg) no-repeat left center;
border: none;
height: 11px;
left: 650px;
line-height: 11px;
padding: 0px;
position: absolute;
top: 388px;
width: 150px;
}
.ts-1-23 {
border: none;
height: 40px;
left: 650px;
line-height: 40px;
padding: 0px;
position: absolute;
top: 399px;
width: 150px;
}
.ts-1-25 {
border: none;
height: 131px;
left: 650px;
line-height: 131px;
padding: 0px;
position: absolute;
top: 439px;
width: 150px;
}
.ts-1-27 {
border: none;
height: 89px;
left: 0px;
padding: 0px;
position: absolute;
top: 570px;
width: 800px;
}
New Css font
Code:
@charset "utf-8";
/* CSS Document */
#container{
position:relative;
width:800px;
text-align:center;
margin:0 auto 0;
background: url(images/bg.jpg) repeat;
}
a:link {
color: black;
}
a:hover {
color: red;
}
a:visited {
color: black;
}
a:active {
color: black;
}
h1 {
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-shadow: #ccc 2px 0.2em 3px;
font-size: 7mm;
}
h2 {
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-shadow: #ccc 2px 0.2em 3px;
font-size: 6mm;
}
h3 {
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-shadow: #ccc 2px 0.2em 3px;
font-size: 5mm;
}
h4 {
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 4mm;
}
h5 {
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 3mm;
}
h6 {
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 2.5mm;
text-align: center;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
|
|
|
|
|
« Reply to External Stylesheet wont link
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
