How to make a image over lap another? (Full Version)

All Forums >> [Web Development] >> Dreamweaver Help



Message

holy_smokes -> 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 -> 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>



holy_smokes -> 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 -> 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).



d a v e -> 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)?



TrudyD1474 -> 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 -> 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).



holy_smokes -> 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 -> 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.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
6.298828E-02