Text over images

Aaron1988 · #1 Mar 25th, 2007, 07:21

hi i have made a photoshop template and sliced the images up this is my code

<html>
<head>
<title>layout83</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (layout83.psd) -->
<table id="Table_01" width="760" height="771" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td colspan="11">
   <img src="http://www.webforumz.com/images/index_01.jpg" width="760" height="29" alt=""></td>
 </tr>
 <tr>
  <td colspan="2" rowspan="5">
   <img src="http://www.webforumz.com/images/index_02.jpg" width="52" height="532" alt=""></td>
  <td colspan="8">
   <img src="http://www.webforumz.com/images/Header.jpg" width="658" height="189" alt=""></td>
  <td rowspan="9">
   <img src="http://www.webforumz.com/images/index_04.jpg" width="50" height="741" alt=""></td>
 </tr>
 <tr>
  <td colspan="3">
   <img src="http://www.webforumz.com/images/latest-news.jpg" width="324" height="113" alt=""></td>
  <td rowspan="5">
   <img src="http://www.webforumz.com/images/index_06.jpg" width="10" height="455" alt=""></td>
  <td colspan="2">
   <img src="http://www.webforumz.com/images/Right-Menu.jpg" width="322" height="113" alt=""></td>
  <td colspan="2" rowspan="2">
   <img src="http://www.webforumz.com/images/index_08.jpg" width="2" height="120" alt=""></td>
 </tr>
 <tr>
  <td colspan="3">
   <img src="http://www.webforumz.com/images/index_09.jpg" width="324" height="7" alt=""></td>
  <td colspan="2">
   <img src="http://www.webforumz.com/images/index_10.jpg" width="322" height="7" alt=""></td>
 </tr>
 <tr>
  <td colspan="2">
   <img src="http://www.webforumz.com/images/about-us.jpg" width="322" height="216" alt=""></td>
  <td rowspan="3">
   <img src="http://www.webforumz.com/images/index_12.jpg" width="2" height="335" alt=""></td>
  <td colspan="3">
   <img src="http://www.webforumz.com/images/right-menu-14.jpg" width="323" height="216" alt=""></td>
  <td rowspan="2">
   <img src="http://www.webforumz.com/images/index_14.jpg" width="1" height="223" alt=""></td>
 </tr>
 <tr>
  <td colspan="2">
   <img src="http://www.webforumz.com/images/index_15.jpg" width="322" height="7" alt=""></td>
  <td colspan="3">
   <img src="http://www.webforumz.com/images/index_16.jpg" width="323" height="7" alt=""></td>
 </tr>
 <tr>
  <td rowspan="4">
   <img src="http://www.webforumz.com/images/index_17.jpg" width="51" height="209" alt=""></td>
  <td colspan="3">
   <img src="http://www.webforumz.com/images/other-menu.jpg" width="323" height="112" alt=""></td>
  <td colspan="4">
   <img src="http://www.webforumz.com/images/contact-us.jpg" width="324" height="112" alt=""></td>
 </tr>
 <tr>
  <td colspan="2" rowspan="2">
   <img src="http://www.webforumz.com/images/other-menu-21.jpg" width="222" height="22" alt=""></td>
  <td colspan="4">
   <img src="http://www.webforumz.com/images/copyright.jpg" width="218" height="21" alt=""></td>
  <td colspan="3" rowspan="2">
   <img src="http://www.webforumz.com/images/contact-us-23.jpg" width="219" height="22" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="http://www.webforumz.com/images/other-menu-24.jpg" width="101" height="1" alt=""></td>
  <td colspan="2" rowspan="2">
   <img src="http://www.webforumz.com/images/index_24.jpg" width="12" height="76" alt=""></td>
  <td>
   <img src="http://www.webforumz.com/images/contact-us-26.jpg" width="105" height="1" alt=""></td>
 </tr>
 <tr>
  <td colspan="3">
   <img src="http://www.webforumz.com/images/index_26.jpg" width="323" height="75" alt=""></td>
  <td colspan="4">
   <img src="http://www.webforumz.com/images/index_27.jpg" width="324" height="75" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="http://www.webforumz.com/images/spacer.gif" width="51" height="1" alt=""></td>
  <td>
   <img src="http://www.webforumz.com/images/spacer.gif" width="1" height="1" alt=""></td>
  <td>
   <img src="http://www.webforumz.com/images/spacer.gif" width="221" height="1" alt=""></td>
  <td>
   <img src="http://www.webforumz.com/images/spacer.gif" width="101" height="1" alt=""></td>
  <td>
   <img src="http://www.webforumz.com/images/spacer.gif" width="2" height="1" alt=""></td>
  <td>
   <img src="http://www.webforumz.com/images/spacer.gif" width="10" height="1" alt=""></td>
  <td>
   <img src="http://www.webforumz.com/images/spacer.gif" width="105" height="1" alt=""></td>
  <td>
   <img src="http://www.webforumz.com/images/spacer.gif" width="217" height="1" alt=""></td>
  <td>
   <img src="http://www.webforumz.com/images/spacer.gif" width="1" height="1" alt=""></td>
  <td>
   <img src="http://www.webforumz.com/images/spacer.gif" width="1" height="1" alt=""></td>
  <td>
   <img src="http://www.webforumz.com/images/spacer.gif" width="50" height="1" alt=""></td>
 </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

well what i wanted done was on say for example on the index_01.jpg image i wanted to put text over that image how could i do that please
i have tried few ways but havent conceded

Thanks
Aaron

Lchad · #2 Mar 25th, 2007, 12:07

You will need to make each one of the images part of the table row or table cell background. You will need to specify width and height so the cell expands to the width of the image.

Then that leaves all your cells available to fill with text and links.
The code would look something like this for index_01.jpg:

Code: Select all

<td height="29" colspan="11" background=""http://www.webforumz.com/images/index_01.jpg""></td>

Now... Aaron, that's the old fashion way of designing. Since you are just starting this project, why don't you slice that image differently and design it with css. After doing one site with xhtml/css you'll have a decent working knowledge.. Honest.. give it a try!
Linda

Aaron1988 · #3 Mar 25th, 2007, 15:17

Ok cheers linda also can i add css to a photoshop template if i "save for web"?

Thanks
Aaron

Lchad · #4 Mar 25th, 2007, 18:02

I don't know... someone will have to answer that.

Ryan Fait · #5 Mar 25th, 2007, 22:39

To use CSS to its best, you'll have to hand code. I'm in agreement with Linda, though, you should start getting into modern coding. You've been here long enough!

Aaron1988 · #6 Mar 25th, 2007, 23:12

yuh ok mate well i know little CSS lol but i am just trying to get a layout done for my footie team

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
The Best way to display Images and text	thewebkid	Website Planning	7	Nov 19th, 2007 13:56
Positioning Text, Links and Images	DregondRahl	Web Page Design	4	Jun 7th, 2007 11:34
Lining Text With Images	coastercraverjim	Web Page Design	6	Jan 5th, 2006 00:16
Two columns of text next to images	csa	Web Page Design	6	Nov 27th, 2005 17:21
Images behind text	therussian	Flash & Multimedia Forum	2	Aug 21st, 2003 15:28

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Text over images