3 Replies Latest reply on Feb 11, 2010 12:47 PM by Nancy OShea

    conditional statement

    lisaellensegal Level 1

      Working in DW CS4

       

      I created a template page with an optional leftCol and an optional rightCol.  I created css for each column.  My site has pages that alternate between a left column OR a right column.  All is fine so far.  I have one page that wil only have one column, BUT I want that column to be a different width.  I tried to give this page a new id, and create a rule like this:

       

      #wrapper #leftCol {
          width: @@(scheduleDetail==true?"780":"266")@@px;
          float: left;
          padding: 10px;
          position: relative;
          height: 480px;

      }

       

      Also, I do NOT want a fixed height on this particular page.

       

      Any suggestions?

       

      Thanks,

       

      Lisa

        • 1. Re: conditional statement
          Nancy OShea Adobe Community Professional & MVP

          Conditional Comments are used when targeting Internet Explorer only.

           

          Height values are restricting in all but IE browsers.  Best to avoid heights on any container with text in it.

           

          Now if I read this correctly, you want the #leftCol to be a different width on one page called Schedule??

           

          CSS:

           

          #Schedule #leftCol {

              width: 266px;
              float: left;
              padding: 10px;
              position: relative; /**why do you need relative positioning??**/

          }

           

          In your HTML, add an ID to the BODY tag like so:


          <body id="Schedule">

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          www.alt-web.com/
          www.twitter.com/altweb
          www.alt-web.blogspot.com

          • 2. Re: conditional statement
            lisaellensegal Level 1

            Dear Nancy,

             

            1. OK, I am not realy sure why the relative rule.  I can remove it.

            2. My client wants all of her pages to be the same exact size (like a postcard).  If you advise not to use height rule, how would you handle this?

            3. When you said, "Conditional Comments are used when targeting Internet Explorer only" am I to understand that other browsers will ignore the comment?

            4. If the above is true, would you create a separate template for this page rather then a conditional statement?

            5. yes, I made the body tag editable and created an id for this page set to "scheduleDetail".

            6. I don't see how you would write the CSS rule for width (assuming that this works for most browsers).

             

            Thanks so much,

             

            Lisa

             

            P.S. How does one become more proficient in web design - all seriousness

            • 3. Re: conditional statement
              Nancy OShea Adobe Community Professional & MVP

              1. OK, I am not realy sure why the relative rule.  I can remove it.

              Without seeing your other code, it's hard to make suggestions.  But my rule of thumb is to use default CSS positioning (which is no positioning at all).  Only add relative or absolute positioning when required (rarely).

               

              2. My client wants all of her pages to be the same exact size (like a postcard).  If you advise not to use height rule, how would you handle this?

               

              Educate your client that web pages are not the same as static printed pages.  Web pages must remain flexible to accommodate long and short pages without extra scrollbars.  Also, many people need increased text sizes to comfortably read content on their displays.  If you impose height limits on pages, how will people be able to see all your content??  The web is intentionally user-centric now.  It's not what the designer or client wants, it's what the site visitor wants that matters.

               

              3. When you said, "Conditional Comments are used when targeting Internet Explorer only" am I to understand that other browsers will ignore the comment?

               

              Yes.    CC are for IE only.  All other browsers ignore them.

              More on CCs -- http://www.quirksmode.org/css/condcom.html

               

              4. If the above is true, would you create a separate template for this page rather then a conditional statement?

               

              No extra templates required. The CSS code I gave you is NOT a Conditional Comment.  It will work for all browsers.  Just change the CSS #ID to match your BODY tag's ID and it should work fine.

               

              P.S. How does one become more proficient in web design - all seriousness

               

              Spend time on sites and forums like these:

              Adobe Developer's Center
              http://www.adobe.com/devnet/dreamweaver/css.html

               

              Read lots of different tutorials.  Experiment with code.  Ask questions when you get stuck.  

               

              Good luck,

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              www.alt-web.com/
              www.twitter.com/altweb
              www.alt-web.blogspot.com