Welcome to WebmasterWorld Guest from 54.159.44.227

Forum Moderators: not2easy

Message Too Old, No Replies

Centering one Position:Fixed div inside another

     

neophyte

11:52 am on May 20, 2012 (gmt 0)

10+ Year Member



Hello All -

I've been all over the web to solve this problem - and have tried nearly everything I've found - but still can't get one fixed-position div to center inside the other.

This is for an ajax "loading" animation.

So, I've got two divs: 1 full viewport opacity "mask" div and 1 container div which holds the animated .gif and a <p></p> tag pair.

The "container" div (the one with the animation and the <p> pair) IS NOT a child of the "opacity mask" div because, if it is, the "container" will pick up the opacity from the parent which I don't want.

With the code and css shown below, I've come close... but I've got to use top and left MARGIN percentages which kinda works but isn't perfect.

Maybe (hopefully) somebody can find the error of my ways.

Great thanks in advance to all.

Here's the html:

******************************************************

// SEMI TRANSPARENT OVERLAY
<div id="loading_overlay">
</div>

// CREATE THE ACTUAL LOADING CONTAINER
<div id="loading_container">
<img id="loading_animation" src="assets/ajax/loading/ajax-loader(3).gif" />
<p id="loading_message">&nbsp;</p>
</div>

Here's the css:

******************************************************

div#loading_overlay {
position: fixed;
top: 0;
left: 0;
z-index: 4000;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
}

div#loading_container {
position: fixed;
margin-top: 30%;
margin-left: 45%;
z-index: 5000;
}

img#loading_animation {
display: block;
margin: 0 auto;
}

p#loading_message {
text-align: center;
margin-top: 10px;
padding: 5px 0 7px 0;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
color: #FFF;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
}

rainborick

4:25 pm on May 20, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The best way I know of to avoid opacity inheritance issues is to use rgba() colors for text and background colors rather than relying on CSS opacity. You lose compatibility with IE8 and lower, but that's a quickly shrinking percentage of the audience and you can often work around them by using transparent .png background images.

That lets you nest your <div>s and makes your positioning issues much simpler.

Paul_o_b

7:41 pm on May 20, 2012 (gmt 0)

10+ Year Member



Hi,

If the centred element is an unknown with and height then it gets complicated. You can do it like this for IE8+:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Vertical centre an element of unknown height and width</title>
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0
}
#wrapper {
height:100%;
width:100%;
display:table;
vertical-align:middle;
position:fixed;
z-index:5000;
overflow:hidden;
}
#outer {
display:table-cell;
vertical-align:middle;
}
#inner {
position:relative;
left:50%;
float:left;
}
#middle {
border:1px solid #000;
padding:20px 20px;
position:relative;
text-align:center;
left:-50%;
}
p { margin:1em 0 }
div#loading_overlay {
position: fixed;
top: 0;
left: 0;
z-index: 4000;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
}
img#loading_animation img {
display:block;
margin:auto;
}
img#loading_animation { text-align:center; }
p#loading_message {
text-align: center;
margin-top: 10px;
padding: 5px 0 7px 0;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
color: #FFF;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#inner {top:50%}
#middle{top:-50%;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#wrapper{
position:relative;
overflow:hidden;
}
</style>
<![endif]-->
</head>
<body>
<div id="loading_overlay"> </div>
<div id="wrapper">
<div id="outer">
<div id="inner">
<div id="middle">
<div id="loading_animation"><img src="assets/ajax/loading/ajax-loader(3).gif" /></div>
<p id="loading_message">This is the loading message</p>
</div>
</div>
</div>
</div>
</body>
</html>

neophyte

9:16 am on May 21, 2012 (gmt 0)

10+ Year Member



Rainborick and Paul_o_b -

Thanks to you both for your input. Am taking a look at Paul's css solution but am using Rainborick's .png trick
 

Featured Threads

Hot Threads This Week

Hot Threads This Month