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!
--~--~---------~--~----~------------~-------~--~----~
--
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]
-~----------~----~----~----~------~----~------~--~---
