Forum   Search   Register   Log in SUPERJER FORA
 

HTML nao!

 Pages: [1]
Programming Help
Mate de Vita
Kelli

2008 Oct 4 • 2397
159 ₧
So, I have to make this website for school and I have something to ask.

I have a few images I'm going to turn into links to other websites. But I'd like a cloud (I have no idea what that thing is really called) to appear if a user puts the mouse over one of those images. So for example:


I'd like something like that cloud saying WWE wwe.com to appear when you hover over the picture, explaining which site the image-link will take you to (for example in the above case, I'd want the cloud to say superjer comics).
...and that's the bottom line because Mate de Vita said so.

Who controls the past, controls the future. Who controls the present, controls the past.
    (Edited 2009 Dec 31 at 04:23)     2009 Dec 31 at 04:23
Down Rodeo
Cap'n Moth of the Firehouse

Find the Hole II Participation Medal
2007 Oct 19 • 5258
57,583 ₧
It's called a tool-tip. When you are writing the HTML do something like <a href="http://www.superjer.com/ic/" title="Superjer's crazy crazy comics!">Comics</a>
Everyone stares when you walk in the room, they stare when you go....
    (Edited 2009 Dec 31 at 05:52)     2009 Dec 31 at 05:50
Mate de Vita
Kelli

2008 Oct 4 • 2397
159 ₧
OK, now a bigger problem. First I made the website by trying out all paddings and other in pixels.
But that will only look the same with people who have the same resolution.
So I made a new site, this time using a table with width:100% and then four times <tr style="width:25%">blah blah</tr>.


This is what it looks like.
Now I'd be quite happy to call it a day and go with a site like this (after I finish with the pictures and links) but there's one more thing I'd like to do:
how do I get the pictures and text so that they're in the center of their respective cells (either horizontally only or both, horizontally and vertically)?

This is my table code right now:

HTML code
<table border=0 cellpadding=15px cellspacing=0 style="width:100%;margin:0 auto;float:left;"> <tr> <td style="width:25%"><h2>Required Software</h2></td> <td style="width:25%"><h2>CS Mapping Tutorials</h2></a> <td style="width:25%"><h2>3D Modelling</h2></td> <td style="width:25%"><h2>Upload your maps</h2></td> </tr> <tr> <td style="width:25%"><a href='http://themightyatom.nl/hldownloads/hammer_v34.exe' title="Valve Hammer Editor 3.4"><img alt='Valve Hammer Editor' src='./Slike/VHE2.jpg' width=150 height=150></a></td> <td style="width:25%"><a href='http://www.superjer.com/learn.php' title="Superjer's CS Mapping Guide - for complete newbies"><img alt="SuperJer's CS Mapping Tutorial" src='./Slike/superjer.png' width=205 height=150></a> <td style="width:25%"><a href='http://twhl.co.za/tutorial.php?id=147' title="Rimrook's Tutorial to the basics of 3D Modelling"><img alt='Rimrook's Tutorial' src='./Slike/rimrook.png' width=150 height=150></a></td> <td style="width:25%"><a href='http://twhl.co.za/tutorial.php?id=147' title="Rimrook's Tutorial to the basics of 3D Modelling"><img alt='Rimrook's Tutorial' src='./Slike/rimrook.png' width=150 height=150></a></td> </tr> <tr> <td style="width:25%"><a href='http://themightyatom.nl/hldownloads/zhlt34x86final.zip' title="ZHLT Compilers 3.4 32-bit"><img alt='32-bit ZHLT compilers' src='./Slike/ZHLT.jpg' width=150 height=150></a><a href='http://themightyatom.nl/hldownloads/zhlt34x64final.zip' title="ZHLT Compilers 3.4 64-bit"><img alt='64-bit ZHLT compilers' src='./Slike/ZHLT2.jpg' width=150 height=150></a></td> <td style="width:25%"><a href='http://twhl.co.za/tutorial.php?cat=1' title="TWHL's extensive guide collection"><img alt="TWHL Goldsource Mapping Tutorials" src='./Slike/twhl.png' width=150 height=150></a> <td style="width:25%"><a href='http://twhl.co.za/tutorial.php?id=147&page=2' title="Rimrook's more advanced 3D Modelling Tutorial"><img alt='Rimrook's Tutorial part 2' src='./Slike/rimrook2.png' width=150 height=150></a></td> <td style="width:25%"><a href='http://twhl.co.za/tutorial.php?id=147' title="Rimrook's Tutorial to the basics of 3D Modelling"><img alt='Rimrook's Tutorial' src='./Slike/rimrook.png' width=150 height=150></a></td> </tr> <tr> <td style="width:25%"><a href='http://themightyatom.nl/hldownloads/hammer_testbuild04.zip' title="VHE 3.5 - Executable file only"><img alt='News' src='./Slike/VHE.png' width=150 height=150></a></td> <td style="width:25%"><a href='http://countermap2.com/Tutorials/index.html' title="Counter-map's guide collection"><img alt='Counter-map CS Tutorials' src='./Slike/counter-map.png' width=185 height=150></a></td> <td style="width:25%"><a href='http://www.maprookie.com/random/gmaxandsmdplugins.zip' title="GMax - Free program for 3D Modelling"><img alt='GMax' src='./Slike/gmax.jpg' width=200 height=133></a></td> <td style="width:25%"><a href='http://www.maprookie.com/random/gmaxandsmdplugins.zip' title="GMax - Free program for 3D Modelling"><img alt='GMax' src='./Slike/gmax.jpg' width=200 height=133></a></td> </tr> </table>


