FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Image Layers ...... I'm Stuck

   Frihost Forum Index -> Webmaster and Internet -> Design Tips
 


Dennise
Can someone please illustrate some CSS code that will allow me to place a small image on top of another much larger image on one page? I want to use CSS positioning and index styles to do this, NOT layers.

Image1 will cover the entire page (I have reasons NOT to use image1 as a page background). Then, I want to place image2, and perhaps some text on top of image1.

I know this can be done using CSS (class styles) positioning by setting image1 to a low (0?) Z-index and image2 and other stuff to a higher (1?) Z-index. But I just can't seem to pull it off. Both image1 and image2 wind up as separate images in tandem instead of one on top of the other.

I'm using Dreamweaver3. Some example code would be useful. I think I should be using CSS class styles.

Help, ........ I'm stuck Crying or Very sad
Relentless
Why don't you want to use layers?

anyway here is a solution!

Code:
<!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>
<title>For Dennise</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">
<!--
body,td,th {
   color: #FFFFFF;
}
body {
   background-color: #000000;
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
}
#hold_for_image1 {
   /*Put that picture in here as a background picture and set the width ect <br />
    And if you want in centered just use Margin: auto; */
}
-->
</style></head>

<body>
<div id="hold_for_image1">Now you can put in here what ever u want! images tables etc! world it ur oyster!</div>
</body>
</html>
Dennise
Thanks for the tip, but I'm having trouble following you. It appears you are suggesting the use of CSS selectors.

Where you said "Put that picture in here as a background picture and set the width ect <br />
And if you want in centered just use Margin: auto; " ........................ I tried to put my background picture in as you suggested (/Graphics/KPeakwFrame.jpg), but it doesn't appear. Code is below. What am I doing wrong?


Code:
<!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>
<title>For Dennise</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">
<!--
body,td,th {
   color: #FFFFFF;
}
body {
   background-color: #000000;
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
}
#hold_for_image1 {<img src="/Graphics/KPeakwFrame.jpg" width="1784" height="1100">
   /*Put that picture in here as a background picture and set the width ect <br />
    And if you want in centered just use Margin: auto; */
}
-->
</style></head>

<body>
<div id="hold_for_image1">Now you can put in here what ever u want! images tables
  etc! world it ur oyster!</div>
</body>
</html>
Relentless
Shocked Have you ever worked with CSS before? Shocked

send me all the links to your images...

I will make the page for you Wink

Also layers would be easier...

If you dnt want to put your web link on here (due to google reasons) then send me a pm with the links 2 ur images..

--
Dan
Dennise
Thanks for you help Relentless. I think I'm on the right track using CSS class selectors, but I'm having trouble understanding the "Position Types".

Here is my code.

Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.picinframe {  position: absolute; visibility: visible; z-index: 2; height: auto; width: auto; left: 20px; top: 100px; clip:  rect(   )}
.kellerbg {  position: absolute; visibility: visible; z-index: 1; clip:  rect(   )}
.header {  position: absolute; z-index: 2; height: auto; width: 90%; left: 5%; top: 5%; clip:  rect(   )}
-->
</style>
</head>

<body bgcolor="#FFFFFF">
<img src="/Graphics/FrameOnly1.jpg" width="496" height="370" class="picinframe" style="left: 207px; top: 477px">
<table width="90%" border="2" cellspacing="0" cellpadding="0" align="center" height="80" class="header">
  <tr valign="top" background="Graphics/mountains/pinesnowstretch4.jpg">
    <td colspan="6" height="79">
      <h3 align="right">
        <pre><font size="6" face="Times New Roman, Times, serif">Mountain Pine Photo Frames and More    </font></pre>
      </h3>
    </td>
  </tr>
  <tr>
    <td height="35" width="13%" bgcolor="#99FFFF">
      <div align="center"><a class="nucolor" href="index.htm">Home</a></div>
    </td>
    <td height="35" width="15%" bgcolor="#99FFFF">
      <div align="center"><a class="nucolor" href="photos.htm">Photos</a></div>
    </td>
    <td height="35" width="16%" bgcolor="#99FFFF">
      <div align="center"><a class="nucolor" href="frames.htm">Frames</a></div>
    </td>
    <td height="35" width="24%" bgcolor="#99FFFF">
      <div align="center"><a class="nucolor" href="restoration.htm">Restoration</a></div>
    </td>
    <td height="35" width="14%" bgcolor="#99FFFF">
      <div align="center"><a class="nucolor" href="contact.php">Contact Us</a></div>
    </td>
    <td height="35" width="18%" bgcolor="#99FFFF">
      <div align="center"><a class="nucolor" href="otherTBD.htm">Links</a></div>
    </td>
  </tr>
  <tr>
    <td height="35" colspan="6" bgcolor="#99FFFF">
      <p align="center"><font color="#FFFFFF"><b><font size="3" color="#336633">Here
        you will find hand crafted photo frames, like the one you see below, and
        unique photos. Looking for 13&quot; X 19&quot;<a href="frames.htm"> frames</a>?
        Make sure you check out our hard to find rustic 13&quot; X 19&quot; mountain
        pine frames that are constructed from 100% real wood. They are available
        in several stain colors.</font></b></font></p>
      <p align="center"><font color="#336633" size="3"><b>Have a look around.
        Coming is also a restoration service to correct your photo flaws.</b></font></p>
    </td>
  </tr>
</table>
<img src="/Graphics/KellerPeakLR3.jpg" width="1294" height="1060">
</body>
</html>


Do you see anything amiss here. Shocked
Related topics

Create ur own avatar
PNG VS JPEG
Great free photo editor
Need Gimp Help
Plasma Image Burn-Ins & LCD Dead Pixels
Need Rollover Image help
how to transfer image from Photoshop to GIMP?
Pixlr – Online Image Editing
picture slide show (java)
The Archive of All Funny
[java scripts] Text effect , img ....
Image resizer
Random image for your gallery
nice background effect
Image transparency script
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.