943,917 Members | Top Members by Rank

Web Development > Web Design > Site Layout and Usability > Image Position
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Jul 6th, 2004
0

Image Position

Expand Post »
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.
Similar Threads
Reputation Points: 53
Solved Threads: 1
Posting Whiz
red_evolve is offline Offline
313 posts
since Jun 2003
Permalink
Jul 7th, 2004
0

Re: Image Position

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.
Reputation Points: 53
Solved Threads: 1
Posting Whiz
red_evolve is offline Offline
313 posts
since Jun 2003
Permalink
Jul 7th, 2004
0

Re: Image Position

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!
Reputation Points: 11
Solved Threads: 0
Light Poster
gooseneck is offline Offline
38 posts
since Jun 2004
Permalink
Jul 7th, 2004
0

Re: Image Position

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.
Reputation Points: 53
Solved Threads: 1
Posting Whiz
red_evolve is offline Offline
313 posts
since Jun 2003
Permalink
Jul 8th, 2004
0

Re: Image Position

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
Reputation Points: 11
Solved Threads: 0
Light Poster
gooseneck is offline Offline
38 posts
since Jun 2004
Permalink
Jul 8th, 2004
0

Re: Image Position

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:-

Quote ...
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.
Reputation Points: 53
Solved Threads: 1
Posting Whiz
red_evolve is offline Offline
313 posts
since Jun 2003
Permalink
Jul 8th, 2004
0

Re: Image Position

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.
Reputation Points: 53
Solved Threads: 1
Posting Whiz
red_evolve is offline Offline
313 posts
since Jun 2003
Permalink
Jul 9th, 2004
0

Re: Image Position

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!
Reputation Points: 53
Solved Threads: 1
Posting Whiz
red_evolve is offline Offline
313 posts
since Jun 2003
Permalink
Jul 9th, 2004
0

Re: Image Position

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.
Reputation Points: 11
Solved Threads: 0
Light Poster
gooseneck is offline Offline
38 posts
since Jun 2004
Permalink
Jul 11th, 2004
0

Re: Image Position

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.
Attached Thumbnails
Click image for larger version Name: untitled.jpg Views: 106 Size: 11.3 KB ID: 486  
Reputation Points: 53
Solved Threads: 1
Posting Whiz
red_evolve is offline Offline
313 posts
since Jun 2003

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in Site Layout and Usability Forum Timeline: Does everyone design for
Next Thread in Site Layout and Usability Forum Timeline: Avoid A Color Disaster!





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC