|
| |
|
|
holy_smokes
Posts: 19
Joined: 3/14/2007
Status: offline
 |
How to make a image over lap another? - 3/15/2007 9:26:07
Hi,
As the title says, I want to over lap one image with another in dreamwearver 8. As well as type text over an image.
I’m sure this is possible, how is this done?
All help appreciated
Cheers
|
|
|
|
Tailslide
Posts: 5948
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: How to make a image over lap another? - 3/15/2007 10:53:50
I don't have DW so I can't tell you how to do it using a WYSIWYG editor - but if you're happy going into the code...
You need to create a container for all this - for argument's sake I'll call it #box
Stick the images and the text in there. Give them all ids so we can deal with them in the stylesheet.
In the stylesheet, create a rule for the #box div. Make it "position:relative;".
Now make a rule for each of the images and the text. Make them all position:absolute and position them using top:whatever; left:whatever; or right:whatever.
Give the images and text z:indexes with the text having the highest, the image overlapping the other image the next highest and the image underneath the lowest. That should do it.
Like this:
<style type="text/css">
<!--
#box {border:1px solid; width:500px; height:600px;position:relative;}
#topimage {position:absolute; top:50px; left:50px; z:index:10;}
#bottomimage {position:absolute; top:0; left:0; z:index:5;}
#text {position:absolute; top:200px; left:200px; z:index:20;}
-->
</style>
</head>
<body>
<div id="box">
<img id="bottomimage" alt="whatever" src="pic1.jpg" height="400" width="400" />
<img id="topimage" alt="whatever" src="pic2.jpg" height="200" width="200" />
<p id="text">Hello World!</p>
</div>
</body>
</html>
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
holy_smokes
Posts: 19
Joined: 3/14/2007
Status: offline
|
RE: How to make a image over lap another? - 3/15/2007 13:56:45
Hi, Thanks that worked pritty easy. wot does the bit in red below mean?
When i insert a pic into dw this is the code that appears
<img src="file:///F....... (<---- DW code for pic)
Just wondered what the difference was between them ("src" and "id"?) <img src="file:///F...and <img id="file:///F....
I tried them both and they both work, just wondering the difference
| |
|
|
|
Tailslide
Posts: 5948
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: How to make a image over lap another? - 3/15/2007 14:42:41
"src" is the source of the image - it tells the browser where to go look for the image. ID is the unique identifier that you're applying to it so that you can order it around the place via the stylesheets (you can pretty much give anything an ID - divs, lists, photos, paragraphs etc).
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
d a v e
Posts: 4041
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: How to make a image over lap another? - 3/15/2007 15:25:47
or why not make one image in an image editor from two overlapping images (i.e. combine them int he image editor so they overlap)?
_____________________________
David Prescott
Gekko web design
| |
|
|
|
TrudyD1474
Posts: 89
Joined: 4/26/2006
From: Trudy Doolittle
Status: offline
|
RE: How to make a image over lap another? - 3/16/2007 10:49:13
I'm new to Dreamweaver, but here is what I've done. I put the banner background in using CSS. Then I added a LAYER over the banner. Inside the layer I put my button using the the insert image object> rollover image. It worked just great. You can put layers over layers too.
Trudy
| |
|
|
|
Tailslide
Posts: 5948
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: How to make a image over lap another? - 3/16/2007 15:17:13
layers are just divs - DW and FP misleadingly label them "layers". The thing is that ideally you don't want to add extra markup for no reason - so if you can do it without adding lots of extra divs then it's got to be better (less code - less chance of things going wrong).
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
holy_smokes
Posts: 19
Joined: 3/14/2007
Status: offline
|
RE: How to make a image over lap another? - 3/18/2007 20:59:14
Thanks guys, im starting to get used to how all the html code and div tags work. Another question i have is what does this code below mean?
z:index:20;}
Also how to i get rid of the shadow like effect around the text (margin 19px)?
cheers
| |
|
|
|
Tailslide
Posts: 5948
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: How to make a image over lap another? - 3/19/2007 2:54:08
the z:index indicates the height of the object relative to other objects from the page - the higher the z:index, the higher up from the page the object (i.e. it will overlap something with a lower z:index). This only works on positioned items (possibly only absolutely positioned items).
Don't know what the shadow effect you're talking about is without seeing it. Margins won't create shadows. There is a CSS text-shadow effect but that only works in Safari so you'll need to show us your code (preferably live) for us to see.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
