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 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2007
    Location
    Left Coast
    Posts
    71
    Thanks
    3
    Thanked 1 Time in 1 Post

    Placing image correctly on css built site

    I have a site based on css. When placing an image on a page it is fine until you get to 1280 x 1024 resolution than the image covers some text.
    A minor issue but I would like to clear it up. Here's the site http://www.virtualwebvideo.com/contact.html
    You can view source on the page and here's the code on the css for this image.
    #locator { position:absolute;
    visibility:show; left: 720px; top: 290px; z-index:2
    }
    Can I code another way than using the pixel locations?
    Thanks in advance.

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Firstly that code is pretty messy--there's lots of presentational <BR>s (with incorrect html 4.0 syntax) and orphaned tags. You'll definitely want to clean that up.

    Secondly you don't want to position that image absolutely. If the user resizes their browser at all it'll break the layout, not to mention appear really distracting.

    What you want is something like this:

    <div id="contact">
    <img src="thatgirl.jpg" alt="" width="" height="" />
    <p>Contact stuff</p>
    <p>contact stuff</p>
    <p>Contact stuff</p>
    <div style="clear: right"><!-- --></div>
    </div>

    And float #contact img { float: right; }. This will let the image sit beside the contact text as you have it now, but it will expand and reposition with the layout instead of relying on a pixel placement.

  • #3
    New Coder
    Join Date
    Jan 2007
    Location
    Left Coast
    Posts
    71
    Thanks
    3
    Thanked 1 Time in 1 Post
    That worked. Thank You.


  •  

    Posting Permissions

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