 |  |  |  |  |  |  |  |
Image Position
Please support our Site Layout and Usability advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
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?
Thanks.
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>
Greetings.
Okay, there is another problem. I guess it's the same issue on "position" therefore, I'll just post it here.
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.
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.
"Study the past if you would define the future" - Confucius
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!
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!
gooseneck Dave
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.
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.
"Study the past if you would define the future" - Confucius
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
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
gooseneck Dave
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:-
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.
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.
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.
"Study the past if you would define the future" - Confucius
Greetings.
I've tried
, but with no luck.
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.
"Study the past if you would define the future" - Confucius
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?
I'm not sure why can't I make it work for the relative positioning using the left attribute.
Thanks for your help!
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!
"Study the past if you would define the future" - Confucius
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.
Post a picture of what its doing, cause you just have me confused at this point.
gooseneck Dave
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.
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.
"Study the past if you would define the future" - Confucius
|
Similar Threads
- Background-image position change with smooth (HTML and CSS)
- Regarding image position??? (JavaScript / DHTML / AJAX)
- Image position in Firefox vs Safari? (HTML and CSS)
- image position in a container. (HTML and CSS)
- Hover Image Position ??? (HTML and CSS)
Other Threads in the Site Layout and Usability Forum
- Previous Thread: Does everyone design for
- Next Thread: Avoid A Color Disaster!
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest Site Layout and Usability Posts
- Today's Posts
- Unanswered Threads
blogging content customer design development dreamweaver duplicate email evaluation filesharing firefox flash gilbane google html itunes javascript kazaa layout music napster peertopeer photoshop remote remoteserver satellitenavigation satnav server site tables template tips tomtom url wave web website websitedesignreview web_development web_sites
