How to place an image in the margins

HTML & CSS
1

I’m trying to place [B]this image[/B] in the left margin of [URL=“http://www.americanchic.net/”][B]my website[/B] (see example of what it should look like [URL=“http://www.americanchic.net/temporary/tempspread.jpg”][B]here[/B]) or below:

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…

2

simply add something like


<div id="holiday-ornament">Holiday Sales!</div>

inside of the <body> of your document, but outside of any wrapper element.

The text inside of the div is for accessibility purposes, and will be moved off screen.

Then in your css, you can add something like


body {
  position: relative /* force it to contain absolutely positioned children */
}
div#holiday-ornament {
  background: url("http://www.americanchic.net/website_graphics/test_ornament.png") no-repeat;
  width: 160px; /*set the width and height to the width and height of the image */
  height: 250px;
  text-indent: -9999px; /* Move the text inside of the div off screen. Still readable for text-readers for the blind */

  position: absolute;
  left: 5%; /* Play around with the left attribute until it's placed where you want it */
  top: -25px; /*Your site has a strange top margin to its body element. Changing the top to a negative value compensates for it */
}

That should be it! Please ask if you need more help.

3

HTML
Add this after <body>:


<div id="ornament"></div>


CSS
Add this in your style2.css:

#ornament {
position:absolute;
top:0;
left:0;
height:250px;
width:160px;
background: url('http://www.americanchic.net/website_graphics/test_ornament.png') no-repeat;
z-index: -9999;
}

If you want some text also:

HTML
Add this after <body>:


<div id="ornament"><span>Holiday ornament</span></div>

and use a CSS image replacement technique.

But I don’t see a need for text there, it’s just an ornament, like a rounded corner :slight_smile:

And it doesn’t seem appropriate to use an <img> element for it also, for the same reason :slight_smile:

4

I added the following code right after your opening “outterwrapper” div:

<img src="http://www.americanchic.net/website_graphics/test_ornament.png" id="test">

And then the following CSS:

#test {
  left: 10px;
  position: absolute;
  top: 0;
}

I also added position: relative to the #outterwrapper div.

This works, but something to consider is that the ball is relative to the user’s browser window width, so if their width is small it’s going to look like this, probably not ideal:

5
Off Topic:

Can I add how terribly TERRIBLY sad I was when I started mucking with the HTML and found it was table based? This site is actually PRETTY and seemingly FUNCTIONAL!!

6

^ lol Thanks… I guess.

And thanks, guys, for the solution on the margin ornament. Will try it out tonight.

7

Sorry about the dig. Honestly, it’s very pretty, so that is a huge compliment (some people can’t design OR code, and an eye for aesthetics is really hard to come by).

If you were to learn proper HTML and CSS and recode it, I would have very very little to say :slight_smile:

Back on topic. You will notice with an absolutely positioned element that it will flow over your content if you try to resize the browser window.

If you set a min-width on the <body> element to approximately the wrapper width + the icon width, it should prevent that from happening.

Alternatively, you could position: relative the wrapper, and add a z-index to make it flow above the ornament (someone correct me if I’m wrong!!)

[EDIT] So the min-width didn’t work so well because of the auto centering of the outerwrapper, but setting

#holiday-ornament {
  z-index: -1;
}

does let the wrapper flow above the ornament.
[/EDIT]

8

:slight_smile: No prob. And thank you for the compliment.

Yes - I will try it tonight and see how both of those work.

9

Please note the edit I made in the reply above. :slight_smile:

10

Oh. Got it. Thanks! :slight_smile:

11

Thank you for all your answers, everyone. Have a great holiday.