Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

HTML problems

Okay, it appears that I'm not as good with HTML as I am with ruby XD

What I want to do is display a 'hovering' image. Meaning that the image wouldn't interfere with text/tables/whatever else's alignment and/or positions.

Look at my design to get what I want to do : (the blue part on the top)

http://img95.imageshack.us/img95/5824/finallayoutzp4.png[/img]

Also, if someone knows how to make a scrollbar with Javascript or PHP I wouldn't mind to know...
 

Erk

Member

Technically what you want to do is CSS. I would recommend setting it to absolute positioning in CSS. Do you know anything about how to do that? I can write you a quick tutorial in the morning if not, but it is almost midnight here and I start work at 8 so I have to get to sleep.
 
Edit : Stupid me, I perfectly know what CSS is but I wasn't aware that you could set a picture's exact position. I wouldn't mind having a quick tutorial...

Edit 2 : Nevermind I could figure it out for myself...
 
If you still need help, you can use Div layering. sloppier than CSS, but will get the job done.

Here is some example code:
Code:
<div style="POSITION:absolute; TOP:0px; LEFT:0px;">
Place any text, images, and whatnot here. It will be positioned by the X and Y coordinates you provided.
</div>

I'll break it down.
Code:
<div style="POSITION:absolute;
This starts the Div layer, and tells it to use absolute pixel based dimensions to align your code. You must have this bit to work the div layer.
Code:
TOP:0px; LEFT:0px;">
This defines the X and Y coordinates of your code. Left being 'X' and top being 'Y'. It works on a normal coordinate system with only positive integers. 0x0 is the very top left pixel of the screen.

You can put just about all types of code, except some DHTML, JavaScript, and other site enhancing script BASES. You can apply Java and DHTML effects to codes within them, if you have the base code required.

Hope this solves your problem. If you want multiple you have to 'layer' them in your code. The higher up the more priority they have.

Peace,
EiB
 
Thanks. But I've been able to do it by searching through the web.

Now I've got a working version, I just need to tidy and rewrite the code and it'll be done.
For those interested they can check it at the following adress :
http://www.freewebs.com/enkisama/

note that it's just there for testing purpose so only the first two scripts of the list actually work.

I'll move the whole thing to a better place when I'll be finished.

Also, I'd like to know if you like the scrollbar and the pictures displaying when hovering on the thumbnails?
 
It indeed looks nice, and the script editor interface is an idea many script releasers seem to follow these days (at least, that's not the first page I've seen with that design... though it has the most appealing header ^_^ )... you should use a default Windows scrollbar, though, because you don't have to have the cursor actually on the scrollbar if you move, other than with your scrollbar. You know, never put appearance above functionality ;)
 
@bluescope : I noticed the scrollbar problem and I tried to fix it but I didn't get it working so I replaced it with a normal scrollbar.
I tidied my code and reorganised things a bit : http://selwyn.110mb.com

I believe it works fine with Firefox,
but I'm definately bearing a grudge against IE...
 
The years I've been on layouting school, I've learned to never design a webpage for specific browsers, resolutions, or OS' only, ever... so better don't do this and make it work on all platforms... which should be quite easy if you code properly.
It all works fine ATM, icluding the scrollbar, but I liked the image previews better in the lower part of the screen... it looks out of place this way and conflicts with the priority of the navigation (script list)...

I hope I don't annoy you, I'm just trying to help you out with what these persistent teachers told me again and again and again and again... ^_^
 
Well, the problem with IE is that some CSS isn't interpreted as it's supposed to be.
I'm not quite sure about IE7 or other browsers but it's certainly a mess with IE6! (even the PNG transparency is fucked up.)
Edit : damn you IE, it works perfectly fine with Opera...

Actually, I moved the images preview to the left because it was taking too much space on the bottom (while having multiple toolbar for ex.) and I didn't wanted that page to have scrollbar.
But since it's a frame I can move it where I want in a blitz.
 

Mac

Member

Awwww no old design *cries too* it looks abit odd atm but as you said its not fully functional atm, so i'll await till its done to make my final judgement.
 
Okay, it's functionnal now (only the first script of the list though).

I'm just having a little problem :
The pictures appearing on screen are a problem because they take too much place so I made two version and I'd like to know which one you prefer.
Or what I should change to make the picture poping on screen correctly...

http://selwyn.110mb.com/TEST/

and

http://selwyn.110mb.com/TESTPOPUP/
click on the image for the see the image.

EDIT : Okay, there was like 50 people who watched this and did not respond.
Is it really hard to say either : 'I like the first one' or 'I like the popup one',
or even 'you work suck, go burn in hell you jerk!'.
 
I like the desing, but it has some errors: I can't see the Window Scrollbar script and the pop up images dont show the big image.
 
@vgvgf : what browser are you using exactly?
Because I tested it with IE, Firefox and Opera and it worked fine with each of them...
 
vgvgf;156069 said:
I can't see the Window Scrollbar script and ...


Wow I should really start reading what people post. The Window Scrollbar page isn't there, that's why you can't see it.
But the rest was working, was it?

Anyway, I finally found how I was going to make it :
http://selwyn.110mb.com/TEST/

to make the image appear, click on the thumbail, and to make it disappear, click on the image.
(note that if nothing has changed compared to the other version, press F5 to refresh the page, and it should work.)

@seph : The popup thing is actually very easy to do. I can teach you if you want...
 

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top