Discussion:
Placing text over a background image?
(too old to reply)
wtango1
2006-10-11 01:56:35 UTC
Permalink
I'm rather new to Dreamweaver...... and I was wondering how I would go about
placing text over an image?

The background of my website is a large image that's sliced and takes up
almost the whole page. I left a blank space on that background image so I could
type live text over it. How do I type text over the top of the background image
in Dreamweaver? Seems like there should be a "layers" option, so I could place
a table over the top of an image. Is there a way to do this?

Let me know if you need to see the page to understand what I'm saying and I'll
post the url.
Nadia : *Adobe Community Expert*
2006-10-11 02:28:03 UTC
Permalink
Doing it the way you explain below, just won't work cross browser, also what
happens to the alignment of the image and the text when someone increase the
text size in the browser?? a blow up of your design I'm afraid.

Maybe if we saw the image you are trying to use, someone can come up with
other possible suggestions for you.
--
Nadia
Adobe® Community Expert : Dreamweaver
Skype: nadiaperre
-------------------------------------------------
Tutorials |SEO |Templates
http://www.DreamweaverResources.com
http://www.csstemplates.com.au
-------------------------------------------------
http://www.adobe.com/devnet/dreamweaver/css.html
CSS Tutorials for Dreamweaver
-------------------------------------------------
Post by wtango1
I'm rather new to Dreamweaver...... and I was wondering how I would go about
placing text over an image?
The background of my website is a large image that's sliced and takes up
almost the whole page. I left a blank space on that background image so I could
type live text over it. How do I type text over the top of the background image
in Dreamweaver? Seems like there should be a "layers" option, so I could place
a table over the top of an image. Is there a way to do this?
Let me know if you need to see the page to understand what I'm saying and I'll
post the url.
wtango1
2006-10-11 03:26:48 UTC
Permalink
Thanks.

I've pasted the link to my website below. When you look at it you will see
that the entire page is a sliced image that I created in Illustrator (including
text). None of the text is "live".

So, I want to delete the gray body text from the image and then type it all in
Dreamweaver so it's live. It's the text that begins with "experience.
innovation. creativity." and has the 3 paragraphs below it.

Any suggestions?

http://www.latitudetransport.com/
thozhayan
2006-10-11 08:26:45 UTC
Permalink
Slice the image and make site by using the sliced images. Otherwise you can
use CSS for making this image as background. Also you can put layer over image
and can type on the layer.

http://www.uploading.com/files/OICXRFI4/placing_text_over_image.zip.html

go through these files. I hope this will help you
: Nadia : **AdobeCommunityExpert**
2006-10-11 09:57:40 UTC
Permalink
"thozhayan" <***@gmail.com> wrote in message news:egi9s5$gm7$***@forums.macromedia.com...

Otherwise you can use CSS for making this image as background. Also you
can put layer over image
: and can type on the layer.


That's not the correct way to do it - using a layer over the top,
particularly if you mean layer as in Absolutely positioned div.
--
Nadia
Adobe® Community Expert : Dreamweaver
Skype: nadiaperre

Tutorials |SEO |Templates
http://www.DreamweaverResources.com
-----------------------------------------------
http://www.adobe.com/devnet/dreamweaver/css.html
CSS Tutorials for Dreamweaver
-------------------------------------------------
thozhayan
2006-10-12 01:30:05 UTC
Permalink
Thanks

: Nadia : **AdobeCommunityExpert**
2006-10-11 10:08:52 UTC
Permalink
That should be quite easy to do with either a table or css layout.... are
you comfortable with tables or css.

I would slice up the image, so that you had a header (the top rounded
header/logo area),
A middle content area -
and then the footer area.

It shouldn't be that difficult to set that all up using styled div.
A header div, a content div, an information div and a footer div.
You would use some of the slices as background images via your stylesheet.

If you don't understand what I've written above, then I strongly suggest
that you do a few CSS tutorials before proceeding any further It really is
not that difficult a design to convert to html.

I suggest that you do a few of the beginner CSS tutorials at the Adobe site,
starting here:
http://www.adobe.com/devnet/dreamweaver/css.html

Once you understand how to use slices and how to style the divs, things will
become much clearer in your mind on how to proceed.

Good Luck
--
Nadia
Adobe® Community Expert : Dreamweaver
Skype: nadiaperre
-----
Tutorials |SEO |Templates
http://www.DreamweaverResources.com
-------------------------------------------------
http://www.adobe.com/devnet/dreamweaver/css.html
CSS Tutorials for Dreamweaver
-------------------------------------------------


"wtango1" <***@macromedia.com> wrote in message news:egho9o$qn0$***@forums.macromedia.com...
: Thanks.
:
: I've pasted the link to my website below. When you look at it you will see
: that the entire page is a sliced image that I created in Illustrator
(including
: text). None of the text is "live".
:
: So, I want to delete the gray body text from the image and then type it
all in
: Dreamweaver so it's live. It's the text that begins with "experience.
: innovation. creativity." and has the 3 paragraphs below it.
:
: Any suggestions?
:
: http://www.latitudetransport.com/
:
wtango1
2006-10-11 10:56:10 UTC
Permalink
[q][i]Originally posted by: [b][b]Newsgroup User[/b][/b][/i]
That should be quite easy to do with either a table or css layout.... are
you comfortable with tables or css.

I would slice up the image, so that you had a header (the top rounded
header/logo area),
A middle content area -
and then the footer area.

It shouldn't be that difficult to set that all up using styled div.
A header div, a content div, an information div and a footer div.
You would use some of the slices as background images via your stylesheet.

If you don't understand what I've written above, then I strongly suggest
that you do a few CSS tutorials before proceeding any further It really is
not that difficult a design to convert to html.

I suggest that you do a few of the beginner CSS tutorials at the Adobe site,
starting here:
http://www.adobe.com/devnet/dreamweaver/css.html

Once you understand how to use slices and how to style the divs, things will
become much clearer in your mind on how to proceed.

Good Luck
-
Nadia
Adobe? Community Expert : Dreamweaver
Skype: nadiaperre
-----
[/q]


Thanks a lot!
PixelPerfectStudio
2006-10-11 10:20:34 UTC
Permalink
Just a quick question to your question. Why is the text in your image part of
the image? I see only three areas where the page needs an image:

Header
Left center
footer

The rest of the text can be put in a table. If you do your tables correctly
you can place your text where you need it.
wtango1
2006-10-11 10:53:20 UTC
Permalink
The whole page is an image because I'm just starting to learn Dreamweaver and
needed my site up quickly.

Since I'm very experienced in Illustrator and Photoshop, I built the entire
thing in those programs and just plopped the image into Dreamweaver. It was an
easy way to avoid all the stuff I don't know how to do. :)

But now that I have time, I'd like to correct my shortcuts and create the site
the "proper" way. Thanks!
Loading...