On 14 Sep, 02:46, SamuraiDio <[EMAIL PROTECTED]> wrote:
> Hi all again...
> I managed to make it work fot left or right this way:
>
> .big {
> /* this is my outer <div> element */
> position: relative;
> overflow: hidden;
> width: XXXpx;
> height: YYYpx;}
>
> .big img {
> position: absolute;
>
> }
>
> with this style, i just need to set left or right position on the
> image:
>
> .big img.left {
> /* hide the image extra size from right */
> left: 0px;}
>
> .big img.right {
> /* hide the image extra size from left */
> right: 0px;}
>
> .big img.center {
> /* should hide the image extra size from both left and right */
>
> }
>
> The problem is that i just don't know how to implement the .center
> class.
> I tryed with some percent values, but it don't worked fine, since the
> image width may vary.
No, that don't work. Percent values are referring to the containing
block.
> I can get it's width by Js, but i really preffer to make it just by
> CSS.
You could use an background image:
.big { background: url("image.jpg") top center } or
.big { background: url("image.jpg") 50% 0% }
With the img element, I'm afraid you have to ad an extra element to
style it.
<div class="big">
<span class="left"><img src="images/image.jpg" alt="..."></span>
</div>
> >.big {
> > /* this is my outer <div> element */
> > position: relative;
> > overflow: hidden;
> > width: XXXpx;
> > height: YYYpx;
> >}
.big span { position: absolute }
.big img { position: relative }
.big .left { left: 0 }
.big .center { left: 50% }
.big .center img { left: -50% }
.big .right { right: 0 }
You should be able to do it vertically too, that works in Opera, IE 6,
IE 7,
but not Safari, FF2 and FF3.
Anyway, the code above seems to work in all major browsers.
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [EMAIL PROTECTED]
-~----------~----~----~----~------~----~------~--~---
