SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ok, stylesheet linking for NN 4

    Ok, I just want to make sure I am on the write path

    If I want my site, www.btkdesigns.com to show up respectively in NN 4.0 and 4.7, I should use the <link> tag, and use <import> for everything else?

    Taking a look at that site, what is recommended I disable to have it view coherently in NN4? Everything ? j/k

    Thanks
    Bryan

    p.s. Reason I ask is because I do not have NN4

  2. #2
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now, if I am using the ALA style switcher, how do I implement that with IMPORT?

    Thanks
    Bryan

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jag5311
    Now, if I am using the ALA style switcher, how do I implement that with IMPORT?
    In your HTML:
    HTML Code:
    <link rel="stylesheet" href="/nn4.css" type="text/css" media="screen" title="Basic" />
    In nn4.css:
    Code:
    @import url("/real.css");
    /*other style rules under this*/
    Just make sure your @import rule is the first line to play nicely with some newer browsers.

  4. #4
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See, here is what I currently have because i am using the ALA switcher
    Code:
    <link rel="stylesheet" type="text/css" href="green1.css" title="green" />
    <link rel="alternate stylesheet" type="text/css" href="blue.css" title="blue" />
    <link rel="alternate stylesheet" type="text/css" href="darkgold.css" title="darkgold" />
    <link rel="alternate stylesheet" type="text/css" href="red.css" title="red" />
    <link rel="alternate stylesheet" type="text/css" href="green1.css" title="green" />
    How does the browser know which is an alternate and which is the default by changing them to IMPORTS

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jag5311
    See, here is what I currently have because i am using the ALA switcher
    Code:
    <link rel="stylesheet" type="text/css" href="green1.css" title="green" />
    <link rel="alternate stylesheet" type="text/css" href="blue.css" title="blue" />
    <link rel="alternate stylesheet" type="text/css" href="darkgold.css" title="darkgold" />
    <link rel="alternate stylesheet" type="text/css" href="red.css" title="red" />
    <link rel="alternate stylesheet" type="text/css" href="green1.css" title="green" />
    How does the browser know which is an alternate and which is the default by changing them to IMPORTS
    You don't have to change them to @imports in your HTML page at all. @import the advanced styles from WITHIN the CSS files and leave the basic stuff that even NN4 can understand (i.e. colors and fonts) in the <link>ed stylesheets.

  6. #6
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    damnit I am slow. OK

    So I am just going to have one linking

    <link rel="stylesheet" href="""/nn4.css" type="text/css" media="screen" title="Basic" />

    and in that file I will have

    Code:
    @import url("green1.css");

    and where you have

    /*other style rules under this*/

    That is the basic formatting for NN4 to understand?

    I guess what confuses me is that the ALA switcher looks for the titles of the linked styles, so it can make the switch, if I import them, there is no more title.

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jag5311
    and where you have

    /*other style rules under this*/

    That is the basic formatting for NN4 to understand?
    Bingo. Basically, your style switcher would still work because you have the <link> elements, but the advanced styles would be @imported and hidden from NN4.

  8. #8
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    V, you are eventually going to hate me

    Even your avatar is glaring down at me right now as I write this.

    Ok, so I will post some code and try to make sense of it

    Here is what I will have on my index page, inside the <head>

    Code:
    <link rel="stylesheet" type="text/css" href="nn4.css" title="green" />
    Ok, now inside that file, I will have this

    Code:
    @import url("green1.css");
    @import url("blue.css");
    @import url("darkgold.css");
     
    body {
     text-align: center;
     margin: 0px;
     padding: 0px;
     font-family: Geneva, Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     color: #000000;
     }
    html>body #contentarea {border-top:1px dashed #339933;
    }
    #menu {
     padding: 0px;
     background-color: #E3F4DF;
     border-right: 1px solid #000;
     border-left :1px solid #000;
     border-top: none;
    }
    a.menu:link, a.menu:visited {
     font-family: Georgia, Times New Roman, Times, serif;
     font-size: 12px;
     font-style: normal;
     font-weight: bold;
     font-variant: normal;
     color: #000000;
     background-color: #E3F4DF;
     text-align: center;
     border-right: 1px dashed #339933;
     text-decoration: none;
     padding-right: 10px;
     padding-left: 10px;
    }
    But I don't need a title for those imports? This is where I need help clearing it up.


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
  •