SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member kern's Avatar
    Join Date
    May 2005
    Location
    Dallas, TX
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    External Style Sheet Link

    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!

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    .sampleclass {font-size:1.2em; }
    and used like this in the html file:
    Code:
    <p class="sampleclass">
    I hope that helps. If not keep posting.

  4. #4
    SitePoint Member kern's Avatar
    Join Date
    May 2005
    Location
    Dallas, TX
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  5. #5
    SitePoint Enthusiast Roundy's Avatar
    Join Date
    May 2005
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you sure you are "linking" it right? It shouldn't make any differance to the css by making it external.

  6. #6
    SitePoint Member kern's Avatar
    Join Date
    May 2005
    Location
    Dallas, TX
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the linkage reference:

    <head>
    <title></title>
    <LINK REL=StyleSheet HREF="test2.css" TYPE="text/css" MEDIA=screen>
    </head>

  7. #7
    SitePoint Enthusiast meltingInPhoenix's Avatar
    Join Date
    May 2005
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try <LINK REL="StyleSheet" HREF="test2.css" TYPE="text/css" MEDIA="screen">

    I wrapped quotes around stylesheet and screen

  8. #8
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <div id="top">
    If you still have problems, an online version would be really helpful.

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    SitePoint Member kern's Avatar
    Join Date
    May 2005
    Location
    Dallas, TX
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Working!

    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!

  11. #11
    SitePoint Enthusiast meltingInPhoenix's Avatar
    Join Date
    May 2005
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink

    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.

  12. #12
    SitePoint Member kern's Avatar
    Join Date
    May 2005
    Location
    Dallas, TX
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  13. #13
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •