•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the Site Layout and Usability section within the Web Development category of DaniWeb, a massive community of 403,490 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,232 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our Site Layout and Usability advertiser: Programming Forums
Views: 20577 | Replies: 15
 |
| |
•
•
Join Date: Jun 2003
Location: Malaysia
Posts: 313
Reputation: 
Rep Power: 6
Solved Threads: 0
Posting Whiz
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>
•
•
Join Date: Jun 2003
Location: Malaysia
Posts: 313
Reputation:
Rep Power: 6
Solved Threads: 0
Posting Whiz
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
•
•
Join Date: Jun 2004
Posts: 38
Reputation:
Rep Power: 5
Solved Threads: 0
Light Poster
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
•
•
Join Date: Jun 2003
Location: Malaysia
Posts: 313
Reputation:
Rep Power: 6
Solved Threads: 0
Posting Whiz
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
•
•
Join Date: Jun 2004
Posts: 38
Reputation:
Rep Power: 5
Solved Threads: 0
Light Poster
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
•
•
Join Date: Jun 2003
Location: Malaysia
Posts: 313
Reputation:
Rep Power: 6
Solved Threads: 0
Posting Whiz
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.
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.
"Study the past if you would define the future" - Confucius
•
•
Join Date: Jun 2003
Location: Malaysia
Posts: 313
Reputation:
Rep Power: 6
Solved Threads: 0
Posting Whiz
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
•
•
Join Date: Jun 2003
Location: Malaysia
Posts: 313
Reputation:
Rep Power: 6
Solved Threads: 0
Posting Whiz
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
•
•
Join Date: Jun 2004
Posts: 38
Reputation:
Rep Power: 5
Solved Threads: 0
Light Poster
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
•
•
Join Date: Jun 2003
Location: Malaysia
Posts: 313
Reputation:
Rep Power: 6
Solved Threads: 0
Posting Whiz
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
|
•
•
•
•
•
•
•
•
DaniWeb Site Layout and Usability Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Hybrid Mode
Similar Threads
- Background-image position change with smooth (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!
