Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Aug 2012
    Posts
    26
    Member #
    32353
    I'm looking for solutions (preferaby CSS only) for making full browser width bars, like in these sites:

    http://secondandpark.com/
    http://datasift.com/

    Like these sites, I want to make it in a 960px. Any help?

    I've been using the large negative margin/positive padding value method with an 'overflow-x: hidden' on the body selector, but that disables scrollbar.

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Please define what you mean by "bars"?

    If you mean the sliders or banners ?

    And browser width is something in relation to the user.

    Some users are still on 800x600 resolution where some may be 1600x1080 and larger...

    So many different browser resolutions... The only way to handle them is create a "liquid" layout where everything is a % of the screen width... Much easier said than done though , and depending on your skill set, may take some time.

  4. #3
    Junior Member
    Join Date
    Aug 2012
    Posts
    26
    Member #
    32353
    On http://datasift.com/, the top dark gray area the nav sites in; it extends the width of the browser while the site itself is centered.

  5. #4
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    An on my iPhone it ( both ) fill the screen.

    The top bar is more than like set to a width of 100% where the middle is set to a fixed width...

    All of this is possible using CSS for style. Not an uncommon thing.

    Sites that everything scale completely are rare, but they are out there.

    More typically you'll see sites like this where certain elements and "text areas" will stretch and shrink depending on the users browser.


    What I normally do is a fixed width bar on each side of the screen, and the center section where content goes, is set to adjust depending on the browser width. This allows the designer and developer to utilize the full width of the screen, instead of having bars of no content on each side of the screen that vary based on the users monitor width. If you set your center content to 960px wide ( a popular width ), someone viewing the site with a resolution of 1600 wide will have empty space of about 300px on each side ( my opinion is this is wasted space, forcing the users to scroll up and down needlessly on some pages ).

    Again, it all depends on your skill set and design knowledge as to how easy this is to implement.

  6. #5
    Junior Member
    Join Date
    Aug 2012
    Posts
    26
    Member #
    32353
    If you were using the 960 grid, how would you put bars on either side of the wrap to extend the width of the screen? That seems to be my problem? I understand the 960 grid and centering content and everything, I just can't figure out how to have div or background images extend the width of the screen when within a #wrap that is set to 960px

  7. #6
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    1. I gave up on grids a long time ago, yes they are useful for beginners, but that's about it.

    2. I wouldn't ADD on to it....

    What I would do is use it to learn how it works, the learn how to re-create it in such a way I could modify things to make It work for me.

    There are several thousand 960 grids out there, they are all pretty much the same ( same purpose ), but their coding can vary wildly.

    If you're wanting to stay in the same general layout, start looking at the CSS attributes, where width is 960, adjust it and see if you can work wih it...

    My general layouts start at 96% width ( if not 100% ), on occasion I've been know to have a small whitespace on what appears to be the borders... But it's mainly to make a style statement, or appease a client that likes the older styles, not for functional layout purposes.

    Again, most designers starting out, code their sites based on the monitor that they are using, completely forgetting that there are literally hundreds of varying size monitors on the market now.

    Some will take the easy way out to make the site look similar on all monitors, and just pick a width that looks good to them. But fluid designs are completely doable with a little effort and some knowledge of CSS.


Remove Ads

Posting Permissions

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

Search tags for this page

full browser width bars css

Click on a term to search for related topics.
All times are GMT -6. The time now is 04:56 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com