0

This should be quite easy, and I have done some research on this. I have spliced code from here, here, here, and other places, but I can't get this to work.

I have a webpage which has 3 .pngs layered on top of each other. The top two are variable sized, and 100% of the page. The top one has a hole in it (it's transparent in the middle), and the middle disappears using Javascript to reveal the bottom one. The top two .pngs and the Javascript are working perfectly.

I want the bottom image to be in the exact center, vertically and horizontally, and be proportional to the page size. I can get it centered, or proportional, but not both. I can't put the bottom picture as the background, because then the background isn't the right color, or it's tiled.

Here is a sample of some of the code:

HTML:

<body>  
        <div >
    <p0 id="face" ><img src="face2.png"; class='face'> </p0>
</div>
        <p1 id="circuit" > <img src= 'circuit.png' width = '100%' height = '100%' /> </p1>
        <p2 id="hole" ><img src="hole.png" width='100%' height = '100%' /> </p2>
</body>

CSS:

p0{ 
width: 50%;/*I can't set the height to 50% because it is a different size than the width*/
center
z-index:1;
position: absolute; 
}

p1{
z-index: 2;
width: 100%;
padding:0;
margin: 0;
height:100%;
position: absolute; 
}

p2{
z-index:3;
width: 100%;
padding:0;
margin: 0;
height:100%;
position: absolute; 
}
Community
  • 1
  • 1
Muricula
  • 1,174
  • 3
  • 9
  • 16

1 Answers1

0

put everything that you want centered into a div that has these:

   .div{
     width: 100%;
     position: relative; // or absolute
     text-align: center;
     text-align: -moz-center;
     text-align: -webkit-center;
     }

here is a linkjsfiddle

here is full CSS: both images are different sizes in the exact center on top of each other as the question stated,

.parent{
 width: 100%;
 position:  absolute;
 text-aligh: -align: center;
 text-align: -moz-center;
 text-align: -webkit-center;

 }

.center1{

height:120px;
width: 275px;    
background-image: url("http://www.google.com/images/srpr/logo3w.png");
}

.center2{       
height: 100px;
width: 200px;
 background-image: url("http://www.google.com/logos/2012/turing-doodle-static.jpg");
}

​ HTML:

     <div class="parent" style="z-index: 1;">
         <div class="center1"></div> 
     </div>
     <div class="parent" style="z-index: 10;">
         <div class="center2"></div> 
     </div>
Scott Selby
  • 9,420
  • 12
  • 57
  • 96
  • I don't see why you are setting `text-align` multiple times, which doesn't make sense, or why you are using vendor prefixed center values. – vcsjones Jun 24 '12 at 21:42
  • text-align: center should always work , but to make sure it works in allbrowsers I usually use all 3 – Scott Selby Jun 24 '12 at 21:43
  • firefox Aurora 15.0a2 works with the first and second text-aligns, but drops the third, as expected. This doesn't work though, my image is stuck in the upper left hand corner. – Muricula Jun 24 '12 at 21:52
  • No need for the vendor prefixes. Those are only for block level elements. That `` is inline. – Kevin Ennis Jun 24 '12 at 22:00
  • 1
    `text-align` was specified in 1996, before these prefixes even existed.. http://www.w3.org/TR/REC-CSS1-961217 – Esailija Jun 24 '12 at 22:07
  • the div with text-align: center has to be a parent div of the div with the image , it should work. – Scott Selby Jun 24 '12 at 22:34
  • @Esailija go to google.com and inspect the element of the google logo in the center of the page, you will see text-align: -webkit-center if you are using chrome – Scott Selby Jun 24 '12 at 22:35
  • @ScottSelby I see, but it is different from `center`. https://developer.mozilla.org/En/CSS:text-align (I'm assuming here that the webkit extension does same as moz extension) The standard way to do it is `margin: 0px auto;` – Esailija Jun 24 '12 at 22:45
  • I still don't see why I got 2 downvotes for this answer, I wrote center first, then the browser will over ride to -moz or -webkit if applicable , and it does work , i use it all the time – Scott Selby Jun 24 '12 at 22:48
  • I'd actually like to retract my downvote, but cannot without you editing the question. Perhaps add a reference link? – Zach Lysobey Jun 25 '12 at 16:03
  • @Esailija - click the jsfiddle link , if you're running in chrome and delete the -webkit-center line it won't work , I don't see the problem with my answer – Scott Selby Jun 25 '12 at 16:43
  • @ScottSelby yes, but you can do that in a standard way that works in browsers other than -moz or -webkit http://jsfiddle.net/hT9FQ/2/ Please understand that `text-align: center` is very different from `text-align: -moz-center;` – Esailija Jun 25 '12 at 16:45