Absolute Position IMG Question....?

HTML & CSS
1

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



<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 :slight_smile:

2

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 :frowning:

3

Sorry yes here you go…



#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…

4

Can we see the CSS for that section also?

5

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…




	<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…:shifty:

6

Hi,

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


#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.

7

Brilliant thank you Paul :slight_smile:

8

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.


<li style="position: absolute; top: 0px; left: 0px; display: block; z-index: 10; opacity: 1; [B]width: 647px; [/B]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.



[B]#project-image li{width:818px!important}[/B]
9

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:


#project-image img {
 [B]   position:absolute;[/B]
    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.