Float text or tables

codeex

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

nomad

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

KevinADC

Are you asking how to do it with photoshop or usng html/css?

codeex

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

KevinADC

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.

codeex

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

 <html>

<head>

<title>testpage2</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<!-- ImageReady Preload Script (testpage2.psd) -->

<script type="text/javascript">

<!--
 
function newImage(arg) {

    if (document.images) {

        rslt = new Image();

        rslt.src = arg;

        return rslt;

    }

}
 
function changeImages() {

    if (document.images && (preloadFlag == true)) {

        for (var i=0; i<changeImages.arguments.length; i+=2) {

            document[changeImages.arguments[i]].src = changeImages.arguments[i+1];

        }

    }

}
 
var preloadFlag = false;

function preloadImages() {

    if (document.images) {

        HOME_over = newImage("images/HOME-over.gif");

        ABOUT_over = newImage("images/ABOUT-over.gif");

        OC_over = newImage("images/OC-over.gif");

        PS_over = newImage("images/PS-over.gif");

        PHOTOS_over = newImage("images/PHOTOS-over.gif");

        NEW_over = newImage("images/NEW-over.gif");

        SERVICES_over = newImage("images/SERVICES-over.gif");

        GALLERY_over = newImage("images/GALLERY-over.gif");

        FAQ_over = newImage("images/FAQ-over.gif");

        CONTACT_over = newImage("images/CONTACT-over.gif");

        preloadFlag = true;

    }

}
 
// -->

</script>

<!-- End Preload Script -->

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">

<!-- ImageReady Slices (testpage2.psd) -->

