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 Andy_K's Avatar
    Join Date
    Feb 2005
    Posts
    3
    Member #
    9064
    Hi guys...

    Newbie here... Hoping to start out from scratch and learn the pleasures of web design... However, my very first problem has arisen in the form of web page sizing.
    I've downloaded a template which is 775x680 and opened it up in dreamweaver, but when i preview the template in IE7 the page stays centered at the exact same size (775x680) with white borders around the whole page.
    My monitors resolution is currently set at 1440x900 which i was not wishing to change, what I am really trying to achieve is to set the page to automatically fill the browser regardless of resolution i.e. when you log onto www.play.com the site is always full width of the browser regardless of who is viewing it in whatever resolution.

    Sorry for the complete lack of experience guys, we all have to start somewhere and i appreciate all help received.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    I actually prefer a "fixed size" web page.
    Although it centers on a large browser with space on either side,
    it makes it easier for the viewer to read, as the content is contained
    in the center portion of the monitor.

    Another good thing about a "fixed size" web page is the fact that
    content placed on the page stays where you put it. No need to allow
    for fluid movement of content.

    You can search Google for "CSS fluid web page template" to find
    an example of a fluid width page.

    But, in my personal opinion, keep what you have.
    It's your website though, so do how you want.


  4. #3
    Senior Member jyuill's Avatar
    Join Date
    Jan 2009
    Location
    California
    Posts
    145
    Member #
    18049
    If you choose to leave it a fixed width, change the background property in your css file to a color along with the background image.
    It should read
    selector
    {
    background: url(path to image);
    }
    change it to
    selector
    {
    background: #whatever color you want url(path to image);
    }


    If you want to keep the same template, you can go in and change all of the sections set with a pixel width to a percentage width. Being new to this, this will probably be a little difficult, and I am not that familiar with Dreamweaver to tell you if there is an easy way to do that.
    I don't know if this is a column layout or what, but basically your container div needs to be set at 100%, and then if there are columns, you set them to percentages that equal 100%, but you also have to factor in margins and padding. If the elements within the divs have a specified width, you need to change that to a percentage of the specific container it is in or just take the width property of the element. I don't know how new you are to this....it's probably confusing the hell out of you instead of helping....I will be glad to help out more if you can give me the URL of the template you are using.
    Semantic, Valid, and Accessible Design!


  5. #4
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Putting it simply, just wrap your whole page in a div, called wrapper (in the HTML), like so:
    Code:
    <div id="wrapper">
    content of site goes here
    </div>
    Then in your CSS, put the following:
    Code:
    div#wrapper
    {
    margin: 0;
    padding: 0;
    width: 100%;
    }
    You may want to set the margins and paddings of your body as well, as to remove any left over white spaces, so, in your CSS again:
    Code:
    body
    {
    margin: 0;
    padding: 0;
    }
    Remember though, when you've got the page resizing to the window, then your other things inside of that need to change with it, so make them percentage widths as well. Don't make them fixed widths. Just do the width: 100%; to them.

    Hope this helps.

  6. #5
    Senior Member jyuill's Avatar
    Join Date
    Jan 2009
    Location
    California
    Posts
    145
    Member #
    18049
    Quote Originally Posted by diddy
    Putting it simply, just wrap your whole page in a div, called wrapper (in the HTML), like so:
    Code:
    <div id="wrapper">
    content of site goes here
    </div>
    Then in your CSS, put the following:
    Code:
    div#wrapper
    {
    margin: 0;
    padding: 0;
    width: 100%;
    }

    That won't help if it is a columnar layout. Then the columns need to be set in percentages as well.
    Semantic, Valid, and Accessible Design!


  7. #6
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Quote Originally Posted by jyuill
    That won't help if it is a columnar layout. Then the columns need to be set in percentages as well.
    Agreed, however I do remember typing this:

    Quote Originally Posted by diddy
    Remember though, when you've got the page resizing to the window, then your other things inside of that need to change with it, so make them percentage widths as well. Don't make them fixed widths. Just do the width: 100%; to them.
    That included columns for comular layouts.


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
  •  
All times are GMT -6. The time now is 03:25 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com