Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 258
  • Last Modified:

How do I center a website with nested divs that are absolute and must overlap each other?

I would like to center my website. I have two divs with absolute positioning and z-index order and then the rest of the content. The two divs are necessary to position 2 images over each other so one will mask part of the other. This stems from the desire to have an animated gif in my logo and have as many colors as needed to render a nice gradation behind it, then both have to hit a specific location relative to the rest of the site.

Here are the masks:

<div id="logomask" style="position:absolute; width:135; height:99; z-index:2; left: 20px; top: 1px; visibility: visible;"><img src="images/<?php echo $color; ?>/logomask.gif" width="135" height="99"></div>
<div id="logo" style="position:absolute; width:135; height:99; z-index:1; left: 20; top: 1; visibility: visible;"><img src="images/<?php echo $color; ?>/logo<?php if ($site_mode == "demo") echo "-demo"; ?>.gif" width="135" height="99"></div>

I tried creating an outer div like this:

<div align="center">everything</div> around everything. The page centered itself but the two divs did not move.

Here is the page:

http://www.hawaiidiner.com/index_center.php

Is there a way that I can accomplish the centering properly?


Aloha


P.S. I built this seven years ago when tables were all the rage. I'm using css, but I don't have it mastered. And, I'll use a javascript animation next time to rotate through images.
0
SlickCatSeven
Asked:
SlickCatSeven
  • 4
  • 3
  • 3
2 Solutions
 
rgranlundCommented:
You almost have it.  Do

 <div style="width:YOUR TOTAL WIDTH NEEDEDpx; margin:0px auto 0px auto;">
PUT EVERYTHING INHERE

</div>

That should work.
0
 
SlickCatSevenAuthor Commented:
Shoot, still not quite working.
0
 
rgranlundCommented:
Post the new code that is not working.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
jonahzonaCommented:
Remove the left: 20px from the first two elements inside the main div - logomask and logo

This should move the logo inside your main div.
0
 
SlickCatSevenAuthor Commented:
0
 
jonahzonaCommented:
Just reposting so you see it. Barely beat you to the punch....

Remove the left: 20px from the first two elements inside the main div - logomask and logo

This should move the logo inside your main div.
0
 
jonahzonaCommented:
Also, if you give both of those divs a

margin-left: 2px;

they will line up perfect.
0
 
jonahzonaCommented:
sorry, that should say

margin-left: 20px;

sorry.........
0
 
rgranlundCommented:
That looks pretty centered to me!
jonahzona has a good point about the logo.

However, it looks good.
0
 
SlickCatSevenAuthor Commented:
Using both solutions did it! Mahalo.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now