| SitePoint Sponsor |
Quick question - When using the external style sheet LINK REL, would it be possible to create a external sytle sheet with the ID's? So far I understand creating the external link with just the basics such as font, color etc... but can you do a external style sheet that would provide the ID structure?
Sorry for the noobness of the question, but still learing this code. Any info would be greatly appreciated.
Thank you!
I'm not sure what you mean. An external CSS can contain any sort of CSS. Nothing more, nothing less.
If you mean that you want to put an HTML template in there, you're out of luck. You need SSI (server-side includes) or some server-side scripting technique (e.g. PHP) for that.
Birnam wood is come to Dunsinane
Maybe having a look at a sample external css stylesheet helps you: http://www.csszengarden.com/166/166.css
Note: not all the possibilities of css formating is used there, meaning classes which can be defined like this in the external styleheet:
and used like this in the html file:Code:.sampleclass {font-size:1.2em; }
I hope that helps. If not keep posting.Code:<p class="sampleclass">
Sorry for my phrasing Autistic.
Basically I need to have the column layout set and referred to in an external style sheet. I have created an external style sheet and linked to it from a html page. But in doing so, it seems to have lost it's positioning of the content areas.
This is what I have so far as an external style sheet, but from what should be displayed to what is displayed is different. This should be providing the layout of a 3 column layout, but when applied as a external style sheet, it seems to lose it's positioning of the content boxes.
Anything you can point out would be appreciated.
Thank you.
body {
text-align:center;
font-family: Georgia, Serif;
}
#frame {
width:750px;
margin-top:10px;
text-align:left;
}
#top {
width: 695px;
background: #CCFFCC;
border: 1px dashed #CCCCCC;
padding: 10px;
margin: 10px;
}
#main {
float: left;
width: 350px;
background: #F5F5F5;
padding: 10px;
margin:5px;
}
#leftcontent {
float: left;
width: 140px;
background: #FFFFCC;
border: 1px dashed #CCCCCC;
padding: 10px;
margin: 5px;
}
#rightcontent {
float: left;
width: 140px;
background: #DDEEFF;
border: 1px dashed #CCCCCC;
padding: 10px;
margin: 5px;
}
#rightcontent p {
font-size:10px;
}
#leftcontent a {
font-size:12px;
line-height:2;
}
h1 {
font-size:large;
}
Are you sure you are "linking" it right? It shouldn't make any differance to the css by making it external.
Here is the linkage reference:
<head>
<title></title>
<LINK REL=StyleSheet HREF="test2.css" TYPE="text/css" MEDIA=screen>
</head>
try <LINK REL="StyleSheet" HREF="test2.css" TYPE="text/css" MEDIA="screen">
I wrapped quotes around stylesheet and screen
In addition, I would write everything in lower case. This shouldn't make any difference but is considered good code practice (or something like that).
Also make sure that you use the id correctly in your html file, eg:
If you still have problems, an online version would be really helpful.Code:<div id="top">
You have all these ID's (correctly spelled and with the same case) in your HTML, right?
Does the CSS file reside in the same directory as the HTML file?
Is the CSS file served with the proper Content-Type header (text/css)?
Try setting background:lime or something outrageous for the <html> element (in the external CSS) just to verify that it is, in fact, read.
If you use Mozilla or Firefox (properly installed) you can use the DOM Inspector (Ctrl+Shift+I) to examine the CSS rules, and that will quickly tell you if your external CSS is read or not.
Birnam wood is come to Dunsinane
Hey guys - thanks for all your feedback. Seems to work now that I have the correction to the LINK REL corrected.
Here is the link to the tester. Only thing that I can see is that the frame has shifted to the left.
LINK TEST2
With the internal reference, it was buffered from the left. Thought this should stay the same since there were no changes that were made when moved from internal to external.
LINK - TEST1
Again, thanks for your thoughtful insight - BEST FORUM EVER!
If you haven't already, to save you heartache down the road download Firefox and do all your initial testing against it. When you get things where you want it in that, make whatever changes neccessary to the CSS to make it work for IE 5 & 6.
I know...already have Firefox....but haven't had the heart to look at it. Is there a good tips/tricks section for dealing with Firefox/Netscape (have it too, and sure it looks jacked). Basic Design question - when you design - do you design to the Firefox browser or to IE?
Do it like meltingInPhoenix said:
First make it work in Firefox, then do every necessary thing to get it work in IE 5 / 6. If you stick to the standards, Firefox will thank you, and hopefully you only need minor changes to get it working in IE.
Posting Permissions
Bookmarks