www.webdeveloper.com
Results 1 to 7 of 7

Thread: fluid page and fixed width before scrolling

  1. #1
    Join Date
    Jan 2010
    Posts
    230

    fluid page and fixed width before scrolling

    im not really sure how to explain this the best way, but if you take a look at this frontpage,

    http://badoo.com/

    you can see that even tho the "background" which is not a singe background picture but information gathered from a database, but when you resize the window the width scroller doesnt appear until a fixed width size.

    how can this be achieved?

    regards,
    alex

  2. #2
    Join Date
    Jun 2010
    Posts
    54
    Use the min-width css property.

  3. #3
    Join Date
    Jan 2010
    Posts
    230
    its that simple? thanks!

    XOXO

  4. #4
    Join Date
    Jan 2010
    Posts
    230
    i tried to do this but couldnt make it work..

    here is what i have so far:

    http://www.migo.no/

    the site is ignoring the left side when scrolling, but not the right side. i guess when the distances are too far the scroll kicks inn :S

    i basicly want the scrolling to kick in when the window size is less then the green zone.. im kind of stuck here.. hope i can get some advice here

    best of regards,
    alex

    here is the css:

    Code:
    /* ///////////////////// WRAPPERS ///////////////////// */
    
    #page_wrapper {
        position: relative;
        /* overflow: hidden; */
        width: 980px;
        height: 400px;
        background-color: green;
        margin: 23px auto 0px auto;
    }
    
    /* ///////////////////// IMG FRAMES ///////////////////// */
    
    #f1_48, #f2_48, #f3_72, #f4_72, #f5_120, #f6_48, #f7_72,
    #f8_32, #f9_48, #f10_120, #f11_72, #f12_72, #f13_32,
    #f14_72, #f15_120, #f16_72, #f17_48, #f18_120, #f19_32,
    #f20_32, #f21_72, #f22_72, #f23_72, #f24_48, #f25_48,
    #f26_32, #f27_48, #f28_72, #f29_120, #f30_72, #f31_48,
    #f32_48, #f33_32, #f34_48, #f35_32 {
        position: absolute;
        background-color: #fff;
        border: 1px solid #bfbfbf;
        padding: 2px;
        
        -moz-box-shadow: 0px 0px 2px #cbcbcb;
        -webkit-box-shadow: 0px 0px 2px #cbcbcb;
        box-shadow: 0px 0px 2px #cbcbcb;
    }
    
    #f1_48 {
        top: 82px;
        left: -103px;
        width: 48px;
        height: 48px;
    }
    #f2_48 {
        top: 0px;
        left: 27px;
        width: 48px;
        height: 48px;
    }
    #f3_72 {
        top: 58px;
        left: 3px;
        width: 72px;
        height: 72px;
    }
    #f4_72 {
        top: 58px;
        left: 85px;
        width: 72px;
        height: 72px;
    }
    #f5_120 {
        top: 10px;
        left: 167px;
        width: 120px;
        height: 120px;
    }
    #f6_48 {
        top: 82px;
        left: 297px;
        width: 48px;
        height: 48px;
    }
    #f7_72 {
        top: 58px;
        left: 379px;
        width: 72px;
        height: 72px;
    }
    #f8_32 {
        top: 16px;
        left: 461px;
        width: 32px;
        height: 32px;
    }
    #f9_48 {
        top: 82px;
        left: 485px;
        width: 48px;
        height: 48px;
    }
    #f10_120 {
        top: 10px;
        left: 826px;
        width: 120px;
        height: 120px;
    }
    #f11_72 {
        top: 58px;
        left: 957px;
        width: 72px;
        height: 72px;
    }
    #f12_72 {
        top: 58px;
        left: 1145px;
        width: 72px;
        height: 72px;
    }
    #f13_32 {
        top: 140px;
        left: -145px;
        width: 32px;
        height: 32px;
    }
    #f14_72 {
        top: 140px;
        left: -45px;
        width: 72px;
        height: 72px;
    }
    #f15_120 {
        top: 140px;
        left: 37px;
        width: 120px;
        height: 120px;
    }
    #f16_72 {
        top: 140px;
        left: 167px;
        width: 72px;
        height: 72px;
    }
    #f17_48 {
        top: 270px;
        left: 167px;
        width: 48px;
        height: 48px;
    }
    #f18_120 {
        top: 140px;
        left: 249px;
        width: 120px;
        height: 120px;
    }
    #f19_32 {
        top: 270px;
        left: 295px;
        width: 32px;
        height: 32px;
    }
    #f20_32 {
        top: 270px;
        left: 337px;
        width: 32px;
        height: 32px;
    }
    #f21_72 {
        top: 140px;
        left: 379px;
        width: 72px;
        height: 72px;
    }
    #f22_72 {
        top: 222px;
        left: 379px;
        width: 72px;
        height: 72px;
    }
    #f23_72 {
        top: 140px;
        left: 461px;
        width: 72px;
        height: 72px;
    }
    #f24_48 {
        top: 222px;
        left: 461px;
        width: 48px;
        height: 48px;
    }
    #f25_48 {
        top: 222px;
        left: -103px;
        width: 48px;
        height: 48px;
    }
    #f26_32 {
        top: 140px;
        left: 826px;
        width: 32px;
        height: 32px;
    }
    #f27_48 {
        top: 140px;
        left: 868px;
        width: 48px;
        height: 48px;
    }
    #f28_72 {
        top: 270px;
        left: 875px;
        width: 72px;
        height: 72px;
    }
    #f29_120 {
        top: 140px;
        left: 957px;
        width: 120px;
        height: 120px;
    }
    #f30_72 {
        top: 58px;
        left: 957px;
        width: 72px;
        height: 72px;
    }
    #f31_48 {
        top: 270px;
        left: 1029px;
        width: 48px;
        height: 48px;
    }
    #f32_48 {
        top: 140px;
        left: 1087px;
        width: 48px;
        height: 48px;
    }
    #f33_32 {
        top: 198px;
        left: 1087px;
        width: 32px;
        height: 32px;
    }
    #f34_48 {
        top: 270px;
        left: 1145px;
        width: 48px;
        height: 48px;
    }
    #f35_32 {
        top: 304px;
        left: 461px;
        width: 32px;
        height: 32px;
    }
    and the html:

    HTML Code:
    <div id="page_wrapper">
        
        <div id="f1_48">
    
        </div>
    
        <div id="f2_48">
    
        </div>
    
        <div id="f3_72">
    
        </div>
    
        <div id="f4_72">
    
        </div>
    
        <div id="f5_120">
    
        </div>
    
        <div id="f6_48">
    
        </div>
    
        <div id="f7_72">
    
        </div>
    
        <div id="f8_32">
    
        </div>
    
        <div id="f9_48">
    
        </div>
    
        <div id="f10_120">
    
        </div>
    
        <div id="f11_72">
    
        </div>
    
        <div id="f12_72">
    
        </div>
    
        <div id="f13_32">
    
        </div>
    
        <div id="f14_72">
    
        </div>
    
        <div id="f15_120">
    
        </div>
    
        <div id="f16_72">
    
        </div>
    
        <div id="f17_48">
    
        </div>
    
        <div id="f18_120">
    
        </div>
    
        <div id="f19_32">
    
        </div>
    
        <div id="f20_32">
    
        </div>
    
        <div id="f21_72">
    
        </div>
    
        <div id="f22_72">
    
        </div>
    
        <div id="f23_72">
    
        </div>
    
        <div id="f24_48">
    
        </div>
    
        <div id="f25_48">
    
        </div>
        
        <div id="f26_32">
    
        </div>    
    
        <div id="f27_48">
    
        </div> 
    
        <div id="f28_72">
    
        </div>
    
        <div id="f29_120">
    
        </div> 
    
        <div id="f30_72">
    
        </div> 
    
        <div id="f31_48">
    
        </div> 
    
        <div id="f32_48">
    
        </div>
    
        <div id="f33_32">
    
        </div>
    
        <div id="f34_48">
    
        </div>
    
        <div id="f35_32">
    
        </div>
    
    </div>

  5. #5
    Join Date
    Jun 2010
    Posts
    54
    Do you have Firebug? It's really awesome when you want to figure out how a site's layout works.

    Anyway, this html should work:
    HTML Code:
    <div style="width: 100%; min-width: 980px; overflow: hidden;">
    <div id="page_wrapper">
        
        <div id="f1_48">
    
        </div>
    
        <div id="f2_48">
    
        </div>
    
        <div id="f3_72">
    
        </div>
    
        <div id="f4_72">
    
        </div>
    
        <div id="f5_120">
    
        </div>
    
        <div id="f6_48">
    
        </div>
    
        <div id="f7_72">
    
        </div>
    
        <div id="f8_32">
    
        </div>
    
        <div id="f9_48">
    
        </div>
    
        <div id="f10_120">
    
        </div>
    
        <div id="f11_72">
    
        </div>
    
        <div id="f12_72">
    
        </div>
    
        <div id="f13_32">
    
        </div>
    
        <div id="f14_72">
    
        </div>
    
        <div id="f15_120">
    
        </div>
    
        <div id="f16_72">
    
        </div>
    
        <div id="f17_48">
    
        </div>
    
        <div id="f18_120">
    
        </div>
    
        <div id="f19_32">
    
        </div>
    
        <div id="f20_32">
    
        </div>
    
        <div id="f21_72">
    
        </div>
    
        <div id="f22_72">
    
        </div>
    
        <div id="f23_72">
    
        </div>
    
        <div id="f24_48">
    
        </div>
    
        <div id="f25_48">
    
        </div>
        
        <div id="f26_32">
    
        </div>    
    
        <div id="f27_48">
    
        </div> 
    
        <div id="f28_72">
    
        </div>
    
        <div id="f29_120">
    
        </div> 
    
        <div id="f30_72">
    
        </div> 
    
        <div id="f31_48">
    
        </div> 
    
        <div id="f32_48">
    
        </div>
    
        <div id="f33_32">
    
        </div>
    
        <div id="f34_48">
    
        </div>
    
        <div id="f35_32">
    
        </div>
    
    </div>
    </div>

  6. #6
    Join Date
    Jan 2010
    Posts
    230
    thank you so much, that was really helpful!

    i dont have firebug, never tried it before, gonna install it now. thanks for the advice!

  7. #7
    Join Date
    Jun 2010
    Posts
    54
    Quote Originally Posted by insei View Post
    i dont have firebug, never tried it before, gonna install it now. thanks for the advice!
    Check out the inspect function in Firebug, I can't live without it. It's addictive.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles