Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Help Request: Horizontal Scrolling and DIV layers

    Hey everyone, Im kind of new here but really need some assistance. I am working on a website for my business. At any rate my issue is this. I have a div layer that is controlled by a style sheet in the html file. It works almost flawlessly for my purpose, except for when someone makes their browser window too small to accommodate the main content section of the site. When a user does this, the horizontal scroll appears at the bottom of the browser, but does not allow them to pane left to see the rest of the content. Anyone have any ideas as to why this is not working?
    Here's a link:
    http://shellfirestudio.com/temp/

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I'd recommend you to check why tables for layout is very bad!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    It's this that's causing the problem:

    Code:
    #Content {
    position: absolute;
    height:10em; 
    margin-top:130px;
    left: 50%;
    width: 973px;
    margin-left: -487px;
    }
    When the screen is resized to a relatively small width the negative left margin takes it right off the left of the screen. Try replacing this with:

    Code:
    #Content {
    margin:130px auto 0px;
    width: 973px;
    }
    You may also need to rethink your background image, because the "shellfire" text also comes out of line when you resize. There might be a way around this without changing the image, but I can't think of one!

  • #4
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I would be more than happy to use CSS instead of all the tables, but when I slice my design in photoshop, it automatically lays out the page this way. I mean I could go over the entire code and change it, but that would be a huge pain in the neck, and I cant imagine Adobe software would intentionally let you publish a site that is coded improperly or with poor efficiency, besides, so far it validates. At any rate,

    Code:
    margin:130px auto 0px;
    width: 973px;
    Didnt work, Im not sure why but its just pushing the main content div way over to the right.

    As for the shellfire logo, do you suppose that I should make the logo its own DIV layer? My only problem with this, is that in doing so I will disrupt its location in the background, ruining the design. Any help would be much appreciated.

    You can see what is happening now with the same link
    Last edited by Jsimonetti; 06-10-2009 at 08:24 PM. Reason: Needed to add a link

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I would be more than happy to use CSS instead of all the tables, but when I slice my design in photoshop, it automatically lays out the page this way.
    Never slice your design, instad manually identify the logical elements in your design, like logo, header background, content background etc and cut them precisely. Take care while cutting the repeatable background patterns, so as to minimise the size of those images.

    Read VIPS's post at http://www.codingforums.com/showpost...10&postcount=2

    Now take a look at a good 2 column table less deign at http://bonrouge.com/2c-hf-fluid(r).php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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