Float text or tables

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

Subscribe Post Reply

3148

nomad

664

Expert 512MB

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

4,059

Expert 2GB

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

Apr 12 '07 #3

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

Apr 12 '07 #4

KevinADC

4,059

Expert 2GB

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

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>

Apr 13 '07 #6

KevinADC

4,059

Expert 2GB

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

7,435

Expert 4TB

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

Apr 13 '07 #8

Similar topics

float not formatting like table

by: Robert | last post by:

I created two pages. One using CSS and the other using a table. I'd like the css version to work like the table version. The problem arises when the full image doesn't fit in the window. Click...

HTML / CSS

Possible Firefox bug: float:right and tables

by: Jesper Rønn-Jensen | last post by:

Hope you can help me out on this one. I have a a box that is floated right. Below (in the normal float) I have a wide table. <body> <div style="float:right; width:200px">...</div> <p>This...

HTML / CSS

IE6 doesnt extend the DIV box height so that float would be enclosedvisually by DIV

by: Marek Mänd | last post by:

I have simple structure like: <div> <h3 style="text-align:center;"> <span style="float:right;">input type="image"/></span> <span style="float:left;">input type="image"/></span> boxes titlebar...

HTML / CSS

Why float?

by: Wolfgang Meier | last post by:

Hi, Although it might seem like I am firing out random posts in quick succession this matter is indeed one I thought about for quite some time without coming to a conclusion: Why is it that...

HTML / CSS

weird problems with float and double : Why 262.4 - 313.83 = -51.4299927 ???

by: Matthieu Tudury | last post by:

Hi, i got a weird problem with decimal numbers, Here is a test sample : float a, b, c; double da, db, dc; da = 313.83; db = 262.4; dc = db -da;

.NET Framework

Catch 22 with float left & center horizontally

by: McGeeky | last post by:

Hi. I am using DIVs for lay outs rather than tables but cannot resolve a catch 22. I need to use the float: left so that I can get DIVs to line up in rows however, float : left does not respect the...

ASP.NET

Float Left TeaxtAlign Center

by: Dessip | last post by:

Hey, The code that follows im having problems with, i think tis the CSS, but i dont have a clue of fixing it, i have tried any things but without the float:Left there is no point the folloing...

HTML / CSS

IE7 table float problem

by: Harry | last post by:

Using IE7, I'm trying to display a table in a horizontal manner by floating the rows. The following html does not work, displaying the table vertically as if the rows were not floated. This same...

HTML / CSS

CSS Float & Table Won't Play Nicely

by: shannona | last post by:

I've been banging my head against an interaction between a table and float element. I want the two of them to together take up 100% of the width of their container. If the table cells' content...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General