homepage Welcome to WebmasterWorld Guest from 174.129.163.183
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Centering one Position:Fixed div inside another
neophyte




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

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




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

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




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved