Relative positioning

[jem122974]

I have an image and I would like to position another image and a link on top of it. So I have the following:

			<table width="100%" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td>
					  <div id="picdiv"><img id="picimg" src="images/titleTim1.jpg"/></div>
  					<div id="Layer1" style="position:relative; bottom:30px; left:10px; z-index:1;">
						<img src="images/flagPeru.gif" />
						<a href="../sp/index.html" class="white_small">Español</a>
					  </div>
  					</td>
				</tr>

This positions my flag image and link where it want it, but it leaves an empty bar where they would normally be. How can I avoid this?

 

[traingamer]

You could use absolute positioning (I wouldn't).

Another way: (tested)
You could specify the size of <picdiv> and use the titleTim1.jpg as a background, then put the flag image inside the <picdiv> as opposed to outside it.

...
#picdiv {
background-image: url('images/titleTim1.jpg');

width: 400px;
height: 132px;
}
#picdiv img {padding: 20px;
border: 1px solid black;
margin: 15px 15px 5px 30px;
}
...

<div id="picdiv">
<img src="images/flagPeru.gif" />
<a href="../sp/index.html" class="white_small">Español</a>
</div>

Adjust the size to fit your image and the img margin as well. The border is just for clarity while testing.

There are many other ways of doing it as well.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[jem122974]

Hmmm.... But I don't want the titleTim1.jpg to be the background image. (I already have another working script that needs it just like it is) I just want them in layers. Any other suggestions?

 

[traingamer]

One way: Position <picdiv> relatively, nest <layer1> inside it and position layer1 absolutely (tested)

#picdiv{ 
position: relative;

}
#layer1 {
position: absolute;
left: 10px;
top: 10px;
}
...
<div id="picdiv">
<img id="picimg" src="images/titleTim1.jpg"/> 
  <div id="Layer1">
    <img src="images/flagPeru.gif">
    <a href="../sp/index.html" class="white_small">Español</a>
  </div>
</div>

Change the absolute positioning to fit your needs, of course.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[jem122974]

So would the position of layer1 be based on the page or the picdiv? I want it to be in the same spot regardless of the resolution I'm viewing it with. Anyway, I'll give it a try. Thanks...

 

[jem122974]

PERFECT! THANKS!!!!