2

Here is the site I am working on:

http://graves-incorporated.com/test_sites/solera2012/test/home-pg.html

My problem is the red box in the top right corner. I spliced up the site is photoshop but since that part overlaps I needed to split the image in 2. How would I go about placing just the red box floating over everything else? z-depth maybe?

I would of course save it as a png to save transparency, but I wouldn't even know where to start to make it float over the existing 2 images

Please help!

Dan Graves
  • 347
  • 2
  • 4
  • 14

2 Answers2

3

Here is a start:

HTML

   <img src="your-transparent-file.png" id="rightAligned"/>

CSS

img#rightAligned {
   position: absolute;
   top: 50px; // adjust
   right: 20px; // adjust
}
cenk
  • 1,389
  • 14
  • 27
  • Awesome. That works until I re size the browser. Is there any way to lock it into that exact position?? – Dan Graves Nov 02 '11 at 04:19
  • Well, that depends. In order to fix an element to a position use "position: fixed" instead. – cenk Nov 07 '11 at 10:59
3

On the <td> that contains your image (let's call it <td class="imageholder">):

td.imageholder { position: relative; }

From there, cenk's solution will work, regardless of the browser window.

Explanation: Absolutely positioned elements look at their container element, which defaults to the entire document. If an absolutely positioned element is inside another element with position: absolute or relative, it will use that as the starting point for positioning.

Chris Fletcher
  • 2,367
  • 1
  • 16
  • 19
  • hmm... Maybe I am doing that wrong, here is what I did html: css: img#rightAligned { position: absolute; top: 47px; right: 192px; } td.imageholder { position: relative; } – Dan Graves Nov 02 '11 at 18:29
  • Could you update the live example with your new code so we can look at it? – Chris Fletcher Nov 02 '11 at 18:42
  • I just realized this is not working in FireFox... Why would that be? http://graves-incorporated.com/test_sites/solera_new/ – Dan Graves Nov 17 '11 at 04:09