Placing images inside HTML Module


Author Message
Tim

Posted: 10/19/2009
Quote message 

Why is that the skin isnt stretching when i am placing images inside a HTML module? they are actually exceeding the edges of the skin.
 
tim

Posted: 10/19/2009
Quote message 

Hi Terry

I have been setting the skins for 900px as well seems to be the standard. If I create a html module on the top pane and place a 900px image in the module it is running over the the width of the skin weird. Also the images are not centering in the module. I am wondering if I make the skin 900px and make all the images inside the skin if they are to run the full length 800px?
 
Terry

Posted: 10/19/2009
Quote message 

Tim,

Got it...you need to make your images a little smaller for the padding/margins.

I'm not sure what they are set to but believe it is probably.

.art-Sheet-body
{
position: relative;
z-index: 1;
padding: 6px;

So try making your image 888px wide and see what happens.
 
yep

Posted: 10/20/2009
Quote message 

yes i worked that out too all good.!
 
BrianM

Posted: 12/4/2009
Quote message 

Depending on the object's placement and other CSS properties and inheritance (this works best with an overall "container" div with a unique id attribute), you can alternatively set the width property to auto (e.g., width=auto;) for the id's selector, for example:

.content
{
position: relative;
width: auto;
/* other CSS properties */
}


This lets the browswer resize the "container" (a div element generally, but applicable to any containing object that is positioned with CSS 2.1) dynamically based on the window object's innerWidth.

You can use the CSS height property as well with the auto value, just be aware that its implementation isn't as fully supported as width in browsers, so use it carefully.

The object's height is based on its flow-object height, and this is added to any containing elements and that is used by the browser to dynamically size and display it by calculating the document's height and comparing it to the window.innerHeight value.

This approach frees designers from the constraints of fixed-width designs. To ensure that the object isn't overly "shrunk" via dynamic resizing, use a min-width in the CSS selector's properties.

All W3C-compliant browsers will accept width (be sure to use a DOCTYPE declaration, however, so browser "quirks" mode doesn't take over), working perfectly fine in IE8, Firefox 3.5.3 and Opera 10. However, be aware that to be fully cross-browser compatible, you'll want your CSS to also implement browser zeroing for the html, body, div and other major container element constructs you use by setting margin and padding to zero. This removes the oddities of the different browser's box model computations. Child elements that inherit the zeroed cascade can be designed to override the "zeroed" default by either using id or class selectors to set margin and padding.