Web Analytics Made Easy -
StatCounter Scale for different resolutions but also have a minimum width? - CodingForum

Announcement

Collapse
No announcement yet.

Scale for different resolutions but also have a minimum width?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Scale for different resolutions but also have a minimum width?

    Is it possible?

    If so, what code will help me accomplish this?

  • #2
    The layout given at http://bonrouge.com/2c-hf-fullyfluid.php has that feature, you may check the source to view the code.
    Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

    Comment


    • #3
      Yes i have done it before took me ages

      CSS:
      Code:
      /* the bodge for IE6 browsers */
      * html .minwidth {border-left:657px solid #fff; position:relative; float:left; z-index:1;}
      
      .page
      {
       position:relative;
       min-width:640px;
       _margin-left:-657px;
       /float:left;
       /z-index:2;
       padding:5px;
      }
      HTML:
      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html id="html" xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Your Title</title>
      </head>
      <body>
      <div class="minwidth"><div class="page">
      
      <!-- Put your page content in here -->
      
      </div></div>
      </body>
      </html>
      I included the doctype etc because thats the doctype i used not sure if it works for others. Obviously change the title and charset as required. Not sure. I guess to change the minwidth to desired you need to change

      border-left:657px solid #fff;

      min-width:640px;
      _margin-left:-657px;

      those lines
      You can not say you know how to do something, until you can teach it to someone else.

      Comment


      • #4
        Originally posted by timgolding View Post
        Yes i have done it before took me ages

        CSS:
        Code:
        /* the bodge for IE6 browsers */
        * html .minwidth {border-left:657px solid #fff; position:relative; float:left; z-index:1;}
        
        .page
        {
         position:relative;
         min-width:640px;
         _margin-left:-657px;
         /float:left;
         /z-index:2;
         padding:5px;
        }
        HTML:
        Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html id="html" xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Your Title</title>
        </head>
        <body>
        <div class="minwidth"><div class="page">
        
        <!-- Put your page content in here -->
        
        </div></div>
        </body>
        </html>
        I included the doctype etc because thats the doctype i used not sure if it works for others. Obviously change the title and charset as required. Not sure. I guess to change the minwidth to desired you need to change

        border-left:657px solid #fff;

        min-width:640px;
        _margin-left:-657px;

        those lines

        Thanks! Works perfectly! Will test it in IE tomorrow, but it should be fine.

        I'm still not quite sure what the 657 is for, but i made my min width 1020 so I made the other # into 1037 to keep the extra 17 in there.

        Thanks again!

        Comment


        • #5
          cool I looked at this code this morning and realised i left out a div. Well you probably worked that much out it is a div that sits inside <div class="page"> and has width set to 100%.

          Here are the full codes.

          CSS:
          Code:
          /* the bodge for IE6 browsers */
          * html .minwidth {border-left:657px solid #fff; position:relative; float:left; z-index:1;}
          
          .page
          {
           position:relative;
           min-width:640px;
           _margin-left:-657px;
           /float:left;
           /z-index:2;
           padding:5px;
          }
          
          div#webpage_container
          {
           text-align:center;
          }
          
          div#webpage
          {
           width:100%; 
           text-align:left;
           margin-left:auto;
           margin-right:auto;
          }
          HTML:
          Code:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html id="html" xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <title>Your Title</title>
          </head>
          <body>
          <div class="minwidth"><div class="page">
          <div id="webpage_container">
          <div id="webpage">
          
          <!-- Put your page content in here -->
          
          </div></div>
          </div></div>
          </body>
          </html>
          Though most of the new stuff here is to center the content. If you don't need to center the content then just use one div with width:100%;
          Here is an example if you get stuck with it. http://180.co.uk.

          I'm not sure if just adding 17px and keeping the difference the same is what you want its probably proportional. Every time i used this for different widths I seem to remember having to sit and play around with these three numbers till it fits on the different browsers. Just have a play. Anyway glad it helped.
          Last edited by timgolding; Apr 8, 2009, 06:23 PM.
          You can not say you know how to do something, until you can teach it to someone else.

          Comment


          • #6
            Eh... Firefox and Safari work perfectly. IE 6 & IE 7 break it and both look completely different.


            http://teamleaf.org/FootballTest/indextesty.html


            Please help!

            Comment


            • #7
              Unfortunately I'm gonna be very busy until the weekend but can have a look then for you.
              You can not say you know how to do something, until you can teach it to someone else.

              Comment


              • #8
                Originally posted by timgolding View Post
                Unfortunately I'm gonna be very busy until the weekend but can have a look then for you.
                Thanks.

                Anyone know how I can turn my menu into a drop down?

                Comment


                • #9
                  Originally posted by teamleaf View Post
                  Anyone know how I can turn my menu into a drop down?
                  You need to add the required htmls elements, nested inside your main navigation items, and then apply some CSS. http://htmldog.com/articles/suckerfish/dropdowns/ is a good resource to learn the trick.
                  Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

                  Comment


                  • #10
                    Originally posted by abduraooft View Post
                    You need to add the required htmls elements, nested inside your main navigation items, and then apply some CSS. http://htmldog.com/articles/suckerfish/dropdowns/ is a good resource to learn the trick.
                    Okay..l. I went there and got all the code into my page... bu it is always referencing some sfhover thing. What is that? How do I get it? Do I need it?

                    Check the page to see what it looks like now with the current stuff on it.

                    http://teamleaf.org/FootballTest/indextesty.html


                    Thanks guys!

                    Comment


                    • #11
                      Okay..l. I went there and got all the code into my page... bu it is always referencing some sfhover thing. What is that? How do I get it? Do I need it?
                      Yes you need it for IE6 (and that little javascript), as it doesn't support :hover pseudo on elements other than anchor.
                      Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

                      Comment


                      • #12
                        Think i better leave you to sort the menu out before i attempt to fix this.
                        You can not say you know how to do something, until you can teach it to someone else.

                        Comment

                        Working...
                        X