Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    is it possible to add "ifs" in CSS ?

    in javascript, you can add "ifs" like this:

    <script type="text/javascript">
    <!--
    if (location.href.match(/board=/i))
    {
    //mass of gigantic codes here
    }
    //-->
    </script>


    but my question is, is it possible to do it in CSS ?
    if yes, how ?

    Thank you

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Yes, but only to define special instructions for Internet Explorer.

    For more info: http://www.quirksmode.org/css/condcom.html

    HTH, Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    no other way to define something for diferent addresses ? (like the example code given)

  • #4
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Not through CSS, but you could do something like this:

    Page1.html:
    Code:
    <head>
     <link href="main.css" rel="stylesheet" type="text/css" />
     <link href="page1.css" rel="stylesheet" type="text/css" />
    </head>
    Page2.html:
    Code:
    <head>
     <link href="main.css" rel="stylesheet" type="text/css" />
     <link href="page2.css" rel="stylesheet" type="text/css" />
    </head>
    In page1.css and page2.css, you could define everything that was specific to a certain page

    Dan
    Last edited by whizard; 12-22-2006 at 10:13 PM. Reason: typo
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #5
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No. IF statements are only in scripts.
    ALWAYS remember to validate your code

  • #6
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by whizard View Post
    Yes, but only to define special instructions for Internet Explorer.

    For more info: http://www.quirksmode.org/css/condcom.html

    HTH, Dan
    That is endif tag...
    ALWAYS remember to validate your code

  • #7
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Quote Originally Posted by http://www.quirksmode.org/css/condcom.html
    <!--[if IE 6]>
    And that, my friend, is an IF tag

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    It’s not an if statement for CSS though. It’s a conditional comment that serves anything in between only to Internet Explorer. It can also be modified to serve code to everything except Internet Explorer, but that still doesn’t help for the described problem either: serving CSS based upon the current URI, not the current browser.

    CSS selectors are basically if statements though. So for the selector html#board div, the attached CSS declarations will only be applied if the element is a div element with an ancestor element called html that has an id attribute with a value of “board”. Otherwise (else), it’s ignored.

    So there are two options: use very specific selectors or use multiple, specific style sheets (as was suggested). Calling specific style sheets is also like an if statement since those style sheets will only be used if the code calling them is present in the document. That means using a JavaScript‐like means of calling them based on URI would be redundant.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    You can use Javascript and CSS. Say you wanted to change the CSS style depending on a cookie the user set:

    Code:
    <html>
    <head>
    <script>
    // This section reads the cookie
    function getCookie(NameOfCookie){
        if (document.cookie.length > 0) {              
        begin = document.cookie.indexOf(NameOfCookie+"=");       
        if (begin != -1) {           
          begin += NameOfCookie.length+1;       
          end = document.cookie.indexOf(";", begin);
          if (end == -1) end = document.cookie.length;
            return unescape(document.cookie.substring(begin, end));
        } 
      }
      return null;
    }
    // This is the section that determines the CSS
    function DoTheCookieStuff()
    {
    csscookie=getCookie('csscookie');
    if (csscookie=="Black") 
    {
    document.getElementById('cssarea').innerHTML='<link rel="stylesheet" type="text/css" href="black.css">'
    // If the cookie is stored as Black, show the Black CSS
    }
    if (csscookie=="White") 
    {
    document.getElementById('cssarea').innerHTML='<link rel="stylesheet" type="text/css" href="white.css">'
    // If the cookie is stored as White, show the White CSS
    }
    if (!csscookie) 
    {
    document.getElementById('cssarea').innerHTML='<link rel="stylesheet" type="text/css" href="black.css">'
    // If there is no cookie, show the Black CSS....should be unnecessary
    }
    }
    </script>
    </head>
    <body>
    <span id="cssarea">
    <link rel="stylesheet" type="text/css" href="black.css">
    </span>
    INFORMATION
    </body>
    </html>
    I didn't test it but it should work.
    Last edited by ikilledsanta; 12-23-2006 at 09:28 PM. Reason: error

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,665
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Quote Originally Posted by ikilledsanta View Post
    Code:
    <html>
    <head>
    <script>
    // some JavaScript code
    </script>
    </head>
    <body>
    <span id="cssarea">
    <link rel="stylesheet" type="text/css" href="black.css">
    </span>
    INFORMATION
    </body>
    </html>
    .....
    Quote Originally Posted by W3C HTML validator
    Failed validation, 4 errors

    [...]

    1. Error Line 1 column 0: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>".

      <html>

      The checked page did not contain a document type ("DOCTYPE") declaration. The Validator has tried to validate with a fallback DTD, but this is quite likely to be incorrect and will generate a large number of incorrect error messages. It is highly recommended that you insert the proper DOCTYPE declaration in your document -- instructions for doing this are given above -- and it is necessary to have this declaration before the page can be declared to be valid.

    2. Error Line 3 column 7: required attribute "TYPE" not specified.

      <script>

      The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

      Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

    3. Error Line 38 column 6: end tag for "HEAD" which is not finished.

      </head>

      Most likely, You nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

      Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, <head> generally requires a <title>, lists (ul, ol, dl) require list items (li, or dt, dd), and so on.

    4. Error Line 41 column 55: document type does not allow element "LINK" here.

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

      The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

      One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

  • #11
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Quote Originally Posted by VIPStephan View Post
    random validation crap
    How is that even helpful, VIPStephan? None of that stuff would prevent the code from working. It would be one thing to add something constructive on top of that, but your post was otherwise completely unnecessary.

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,665
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Hm... now that you say it... must have gotten carried away a little by another post of ikilledsanta. Sorry for that.

  • #13
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I know I don't code how I should, but why does that matter if it works? My answer solved his problem, didn't it? As for your other post, I can edit the page fine. I never plan on making a site professionally, I'm just doing this for a project for one of my clubs. If I do well enough I can miss a lot of school and play Halo in a hotel instead. It really doesn't help that my team knows nothing about even basic web design.

  • #14
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by ikilledsanta View Post
    My answer solved his problem, didn't it?
    I believe the question asked if CSS had an if statement, not JavaScript.

    In any case, for all the trouble you would have to go through to insert that cookie script into every page, you could just as well insert references to the correct style sheets in every page and not be subjected to the weaknesses of JavaScript.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #15
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That is true, but what if, for instance, he wanted to switch stylesheets while staying on the same page? That is what I assumed he meant. That is a way to add an "if" that doesn't switch pages. My if example was if cookie says black. I just copied that, with a few alterations, from a page I had made before.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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