[SOLVED] CSS Position Absolute Div Align Center

papillonstudios · August 9, 2009

I have a div that is positioned Absolute so that it is on top of the rest of the the page contents. Buts i want it to align completely center i have width/height set to auto and its not center.

heres all my code for the page. all my css, html and javascript is in the same page.

<html>
     <head>
          <title>Select a Video</title>
          <link href="style.css" rel="stylesheet" type="text/css" />
          <script src="jquery-1.3.2.js" type="text/javascript" /></script>
          <script type="text/javascript">
          	$(document).ready(function(){

            	$('#popupopen').click(function(){
                	$('#video').toggle('slow');
                });

			$('#popupopen').click(function(){
                    $('#videobg').toggle('slow');
                });

			$('#popupclose').click(function(){
                	$('#video').toggle('slow');
                });

			$('#popupclose').click(function(){
                    $('#videobg').toggle('slow');
                });

               });
          </script>
	  <style type="text/css">

		h1 {
			background-image:url(i/h1bg.jpg);
			background-repeat:repeat-x;
			border:solid thin #333;
		 	font-size:20px;
			height:20px;
		}

            #vidcontain {
			overflow: auto; 
			margin: 10px; 
			background: #333;
			color:#FFF;
			margin-left:auto;
			margin-right:auto;
		}

		#vidcontain img {
			float: left; 
			width: 100px; 
			height: 100px; 
			margin: 10px;
			border:thin #000 solid;
		}

		#vidcontain p {
			padding:10px;
			margin:15px;
		}

		#vidcontain span img {
			width:107px;
			height:28px;
		}

		#vidcontain span { 
			width:107;
			height:28;
			clear: left; 
			float: right;  
		}

		#vidcontain h1 {
			color:#000;
		}

		.popupbg
		{
		position:absolute;
		top:0px;
		left:0px;
		opacity:0.6;
		filter:alpha(opacity=60);
		background-color: #000000;
		z-Index:1000;
		}

		.video
		{
	   	margin-left: auto;
		margin-right: auto;
		position:absolute;
		border:1px solid black;
		background-color:#262626;
		text-align:center;
		vertical-align:50%;
		}

		.video object
		{
			margin:10px;
		}

		.video span
		{
			background-color:#CCC;
			border-bottom:thin solid #333;
			width:100%;
			float:left;
			margin-bottom:5px;
			background-image:url(i/h1bg.jpg);
		}

		.video a
		{
			float:right;
			border:0px #000;
		}

          </style>

     </head>
     	<body>
		<div id="videobg" class="popupbg"></div>
        <div id="video" class="video">
            <span><center>TEST VIDEO (Youtube)<a href="#" id="popupclose"><img src="i/close.png" alt="Close" border="none" /></a></center></span>
            <br />
            <object width="660" height="405"><param name="movie" value="http://www.youtube.com/v/kuEJtau__Ak&hl=en&fs=1&rel=0&color1=0x234900&color2=0x4e9e00&hd=1&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/kuEJtau__Ak&hl=en&fs=1&rel=0&color1=0x234900&color2=0x4e9e00&hd=1&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="660" height="405"></embed></object>
            <br />
        </div>
		<div id="container" style="margin-left:auto; margin-right:auto; width:700px; height:500px; border:thin #000 solid;">
			<div id="vidcontain">

				<h1><center>TEST VIDEO (Youtube)</center></h1>

				<img src="i/thumbnail.jpg" alt="Thubnail" />

				<p>Twitter: <a href="http://twitter.com/gaming_fusion">http://twitter.com/gaming_fusion</a></p>

				<span><a href="#" id="popupopen"> <img src="i/play.jpg" alt="Play" /></a></span>

			</div>
		</div>
</body>
</html>

papillonstudios · August 9, 2009

the div in question is #video

haku · August 10, 2009

You cannot center absolutely positioned divs with CSS.

You can do it with javascript if you want (get the width of the screen subtract the width of the div, divide by 2, and use that number as the left margin).

papillonstudios · August 10, 2009

ok thanks man

papillonstudios · August 10, 2009

heres what i got for the javascript (jquery)

and it puts the div to the right to much

$("#video").css("margin-left", screen.width - $("#video").width()/2);

The width changes dynamically depending on the size of the video embedded into the div. The video that is embedded is also dynamic.

Heres my css properties to get it where i think is the middle of the screen(horizontal)

margin-left:155px;

papillonstudios · August 10, 2009

ok i got the code into where i wanted it to go and it goes to the far right and down a bit.

heres the html source for the page with the dynamic video load on it.

                                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GamingFusion</title>
