BetaArchive Logo
Navigation Home Screenshots Image Uploader Server Info FTP Servers Wiki Forum RSS Feed Rules Please Donate
UP: 21d, 21h, 5m | CPU: 21% | MEM: 5815MB of 10780MB used
{The community for beta collectors}

Forum rules


Any off topic discussions should go in this forum. Post count is not increased by posting here.
FTP Access status is required to post in this forum. Find out how to get it


Post new topic Reply to topic  [ 14 posts ] 
Author Message
 PostPost subject: Stupid HTML Question        Posted: Fri Oct 17, 2008 9:01 am 
Reply with quote
Donator
Offline

Joined
Fri Oct 26, 2007 5:12 pm

Posts
2461
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


Top  Profile
 PostPost subject:        Posted: Fri Oct 17, 2008 9:53 am 
Reply with quote
Donator
User avatar
Offline

Joined
Sat Aug 19, 2006 12:19 am

Posts
1915

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


Top  Profile
 PostPost subject:        Posted: Fri Oct 17, 2008 10:37 am 
Reply with quote
Donator
Offline

Joined
Fri Oct 26, 2007 5:12 pm

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


Top  Profile
 PostPost subject:        Posted: Fri Oct 17, 2008 11:18 am 
Reply with quote
Donator
Offline

Joined
Wed Feb 13, 2008 6:56 pm

Posts
228

Location
North England.
What do you mean by comment box?

_________________
Image


Top  Profile  WWW
 PostPost subject:        Posted: Fri Oct 17, 2008 11:24 am 
Reply with quote
Donator
Offline

Joined
Fri Oct 26, 2007 5:12 pm

Posts
2461
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.


Top  Profile
 PostPost subject:        Posted: Fri Oct 17, 2008 12:04 pm 
Reply with quote
Donator
User avatar
Offline

Joined
Sat Aug 19, 2006 12:19 am

Posts
1915

Location
New Zealand
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?


Top  Profile
 PostPost subject:        Posted: Fri Oct 17, 2008 12:41 pm 
Reply with quote
Administrator
User avatar
Offline

Joined
Fri Aug 18, 2006 11:47 am

Posts
12473

Location
Merseyside, United Kingdom

Favourite OS
Microsoft Windows 7 Ultimate x64
Use a absolute position defined DIV or something like that.

_________________
Image

BetaArchive Discord: https://discord.gg/epK3r6A


Top  Profile  WWW
 PostPost subject:        Posted: Fri Oct 17, 2008 12:47 pm 
Reply with quote
Donator
Offline

Joined
Fri Oct 26, 2007 5:12 pm

Posts
2461
@ Andy: Err, how? :oops:
@ ____: 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)


Top  Profile
 PostPost subject:        Posted: Fri Oct 17, 2008 12:52 pm 
Reply with quote
FTP Access
User avatar
Offline

Joined
Thu Feb 07, 2008 1:35 pm

Posts
571

Location
United Kingdom
Something like that looks kind of complicated for even me!

_________________
Image


Top  Profile  WWW
 PostPost subject:        Posted: Fri Oct 17, 2008 6:01 pm 
Reply with quote
FTP Access
User avatar
Offline

Joined
Sun Oct 05, 2008 3:11 pm

Posts
105
put both into two div tags...

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


Top  Profile
 PostPost subject:        Posted: Sat Oct 18, 2008 7:54 am 
Reply with quote
Donator
Offline

Joined
Fri Oct 26, 2007 5:12 pm

Posts
2461
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...

:S


Top  Profile
 PostPost subject:        Posted: Thu Oct 30, 2008 2:34 am 
Reply with quote
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:
<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>


Top
 PostPost subject:        Posted: Thu Oct 30, 2008 7:47 am 
Reply with quote
Donator
User avatar
Offline

Joined
Fri Jun 13, 2008 10:22 am

Posts
2366
CSS. Not HTML. :wink:


Top  Profile
 PostPost subject:        Posted: Thu Oct 30, 2008 2:07 pm 
Reply with quote
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]


Top
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 14 posts ] 




Who is online

Users browsing this forum: No registered users and 8 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Jump to:  

All views expressed in these forums are those of the author and do not necessarily represent the views of the BetaArchive site owner.

Powered by phpBB® Forum Software © phpBB Group

Copyright © 2006-2018

 

Sitemap | XML | RSS