By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,773 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > html / css > questions > float text or tables
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

Float text or tables

P: 24
I have desiged a web page with adobe photoshop..but im trying to figure out how i can float text or tables on top of what have already done with making the images shift. If there is a way to make it float it would be greatly appreciatied.

the url of the page im developing is Link

thank you
Apr 12 '07 #1
Share this Question
Share on Google+
7 Replies
nomad
Expert 100+
P: 664
What do you mean by float.

The only way I can think of is
1. first have your background Transparent.
2. add layers (F11) to your project.
with layers you can build images, text on top of each other.

nomad
Apr 12 '07 #2
KevinADC
Expert 2.5K+
P: 4,059
Are you asking how to do it with photoshop or usng html/css?
Apr 12 '07 #3
P: 24
i want to make it text so when people use search engines it will pop up. with photoshop it will make it an image and the search engines wont pick it up. so im trying to figure out how to place text, and a few tables on the page itself with out moving the other tables i already have on there.
thank you
Apr 12 '07 #4
KevinADC
Expert 2.5K+
P: 4,059
normally if you want to display text over an image you make the image the back-ground of whatever element it is in. You need to read some HTML/CSS resources and get some knowledge about basic HTML/CSS syntax and such.
Apr 12 '07 #5
P: 24
I know basic html. i thought there was a way to position text on your page with disturbing the other elemets. this is the code i have so far. the problem is when i add text to it, all my images move and make it look horrible.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>testpage2</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <!-- ImageReady Preload Script (testpage2.psd) -->
  6. <script type="text/javascript">
  7. <!--
  8.  
  9. function newImage(arg) {
  10.     if (document.images) {
  11.         rslt = new Image();
  12.         rslt.src = arg;
  13.         return rslt;
  14.     }
  15. }
  16.  
  17. function changeImages() {
  18.     if (document.images && (preloadFlag == true)) {
  19.         for (var i=0; i<changeImages.arguments.length; i+=2) {
  20.             document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
  21.         }
  22.     }
  23. }
  24.  
  25. var preloadFlag = false;
  26. function preloadImages() {
  27.     if (document.images) {
  28.         HOME_over = newImage("images/HOME-over.gif");
  29.         ABOUT_over = newImage("images/ABOUT-over.gif");
  30.         OC_over = newImage("images/OC-over.gif");
  31.         PS_over = newImage("images/PS-over.gif");
  32.         PHOTOS_over = newImage("images/PHOTOS-over.gif");
  33.         NEW_over = newImage("images/NEW-over.gif");
  34.         SERVICES_over = newImage("images/SERVICES-over.gif");
  35.         GALLERY_over = newImage("images/GALLERY-over.gif");
  36.         FAQ_over = newImage("images/FAQ-over.gif");
  37.         CONTACT_over = newImage("images/CONTACT-over.gif");
  38.         preloadFlag = true;
  39.     }
  40. }
  41.  
  42. // -->
  43. </script>
  44. <!-- End Preload Script -->
  45. </head>
  46. <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
  47. <!-- ImageReady Slices (testpage2.psd) -->
  48. <table id="Table_01" width="1001" height="1250" border="0" cellpadding="0" cellspacing="0">
  49.     <tr>
  50.         <td colspan="5">
  51.             <img src="images/home_01.gif" width="1000" height="129" alt=""></td>
  52.         <td>
  53.             <img src="images/spacer.gif" width="1" height="129" alt=""></td>
  54.     </tr>
  55.     <tr>
  56.         <td colspan="4">
  57.             <a href="home.html"
  58.                 onmouseover="changeImages('HOME', 'images/HOME-over.gif'); return true;"
  59.                 onmouseout="changeImages('HOME', 'images/HOME.gif'); return true;"
  60.                 onmousedown="changeImages('HOME', 'images/HOME-over.gif'); return true;"
  61.                 onmouseup="changeImages('HOME', 'images/HOME-over.gif'); return true;">
  62.                 <img name="HOME" src="images/HOME.gif" width="155" height="29" border="0" alt=""></a></td>
  63.         <td rowspan="14">
  64.             <img src="images/home_03.gif" width="845" height="1121" alt=""></td>
  65.         <td>
  66.             <img src="images/spacer.gif" width="1" height="29" alt=""></td>
  67.     </tr>
  68.     <tr>
  69.         <td colspan="4">
  70.             <a href="about.html"
  71.                 onmouseover="changeImages('ABOUT', 'images/ABOUT-over.gif'); return true;"
  72.                 onmouseout="changeImages('ABOUT', 'images/ABOUT.gif'); return true;"
  73.                 onmousedown="changeImages('ABOUT', 'images/ABOUT-over.gif'); return true;"
  74.                 onmouseup="changeImages('ABOUT', 'images/ABOUT-over.gif'); return true;">
  75.                 <img name="ABOUT" src="images/ABOUT.gif" width="155" height="30" border="0" alt=""></a></td>
  76.         <td>
  77.             <img src="images/spacer.gif" width="1" height="30" alt=""></td>
  78.     </tr>
  79.     <tr>
  80.         <td colspan="3">
  81.             <a href="#"
  82.                 onmouseover="changeImages('OC', 'images/OC-over.gif'); return true;"
  83.                 onmouseout="changeImages('OC', 'images/OC.gif'); return true;"
  84.                 onmousedown="changeImages('OC', 'images/OC-over.gif'); return true;"
  85.                 onmouseup="changeImages('OC', 'images/OC-over.gif'); return true;">
  86.                 <img name="OC" src="images/OC.gif" width="154" height="54" border="0" alt=""></a></td>
  87.         <td rowspan="12">
  88.             <img src="images/home_06.gif" width="1" height="1062" alt=""></td>
  89.         <td>
  90.             <img src="images/spacer.gif" width="1" height="54" alt=""></td>
  91.     </tr>
  92.     <tr>
  93.         <td colspan="3">
  94.             <img src="images/home_07.gif" width="154" height="1" alt=""></td>
  95.         <td>
  96.             <img src="images/spacer.gif" width="1" height="1" alt=""></td>
  97.     </tr>
  98.     <tr>
  99.         <td colspan="2">
  100.             <a href="#"
  101.                 onmouseover="changeImages('PS', 'images/PS-over.gif'); return true;"
  102.                 onmouseout="changeImages('PS', 'images/PS.gif'); return true;"
  103.                 onmousedown="changeImages('PS', 'images/PS-over.gif'); return true;"
  104.                 onmouseup="changeImages('PS', 'images/PS-over.gif'); return true;">
  105.                 <img name="PS" src="images/PS.gif" width="153" height="56" border="0" alt=""></a></td>
  106.         <td rowspan="10">
  107.             <img src="images/home_09.gif" width="1" height="1007" alt=""></td>
  108.         <td>
  109.             <img src="images/spacer.gif" width="1" height="56" alt=""></td>
  110.     </tr>
  111.     <tr>
  112.         <td colspan="2">
  113.             <a href="photo.html"
  114.                 onmouseover="changeImages('PHOTOS', 'images/PHOTOS-over.gif'); return true;"
  115.                 onmouseout="changeImages('PHOTOS', 'images/PHOTOS.gif'); return true;"
  116.                 onmousedown="changeImages('PHOTOS', 'images/PHOTOS-over.gif'); return true;"
  117.                 onmouseup="changeImages('PHOTOS', 'images/PHOTOS-over.gif'); return true;">
  118.                 <img name="PHOTOS" src="images/PHOTOS.gif" width="153" height="43" border="0" alt=""></a></td>
  119.         <td>
  120.             <img src="images/spacer.gif" width="1" height="43" alt=""></td>
  121.     </tr>
  122.     <tr>
  123.         <td>
  124.             <a href="#"
  125.                 onmouseover="changeImages('NEW', 'images/NEW-over.gif'); return true;"
  126.                 onmouseout="changeImages('NEW', 'images/NEW.gif'); return true;"
  127.                 onmousedown="changeImages('NEW', 'images/NEW-over.gif'); return true;"
  128.                 onmouseup="changeImages('NEW', 'images/NEW-over.gif'); return true;">
  129.                 <img name="NEW" src="images/NEW.gif" width="152" height="36" border="0" alt=""></a></td>
  130.         <td rowspan="2">
  131.             <img src="images/home_12.gif" width="1" height="37" alt=""></td>
  132.         <td>
  133.             <img src="images/spacer.gif" width="1" height="36" alt=""></td>
  134.     </tr>
  135.     <tr>
  136.         <td>
  137.             <img src="images/home_13.gif" width="152" height="1" alt=""></td>
  138.         <td>
  139.             <img src="images/spacer.gif" width="1" height="1" alt=""></td>
  140.     </tr>
  141.     <tr>
  142.         <td colspan="2">
  143.             <a href="#"
  144.                 onmouseover="changeImages('SERVICES', 'images/SERVICES-over.gif'); return true;"
  145.                 onmouseout="changeImages('SERVICES', 'images/SERVICES.gif'); return true;"
  146.                 onmousedown="changeImages('SERVICES', 'images/SERVICES-over.gif'); return true;"
  147.                 onmouseup="changeImages('SERVICES', 'images/SERVICES-over.gif'); return true;">
  148.                 <img name="SERVICES" src="images/SERVICES.gif" width="153" height="34" border="0" alt=""></a></td>
  149.         <td>
  150.             <img src="images/spacer.gif" width="1" height="34" alt=""></td>
  151.     </tr>
  152.     <tr>
  153.         <td rowspan="2">
  154.             <a href="#"
  155.                 onmouseover="changeImages('GALLERY', 'images/GALLERY-over.gif'); return true;"
  156.                 onmouseout="changeImages('GALLERY', 'images/GALLERY.gif'); return true;"
  157.                 onmousedown="changeImages('GALLERY', 'images/GALLERY-over.gif'); return true;"
  158.                 onmouseup="changeImages('GALLERY', 'images/GALLERY-over.gif'); return true;">
  159.                 <img name="GALLERY" src="images/GALLERY.gif" width="152" height="34" border="0" alt=""></a></td>
  160.         <td>
  161.             <a href="#"
  162.                 onmouseover="changeImages('SERVICES', 'images/SERVICES-over.gif'); return true;"
  163.                 onmouseout="changeImages('SERVICES', 'images/SERVICES.gif'); return true;"
  164.                 onmousedown="changeImages('SERVICES', 'images/SERVICES-over.gif'); return true;"
  165.                 onmouseup="changeImages('SERVICES', 'images/SERVICES-over.gif'); return true;">
  166.                 <img src="images/SERVICES-25.gif" width="1" height="1" border="0" alt=""></a></td>
  167.         <td>
  168.             <img src="images/spacer.gif" width="1" height="1" alt=""></td>
  169.     </tr>
  170.     <tr>
  171.         <td rowspan="4">
  172.             <img src="images/home_17.gif" width="1" height="836" alt=""></td>
  173.         <td>
  174.             <img src="images/spacer.gif" width="1" height="33" alt=""></td>
  175.     </tr>
  176.     <tr>
  177.         <td>
  178.             <a href="#"
  179.                 onmouseover="changeImages('FAQ', 'images/FAQ-over.gif'); return true;"
  180.                 onmouseout="changeImages('FAQ', 'images/FAQ.gif'); return true;"
  181.                 onmousedown="changeImages('FAQ', 'images/FAQ-over.gif'); return true;"
  182.                 onmouseup="changeImages('FAQ', 'images/FAQ-over.gif'); return true;">
  183.                 <img name="FAQ" src="images/FAQ.gif" width="152" height="35" border="0" alt=""></a></td>
  184.         <td>
  185.             <img src="images/spacer.gif" width="1" height="35" alt=""></td>
  186.     </tr>
  187.     <tr>
  188.         <td>
  189.             <a href="#"
  190.                 onmouseover="changeImages('CONTACT', 'images/CONTACT-over.gif'); return true;"
  191.                 onmouseout="changeImages('CONTACT', 'images/CONTACT.gif'); return true;"
  192.                 onmousedown="changeImages('CONTACT', 'images/CONTACT-over.gif'); return true;"
  193.                 onmouseup="changeImages('CONTACT', 'images/CONTACT-over.gif'); return true;">
  194.                 <img name="CONTACT" src="images/CONTACT.gif" width="152" height="36" border="0" alt=""></a></td>
  195.         <td>
  196.             <img src="images/spacer.gif" width="1" height="36" alt=""></td>
  197.     </tr>
  198.     <tr>
  199.         <td>
  200.             <img src="images/home_20.gif" width="152" height="732" alt=""></td>
  201.         <td>
  202.             <img src="images/spacer.gif" width="1" height="732" alt=""></td>
  203.     </tr>
  204. </table>
  205. <!-- End ImageReady Slices -->
  206. </body>
  207. </html>
Apr 13 '07 #6
KevinADC
Expert 2.5K+
P: 4,059
thats because your webpage is one big table and the images are all contents of a table cell instead of being the back-ground property of the cell. Makes the image(s) the back-ground property of the cell you want the text to display over the image.

background-image
Apr 13 '07 #7
drhowarddrfine
Expert 5K+
P: 7,435
One of a hundred reasons why you should never use tables for layout.
Apr 13 '07 #8

Post your reply

Sign in to post your reply or Sign up for a free account.

Question stats

  • viewed: 2753
  • replies: 7
  • date asked: Apr 12 '07
BYTES.COM © 2019 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | HTML / CSS Answers Sitemap | HTML / CSS Insights Sitemap

Follow us to get the Latest Bytes Updates