Results 1 to 3 of 3

Thread: Image positioning problem

  1. #1
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image positioning problem

    Hi I am new to CSS and I am having trouble positioning a small image to the corner of its div container.

    So far the only way I have managed is to put the image in html and give its own div container and then use:
    HTML Code:
    {position:relative; right:-12px; top:-30px; }
    The problem with this is that its making a complete mess of everything else on the page. The rest of the page treats the image as if it were in the original position - so text is wrapping around a blank space.

    Basically...
    How do I change this:


    Into this:


    This is CSS for it so far:
    HTML Code:
    .box { 
        background: #f4f4f4 url(./img/ticketicon.png) no-repeat right bottom;
        border: 1px solid #ccc;
        color: #505050;
        line-height: 1.5em;
    	margin: 0 0 20px;
        padding: 10px;
    	}
    How would I use something like the position:relative extract above in this?

    Many thanks

  2. #2
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    Give the image its own div and then use the float function. ie float:right; Then use pad for position. Thats a pretty general answer...if you have it live and want to post a link I'm sure someone could give you some more precise help.

  3. #3
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Without code or live object it's difficult to give advice, but here's a tutorial on positioning in CSS in general: How to Position in CSS (http://www.website-laten-maken-amsterdam-nh.nl/blog/how-to-position-divs-with-css.php) . It covers all four methods.
    Last edited by djr33; 09-27-2011 at 07:35 PM.

Bookmarks

Posting Permissions

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