Hi everyone
I’m hopping you can help me with a very big problem Ive been having.
Now I’m trying to put an image over an image but Dreamweaver keeps
pushing it away and Ive tried padding and everything but nothing works.
Now I google searched this and all that popped up was that you need a z-index
but I don’t know how to implement it.
Here’s what I’m trying to do
put those 6 images in the image border
and each one of the 6 images have to be a link other wise I would of sliced everything around the border
any help would be greatly appreciated
An image over another image can be many things in HTML and CSS. We need more specific, and, sure enough, some code on your part would help, HTML and CSS. Screencaps are not the best idea to get things done 
Hi techbuilder, welcome to SPF
Your attachments are still pending. Do you maybe have a link to your site or otherwise to a site where you’ve seen this!
Sorry about that
this is the code that comes the closes but I know it’s not right but at least the 6 images are semi aligned
and it’s on top of the box but still not inside of it
html
<tr>
<td width=“898” height=“401” colspan=“9”>
<div id="content">
<div id="table">
<img src="ExtraPhotos/images/Precision-Maching.jpg" height="148" width="247" alt=""/>
<img src="ExtraPhotos/images/Precision-Sheet-metal.jpg" height="148" width="244" alt=""/>
<img src="ExtraPhotos/images/Gasket-die-cutting-.jpg" height="148" width="245" alt=""/>
<img src="ExtraPhotos/images/Assembly-&-turn-key.jpg" height="146" width="244" alt=""/>
<img src="ExtraPhotos/images/Engineering.jpg" height="146" width="244" alt=""/>
<img src="ExtraPhotos/images/Quality-Assurance.jpg" height="146" width="244" alt=""/>
</div>
</div>
<img src="ExtraPhotos/images/Borderbottom.png" width="898" height="401" alt=""></td>
</tr>
CSS
}
Content {
width: 890px;
height: 400px;
}
#table {
width:888px;
height:407px;
}
Do I understand you right, if I think you would like to have the the border around those thumbnail images?
Correct and I know my coding isn’t even close
but I’m new to this so sorry about the horrible codding in advanced
I think you don’t need that table at all and your overdoing it with your divs as well. In order to reach the result you would like you need to position elements and apply z-index, as you already expected
You could just have Content div. This is a start:
#content {
width: 898px;
margin: 0 auto;
position: relative; /* needed to position the border */
overflow: hidden;
z-index: 4;
}
After that you can create a class for the thumbnails:
.thumbnail {
width: 299px;
height: 148px; /* For demonstration only */
float: left;
position: relative;
z-index: 1;
background: #FF0000;
}
and finally a class for the border
.border {
position: absolute;
left: 0;
top: 0;
}
Then the html:
<div id="content">
<div class="thumbnail">
<img src="ExtraPhotos/images/Precision-Maching.jpg" height="148" width="247" alt=""/></div>
<div class="thumbnail">
<img src="ExtraPhotos/images/Precision-Sheet-metal.jpg" height="148" width="244" alt=""/></div>
<div class="thumbnail">
<img src="ExtraPhotos/images/Gasket-die-cutting-.jpg" height="148" width="245" alt=""/></div>
<img class="border" src="ExtraPhotos/images/Borderbottom.png" width="898" height="401" alt="">
</div>
Apply class border to the border image. You need to define an extra class for the image to position them centered. Or add properties: text-align: center and line-height: 150px to .thumbnail
Sweet thanks for the reply
I just got it to work here’s the code I used
<tr>
<td width="898" height="401" colspan="9">
<div id="content">
<div style="position:relative; height:401px">
<div style="position:absolute;z-index:1">
<img src="ExtraPhotos/images/Borderbottom.png">
</div>
<div style="position:absolute;top:44px;left:40px; width:600px; height:430px; z-index:2;font-size:200%;">
<li><a href="#"> <img src="ExtraPhotos/images/Precision-Maching.jpg" width="247" heigth="148"></a>
</div>
</div>
<div style="position:absolute;top:935px;left:675px; width:600px; height:430px; z-index:2;font-size:200%;">
<li><a href="#"> <img src="ExtraPhotos/images/Precision-Sheet-metal.jpg" width="247" heigth="148"></a>
</div>
</div>
<div style="position:absolute;top:935px;left:940px; width:600px; height:430px; z-index:2;font-size:200%;">
<li><a href="#"> <img src="ExtraPhotos/images/Gasket-die-cutting-.jpg" width="247" heigth="148"></a>
</div>
</div>
<div style="position:absolute;top:1090px;left:412px; width:600px; height:430px; z-index:2;font-size:200%;">
<li><a href="#"> <img src="ExtraPhotos/images/Assembly-&-turn-key.jpg" width="247" heigth="148"></a>
</div>
</div>
<div style="position:absolute;top:1090px;left:675px; width:600px; height:430px; z-index:2;font-size:200%;">
<li><a href="#"> <img src="ExtraPhotos/images/Engineering.jpg" width="247" heigth="148"></a>
</div>
</div>
<div style="position:absolute;top:1090px;left:940px; width:600px; height:430px; z-index:2;font-size:200%;">
<li><a href="#"> <img src="ExtraPhotos/images/Quality-Assurance.jpg" width="247" heigth="148"></a>
</div>
</div>
</tr>
<tr>
I would like the text to go bright white when you go over it and I was going to
have the same image but with brighter text so when you went over the box it brought the new image with the brighter text.
Anyone no how I might go about doing it?
Basically when I don’t touch the image it would look like this
And when the mouse goes over the image it would look like this
You should really try to stay away from using inline styles :
<div style="position:absolute;top:44px;left:40px; width:600px; height:430px; z-index:2;font-size:200%;">
Try to declare these in your CSS! And you still have the table which, as I said, is not needed at all.
About the text: I see that you declare a font-size as well but I don’t see the text so I presume that the text is in the images? If so you need to use opacity properties! Or you have to recreate your images and use position change on :hover!
Yeah the text is embedded in the image
Or you have to recreate your images and use position change on :hover!
How would the coding look?
Like I said you need to declare your styles in CSS. You are using <li> elements in combination with anchors. If you would have everything in your CSS it would be really easy. This is how I would do it that case:
#content {
... /*properties for content this could be your<ul> */
}
#content li {
margin: /* Margins Needed*/
float: left
}
#content li a {
display: block;
text-indent: -999em;
}
#content li a.precision-maching {
width: 247px;
height: 148px;
background: url(ExtraPhotos/images/Precision-Maching.jpg) 0 0 no-repeat;
}
#content li a.precision-sheet-metal{
width: 244px;
height: 148px;
background: url(ExtraPhotos/images/Precision-Sheet-metal.jpg) 0 0 no-repeat;
}
#content li a.gasket-die-cutting{
width: 245px;
height: 148px;
background: url(ExtraPhotos/images/Gasket-die-cutting.jpg) 0 0 no-repeat;
}
#content li a:hover, {
#content li a:focus
background-position: 0 -148px;
}
<ul id="content">
<li><a href="#" class="precision-maching">#</a></li>
<li><a href="#" class="precision-sheet-metal">#</a></li>
<li><a href="#" class="gasket-die-cutting">#</a></li>
</ul>
Thanks donboe for helping me
i’m a big noob when it comes to this stuff since i’m just starting out
I tried the code but only 2 images appeared and the border img wasn’t there
One thing I’ll just mention is, I find the text without hover to be horribly unreadable.
Donboe’s code addresses keyboard users with :focus (great!), but the usability part of me doubts the wonders of a menu where you have to hover/focus to be sure of what it offers in the first place.
Just a thought.
Your absolutely right I probably would use a color change instead.
Ok i’m confused
how do I do a hover then?
Can you post the entire html and css you have so far? Not only the section for those images
CSS
body {
width:760px;
margin: 0 auto;
margin-left: 340px;
background-color:#000;
}
#content {
width: 890px;
height: 400px;
}
#table {
width:888px;
height:407px;
}
ul {
list-style:none;
margin: 0;
padding:0;
}
li {
display:inline;
padding-left:20px;
}
HTML
<html>
<head>
<title>CPDwebsiteFinal2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<table id="Table_01" width="950" height="1312" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="11">
<img src="images/bgcolor.jpg" width="13" height="1311" alt=""></td>
<td width="937" height="22" colspan="11">
<img src="images/spacer.gif" width="937" height="22" alt=""></td>
</tr>
<tr>
<td width="16" height="1289" rowspan="10">
<img src="images/spacer.gif" width="16" height="1289" alt=""></td>
<td width="890" height="155" colspan="8">
<img src="ExtraPhotos/images/Banner.gif"width="890" height="155" alt=""></td>
<td width="31" height="233" colspan="2" rowspan="4">
<img src="images/spacer.gif" width="31" height="233" alt=""></td>
</tr>
<tr>
<td width="890" height="21" colspan="8">
<img src="images/spacer.gif" width="890" height="21" alt=""></td>
</tr>
<tr>
<td>
<a href="http://www.cpd-corp.com/body_index.html"><img src="images/Navbar1.jpg" width="126" height="51" alt=""></a></td>
<td>
<a href="http://www.cpd-corp.com/Services/Manufacturing/body_manufacturing.html"><img src="images/Navbar2.jpg" width="154" height="51" alt=""></a></td>
<td>
<a href="http://www.cpd-corp.com/Services/body_services.html"><img src="images/Navbar3.jpg" width="121" height="51" alt=""></a></td>
<td colspan="2">
<a href="http://www.cpd-corp.com/html/body_profile.html"><img src="images/Navbar4.jpg" width="129" height="51" alt=""></a></td>
<td colspan="2">
<a href="http://www.cpd-corp.com/Services/Manufacturing/body_manufacturing.html"><img src="images/Navbar5.jpg" width="132" height="51" alt=""></a></td>
<td colspan="2">
<a href="http://www.cpd-corp.com/Services/Manufacturing/body_manufacturing.html"><img src="images/Navbar6.jpg" width="228" height="51" alt=""></a></td>
</tr>
<tr>
<td colspan="8">
<img src="images/CPDwebsiteFinal2_13.jpg" width="890" height="6" alt=""></td>
</tr>
<tr>
<td colspan="8">
<div style="position:relative; height:367px">
<div style="position:absolute;z-index:1">
<img src="images/Body1.jpg">
</div>
<div style="position:absolute; top:123px; left: 443px; width:442px; height:188px; z-index:2; color:#FFF; font:Calibri; font-size:105%">
<div align="left">
<p><b>
" With more than 35 years of experience, <br>
CUSTOM PRODUCT DEVELOPMENT CORPORATION <br>
provides innovative/low cost engineered
mechanical components and Turn-Key
Assembly solutions.Our technical design expertise,
coupled with creative manufacturing
and supply chain control, ensures that our
customers receive the best possible service
available in today's competitive industry."</b></p>
<p> </p>
</div>
</div>
</div>
</td>
<td width="8" height="367">
<img src="images/spacer.gif" width="8" height="367" alt=""></td>
<td width="23" height="1056" rowspan="6">
<img src="images/spacer.gif" width="23" height="1056" alt=""></td>
</tr>
<tr>
<td width="898" height="4" colspan="9">
<img src="images/spacer.gif" width="898" height="4" alt=""></td>
</tr>
<tr>
<td colspan="4">
<div style="position:relative; height:261px">
<div style="position:absolute;z-index:1">
<img src="images/Leftimg.jpg">
</div>
<div style="position:absolute; top:74px; left: 170px; width:346px; height:150px; z-index:2; color:#FFF; font:Calibri; font-size:115%">
<div align="left">
<p><b>
We pride ourselves on outstanding
customer service and product quality.
Whether you are a current customer, or a
potentially new customer, we take a genuine
interest in your product requirements.
Customer loyalty is a priority
at Custom Product Development Corporation.</b>
</p>
<p> </p>
</div>
</div>
</div>
</td>
<td colspan="2" rowspan="2">
<img src="images/CPDwebsiteFinal2_19.jpg" width="82" height="265" alt=""></td>
<td colspan="2">
<img src="images/Rightbodyimg.jpg" width="291" height="261" alt=""></td>
<td width="8" height="265" rowspan="2">
<img src="images/spacer.gif" width="8" height="265" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/CPDwebsiteFinal2_22.jpg" width="517" height="4" alt=""></td>
<td colspan="2">
<img src="images/CPDwebsiteFinal2_23.jpg" width="291" height="4" alt=""></td>
</tr>
<tr>
<td width="898" height="401" colspan="9">
<div id="content">
<div style="position:relative; height:401px">
<div style="position:absolute;z-index:1">
<img src="ExtraPhotos/images/Borderbottom.png">
</div>
<div style="position:absolute;top:44px;left:40px; width:600px; height:430px; z-index:2;font-size:200%;">
<li><a href="http://www.ebay.com"> <img src="ExtraPhotos/images/Precision-Maching.jpg" width="247" heigth="148"></a></li>
</div>
</div>
<div style="position:absolute;top:935px;left:675px; width:600px; height:430px; z-index:2;font-size:200%;">
<li><a href="http://www.instructables.com"> <img src="ExtraPhotos/images/Precision-Sheet-metal.jpg" width="247" heigth="148"></a></li>
</div>
</div>
<div style="position:absolute;top:935px;left:940px; width:600px; height:430px; z-index:2;font-size:200%;">
<li><a href="http://www.amazon.com"> <img src="ExtraPhotos/images/Gasket-die-cutting-.jpg" width="247" heigth="148"></a></li>
</div>
</div>
<div style="position:absolute;top:1090px;left:412px; width:600px; height:430px; z-index:2;font-size:200%;">
<li><a href="http://www.google.com"> <img src="ExtraPhotos/images/Assembly-&-turn-key.jpg" width="247" heigth="148"></a></li>
</div>
</div>
<div style="position:absolute;top:1090px;left:675px; width:600px; height:430px; z-index:2;font-size:200%;">
<li><a href="http://www.westtool.com/"> <img src="ExtraPhotos/images/Engineering.jpg" width="247" heigth="148"></a></li>
</div>
</div>
<div style="position:absolute;top:1090px;left:940px; width:600px; height:430px; z-index:2;font-size:200%;">
<li><a href="http://www.hackaday.com"> <img src="ExtraPhotos/images/Quality-Assurance.jpg" width="247" heigth="148"></a></li>
</div>
</div>
</tr>
<tr>
<td width="898" height="19" colspan="9">
<img src="images/spacer.gif" width="898" height="19" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="126" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="154" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="121" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="116" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="69" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="63" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="228" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="23" height="1" alt=""></td>
</tr>
</table>
</body>
</html>
That’s all of it
Wow. This is a real mess. Maybe It’s better to point us to a website, you probably have seen, which represent your idea, because I really don’t know where to start in this labyrinth
I’m not saying don’t have a hover effect, I’m saying you should think twice about needing to hover over the menu item just to read it.
Since the background of the site is dark, you could have the image darkened by default-- with the text being white or very bright on top.
On :hover and :focus, the background image becomes bright again (so you can see there’s an image), while the text remains white.
I’d always rather be able to read the menu at once, and have it maybe become a bit unreadable when I hover/focus, than the other way around.
Also, this means you won’t need the mystery-meat-menu negative text indent: you can just have plain, white, readable text of the anchor just sit out in the open. Then your images don’t even need any text in them: you just have a dark version of the plain image, and a normal version, and it’ll just be a background image on the anchor.
So, using donboe’s css:
#content {
... /*properties for content this could be your<ul> */
}
#content li {
margin: /* Margins Needed*/
float: left
}
#content li a {
display: block;
width: 247px;
min-height: 148px;
background-position: 0 0;
background-repeat: no-repeat;
}
* html #content li a {height: 148px;} /*IE6*/
#content li a.precision-maching {
background-image: url(ExtraPhotos/images/Precision-Maching.jpg);
}
#content li a.precision-sheet-metal{
background-image: url(ExtraPhotos/images/Precision-Sheet-metal.jpg);
}
#content li a.gasket-die-cutting{
width: 245px;
background-image: url(ExtraPhotos/images/Gasket-die-cutting.jpg);
}
#content li a:hover, {
#content li a:focus
background-position: 0 -148px;
}
Excuse the quick gimping, it’s just to show what I mean.
So then you’ll need to add some styles to your anchors to style the text.
#content li a {
display: block;
width: 247px;
min-height: 148px;
[b] color: #fff; /*white*/
font-weight: bold;/*or set all font stuff... size, family*/
line-height: 60px; /*example guess*/
text-align: center;[/b]
background-position: 0 0;
background-repeat: no-repeat;
}
* html #content li a {height: 148px;} /*IE6*/
Where the line-height is one way to make two lines of text kind spread evenly, vertically. This means the one who is only one line of text gets
line-height: 148px;
instead, to make it sit in vertical center.
That code doesn’t make it look quite like the screen shot, but either more code could or the line-height trick is good enough.
You can also add a background-color to the hover/focus version, which the background image will cover up: if there is no background image for whatever reason (doesn’t load, images blocked, whatever), there’s still an obvious highlight, showing that it’s a link.
Again, it’s only a suggestion.
all the coding from here
http://www.youtube.com/watch?v=IKeg1nhe-wE&feature=related
and the idea from this website came from here
http://www.hv-designs.co.uk/2008/12/30/dark-style-web-template/