Stupid HTML Question
Forum rules
Any off topic discussions should go in this forum. Post count is not increased by posting here.
Archive Access status is required to post in this forum. Find out how to get it
Any off topic discussions should go in this forum. Post count is not increased by posting here.
Archive Access status is required to post in this forum. Find out how to get it
-
happy dude
- Donator
- Posts: 2461
- Joined: Fri Oct 26, 2007 5:12 pm
Stupid HTML Question
Right, so I have an image on my page that I want to put a little comment box over the top of the image - HOWEVER, the image is not a background image and it cannot be set as background image. Is it possible, or am I just crazy
-
happy dude
- Donator
- Posts: 2461
- Joined: Fri Oct 26, 2007 5:12 pm
-
happy dude
- Donator
- Posts: 2461
- Joined: Fri Oct 26, 2007 5:12 pm
-
happy dude
- Donator
- Posts: 2461
- Joined: Fri Oct 26, 2007 5:12 pm
@ Andy: Err, how?
@ ____: Not at the moment no... keep changing everything around >_>. did a quick google though and it seems this float stuff is what I'm lookign for.
As an example of what I'm trying to do I'll link to a layout my friend was using on myspazz.
http://falsetigerlimbs.net/layouts/over ... eview.html
See how its got the comment over the image?
Except, the image used isn't being used as a background image - its just being used as a normal img:
(thank god I'm getting paid for my troubles)
@ ____: Not at the moment no... keep changing everything around >_>. did a quick google though and it seems this float stuff is what I'm lookign for.
As an example of what I'm trying to do I'll link to a layout my friend was using on myspazz.
http://falsetigerlimbs.net/layouts/over ... eview.html
See how its got the comment over the image?
Except, the image used isn't being used as a background image - its just being used as a normal img:
(thank god I'm getting paid for my troubles)
- squidward_
- Posts: 570
- Joined: Thu Feb 07, 2008 1:35 pm
- Location: United Kingdom
- Contact:
put both into two div tags...
edit: hey why did the board software remove my style attribute -_-
one more try: add "position:absolute;" for both and then add "z-index:99;" for the one in the background and "z-index:100;" for the one on top
Code: Select all
<div>test</div>
<div>over test</div>
one more try: add "position:absolute;" for both and then add "z-index:99;" for the one in the background and "z-index:100;" for the one on top
GreetZz, Sibbl
-
happy dude
- Donator
- Posts: 2461
- Joined: Fri Oct 26, 2007 5:12 pm
-
monkey56657
This is quite simple to achieve. Below shows the basic example of how you can do this. This method assumes that you know the width and height of the image. You can get away with using 100% width but you should at least know the height. I added a border to help show the position.
Code: Select all
<div style="position:relative;">
<img src="....." />
<div style="position:absolute; left:0px; top:0px; z-index:99; width:.....px; height:.....px;">
Comment Box Text
</div>
</div>
-
HighT3ch
I would break the callout image into four pieces then reconstruct the callout around a div box with absolute positioning.
*** Tried several times to add the code but it gets messed up I included a zip demo.zip
To cut the image imagine how big you want the callout then think how big you want the inside box and cut each side. Since you are using absolute images take care to handle smaller screen sizes by appropriately positioning the callouts. To handle large chunks of texts inside the callout boxes make the container scrollable.[/code]
*** Tried several times to add the code but it gets messed up I included a zip demo.zip
To cut the image imagine how big you want the callout then think how big you want the inside box and cut each side. Since you are using absolute images take care to handle smaller screen sizes by appropriately positioning the callouts. To handle large chunks of texts inside the callout boxes make the container scrollable.[/code]