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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Spacing between images when screen resizing

    Hi,

    I'm trying to add 3 images next to each other that span the width of the screen, seen near the top of qwikezine .com (labelled video, audio, image). I would like them to be equally spaced apart with the right image (labelled image) tight to the right hand side of the screen, the left image (video) on the left next to the register and login boxes, and the middle image inbetween the two.

    I was wondering how I could space these apart so that they would still fit into the screen when visitors using smaller screen sizes (800x600 for example) view the site whilst also being spaced apart for larger screen viewers?

    Thanks for any help.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    I don’t see the images you speak of. Assuming that you want these images to consume a whole line though:

    HTML:
    Code:
    <div>
      <img alt="Video" src="video.png"/>
      <img alt="Audio" src="audio.png"/>
      <img alt="Image" src="image.png"/>
    </div>
    CSS:
    Code:
    img[alt="Video"] { float: left; }
    img[alt="Audio"] { display: block; margin: 0 auto; }
    img[alt="Image"] { float: right; }
    And no, attribute selectors don’t work in IE6. I didn’t feel like typing it the long way.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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