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 4 of 4
  1. #1
    Junior Member kbfno1's Avatar
    Join Date
    Jan 2009
    Location
    Staffordshire, England
    Posts
    2
    Member #
    18000
    Hi all,
    I'm hoping that someone on here will be able to help me? I am doing an NITLC web design course and I've had to design a website for an assignment. It's my first website and i'm stuck with the layout. My website's url is: www.cit124.co.uk.
    The problem I have is that when you resize the window the image on the right moves over my main content. Can anyone help me with this problem? I have tried a number of things and I just can't seem to get it right!!!
    Thanks in advance for anyone who helps.
    kev

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    The problem is, in essence, that you are setting the width of the center box in percentage points, but the image is not a percentage. Keep in mind that the smaller the window gets, the smaller `1%' of the window becomes in absolute terms. However, the image on the right stays an absolute width of however many pixels. So, after a while, the distance from the right, which is about 33%, becomes smaller than the number of pixels in the image's width.

    There are two workarounds. The first is to make the image have an absolute width of more or less 33%. Probably a few percentage points less just so that it can have breathing room on either side. This will make sure that it will resize along with the page. It is, however, also rather dirty, because the browser's resizing of the image is low-quality and will result in a nasty-looking image.

    A better way to go is to set an absolute width on the image (say, 200px, for the sake of the example). Then, you define the width of the center box not specifically, but rather implicitly by giving it left and right margins that ensure that it stays out of the way of the left navbar and the right image. Then, it will be the first thing to be squeezed into oblivion as the browser becomes resized.

    Because the left box is also defined in percentages, you'll have to make the center box's left margin be a percentage while the right margin is an absolute. This means that when you squeeze it the two will probably end up overlapping a little bit, since if you leave 4% margin between the two, as the window gets narrower that ends up meaning practically nothing. However, if you set an absolute width on it, then you'll be better off.

  4. #3
    Junior Member kbfno1's Avatar
    Join Date
    Jan 2009
    Location
    Staffordshire, England
    Posts
    2
    Member #
    18000
    Thanks for your reply shadowfiend. I will give what you suggest a go. I have been looking at the 3 column layout in the css resources thread. I've had a go at that today and i'm getting closer to the answer. The first one is always the hardest, or I hope it is. haha. I've only learn't a bit of html and css at the mo, so I appreciate your help. Thanks.
    kev

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Cool. Post more questions when you have them (though not necessarily in this thread)


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