PDA

View Full Version : Overlaying Images


PaulRice
06-24-2011, 05:01 AM
Hello,

I'm brand new to Dreamweaver and have been doing a load of tutorials etc, and I've managed to figure mostly everything out (that I need for my site anyway) except for one thing: overlaying images.

It's a portfolio site I'm creating, and the main 'work' page is actually a large image created in Ps. The problem is I've created a lightbox gallery, and I want to place the lightbox gallery ontop of the 'background' image.

No matter what I do it places the images/gallery below or above the 'background' image. I've tried to look this up in various other places but can't find out how to do it! I found something similar on these forums but not really what I need.
In a perfect world I'd hope it would be a situation similar to inDesign (send to back, etc).

Any help at all would be so helpful,
Cheers!

edbr
06-24-2011, 05:25 AM
are you constructing your page uing divs?

PaulRice
06-24-2011, 05:40 AM
Yes there are some divs in there - apologies but I'm still an amateur at this; apart from the 'coding' I've learnt from tutorials I've been mostly constructing the site in 'design view.'

PaulRice
06-24-2011, 05:49 AM
This is a quick screen grab - might help explain the problem a bit more. Is there someway to place that picture icon (bottom) ontop of the larger image (which is selected)?

edbr
06-24-2011, 06:08 AM
if you have an image as a background image , there should be no problem, i really need to see the code though

PaulRice
06-24-2011, 06:21 AM
Here is the code, it's probably a bit messy (sorry).
The ""images/HOME.jpg" alt="Paul Rice Design Graphic Design Illustration Photography" is the background image.

Corrosive
06-24-2011, 06:32 AM
Hi Paul. As Ed says you need to add the image as a background to a div tag using a CSS class or ID. I'm not sure which tutorials you have been following but you're going to come unstuck if you don't get the basics of CSS down before you launch into your site build.

PaulRice
06-24-2011, 06:36 AM
Hi Corrosive,
My tutorials have been a bit all over the place, just picked the ones I thought I needed as this is a simple site (probably the wrong thing to do).

Are you saying I just need to add some kind of 'background' div tag to the background image, which would allow other images to be placed ontop of it?
If so, and if it's not too complicated for you to explain, how would I do that/know of a specific tutorial about that?

Thanks again!

edbr
06-24-2011, 06:37 AM
you have missed the concept of divs and background images i have knocked up a simple page with a div with a backgroung image and a image over it, it is very simple but might set you on the raod. resd up in dw help files<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

#content{ background-image:url(images/Home.jpg) }



</style>
</head>

<body>


<div id="content">

<img src="images/paradise_hotel.gif>"
</div>
</body>
</html>

Corrosive
06-24-2011, 06:43 AM
this is a simple site

Even simple sites need to be built well :)

Use Ed's example as a starter but also try and get your head round the basic concept of CSS before you go much further. It will help enormously; http://corrosiveonline.co.uk/tutorials_css_explained.php

PaulRice
06-24-2011, 06:55 AM
Hi guys, thanks for the help!
Ed - I've used your example pretty much as is except I've kept the script stuff about lightbox and javascript (for the lighbox gallery) up at the top and you got rid of it.
It doesn't seem to be working - is that the reason why? (Thanks for doing up the example by the way)

Corrosive - I'll definitely try to get my head around CSS (I'll have to learn it anyway for college, just trying to get a head start on my portfolio site)

Cheers!

Corrosive
06-24-2011, 06:59 AM
It doesn't seem to be working - is that the reason why? (Thanks for doing up the example by the way)



You'll need to post your code again for us to debug.

PaulRice
06-24-2011, 07:06 AM
Sorry for all this hassle - if it gets too much just tell me to bugger off!
I am learning though.. bit by bit.

The image attached is the code (without the changes done to it).

Corrosive
06-24-2011, 07:15 AM
Sorry for all this hassle - if it gets too much just tell me to bugger off!


Not told many people to bugger off in my time here :wink:

Really need to see the code with Ed's suggestions added in. You can actually post real code here. Use the # symbol at the top of the text editor to generate code tags and then paste your code in there. Will make it easier.

PaulRice
06-24-2011, 07:24 AM
I'll post a before and after Ed's revisions as when I do Ed's revision the 'background' image and the image/gallery I'm trying to place atop it just disappear completely.

So here's before:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript">

</script>

<body>

<div align="left"><img src="images/HOME.jpg" alt="Paul Rice Design Graphic Design Illustration Photography" width="1060" height="382" border="0" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="50,289,109,330" href="photo.html" />
<area shape="rect" coords="50,341,109,383" href="hello.html" />
<area shape="rect" coords="52,51,117,176" href="index.html" />
</div>



</head>


</map>
</div>

<a href="images/paradise_hotel.gif" title="hotel">
<img src="images/paradise_hotel.gif" width="120" height="80" /></a>

