• dina
  • Member
  • Offline
  • Registered: December 23, 2008
  • Posts: 46

Topic: one image on top of another

hmm

I have been trying for a few days now to put a rollover in my header on top of my image, which covers the whole header. Could someone just have a look and see why wouldn't even any image show on top of my image in the header.

/*      AUTHOR: Dina Richards
           DATE: 2007.11.30
*/
* {
    margin: 0px;
    padding: 0px;
}
body {
  margin: 0 0 0 0;
  color: #EEE;
  background: #00FFFF url(images/back_all.gif) repeat-x fixed; 
}

/*                             Link                        */

a.link {
    color: #66FF00;
}
a.hover {
    background-color: #006600;
}
a.visited {
    color: #009900;
}
#Menu {
    list-style-type: none;
    width:
}
#header {
    left: 50%;
    margin-left: -390px;
    height: 300px;
    width: 787px;
    position: absolute;
}
#logo {
    background: url(images/dark_pixel.jpg) no-repeat;
    height: 300px;
    text-align: left;
    color: #999;
    padding-left: 30px;
    padding-top: 30px;
}
l#logo1 {
    margin-top: 400px;
    float: left;
    height: 250px;
    width: 300px;
    background: #999;
    z-index: 14;
    display: inline;
}
#container {
    margin-top: 400px;
    width: 787px;
    height: 300PX;
    left: 50%;
    margin-left: -390px;
    position: absolute;
    background-color: #000000;
}    

...........................................................................................................................

php!

<!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>bipolarDotCom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="default.css" rel="stylesheet" type="text/css" media="screen, print"/>


</head>
<body>
<div id="header">
<div id="logo">
</div>
<div id="logo1">
<img scr="images/bipolar.gif">
</div>
</div>
<div id="container">
<p></p>
</div>

</body>
</html>


thank you.

Vote up Vote down

  • dina
  • Member
  • Offline
  • Registered: December 23, 2008
  • Posts: 46

Re: one image on top of another

ok well since so many has view my post and not replied yet, I guess what I really want is so tips on the z-index please.

thank you.

Vote up Vote down

  • From: Noblesville, IN, USA
  • Registered: December 20, 2008
  • Posts: 158

Re: one image on top of another

Whats the url?

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,810
  • Reputation: 14

Re: one image on top of another

I have been trying for a few days now to put a rollover in my header on top of my image, which covers the whole header. Could someone just have a look and see why wouldn't even any image show on top of my image in the header.

I'm not sure exactly what you are attempting to do... What you say you want to do and what your code does are very different things. I am not seeing any code to add any type of rollover to your layout.

Rollovers are usually done either with javascript, by switching one image with another, or by using a background image and moving the background position (CSS sprites). Rollovers are not usually done with z-index.

Errors:

You do have an error in your css: an unnecessary "|" here: "l#logo1 {"

Also, you are missing a width in this line "width: " (in #Menu), which may cause CSS errors.

Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • dina
  • Member
  • Offline
  • Registered: December 23, 2008
  • Posts: 46

Re: one image on top of another

firstly JBall I'm not loaded onto the server yet, I have some firewall issues.

Ben your right, I don't have the code in here for the rollover, cause I took it out. But also no other image want's to appear there. I used Eric's method of rollover, given in the old forum, when I attempt to add a rollover in my page, but remove it again. I must say I don't understand how to add that code to my php page though!

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,810
  • Reputation: 14

Re: one image on top of another

Post the link to Eric's method, and I'll take a look.

Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,810
  • Reputation: 14

Re: one image on top of another

And I should mention... what you are currently working with is all HTML code, and doesn't use any PHP.  Your file may end in ".php", but it really isn't PHP until you start using actual <?php ?> php code.

Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • Eric
  • Advanced Member
  • Offline
  • From: Carlsbad, CA
  • Registered: December 19, 2008
  • Posts: 2,181
  • Reputation: 1

Re: one image on top of another

Here it is. http://www.visibilityinherit.com/code/l … e-swap.php

www.visibilityinherit.com/tools.php

Vote up Vote down

  • dina
  • Member
  • Offline
  • Registered: December 23, 2008
  • Posts: 46

Re: one image on top of another

thanks Eric I'm guna try it out immediately.

The second thing is about what Ben was mentioning about the php:

I know it isn't a php page yet, but if its going to become one later by adding php code, shall I save it now already as PHP or not?

Vote up Vote down

  • Eric
  • Advanced Member
  • Offline
  • From: Carlsbad, CA
  • Registered: December 19, 2008
  • Posts: 2,181
  • Reputation: 1

Re: one image on top of another

dina wrote:

thanks Eric I'm guna try it out immediately.

The second thing is about what Ben was mentioning about the php:

I know it isn't a php page yet, but if its going to become one later by adding php code, shall I save it now already as PHP or not?

Yes, save it as php. That way, later, you won't have to change it, and therefore in the process, changing googles, and everybody else's bookmarked links.

www.visibilityinherit.com/tools.php

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,810
  • Reputation: 14

Re: one image on top of another

I know it isn't a php page yet, but if its going to become one later by adding php code, shall I save it now already as PHP or not?

Best to keep it as a .php file then -- it'll save you time in the long run.

Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • dina
  • Member
  • Offline
  • Registered: December 23, 2008
  • Posts: 46

Re: one image on top of another

Post the link to Eric's method, and I'll take a look

I don't know what you mean Ben?

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,810
  • Reputation: 14

Re: one image on top of another

dina wrote:

Post the link to Eric's method, and I'll take a look

I don't know what you mean Ben?

Nevermind, Erik posted the link I was looking for.

Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • dina
  • Member
  • Offline
  • Registered: December 23, 2008
  • Posts: 46

Re: one image on top of another

oh, ok let me try it out and see if I can make any progress on this "slow-going" site of mine. Will continue on this tomorrow.

Thanx.

going to bed now, goodnight.

Vote up Vote down

  • From: Noblesville, IN, USA
  • Registered: December 20, 2008
  • Posts: 158

Re: one image on top of another

See if this won't get you started...

@charset "utf-8";
/* CSS Document */

/*      AUTHOR: Dina Richards
           DATE: 2007.11.30
*/
* {
    margin: 0px;
    padding: 0px;
}
p {
    margin-left:40px;
}
body {
  margin: 0, auto;
  color: #EEE;
  background: #00FFFF url(images/back_all.gif) repeat-x fixed; 
}

/*                             Link                        */

a.link {
    color: #66FF00;
}
a.hover {
    background-color: #006600;
}
a.visited {
    color: #009900;
}
#menu {
    list-style-type: none;
    width:;
}

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:787px;
    height:auto;
}
#header {
    height: 315px;
    width: 787px;
    float:left;
}
#logo {
    background: url(images/dark_pixel.jpg) no-repeat;
    height: 315px;
    width: 787px;
    float:left;
    }
#logo1 {
    background-image:url(images/bipolar.gif);
    margin-top: 40px;
    margin-left:40px;
    float: left;
    height: 112px;
    width: 112px;
   }
.container {
    float:left;
    background-color: #000000;
    height: auto;
    width: 787px;
    text-align: left;
    color: #999;
      }    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>bipolarDotCom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="default.css" rel="stylesheet" type="text/css" media="screen, print"/>

</head>
<body>
<div id="wrapper">
<div id="header">
    <div id="logo">
        <div id="logo1">
        </div>
    </div>
</div>
<div class="container">
<p>Testing Testing</p>
</div>
</div>
</body>
</html>

Vote up Vote down