 I Need Help With Text Over Images |
|
|
|
|
  |
 Oct 15 2005, 09:28 PM
Post
#1
|
|
|
Super Member  Group: Members Posts: 362 Joined: 25-August 05 Member No.: 11,104  |
like in runescape.com they have text over the scroll paper image thing where they put tere updates, i like to know how to put text on images like whta the code? thank you
|
 |
 
|
|
Oct 15 2005, 11:43 PM
Post
#2
|
|
|
Super Member Group: Members Posts: 282 Joined: 30-May 05 From: Bangalore Member No.: 7,686 |
Well, the website you're talking about seems to have simply placed the image and the text together, of course, inside a <div> container... perhaps they have an external stylesheet that reduces the z-index of images.
In any case, what you could try doing is create a separate body.main class and set background image to whatever picture you want, and have an attribute that says no-scroll. For instance: CODE body.main{ background-image: url('whatever'); background-repeat: no-repeat; background-attachment: fixed; } If you aren't particularly familiar with CSS, try visiting the W3Schools training pages. Cheerio 
|
|
|
|
|
Oct 15 2005, 11:55 PM
Post
#3
|
|
|
Privileged Member Group: Members Posts: 630 Joined: 12-August 05 From: Melbourne, Australia Member No.: 10,624 |
To put text over an image is quite easy, you can do it with tables by setting the background of a table to an image like this:
CODE <td valign="top" background="img/light_paper.gif"> or using CSS tags like this: CODE <div style="position: relative; margin-bottom: -35px; padding-left: 7px;"><img style="display: block; position: absolute; width: 466px; height: 50px;" src="http://www.runescape.com/img/scroll/scroll457_top.gif"> There are other ways, but these are the common ways to do it. Hope that helps. |
|
|
|
|
Oct 16 2005, 12:45 AM
Post
#4
|
|
|
Super Member Group: Members Posts: 362 Joined: 25-August 05 Member No.: 11,104 |
some one take a look at this site...
http://www.freewebs.com/buyrsautos/autos.htm look it as IE and FIrefox do you see a difference? |
|
|
|
|
Oct 16 2005, 04:45 PM
Post
#5
|
|
|
The Ethical Hacker Group: [HOSTED] Posts: 1,154 Joined: 27-May 05 From: Portugal (Europe) Member No.: 7,566 |
It's obviously that you're new in cascading style sheet (css), so, if you want a cool ebook about it, just private email me and i send it to you right away.
|
|
|
|
|
Oct 17 2005, 03:29 AM
Post
#6
|
|
|
Trap Grand Marshal Member Group: Members Posts: 1,183 Joined: 24-September 04 Member No.: 1,245 |
i'm intersting in the css and i'm a newbie of that.
so i like a ebook with that and it's the latest.  can you give me one?-- guangdian |
|
|
|
|
Oct 17 2005, 03:56 AM
Post
#7
|
|
|
Group: Members Posts: 1,161 Joined: 9-May 05 From: Brisbane, QLD Member No.: 6,818 |
QUOTE(Avalon @ Oct 16 2005, 09:55 AM) CODE <td valign="top" background="img/light_paper.gif"> or using CSS tags like this: CODE <div style="position: relative; margin-bottom: -35px; padding-left: 7px;"><img style="display: block; position: absolute; width: 466px; height: 50px;" src="http://www.runescape.com/img/scroll/scroll457_top.gif"> Or you could just set a background image for whatever element contains your text, e.g.: CODE h3#yourText { background: url(yourimage.jpg) top left no-repeat; } |
|
|
|
|
Oct 17 2005, 01:51 PM
Post
#8
|
|
|
Super Member Group: Members Posts: 362 Joined: 25-August 05 Member No.: 11,104 |
QUOTE(Microsoft @ Oct 16 2005, 12:45 AM) some one take a look at this site... http://www.freewebs.com/buyrsautos/autos.htm look it as IE and FIrefox do you see a difference?  what should i do with this problem in IE it looks messed up the letters/words and in FireFox it looks fine :\ |
|
|
|
|
Oct 18 2005, 10:26 PM
Post
#9
|
|
|
Super Member Group: Members Posts: 362 Joined: 25-August 05 Member No.: 11,104 |
Well? I visit the website in internet explorer which is better because i can hear the song i can hear it in FF but when i visit it in IE the letters look messed up =\ why does it look fine only in Firefox?
|