<table id="Table_01" width="1001" height="1250" border="0" cellpadding="0" cellspacing="0">

    <tr>

        <td colspan="5">

            <img src="images/home_01.gif" width="1000" height="129" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="129" alt=""></td>

    </tr>

    <tr>

        <td colspan="4">

            <a href="home.html"

                onmouseover="changeImages('HOME', 'images/HOME-over.gif'); return true;"

                onmouseout="changeImages('HOME', 'images/HOME.gif'); return true;"

                onmousedown="changeImages('HOME', 'images/HOME-over.gif'); return true;"

                onmouseup="changeImages('HOME', 'images/HOME-over.gif'); return true;">

                <img name="HOME" src="images/HOME.gif" width="155" height="29" border="0" alt=""></a></td>

        <td rowspan="14">

            <img src="images/home_03.gif" width="845" height="1121" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="29" alt=""></td>

    </tr>

    <tr>

        <td colspan="4">

            <a href="about.html"

                onmouseover="changeImages('ABOUT', 'images/ABOUT-over.gif'); return true;"

                onmouseout="changeImages('ABOUT', 'images/ABOUT.gif'); return true;"

                onmousedown="changeImages('ABOUT', 'images/ABOUT-over.gif'); return true;"

                onmouseup="changeImages('ABOUT', 'images/ABOUT-over.gif'); return true;">

                <img name="ABOUT" src="images/ABOUT.gif" width="155" height="30" border="0" alt=""></a></td>

        <td>

            <img src="images/spacer.gif" width="1" height="30" alt=""></td>

    </tr>

    <tr>

        <td colspan="3">

            <a href="#"

                onmouseover="changeImages('OC', 'images/OC-over.gif'); return true;"

                onmouseout="changeImages('OC', 'images/OC.gif'); return true;"

                onmousedown="changeImages('OC', 'images/OC-over.gif'); return true;"

                onmouseup="changeImages('OC', 'images/OC-over.gif'); return true;">

                <img name="OC" src="images/OC.gif" width="154" height="54" border="0" alt=""></a></td>

        <td rowspan="12">

            <img src="images/home_06.gif" width="1" height="1062" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="54" alt=""></td>

    </tr>

    <tr>

        <td colspan="3">

            <img src="images/home_07.gif" width="154" height="1" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="1" alt=""></td>

    </tr>

    <tr>

        <td colspan="2">

            <a href="#"

                onmouseover="changeImages('PS', 'images/PS-over.gif'); return true;"

                onmouseout="changeImages('PS', 'images/PS.gif'); return true;"

                onmousedown="changeImages('PS', 'images/PS-over.gif'); return true;"

                onmouseup="changeImages('PS', 'images/PS-over.gif'); return true;">

                <img name="PS" src="images/PS.gif" width="153" height="56" border="0" alt=""></a></td>

        <td rowspan="10">

            <img src="images/home_09.gif" width="1" height="1007" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="56" alt=""></td>

    </tr>

    <tr>

        <td colspan="2">

            <a href="photo.html"

                onmouseover="changeImages('PHOTOS', 'images/PHOTOS-over.gif'); return true;"

                onmouseout="changeImages('PHOTOS', 'images/PHOTOS.gif'); return true;"

                onmousedown="changeImages('PHOTOS', 'images/PHOTOS-over.gif'); return true;"

                onmouseup="changeImages('PHOTOS', 'images/PHOTOS-over.gif'); return true;">

                <img name="PHOTOS" src="images/PHOTOS.gif" width="153" height="43" border="0" alt=""></a></td>

        <td>

            <img src="images/spacer.gif" width="1" height="43" alt=""></td>

    </tr>

    <tr>

        <td>

            <a href="#"

                onmouseover="changeImages('NEW', 'images/NEW-over.gif'); return true;"

                onmouseout="changeImages('NEW', 'images/NEW.gif'); return true;"

                onmousedown="changeImages('NEW', 'images/NEW-over.gif'); return true;"

                onmouseup="changeImages('NEW', 'images/NEW-over.gif'); return true;">

                <img name="NEW" src="images/NEW.gif" width="152" height="36" border="0" alt=""></a></td>

        <td rowspan="2">

            <img src="images/home_12.gif" width="1" height="37" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="36" alt=""></td>

    </tr>

    <tr>

        <td>

            <img src="images/home_13.gif" width="152" height="1" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="1" alt=""></td>

    </tr>

    <tr>

        <td colspan="2">

            <a href="#"

                onmouseover="changeImages('SERVICES', 'images/SERVICES-over.gif'); return true;"

                onmouseout="changeImages('SERVICES', 'images/SERVICES.gif'); return true;"

                onmousedown="changeImages('SERVICES', 'images/SERVICES-over.gif'); return true;"

                onmouseup="changeImages('SERVICES', 'images/SERVICES-over.gif'); return true;">

                <img name="SERVICES" src="images/SERVICES.gif" width="153" height="34" border="0" alt=""></a></td>

        <td>

            <img src="images/spacer.gif" width="1" height="34" alt=""></td>

    </tr>

    <tr>

        <td rowspan="2">

            <a href="#"

                onmouseover="changeImages('GALLERY', 'images/GALLERY-over.gif'); return true;"

                onmouseout="changeImages('GALLERY', 'images/GALLERY.gif'); return true;"

                onmousedown="changeImages('GALLERY', 'images/GALLERY-over.gif'); return true;"

                onmouseup="changeImages('GALLERY', 'images/GALLERY-over.gif'); return true;">

                <img name="GALLERY" src="images/GALLERY.gif" width="152" height="34" border="0" alt=""></a></td>

        <td>

            <a href="#"

                onmouseover="changeImages('SERVICES', 'images/SERVICES-over.gif'); return true;"

                onmouseout="changeImages('SERVICES', 'images/SERVICES.gif'); return true;"

                onmousedown="changeImages('SERVICES', 'images/SERVICES-over.gif'); return true;"

                onmouseup="changeImages('SERVICES', 'images/SERVICES-over.gif'); return true;">

                <img src="images/SERVICES-25.gif" width="1" height="1" border="0" alt=""></a></td>

        <td>

            <img src="images/spacer.gif" width="1" height="1" alt=""></td>

    </tr>

    <tr>

        <td rowspan="4">

            <img src="images/home_17.gif" width="1" height="836" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="33" alt=""></td>

    </tr>

    <tr>

        <td>

            <a href="#"

                onmouseover="changeImages('FAQ', 'images/FAQ-over.gif'); return true;"

                onmouseout="changeImages('FAQ', 'images/FAQ.gif'); return true;"

                onmousedown="changeImages('FAQ', 'images/FAQ-over.gif'); return true;"

                onmouseup="changeImages('FAQ', 'images/FAQ-over.gif'); return true;">

                <img name="FAQ" src="images/FAQ.gif" width="152" height="35" border="0" alt=""></a></td>

        <td>

            <img src="images/spacer.gif" width="1" height="35" alt=""></td>

    </tr>

    <tr>

        <td>

            <a href="#"

                onmouseover="changeImages('CONTACT', 'images/CONTACT-over.gif'); return true;"

                onmouseout="changeImages('CONTACT', 'images/CONTACT.gif'); return true;"

                onmousedown="changeImages('CONTACT', 'images/CONTACT-over.gif'); return true;"

                onmouseup="changeImages('CONTACT', 'images/CONTACT-over.gif'); return true;">

                <img name="CONTACT" src="images/CONTACT.gif" width="152" height="36" border="0" alt=""></a></td>

        <td>

            <img src="images/spacer.gif" width="1" height="36" alt=""></td>

    </tr>

    <tr>

        <td>

            <img src="images/home_20.gif" width="152" height="732" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="732" alt=""></td>

    </tr>

</table>

<!-- End ImageReady Slices -->

</body>

</html>

KevinADC

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

drhowarddrfine

One of a hundred reasons why you should never use tables for layout.

Float text or tables

Post your reply

Similar topics