Image Position

[red_evolve]

Greetings.
I have attached herewith a snippet of codes from my web page.
I tried to "protect" the original image + I would like to center my original image.
By using this css option, I realised that both the original & transparent image moved to the left relatively.
How can I make it at the center of the page?

<div align="center">
<img src="images/spider.gif">
<img src="images/transparent.jpg" style="position:relative; left:-160px;
  top:0px;">
</div>

Thanks.

[red_evolve]

Greetings.
Okay, there is another problem. I guess it's the same issue on "position" therefore, I'll just post it here.

<!-- The Content -->
<div id="con" align="center"> 
  <iframe name="content" scrolling="no" frameborder="0" width="100%" height="100%"> 
    <font color="#FFFFFF">Your Browser Doesn't Support Frames</font>
  </iframe>
</div>

<!-- Footer -->
<div align="center">
  <hr color="#F38F0C">
  <span id="clock" style="color: #112D95; font: 10pt verdana, arial,  helvetica; text-decoration: bold; border: 1px solid; width: 100px; padding: 2px; margin:2px">
  </span>
</div>

The above <div> tag would be enclosing the content of the website whereby when a link is clicked, the content would be targeted there. After that, I would want the "Footer" section to be displayed right after the content. How can I achieve that? The "Footer" section must dynamically know where does the content ends, and continue there after.
Please help. Thanks.

[gooseneck]

Hey Red,

For your first problem, if you want both images centered take out the left:-160px; this is gonna leave them both centered.

For your second problem, I'm not sure exactly what you are looking to do. But if I did understand you right putting a <br/> inbetween your content and footer areas should take care of it. Let me know if that helps. Take care!

[red_evolve]

Greetings.
Thanks for your reply.
As for the first answer, I have tried modifying that but it was not the result that I wanted. I'd like the "transparent.gif" to be on top of "spider.gif".
And, ermm, the second answer does not produce the result that I wanted too :(
By the way, what does <br/> mean? What is the difference with the one I know -> <br> ?
Thanks.

[gooseneck]

Ahhh, ok I understand what you're trying to do now. Put the left: -160px back in there. But the number of pixels you're moving it it should be equal to the width of spider.gif, I'm not sure if thats the case.

Oh! Or are you saying that spider.gif is still slightly left of exact center? If thats so, you'll want to put in spider.gif left: xpx; and in transparent.gif you'll want to put left: -xpx; where x is one half of the width.

Sorry I missunderstood what you were looking for in the second post. Let me paraphrase what you said to see if I understand. You have an area for content, and an area for the footer. You want the footer directly below the content, and when the size of the content area changes you want the footer to move with it so it is still directly below it. Am I on the right track?

<br/> is xhtml, which someone else is going to be more qualified to tell you about. Its something about closing all tags to keep all browsers happy....I think.

Let me know how we're doing with this. Take care

[red_evolve]

Greetings.
Aha...Glad that you understood what I am trying to do.
Yea, the spider.gif is sized at 157x86, which is why i moved it -160.
Hey, wait! I kinda get some idea from this statement of yours:-

Oh! Or are you saying that spider.gif is still slightly left of exact center? If thats so, you'll want to put in spider.gif left: xpx; and in transparent.gif you'll want to put left: -xpx; where x is one half of the width.

I'll try that out first.
As for my second question, yup, you've got what I wanted this time around. ;)
I see. Thanks for the explanation. However, the <br/> doesn't seem to work eh.
Thanks.

[red_evolve]

Greetings.
I've tried

<div align="center">
    <img src="images/spider.gif" style="position:relative; left:80px;">
    <img src="images/transparent.gif" width="156" height="87" style="position:relative; left:-160px; top:0px;">
  </div>

, but with no luck. :sad:

[red_evolve]

Greetings.
I've finally managed to solve this problem.
I placed the transparent.gif below the spider.gif, and then moving the transparent.gif up. However, there is a problem with spacing.
The subsequent text below transparent.gif does not appear right after spider.gif after I move the transparent.gif up.
Any idea as to how I can modify that?

<div align="center">
    <img src="images/spider.gif"
     onMouseover="window.status='Spider-man!'; return true"
     onMouseout="window.status=''; return true">
  </div>
  <div align="center">
    <img src="images/transparent.gif" width="156" height="87" style="position: relative; left:0px; top:-90px; z-index:0">
  </div>

I'm not sure why can't I make it work for the relative positioning using the left attribute.

Thanks for your help! ;)

[gooseneck]

You want transparent.jpg to sit directly over spider.gif right? I have to ask what browser you are using, because I am getting the desired results using both sets of code in IE6 and firefox 0.9.

Post a picture of what its doing, cause you just have me confused at this point.

[red_evolve]

Greetings.
Really? I'm a bit surprised that you could make it done with the exact codes.
Btw, I'm using IE6 as well. Picture eh? Errr...right now it's doing fine using the 2nd method -> the "top" attribute instead of the "left" attribute. I have attached herewith how the output looked.

Below the spider.gif there is a gap, the same height as another spider.gif (which actually had transparent.gif sitting there before I moved transparent.gif up to where spider.gif is. Therefore, when I right click on the picture to save it, I would be saving transparent.gif instead of spider.gif.)
So, my question is, can the gap be eliminated?
Sorry to have made you confused. :confused:

[gooseneck]

Don't worry about me, I confuse easily. :)

Yeah you can get transparent right over the other pic. Just use top and left, and just adjust it a couple of pixels till its right. Did you ever get that second problem fixed?

[red_evolve]

Greetings.
Not as yet.
But I'll keep debugging. :D

[red_evolve]

Greetings.
Hope you're still interested with this.
I added a "position: relative; left: 0px; top: -50px" to the <div> tag of that block of wordings, so that they could be shifted up as the transparent.gif goes up too.
This is what I could think of. :)

<div align="center">
    <img src="images/spider.gif"
     onMouseover="window.status='Spider-man!'; return true"
     onMouseout="window.status=''; return true">
  </div>
  <div align="center">
    <img src="images/transparent.gif" width="156" height="87" style="position: relative; left:0px; top:-91px; z-index:0">
  </div>
  <div align="center" class="spider" style="position:relative; left:0px; top:-50px; z-index:0">
    <strong>Interesting Article(s)</strong>
  </div>
</div>

[gooseneck]

That looks like it should do it! Are you stiill not getting what you want?

[red_evolve]

Greetings.
Yea, that code that I posted worked! ;)

[gooseneck]

Glad to hear it man! Take care!