»
 

Go Back   ResellerRatings Store Ratings > ResellerRatings Forums > Tech Support

Reply
 
LinkBack Thread Tools Display Modes
Old 11-30-2003, 01:04 PM   #1 (permalink)
Registered User
 
Join Date: Nov 2003
Posts: 34
Andybebad is on a distinguished road
Text over Image

I'm slicing and coding a design for a friend and I have a question.
I'm tring to get the text oven an image with out messing up the design. Can anyone help?
Here is the code so far:
Code:
<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>hicyc</title>
</head>

<body bgcolor="#3399CC" topmargin="0" leftmargin="0"
marginwidth="0" marginheight="0">
<!-- ImageReady Slices --><div align="center"><center>

<table border="0" cellpadding="0" cellspacing="0" width="749">
    <tr>
        <td rowspan="2" colspan="2"><img
        src="images/index_01.gif" width="278" height="88"></td>
        <td colspan="10"><img src="images/index_02.gif"
        width="471" height="13"></td>
        <td><img src="images/spacer.gif" width="1" height="13"></td>
    </tr>
    <tr>
        <td colspan="8"><a
        href="http://tsa.sprynge-fielde.co.uk/" target="_self"><img
        src="images/logo-link.gif" border="0" width="366"
        height="75"></a></td>
        <td rowspan="2" colspan="2"><img
        src="images/index_04.gif" width="105" height="163"></td>
        <td><img src="images/spacer.gif" width="1" height="75"></td>
    </tr>
    <tr>
        <td rowspan="2" colspan="6"><img
        src="images/index_05.gif" width="536" height="144"></td>
        <td colspan="4"><img src="images/index_06.gif"
        width="108" height="88"></td>
        <td><img src="images/spacer.gif" width="1" height="88"></td>
    </tr>
    <tr>
        <td rowspan="2" colspan="5"><img
        src="images/web-news.gif" width="201" height="180"></td>
        <td rowspan="14"><img src="images/index_08.gif"
        width="12" height="699"></td>
        <td><img src="images/spacer.gif" width="1" height="56"></td>
    </tr>
    <tr>
        <td rowspan="13"><img src="images/index_09.gif"
        width="15" height="643"></td>
        <td rowspan="9" colspan="2"><img src="images/content.gif"
        width="363" height="488"></td>
        <td rowspan="2" colspan="3"><img
        src="images/index_11.gif" width="158" height="199"></td>
        <td><img src="images/spacer.gif" width="1" height="124"></td>
    </tr>
    <tr>
        <td rowspan="2" colspan="5"><img
        src="images/index_12.gif" width="201" height="131"></td>
        <td><img src="images/spacer.gif" width="1" height="75"></td>
    </tr>
    <tr>
        <td colspan="3"><img src="images/index_13.gif"
        width="158" height="56"></td>
        <td><img src="images/spacer.gif" width="1" height="56"></td>
    </tr>
    <tr>
        <td rowspan="3" colspan="2"><img
        src="images/index_14.gif" width="96" height="98"></td>
        <td rowspan="2" colspan="3"><a href="media"><img
        src="images/index_15.gif" border="0" width="120"
        height="89"></a></td>
        <td colspan="3"><img src="images/index_16.gif"
        width="143" height="57"></td>
        <td><img src="images/spacer.gif" width="1" height="57"></td>
    </tr>
    <tr>
        <td rowspan="9"><img src="images/index_17.gif" width="9"
        height="331"></td>
        <td rowspan="6" colspan="2"><img src="images/written.gif"
        width="134" height="201"></td>
        <td><img src="images/spacer.gif" width="1" height="32"></td>
    </tr>
    <tr>
        <td colspan="3"><img src="images/index_19.gif"
        width="120" height="9"></td>
        <td><img src="images/spacer.gif" width="1" height="9"></td>
    </tr>
    <tr>
        <td rowspan="7"><img src="images/index_20.gif" width="7"
        height="290"></td>
        <td colspan="3"><img src="images/misc.gif" width="205"
        height="70"></td>
        <td rowspan="2"><img src="images/index_22.gif" width="4"
        height="95"></td>
        <td><img src="images/spacer.gif" width="1" height="70"></td>
    </tr>
    <tr>
        <td colspan="3"><img src="images/index_23.gif"
        width="205" height="25"></td>
        <td><img src="images/spacer.gif" width="1" height="25"></td>
    </tr>
    <tr>
        <td rowspan="3" colspan="4"><img
        src="images/episodes.gif" width="209" height="149"></td>
        <td><img src="images/spacer.gif" width="1" height="40"></td>
    </tr>
    <tr>
        <td rowspan="3" colspan="2"><img src="images/buddies.gif"
        width="363" height="113"></td>
        <td><img src="images/spacer.gif" width="1" height="25"></td>
    </tr>
    <tr>
        <td rowspan="3" colspan="2"><img
        src="images/index_26.gif" width="134" height="130"></td>
        <td><img src="images/spacer.gif" width="1" height="84"></td>
    </tr>
    <tr>
        <td rowspan="2" colspan="4"><img
        src="images/index_27.gif" width="209" height="46"></td>
        <td><img src="images/spacer.gif" width="1" height="4"></td>
    </tr>
    <tr>
        <td colspan="2"><img src="images/index_28.gif"
        width="363" height="42"></td>
        <td><img src="images/spacer.gif" width="1" height="42"></td>
    </tr>
    <tr>
        <td><img src="images/spacer.gif" width="15" height="1"></td>
        <td><img src="images/spacer.gif" width="263" height="1"></td>
        <td><img src="images/spacer.gif" width="100" height="1"></td>
        <td><img src="images/spacer.gif" width="7" height="1"></td>
        <td><img src="images/spacer.gif" width="89" height="1"></td>
        <td><img src="images/spacer.gif" width="62" height="1"></td>
        <td><img src="images/spacer.gif" width="54" height="1"></td>
        <td><img src="images/spacer.gif" width="4" height="1"></td>
        <td><img src="images/spacer.gif" width="9" height="1"></td>
        <td><img src="images/spacer.gif" width="41" height="1"></td>
        <td><img src="images/spacer.gif" width="93" height="1"></td>
        <td><img src="images/spacer.gif" width="12" height="1"></td>
        <td>&nbsp;</td>
    </tr>
