Text on top of image Dreamweaver CS3

LeeNic · #1 Oct 21st, 2007, 14:15

Hi, i have made an image in fireworks and have exported successfully to dreamweaver, i want to be able to put text over the top of the image without it adjusting the image or layout, i have tried a few diiferent pieces of code but everytime it just pushes the image around the page.

any ideas???????????????.

thanks

dab42pat · #2 Oct 21st, 2007, 14:22

why not just put the text onto your image in fireworks.

LeeNic · #3 Oct 21st, 2007, 14:23

becasue it needs to be updated regularly.

karinne · #4 Oct 21st, 2007, 14:29

Just apply the image as a background

dab42pat · #5 Oct 21st, 2007, 14:30

try this link.

http://www.htmlgoodies.com/tutorials...le.php/3480021

alexgeek · #6 Oct 21st, 2007, 14:34

Don't use that link, utilizes tables.
Do what Karinne said.

Marc · #7 Oct 21st, 2007, 16:25

You can use css:

CSS:

HTML: Select all

.background {
background-image:url(my image);
background-repeat: repeat-x/repeat-y/none (you choose!!);
}

HTML:

HTML: Select all

<div class="background">My text (above the background!)</div>

Hope this helps! It gives you a little example...

alexgeek · #8 Oct 21st, 2007, 16:30

To expand on Marc's code.

HTML: Select all

.background {
background-image:url(/images/image.jpg);
background-repeat: none; /*Only one image, so don't repeat it */
height: 200px; /*Height of the image */
width: 100px; /*width of the image */
}

The height and width properties are needed otherwise the div will only be bas big as the text inside it.

Marc · #9 Oct 21st, 2007, 16:33

New that code was a little short... lol

Cheers Alex!

Stuart · #10 Oct 22nd, 2007, 01:23

Quote:

Originally Posted by dab42pat

http://www.htmlgoodies.com/tutorials...le.php/3480021

This page also gives another alternative. Scroll down about halfway :: you'll find this:

HTML: Select all

<LAYER LEFT=250 TOP=500>
               <IMG SRC=newjoe02.gif>
               </LAYER>

               <LAYER LEFT=250 TOP=500>
               <IMG SRC=overtext.gif>
               </LAYER>

This is not the best way to do it. But layers are still good. Try this:

HTML: Select all

<head>
<style type="text/css">
<!--
#img-txt {
    position:absolute;
    top:200px; /* change to position vertically */
    left:115px; /* change to position horizontally */
    width:200px; /* width of "text box" */
    height:100px; /* height of "text box" */
    z-index:1;
}
-->
</style>
</head>

<body>
<img src="file.jpg" alt="" />
<div id="img-txt">Text</div>
</body>

The position:absolute will make the div "hover" over anything. If you do not like this suggestion, just ignore it

.

Cheers,
SWagner

Marc · #11 Oct 22nd, 2007, 07:55

In this example there are no good reasons to use layers... A div with a background will work fine i think

....

Stuart · #12 Oct 22nd, 2007, 12:53

Yes, you're probably right. I just wanted to give an alternative in case it is needed...

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Image with text -> text with background	alexgeek	Web Page Design	5	Nov 13th, 2007 23:25
Flash Text in Dreamweaver	paulab	Flash & Multimedia Forum	11	Oct 9th, 2007 14:19
formatting of text froma a dynamic table in dreamweaver	chimp	Databases	2	Jan 2nd, 2007 10:09
Dreamweaver Image Issue	rjcube	Web Page Design	4	Aug 8th, 2006 10:07
Fireworks to Dreamweaver - Text	Diablo	Web Page Design	3	Jan 24th, 2006 10:43

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Text on top of image Dreamweaver CS3