Jump to content

[SOLVED] CSS Position Absolute Div Align Center


papillonstudios

Recommended Posts

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>

Link to comment
Share on other sites

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;

Link to comment
Share on other sites

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]

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.