</table>
</center></div><!-- End ImageReady Slices -->
</body>
</html>
I want it so tex appears over written.gif, webnews.gif, misc.gif, content.gif, episodes.gif, and buddies.gif. How would I do that?

Andybebad is offline   Reply With Quote
Old 11-30-2003, 01:14 PM   #2 (permalink)
Registered User
 
sixf00t4's Avatar
 
Join Date: Aug 2002
Location: Western PA
Posts: 2,296
sixf00t4 is on a distinguished road
Send a message via ICQ to sixf00t4 Send a message via AIM to sixf00t4 Send a message via Yahoo to sixf00t4
why not just create new images?
__________________
[url=http://joshuadhall.com]My blog[/url]
sixf00t4 is offline   Reply With Quote
Old 11-30-2003, 02:21 PM   #3 (permalink)
Registered User
 
Join Date: Nov 2003
Posts: 34
Andybebad is on a distinguished road
That would take longer
Andybebad is offline   Reply With Quote
Old 12-01-2003, 09:38 PM   #4 (permalink)
Guest
Guest
 
Posts: n/a
Hi Andy

I don't know much about MS FP but this can easily be done in Dreamweaver by simply inserting a layer positioned over the image and then just typing inside the layer.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text Over Image Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="Layer1" style="position:absolute; left:26px; top:59px; width:267px; height:84px; z-index:1; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-large; font-style: italic; color: #FFFF00;">This is My Text Over the Image</div>
<img src="myImage.jpg" width="332" height="161">
</body>
</html>
of course, you would position the layer where appropriate for your needs, which can be done manually via code view or by dragging/nudging in design view [in Dreamweaver].

The layer itself is: [you'd substitute your own variables] :

<div id="Layer1" style="position:absolute; left:26px; top:59px; width:267px; height:84px; z-index:1; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-large; font-style: italic; color: #FFFF00;">This is My Text Over the Image</div>

Like I said, I don't know if this will work correctly in FP and esp in that older ver, but I suppose it's worth a shot! Let us know if it works.
  Reply With Quote
Old 12-02-2003, 03:10 PM   #5 (permalink)
Registered User
 
Join Date: Nov 2003
Posts: 34
Andybebad is on a distinguished road
darn...
I don't have dreamweaver...
Andybebad is offline   Reply With Quote
Old 12-02-2003, 05:38 PM   #6 (permalink)
Guest
Guest
 
Posts: n/a
Hey, Andy, it works! Try it on a hand-coded .html page right on your desktop. drag some image to your desktop, and use that as your "MyImage.jpg"
<html>
<head>
<title>Text Over Image Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="Layer1" style="position:absolute; left:26px; top:59px; width:267px; height:84px; z-index:1; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-large; font-style: italic; color: #FFFF00;">This is My Text Over the Image</div>
<img src="myImage.jpg" width="332" height="161">
</body>
</html>
  Reply With Quote
Reply




Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Most Active Discussions

Recent Discussions

All times are GMT -6. The time now is 10:02 AM.