<link href="default.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.js" type="text/javascript" /></script>
</head>
<body>
<center>
<div class="container">
<div class="navbar" align="left">

    		<a href="index.php"><img src="/i/navbar/Home.jpg" alt="Home" 0="" border=""></a><img src="/i/navbar/navspacer.jpg" alt="spacer" border=""><a href="index.php?action=dl"><img src="/i/navbar/Download.jpg" alt="Download" 0="" border=""></a><img src="/i/navbar/navspacer.jpg" alt="spacer" border=""><a href="index.php?action=game"><img src="/i/navbar/Games.jpg" alt="Games" 0="" border=""></a><img src="/i/navbar/navspacer.jpg" alt="spacer" border=""><a href="index.php?action=video"><img src="/i/navbar/Videos.jpg" alt="Videos" 0="" border=""></a><img src="/i/navbar/navspacer.jpg" alt="spacer" border=""><a href="index.php?action=login"><img src="/i/navbar/Login.jpg" alt="Login" 0="" border=""></a><img src="/i/navbar/navspacer.jpg" alt="spacer" border=""><a href="index.php?action=register"><img src="/i/navbar/Register.jpg" alt="Register" 0="" border=""></a><img src="/i/navbar/navspacer.jpg" alt="spacer" border=""><a href="index.php?action=contact"><img src="/i/navbar/Contact.jpg" alt="Contact" 0="" border=""></a>    </div>
    
    <div class="loginbox" align="left">    	
    		<h1><center>Member</center></h1><div class="margin" style="margin-left:5px;">Welcome back, <strong>admin</strong>!<br /><br /><a href="index.php?action=editprofile">Edit Profile</a> <br><a href="index.php?action=memberlist">View Members</a> <br><a href="index.php?action=logout">Logout</a></div><div class="margin" style="margin-left:5px;"><a href="index.php?action=admin"><strong>Admin Panel</strong></a></div><BR><BR>    </div>

    
     <div class="logo">
    	<img src="i/header.jpg" alt="Logo" />
    </div>
    
    <div class="content" align="justify" style="overflow:scroll;">
    	
            <p>		 <script type="text/javascript">
          	$(document).ready(function(){

			var x = screen.availWidth - $("#video").width();
			var y = screen.availHeight - $("#video").height();

			$("#video").css("margin-left", x/2 - ;
			$("#video").css("margin-bottom", y/2);

            	$('#popupopen').click(function(){
                	$('#video').toggle('slow');
                });

			$('#popupopen').click(function(){
                    $('#videobg').toggle('slow');
                });

			$('#popupclose').click(function(){
                	$('#video').toggle('slow');
                });

			$('#popupclose').click(function(){
                    $('#videobg').toggle('slow');
                });

               });
          </script>
        <div id="popupbg" class="popupbg"></div>
        <div id="video" class="popup">
            <span><center>**Alert** iPhone Users: Watch this (Youtube)<a href="#" id="popupclose"><img src="i/close.png" alt="Close" border""></a></center></span>

            <br />
            <object width="660" height="405"><param name="movie" value="http://www.youtube.com/v/kuEJtau__Ak&hl=en&fs=1&rel=0&color1=0x234900&color2=0x4e9e00&hd=1&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/kuEJtau__Ak&hl=en&fs=1&rel=0&color1=0x234900&color2=0x4e9e00&hd=1&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="660" height="405"></embed></object>            <br />
        </div>
	<div class="game"><h1><center>**Alert** iPhone Users: Watch this (Youtube)</center></h1><img src="i/thumbnail.jpg" alt="Thumbnail" border""><p>Twitter: http://twitter.com/soldierknowbest</p><span><a href="#" id="popupopen"><img src="i/play.jpg" alt="Play" border""></a></span></div>		</p>
    </div>
    
    <div class="sidebar" align="left">
    	

<div id="twitter_div" style="border:thin solid #FFF; width:auto; height:auto; padding:5px;">
<h2 class="sidebar-title">Twitter Feed</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/Gaming_Fusion" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/Gaming_Fusion.json?callback=twitterCallback2&count=5"></script>
    </div>
   
    <div class="space">
    	<p>SPACE</p>

    </div>
    
    <div class="footer">
    	Copyright 2009 <a href= 'http://localhost:8888/isus'><STRONG>Isus 2.0.2</STRONG></a><br>Powered by <a href="http://isus.gamingfusion.net">Isus 2.0 | A GamingFusion Development </a>    </div>
    <div class="space">
    	<p>SPACE</p>
    </div>

</div>
</center>
</body>
</html>

*Attached is the original File i was working on to test with to find the middle.

[attachment deleted by admin]

haku · August 10, 2009

I'm not sure if you are asking a question here or not.

papillonstudios · August 11, 2009

i fixed the problem last night. Topic Solved

Sign In

[SOLVED] CSS Position Absolute Div Align Center

Recommended Posts

papillonstudios

Link to comment

Share on other sites

papillonstudios

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

papillonstudios

Link to comment

Share on other sites

papillonstudios

Link to comment

Share on other sites

papillonstudios

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

papillonstudios

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information