SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Absolute Position IMG Question....?

    I'm wondering if this is possible and i'm just being thick about it...

    I have a holder #project-image which is position relative.

    Inside that a <ul> with a <li> and then finally a img.

    So
    Code HTML4Strict:
     
    <div id="project-image">
         <ul>
             <li><img>an image of varying height and width</img></li>
     
         </ul>
     
    </div>

    I have #project-image img position absolute right 0.

    As i need the image to always be right aligned of the container #project-image.

    It will never be wider than its parent container but i might be narrower, however its floating left aligned of the box regardless of what i do...

    Any ideas..?


    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Assuming that #project-image has a width then the img should align to the right.

    Code:
    #project-image {    
       position:relative;
        width:100&#37;;/* ie6 and 7 will need haslayout*/
    }
    #project-image img {
        position:absolute;
        right:0;
        top:0;
    }
    If you have set position:relative on the list or ul by mistake then the image will be placed in respect of that parent instead and if it has no width then there will be no right.

  3. #3
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See thats what i tired and it should work as i thought however, the image is thrown right to the bottom left of the site for some strange reason, almost as if its part of .column which its not.

    Here is the html..
    Code HTML4Strict:
     
     
    	<div id="site-content">
     
    <div class="column col-padding">
     
    	<h2 id="project-title">Large Project</h2><!--END.project-title-->
    	<div id="project-detail">
     
    	<div class="project-info">Client<span>Public</span></div><!--END.project-info-->
     
    	<div class="project-info">Completed<span>Default value 1</span></div><!--END.project-info-->
    	<div class="project-info">Budget<span>budget</span></div><!--END.project-info-->
     
    	</div><!--END.project-detail-->
     
     
    	<div id="project-copy">
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
     
    <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from “de Finibus Bonorum et Malorum” by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
     
    	<div id="arrow-nav"><a id="left-arrow" href="#">Prev</a> <a id="right-arrow" href="#">Next</a></div>
     
    </div><!--END.project-copy-->
     
     
     
    </div><!--END.column-->	
     
    	<div id="project-image">
     
    			<ul>
     
    <li><img width="640" height="363" /></li>
    <li><img width="640" height="362" /></li>
    </ul>
    	</div>		
     
     
     
    </div><!--END.site-content-->

    I dont get it...

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Can we see the CSS for that section also?

  5. #5
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry yes here you go...
    Code CSS:
     
    #site-wrapper,#site-header,#site-content,#site-footer{width: 1100px;}
     
    .column,#project-title,#project-detail,#project-copy{width: 256px;}
     
    #site-header,#site-content,#site-footer,.column,h2#project-title,#project-detail,#project-copy{float: left}
     
    p#footer-detail,#project-image,#project-image img{float: right}
     
     
    #site-content{
    padding-bottom: 10px;
    border-bottom: #000 solid 1px;}
     
     
    .column{}
     
    .col-padding{margin-right: 25px}
     
     
     
    	#project-image{
    width:819px;
    position:relative;
     
    }
     
     
     
    #project-image img{
        right:0;
        top:0;
    }

    Think thats all of it... for that section..

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Sorry for the late reply I didn't get a PM notification for some reason.

    In the code above where is the position:absolute? I dont see it.

    It should be here:

    Code:
    #project-image img {
        position:absolute;
        right:0;
        top:0;
    }
    However note that the code above would put both those images in exactly the same place and on top of each other.

  7. #7
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem Paul, thanks for getting back to me.

    Yes sorry even with that in its still not working which i just dont understand.

    There are a couple of images because its a little image gallery scrolling between the two.

    There is a live example here If you use the arrows at the bottom right and scroll through a few you'll see a narrower one that is left aligned when it should be right.

    I've had to take out the position absolute because it shifts the image to the right hand side of the column on the left, almost as if thats its parent holder

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The js is modifying the width of the list elements and creating a stacking context with position:absolute so the one with the narrower image is only as wide as it is shown.


    Code:
    <li style="position: absolute; top: 0px; left: 0px; display: block; z-index: 10; opacity: 1; width: 647px; height: 625px;"><a href="http://www.ct-architects.co.uk/new/wp-content/uploads/2010/09/Slat_005.jpg"><img width="647" height="625" alt="" src="http://www.ct-architects.co.uk/new/wp-content/uploads/2010/09/Slat_005.jpg" title="Slat_005" class="alignnone size-full wp-image-41"></a></li>
    Your ul is 818px wide so you could force the issue like this.
    Code:
    #project-image li{width:818px!important}

  9. #9
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant thank you Paul


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
  •