</body>
</html>

And then after:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript">

</script>

<style type="text/css">

#content{background-image:url(images/paradise_hotel.gif) }

</style>
</head>


<body>




<div id="content">

<img src="images/paradise_hotel.gif>"
</div>
</body>
</html>

Corrosive
06-24-2011, 07:39 AM
OK, so basically what you have there is the same image on top of the background image. You need to replace;

<img src="images/paradise_hotel.gif>"

in the #content div with the links to your lightbox gallery (btw, drop the image map rubbish and use proper links). If it helps, just copy and paste the sample lightbox code into that div for now until you get your head round it;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript">

</script>

<style type="text/css">

#content{background-image:url(images/paradise_hotel.gif) }

</style>
</head>


<body>




<div id="content">

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
</div>
</body>
</html>

See if you can get that to work.

If you can then positioning comes from using margins and padding, the CSS box model (Google it) and page flow.

PaulRice
06-24-2011, 07:50 AM
Yep the lightbox is working again, but the background image is still gone (I had made a mistake with the codes I just posted, you were right - both images were the same). Even with the right background image link - it's still not there.

I'll keep tinkering around with it, thanks for helping!

Corrosive
06-24-2011, 07:53 AM
Can you put this live anywhere temporarily? Then Ed and I can take a look.

PaulRice
06-24-2011, 07:57 AM
The earliest I'd be able to put it live would be later on tonight - I'd have to get a quick hand from one of my friends to put it up on my existing site.

I'm just not sure whats been done wrong, I don't know code much but even from what I've seen it looks as if it should work - could the lightbox coding be interfering with the background image code?

Corrosive
06-24-2011, 08:26 AM
Could the lightbox coding be interfering with the background image code?

Wouldn't have thought so and yeah, agree that what you've shown looks OK at first glance. Get it online tonight and someone will take a look for you.

PaulRice
06-24-2011, 08:36 AM
Ok cool, cheers corrosive!

PaulRice
06-24-2011, 09:09 PM
Hi guys,

Here's a link to my site with the issue. I've uploaded it without the changes Ed suggested just because when I change it the images disappear and you wouldn't have anything to see!

Any help in figuring this out would be immensely helpful, cheers!

gentleone
06-24-2011, 11:01 PM
Hi guys,

Here's a link to my site with the issue.
Uhm... please do not post invisible links, Paul. ;)

PaulRice
06-24-2011, 11:07 PM
...awkward hah. thanks for that gentleone, here it is: http://www.paulricedesign.com/work.html

Corrosive
06-25-2011, 07:41 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript">

</script>

<body>

<div align="left"><img src="images/HOME.jpg" alt="Paul Rice Design Graphic Design Illustration Photography" width="1060" height="382" border="0" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="50,289,109,330" href="photo.html" />
<area shape="rect" coords="50,341,109,383" href="hello.html" />
<area shape="rect" coords="52,51,117,176" href="index.html" />
</div>



</head>


</map>
</div>

<a href="images/paradise_hotel.gif" rel="lightbox" title="hotel">
<img src="images/paradise_hotel.gif" width="120" height="80" /></a>

</body>
</html>

Hi Paul

Immediate issues that spring to mind are that your closing </head> tag is inside your body tags. That probably isn't a good place to be! Also your divs are unbalanced. You have an extra closing div tag (</div>). Work out which one you need and which one you don't and delete one.

I cannot stress enough how you will keep running into problems if you dive straight in and start building your website without getting the basics down. The way you are going you will hit brick wall after brick wall and still end up with something that is cr*p and have to start again.

We've all done it but, at some stage, someone has pointed out that just sitting and reading some decent tutorials about HTML & CSS is the way to go until it 'clicks' and then you can start experimenting. You won't become a web designer overnight but you can understand the principals and then build your knowledge from there.

PaulRice
06-25-2011, 04:55 PM
Hi Corrosive, thanks for having a look over it for me - I've cleaned up the things you suggested.
You're right that I need to have a proper sit down approach to CSS and coding - its just that I don't have much time on this and I thought that this would be a relatively simple issue to resolve before I learnt Dreamweaver/CSS properly next year in college.
Still can't even set the 'background image' to the background! Hopefully I'll figure it out - thanks again everyone!

DWcourse
06-26-2011, 05:17 AM
before I learnt Dreamweaver/CSS properly next year in college.

I wish I had your faith in higher education! Hopefully you'll get an instructor who understands Dreamweaver, HTML and CSS and forces you to learn the HTML and CSS. I've seen too many instructors do little more than teach their students to slice an image and export it as HTML from Photoshop and call that web design.

In any case you'll find that there is a lot more to learn that you can possibly learn in one semester. You're going to be spending a lot of time learning and the earlier you start the better (and the more you can learn if you do get a knowledgeable instructor).