P.S. Yes, I copied a little bit of code from superjer's homepage ('cause I don't know html).
Hopefully this isn't copyright theft, since I'm not going to distribute it.
...and that's the bottom line because Mate de Vita said so.

Who controls the past, controls the future. Who controls the present, controls the past.
    (Edited 2009 Dec 31 at 07:38)     2009 Dec 31 at 07:34
Down Rodeo
Cap'n Moth of the Firehouse

Find the Hole II Participation Medal
2007 Oct 19 • 5258
57,583 ₧
This is where my knowledge of HTML ends. Try the W3C.
Everyone stares when you walk in the room, they stare when you go....
    2009 Dec 31 at 08:40
Mate de Vita
Kelli

2008 Oct 4 • 2397
159 ₧
Well, I found a few pages saying that <td align="center"> should work, I tried it and it doesn't. I couldn't find anything on w3schools.com though.
Also I joined a help forum and some guy said that the above declaration should work. Now I sent him the html and am waiting for a response.
I'm also waiting for the admins of the w3schools forum to allow me to post.
...and that's the bottom line because Mate de Vita said so.

Who controls the past, controls the future. Who controls the present, controls the past.
    2009 Dec 31 at 11:40
superjer
superjer

2005 Mar 20 • 3742
Try:

<td style="text-align:center;">

Although what you did should work too.
    2009 Dec 31 at 21:49
Mate de Vita
Kelli

2008 Oct 4 • 2397
159 ₧
superjer said:
Try:

<td style="text-align:center;">

Although what you did should work too.

It didn't work because I foolishly copied two lines from your code:

code
a:link,a:visited {float:left;opacity:0.2;filter:alpha(opacity=20);} a:active,a:hover {float:left;opacity:1.0;filter:alpha(opacity=100);}


You can't align something that's already floating left.

But now I deleted the floats and the images get centered properly. However I get another problem:



In this picture I put my mouse over the curved pipe. As you can see the opacity on hover isn't working properly.
(the hint brushes are supposed to be next to each other but my resolution isn't big enough for that.
If I make the pictures smaller - ctrl+mwhl down - they are next to each other and both of them have
the same opacity problem)

EDIT: nvm, got it to work with someone's help. I just had to apply the opacity to every image separately.
The problem was something with inline elements (<a> being an inline element).
...and that's the bottom line because Mate de Vita said so.

Who controls the past, controls the future. Who controls the present, controls the past.
    (Edited 2010 Jan 2 at 12:21)     2010 Jan 1 at 02:43
SRAW
Rocket Man

2007 Nov 6 • 2068
601 ₧
why dont you use ms word to make the webpage then put it on a usb and then secretly upload it...
Free Steam Games
    2010 Jan 6 at 03:21
Down Rodeo
Cap'n Moth of the Firehouse

Find the Hole II Participation Medal
2007 Oct 19 • 5258
57,583 ₧
Microsoft Word produces shoddy HTML as far as I'm aware. You need only look at Internet Explorer and the kind of code it expects to know that.
Everyone stares when you walk in the room, they stare when you go....
    2010 Jan 6 at 07:15

Pages: [1]
Forum and design copyright © 2008-2010 SuperJer.com