How do I get HTML text over my slices? - HTML Programming

Rank: 1

1^# Jump to »

Noah NeimanPost at 2010-6-14 20:23 | Show This Author's Posts Only

abstract:

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?
TIA!

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?
TIA!

TOP

Newbie

Rank: 1

2^#

stinkomanPost at 2010-6-14 20:23 | Show This Author's Posts Only

Originally posted by Noah Neiman
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?
TIA!

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.
Good luck

TOP

Newbie

Rank: 1

3^#

Noah NeimanPost at 2010-6-14 20:23 | Show This Author's Posts Only

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?

TOP

Newbie

Rank: 1

4^#

stinkomanPost at 2010-6-14 20:23 | Show This Author's Posts Only

Originally posted by Noah Neiman
[B]Could you explain that in more detail? I'm not very familiar with <div> stuff.

Sorry that wasn't clear; try this...
Insert this code into your webpage. right at the start of the body tag:
Code:

<STYLE> <!--
.test {position:absolute;
top:345px;
left:120px;
height:100px;
width:150px;
background:#FFF;
font:8pt Arial;
padding:2px;}
-->
</STYLE>
<DIV class="test">
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!
</div>

Copy Code

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

TOP

Newbie

Rank: 1

5^#

Noah NeimanPost at 2010-6-14 20:23 | Show This Author's Posts Only

abstract:

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?
TIA!

Mmm, well, that kinda seemed to mess everything up... lol...
Does anyone know how to do it with just tables? Please answer!

TOP

Newbie

Rank: 1

6^#

mrrichardfederPost at 2010-6-14 20:23 | Show This Author's Posts Only

Noah...try this:
<td WIDTH=154 HEIGHT=117 COLSPAN=5 valign="top">
   <div style="position:relative;width:154px;height:117px;">
<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>
      </div></td>
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.

TOP

Newbie

Rank: 1

7^#

Noah NeimanPost at 2010-6-14 20:23 | Show This Author's Posts Only

Thanks for the info fellas. I got it to work. You guys rock!

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?
TIA!

TOP

Back Forum

[Favorite Topic] [Add to My attention, if there is a New Reply]

[Through QQ, MSN Send to a friend]