Jump to content


Photo

one image on top of another


  • Please log in to reply
14 replies to this topic

#1 dina

dina

    Member

  • New Members
  • PipPip
  • 46 posts

Posted 07 January 2009 - 12:16 PM

:/

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!

http://www.w3.org/TR...ransitional.dtd">


bipolarDotCom












thank you.
  • 0

#2 dina

dina

    Member

  • New Members
  • PipPip
  • 46 posts

Posted 07 January 2009 - 01:41 PM

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.
  • 0

#3 JBall

JBall

    Advanced Member

  • Member
  • PipPipPipPip
  • 158 posts
  • LocationNoblesville, IN, USA

Posted 07 January 2009 - 01:47 PM

Whats the url?
  • 0

#4 Ben

Ben

    Administrator

  • Administrators
  • 5,556 posts
  • LocationChico, CA

Posted 07 January 2009 - 01:57 PM

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.
  • 0
Benjamin Falk
Falken Creative : Twitter

#5 dina

dina

    Member

  • New Members
  • PipPip
  • 46 posts

Posted 07 January 2009 - 02:10 PM

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!
  • 0

#6 Ben

Ben

    Administrator

  • Administrators
  • 5,556 posts
  • LocationChico, CA

Posted 07 January 2009 - 02:12 PM

Post the link to Eric's method, and I'll take a look.
  • 0
Benjamin Falk
Falken Creative : Twitter

#7 Ben

Ben

    Administrator

  • Administrators
  • 5,556 posts
  • LocationChico, CA

Posted 07 January 2009 - 02:13 PM

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 code.
  • 0
Benjamin Falk
Falken Creative : Twitter

#8 PicnicTutorials

PicnicTutorials

    Eric

  • Advanced Member
  • PipPipPipPip
  • 2,431 posts
  • LocationCarlsbad, CA

Posted 07 January 2009 - 03:03 PM

Here it is. http://www.visibilit...-image-swap.php
  • 0

#9 dina

dina

    Member

  • New Members
  • PipPip
  • 46 posts

Posted 07 January 2009 - 03:35 PM

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?
  • 0

#10 PicnicTutorials

PicnicTutorials

    Eric

  • Advanced Member
  • PipPipPipPip
  • 2,431 posts
  • LocationCarlsbad, CA

Posted 07 January 2009 - 03:45 PM

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.
  • 0

#11 Ben

Ben

    Administrator

  • Administrators
  • 5,556 posts
  • LocationChico, CA

Posted 07 January 2009 - 04:08 PM

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.
  • 0
Benjamin Falk
Falken Creative : Twitter

#12 dina

dina

    Member

  • New Members
  • PipPip
  • 46 posts

Posted 07 January 2009 - 04:17 PM

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

I don't know what you mean Ben?
  • 0

#13 Ben

Ben

    Administrator

  • Administrators
  • 5,556 posts
  • LocationChico, CA

Posted 07 January 2009 - 04:19 PM

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.
  • 0
Benjamin Falk
Falken Creative : Twitter

#14 dina

dina

    Member

  • New Members
  • PipPip
  • 46 posts

Posted 07 January 2009 - 04:34 PM

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.
  • 0

#15 JBall

JBall

    Advanced Member

  • Member
  • PipPipPipPip
  • 158 posts
  • LocationNoblesville, IN, USA

Posted 07 January 2009 - 05:41 PM

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>

  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users