...

View Full Version : How to place an image in the margins...



jihanemo
12-10-2010, 10:22 PM
I'm trying to place this image (http://www.americanchic.net/website_graphics/test_ornament.png) in the left margin of my website (http://www.americanchic.net/) (see example of what it should look like here (http://www.americanchic.net/temporary/tempspread.jpg)) or below:

http://www.americanchic.net/temporary/tempspread.jpg

I would like to place the ornament graphic with the least amount of disruption to the main structure of the website. I'd simply like to lay it in or over the margin but I'm worried that I'll have to change the HTML around. It will only be a temporary (holiday) graphic...

Excavator
12-11-2010, 01:20 AM
Hello jihanemo,
Place this line anywhere in your markup - <img src="http://www.americanchic.net/website_graphics/test_ornament.png" id="orn" />

And position that absolutely with this bit of CSS -


#orn {
height: 250px;
width: 160px;
position: absolute;
top: 0;
left 0;
z-index: 1;
}
#outterwrapper {

overflow: hidden;
background: #ffffff;
-moz-box-shadow: 0px 0px 10px #bbbbbb;
-webkit-box-shadow: 0px 0px 10px #bbbbbb;
width: 815px;
padding: 10px 20px 0 20px;
margin-top: 25px;
margin-right: auto;
margin-left: auto;
position: relative;
z-index: 2;
}

jihanemo
12-14-2010, 09:56 PM
That's GREAT! Thank you! Will try out the code tonight.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum