Stupid HTML Question

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
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
Post Reply
happy dude
Donator
Posts: 2461
Joined: Fri Oct 26, 2007 5:12 pm

Stupid HTML Question

Post by happy dude »

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

___
User avatar
Donator
Posts: 1914
Joined: Sat Aug 19, 2006 12:19 am
Location: New Zealand

Post by ___ »

i believe it is, float it over? i can't remember exactly as i did html last semester lol

happy dude
Donator
Posts: 2461
Joined: Fri Oct 26, 2007 5:12 pm

Post by happy dude »

So uh how can I do this and/or what program can I do it in?

KCLiVES
Donator
Posts: 228
Joined: Wed Feb 13, 2008 6:56 pm
Location: North England.

Post by KCLiVES »

What do you mean by comment box?
Image

happy dude
Donator
Posts: 2461
Joined: Fri Oct 26, 2007 5:12 pm

Post by happy dude »

KCLiVES wrote:What do you mean by comment box?
I'm actually writing a MySpace layout for a friend and they've designed the page in like photoshop already... and they want to put a comment box (more html ugh) in too, instead of the standard commenting method on MySpazz.

___
User avatar
Donator
Posts: 1914
Joined: Sat Aug 19, 2006 12:19 am
Location: New Zealand

Post by ___ »

happy dude wrote:So uh how can I do this and/or what program can I do it in?
notepad?

can you show the picture?

Andy
User avatar
Administrator
Posts: 12815
Joined: Fri Aug 18, 2006 11:47 am
Location: United Kingdom
Contact:

Post by Andy »

Use a absolute position defined DIV or something like that.

happy dude
Donator
Posts: 2461
Joined: Fri Oct 26, 2007 5:12 pm

Post by happy dude »

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

Image

(thank god I'm getting paid for my troubles)

squidward_
User avatar
Posts: 570
Joined: Thu Feb 07, 2008 1:35 pm
Location: United Kingdom
Contact:

Post by squidward_ »

Something like that looks kind of complicated for even me!
Image

sibbl
User avatar
Posts: 105
Joined: Sun Oct 05, 2008 3:11 pm

Post by sibbl »

put both into two div tags...

Code: Select all

<div>test</div>
<div>over test</div>
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
GreetZz, Sibbl

Image

happy dude
Donator
Posts: 2461
Joined: Fri Oct 26, 2007 5:12 pm

Post by happy dude »

I need to work on my HTML skills

Looking around... Dreamweaver might be able to do what I want... or it might be eaiser to split up the image etc and piece it together...


monkey56657

Post by 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>

QuiescentWonder
Donator
Posts: 2365
Joined: Fri Jun 13, 2008 10:22 am

Post by QuiescentWonder »

CSS. Not HTML.

HighT3ch

Post by 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]

Post Reply