October 19th, 2003, 09:58 PM
How do I get HTML text over my slices?
Ok, so I've made this webpage and now I want to be able to type stuff over some of the slices.
My site is www.noahneiman.com and if you look where the text in the middle and bottom parts of the webpage are, you may notice that you can't highlight any of it. This is because the text is part of the slice itself. I want to erase that text and be able to type HTML text over just the gray parts of the slices themselves.
Can someone tell me how to do that?
October 19th, 2003, 11:20 PM
Re: How do I get HTML text over my slices?
hmmm... I see two ways to do it, one I'm more comfortable with: first, you could make the images the background of the <td> tags, and use text as the content with the oppropriate padding and such.
or you could use a <div> tag with absolute or relative positioning, set the background to the image, and have type be the content. same idea really, I just hate tables. the div idea works for sure, I haven't tried the table idea in years.
October 20th, 2003, 07:29 AM
Could you explain that in more detail? I'm not very familiar with <div> stuff. I just know some basic HTML and just learned how to make slices. How do I change the slices from an image to the background? And I mean, I'd have to set specific slices in specific areas as backgrounds in only THOSE areas... Is that even possible?
I kinda figured a way to do it, but it's not working how I thought it wouldn, and I'm not sure if it's what you were saying. I was thinking that I could just set the slice image as the background in the <td> area where it's set as an <img src> right now, and then that way, I could just type over it. The problem is I don't know the proper coding for that...
This is my code right now:
<TD COLSPAN=4 ROWSPAN=3>
<IMG SRC="images/noahneiman.com_36.gif" WIDTH=151 HEIGHT=114 ALT=""></TD>
I tried doing this:
<TD COLSPAN=4 ROWSPAN=3 BACKGROUND="images/noahneiman.com_36.gif"> Text goes here </TD>
But now, that <td>'s background (the image/slice I'm using) is made lighter for some reason. It looks like a patch ontop of the rest of the site, or something... Hard to explain. I guess since it's set to background it has some transparency? Is there a way to get rid of that too?
Last edited by Noah Neiman; October 20th, 2003 at 08:02 AM.
October 20th, 2003, 09:01 AM
Sorry that wasn't clear; try this...
Insert this code into your webpage. right at the start of the body tag:
As you can see, the contents of the div get placed over the old text. If you change the background to background:transparent; you'll be able to see the image underneath.
Hi, I'm Noah Neiman.<br>Welcome to my website. It mostly
reflects my interests in music and video games and also tells a
little about me. I hope you enjoy your stay!
There probably is a way to do it all in tables though, if that's your pleasure. Hopefully someone will post a way to do it like that too.
Here's a good tutorial for css positioning: http://www.brainjar.com/css/positioning/default.asp
October 20th, 2003, 06:18 PM
Mmm, well, that kinda seemed to mess everything up... lol...
Does anyone know how to do it with just tables? Please answer!
October 21st, 2003, 12:28 AM
<td WIDTH=154 HEIGHT=117 COLSPAN=5 valign="top">
<img WIDTH=154 HEIGHT=117 src="images/index_35.png">
<div style="position:absolute;left:8px;top:16px;width:140px;"><font color="#FFFFFF" size="1" face="Arial, Helvetica, sans-serif">Hello there! My name is Noah Neiman. Welcome to my website! It mostly reflects
my interests in music and video games and also tells you a little
bit about me. I hope you enjoy your stay!</font></div>
The outer div sets up a positioning 'grid' - with its 0,0 point in the upper left corner (position:relative does it, without changing the position itself); then the absolutely positioned inner div ('layer') locks onto the outer one, as it's nested within it. Tailor the position with left/top. Always use 'px'. Read this.
October 21st, 2003, 01:34 AM
Thanks for the info fellas. I got it to work. You guys rock!