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
    Dec 2008
    Posts
    3
    Member #
    17865
    So, I'm in the process of converting my website from table layout to pure CSS. I had gone with table layout originally due to the fact that I was familiar with it, but as time has gone on, I've decided I want to redeem myself a bit.

    Anyway, the process has gone relatively well, although I've run into a bit of a problem recently. While I can get my page to look more or less the same as it did when it was in tables, it only looks alright when my browser window is maximized (my screen resolution is 1280x1024). When I change my window to a 1024x768 size (in an attempt to see what it will look like on screens with that resolution) the table layout continues to look relatively the same as it did maximized, while my CSS layout causes my elements to overlap a bit, and the spacing ends up being uneven.

    http://www.kinoko-otoko.com/mainrandom/index.html -- This is my page as it looks with a table layout (nested tables and such).

    http://www.kinoko-otoko.com/mainrandom/indextest.html -- This is my page as it looks with CSS layout.

    I've tried everything I can think of, but I just can't seem to get it to work properly. Any help would be greatly appreciated.

  2.  

  3. #2
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Don't enter percentages for your margins with absolute positioning. Percentage sizes will change based on the window size, pixels will not. So make sure you have a container wrapped around the entire code, set the positioning to relative, then your divs inside that set to absolute. Ste your margins to pixels and play around with it. You could also try the float method.

  4. #3
    Junior Member
    Join Date
    Dec 2008
    Posts
    3
    Member #
    17865
    Aero, I tried what you suggested, and it does keep the elements spaced together correctly, which solves part of the problem. However, what it seems to be doing is keeping them fixed in position on the website, so that if the browser is 1024x768 or smaller, a horizontal scroll bar appears.

    I'm trying to make it act similar to my table-based layout. In that layout, the elements all stay spaced together relatively evenly when the browser window is resized. However, since it is in one table, everything seems to shift over to the left (basically, the left margin increases or decreases depending on the size of the window), which makes it seem at least a bit fluid.

    Basically, I'm trying to make everything shift over in a similar way with my CSS layout.

  5. #4
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    That is one reason a lot of designers build for 800X600 still. Then your safe. You need to know your demographic (who is likely to be viewing your site), and build according to that. I still build for 800X600 because I know a lot of people in our region still use it.
    You could specify your widths in percentages, but get rid of the absolute positioning and use margins instead. So I would make your container width 100%, and position it relative. Then make your divs inside of it use percentages for widths and float them right or left. It's something you need to play with.
    I always suggest Brain Jar to learn positioning, it's simple and easy to understand. Also what you seem to want is a liquid layout so you could google that too.
    If you have a specific question it's a little easier to answer.

  6. #5
    Junior Member
    Join Date
    Dec 2008
    Posts
    3
    Member #
    17865
    Thanks for your help.

    After looking around a bit, and rethinking the design, I used floating to position my elements, put them in their own div, then centered that in the main div. I positioned things so they worked well in an 800x600 resolution. Unfortunately, it seems a little small, but I figured it was for the best.

    Anyway, thanks for the assistance. Now all I need to do is figure out how to get my PayPal button to behave..

  7. #6
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    if you're finding the site a bit too small on your 1280x1024, you could always design it in 1024x768. it miight look a bit better, and wont' have heaps of horizontal scrolling for the 800x600. That's if you're really worried about it looking small. But I'd stick with what you've got. Although, 1024x768 is still commonn, amoung 800x600.

    But the best way is to find out the screen size and browser type and OS your visitors are using. That way you know exactly what you're creating for.


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