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.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Member EdMarks's Avatar
    Join Date
    Nov 2011
    Location
    181 lat 91 long
    Posts
    51
    Member #
    29986
    Liked
    3 times
    Hello,
    I am a newbie to web design. I made my page 1696 x 1438. You guys looked at it and said I needed to take it down a notch. Now its 1280 x 800 which is popular I hear. I just got done redesigning it in photoshop. When I preview it it doesnt fill the page. So What do i do to fill the page? Do I make it 1920 wide and simply center the middle? How do i make it so when the user opens the page big it will stretch, but if the page is small the center will be what the user sees as opposed to the topo left of the page?
    BTW
    You guys really helped me last time thanks!

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    1280 x 800 is a popular monitor resolution. Best size for most websites is 960 wide. Centering the site is popular (look at this site as an example of how to do that).

  4. #3
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    PS - LOL @ the title of this thread. I wasn't sure whether I'd find a spammer's post inside or a legit question. LOL.

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    One good way is as Moseley said, design 960px wide and center the page. Another way is creating a fluid design. The short of it is that you use percentages for many of the sizes, and center the page. You can even take it a step further and use media queries to adjust the position/size of elements as the user's browser window shrinks.

    Regarding the fluid design, here's an example. Say you want the content to remain 90% of the width of the browser window, but never get smaller than, say 600px.
    The easiest way to accomplish this is to wrap the whole thing in a div, like so:
    HTML Code:
    <div class="wrapper">
    [I]CONTENT[/I]
    </div>
    Then, set the CSS like so:
    Code:
    .wrapper{
    left:5%; /*Half the width of the 10% left over*/
    min-width:600px; /*Won't get smaller than this*/
    position:relative; /*Makes the element respect the left offset*/
    width:90%;
    }
    Then, you just set the content on the inside of the wrapper to percentages of the width of the wrapper. Or, use px-based widths, but be careful that elements won't run into each other. Here's a site that uses that method in conjunction with media queries. Shrink and expand your browser window to see it work. And yes, I did design this site. Not trying to plug it, wouldn't help me in any way if I was.
    EdMarks likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Member EdMarks's Avatar
    Join Date
    Nov 2011
    Location
    181 lat 91 long
    Posts
    51
    Member #
    29986
    Liked
    3 times
    Thanks Guys,
    Maybe I didnt emphasise exactly how new i am. I literally know no code. Dont hate me but Im using dreamweaver right now, till I learn code efficienly enough to not use DW.
    A few people helped me last time because the slices werent aligning. So now I know how to change the sizes of the slices so they align.
    So Roe... Im assuming I put
    <div class="wrapper">
    in the very front and

    </div> at the very end?
    do I need to put
    the in front and behind as well.

    Do I do same with CSS?

    The most important question for me is
    If I make the page 1280 wide and use above code, what happens when user makes their broser 1281 wide?

    So above is how you did this---->http://pjweber.us/
    heres what im working on. Ignore the slice breaks and the fact that there is no actual text. This was before the game and alphamare told me to edit the individual slices through in HTML

    http://marigro.com/sitedreamweaver/h.../homepage.html

    Smosley thats exactly what I was looking for.

  7. #6
    Member EdMarks's Avatar
    Join Date
    Nov 2011
    Location
    181 lat 91 long
    Posts
    51
    Member #
    29986
    Liked
    3 times
    Quote Originally Posted by Ronald Roe, post: 225462
    One good way is as Moseley said, design 960px wide and center the
    The easiest way to accomplish this is to wrap the whole thing in a div, like so:
    Update
    I put the

    <div class="wrapper">
    after

    <table id="Table_01" width="1281" height="800" border="0" cellpadding="0" cellspacing="0">
    and put the
    <div>
    after the
    <div class="wrapper">
    It made a difference. But I dont know how to do the css part
    When i go to CSS tab it says "no css properties apply to the current tag"

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    It isn't going to work with table-based layout. They aren't flexible. The best thing you can do if you don't want to end up writing the whole thing by hand is to redo the page at 960px wide, add the <div class="wrapper"> right after your body tag, add the </div> right before the closing body tag, and copy/paste the following just before the </head>
    Code:
    <style type="text/css">
    .wrapper{
    margin:0 auto;
    width:960px;
    }
    </style>
    That'll get your current design looking good on browser windows all the way down to 1024px wide, and it will keep the whole thing centered.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  9. #8
    Member EdMarks's Avatar
    Join Date
    Nov 2011
    Location
    181 lat 91 long
    Posts
    51
    Member #
    29986
    Liked
    3 times
    Quote Originally Posted by Ronald Roe, post: 225487
    It isn't going to work with table-based layout....
    Ron thank you so much your the best.... even if you do destroy sandcastles. Youve been a lot of help. I would be lost if it wasnt for this forum. I also noticed on your page the background stays the same size yet the middle box is fluid. I cant do that with the site I am current building but I watched a few youtube videos on how to do that. I guess I just do what you told me, just put the <div> tag before and after that specific box I want to be fluid.
    Now that I know what you taught me I am going to pay much more attention the the general layout when creating the site in photoshop.
    :bounce:
    Ronald Roe likes this.

  10. #9
    Member EdMarks's Avatar
    Join Date
    Nov 2011
    Location
    181 lat 91 long
    Posts
    51
    Member #
    29986
    Liked
    3 times
    Quote Originally Posted by Ronald Roe, post: 225487
    It isn't..
    Actually one more question for you if you get the chance.
    I think I get the whole div/css thing
    the div tag is just saying "hi div tag "wrapper" reporting in" and CSS says "div tag "wrapper" please reduce size when browser size is reduced.

    Does it matter what I call the tag or would the following do the same?
    Code:
    <div class="superman">
    Superman
    </div>
    Code:
    <style type="text/css">
    .superman{
    margin:0 auto;
    width:960px;
    }
    </style>
    Only reason I ask is Im wondering if I can apply different rules to different slices of the page.

    Love your site
    http://www.roedesigns.com/

  11. #10
    Member
    Join Date
    Nov 2011
    Posts
    50
    Member #
    30017
    Liked
    9 times
    yes you can call id's and classes anything here is the rule on it though, a class is something that will be used over and over like

    Code:
    <a href="#" class="outsidelinks">Link to another webpage</a>
    where as something that is unique and won't be used again is

    Code:
    <div id="wrapper">
    
    </div><!-- end div wrapper -->
    This is proper CSS and will make sure that it validates. Otherwise you will get errors. So remember id's are unique only used for one thing, a class is something that you wish to apply to different things like if you need 4 divs that are called the same thing use a class, if you have something that will only be used once in your design use an id.
    EdMarks likes this.


Page 1 of 2 1 2 LastLast

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:26 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com