Have an elemebt wider than it's container is not a good pratice, and
will always have diferences in the layout, depending on the browser.
I managed, some time ago, with help from this list, to make something
like you are doing, expect that my container has overflow:hidden, what
hides part of the image.
The trick i did was to wrap the image inside an extra element, set's
the left position of this element as half the container width, and the
left position of the image with -50%.
The result sould be like this:
+--------------------------------------------------+
+ +
+ +--------+ +
+ + DIV.center +
+ SPAN+ +-------------------------+--+
+ +---------------------------+ + +
+ + IMG + + +
+ +---------------------------+ + +
+ + +-----------------------+---+
+ + + +
+ +--------+ +
+--------------------------------------------------+
Forgive if my example did niot rendered well.
The style used is something like the bellow. It may work fine in Gecko
(Mozille), Webkit/Khtml (Safari, Konqueror) and Opera, but not in
MSIE6:
.center {
position: relative;
width: 640px;
height: 480px;
overflow: hidden;
}
.center span {
position: absolute;
display: block;
left: 50%;
}
.center img {
position: relative;
left: -50%;
}
On Tue, Oct 21, 2008 at 4:44 PM, Dave Smith <[EMAIL PROTECTED]> wrote:
>
> Greetings all -
>
> I'm no CSS expert, but I work with a system that allows you to
> template the look of certain pages within it by creating CSS classes
> and such and applying them to the content. I have an issue that I
> cannot seem to find a workable solution to involving centering an
> image inside a container. I have an image that is inherently wider
> than a centered DIV container on the page, and I want to center the
> image on the page so that it overflows evenly on both sides of the
> DIV. Here is a depiction of what I need:
>
> Browser
> +--------------------------------------------------+
> + DIV +
> + +--------+ +
> + IMG + + +
> + +---------------------------+ +
> + + + +
> + +---------------------------+ +
> + + + +
> + +--------+ +
> +--------------------------------------------------+
>
>
> I can change everything in the style tag as part of this system, so I
> can edit the idContainter, etc. So far, I have only attempted to make
> changes by changing the image class that I created "FullCentered".
> Here is the relevant code:
>
> <style type="text/css">
>
> .contentWikiView .center { text-align: center; }
>
> .contentWikiView #idContainer {
> width: 640px;
> margin-left: auto;
> margin-right: auto;
> text-align: left;
> }
>
> .contentWikiView img.FloatLeft { float: left; }
> .contentWikiView img.FloatRight { float: right; }
> .contentWikiView img.FullCentered {
> display:block;
> margin-left:auto;
> margin-right:auto;
> }
>
> </style>
>
> <div class="center"><div id="idContainer">
> <img src="Final%20ButtonMaker.bmp" fc_src="Final%20ButtonMaker.bmp"
> class="FullCentered" />
> </div></div>
>
> END CODE
>
> So far, everything I have attempted has the same results. The image
> aligns itself with the left side of the DIV, and then overflows out
> the right side (this is the same behavior as the FloatLeft class). Is
> it something in the idContainer that I have to change to allow this to
> work? Or am I missing the right CSS properties in my image class?
>
> Any insights greatly appreciated. In its current form, the images are
> so large that they force horizontal scrolling by the user if not
> properly centered.
>
> Thanks!
>
> >
>
--
Paulo Diovani
[EMAIL PROTECTED]
+55 51 8146 5413
___________________
http://www.diovani.com
--~--~---------~--~----~------------~-------~--~----~
--
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]
-~----------~----~----~----~------~----~------~--~---
