#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    41
    Rep Power
    11

    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?

    TIA!
  2. #2
  3. what's your moniker?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Highland Park, NJ
    Posts
    201
    Rep Power
    11

    Re: How do I get HTML text over my slices?


    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
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    41
    Rep Power
    11
    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.
  6. #4
  7. what's your moniker?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Highland Park, NJ
    Posts
    201
    Rep Power
    11
    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>
    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
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    41
    Rep Power
    11
    Mmm, well, that kinda seemed to mess everything up... lol...

    Does anyone know how to do it with just tables? Please answer!
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    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.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    41
    Rep Power
    11
    Thanks for the info fellas. I got it to work. You guys rock!

IMN logo majestic logo threadwatch logo seochat tools logo