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 5 of 5
  1. #1
    Junior Member
    Join Date
    Feb 2011
    Posts
    1
    Member #
    26695
    First of all: I apologise for registering and immediately asking for help on a problem, I know it's not the politest way to go. But if anyone could offer me a little advice for this problem, it'd be much appreciated.

    I'm not a designer. But I volunteer with an animal-rescue charity, and until we can find a proper designer to help us, I, as the most knowledgable volunteer -- though not by much -- am doing my best to help with updates to their website (which was already written and made by a professional, long ago).

    I've been trying to make a simple page where three images are on the left-hand side, and on the right hand side, a paragraph describing each of them, followed by a small Paypal button.

    Here's what it looks like in IE, which is perfectly fine:

    http://i.imgur.com/Ti5Iv.png

    But in Firefox 4 and Chrome 10, it looks like this.

    http://i.imgur.com/f9ZMQ.png

    It's a really basic arrangement, and I can't for the life of me understand why it's doing that. I can't post links in threads, but the URL is in the image; if anyone could take 10 minutes to look at the source and tell me where my problem lies, I'd love them forever.

    If not, I apologise for being impolite and cluttering up the forum.

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    we would have to see your CSS and HTML to say for certain.

    while($get_it !== true){ continue; }

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    You didn't do anything wrong, PumpkinHappines. You're a volunteer at a not-for-profit trying to straighten out a not-for-profit page. That's cool.

    Just to make sure others see the link in question, here it is:

    PROOF Shop

    The reason your page doesn't work in Firefox and Chrome is twofold:

    1) You haven't specified proper width and height attributes for your images.
    Code:
    <img src="(your image here)" width="(width of the image)" height="(height of the image)" ... />
    2) You should use floats with clearly defined widths to contain your images and the text they're in, making sure to clear them. I'm guessing as a volunteer and someone who spends his/her time on a lot of other things that you haven't heard of floats before (through no fault of your own, of course), so here's a tutorial on them.

    Basically, what you want is something like this:
    Code:
    <div style="float:  left;  width:  400px;  margin:  0 10px 0 0;">
    Your image here.
    </div>
    <div style="float:  right;  width:  370px;">
    Description of the image here.
    </div>
    <div style="clear:  both;"></div>
    This should at least get you started.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    i'm with game on the floats. i differ on width declaration. also i didn't take time with the margins so again go with game on the margins, i use padding instead(only preference, not required). here is where i differ on the structure.

    HTML Code:
    <div style="position: relative; width: auto; overflow: auto; padding-bottom: 5px;">
    <img style="float: left; clear: left; padding: 10px;" src="" />
    <p style="float: right; width: 300px;">
    text
    <br />
    <a>paypalbutton</a>
    </p>
    </div>
    
    
    

    to keep each text/image/button for each section together they need to be in one div. there is no reason to declare an unknown width that may distort your images. i say unknown because if they ever need to use an image that is a differing size in the future, they will have this issue all over again. what i presented will accommodate a wide range of image sizes while keeping the correct layout.

    while($get_it !== true){ continue; }

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    There is actually one reason to declare width, I've found, but in order to fully see the effect, you'd have to have a low-bandwidth connection. When an image loads without width or height attributes, it creates a weird effect on the page when the image first loads whereby the text moves around into its final position, making it harder to read. If you define width/height attributes, then there's a placeholder for that image and the text doesn't move around, so the user can read it while the image load.

    I've also found that most people don't resize their images very much anyway. Usually they pick an image and leave it on the page as is.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


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