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.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Scale for different resolutions but also have a minimum width?

    Is it possible?

    If so, what code will help me accomplish this?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The layout given at http://bonrouge.com/2c-hf-fullyfluid.php has that feature, you may check the source to view the code.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    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.

  • Users who have thanked timgolding for this post:

    teamleaf (04-08-2009)

  • #4
    New Coder
    Join Date
    Mar 2009
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote 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!

  • #5
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    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; 04-09-2009 at 12:23 AM.
    You can not say you know how to do something, until you can teach it to someone else.

  • #6
    New Coder
    Join Date
    Mar 2009
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!

  • #7
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    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.

  • #8
    New Coder
    Join Date
    Mar 2009
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote 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?

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote 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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    New Coder
    Join Date
    Mar 2009
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote 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!

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    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.


  •  

    Posting Permissions

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