Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS positioning/alignment problems

Status
Not open for further replies.
frozenpeas

frozenpeas

Technical User
Sep 13, 2001
893
CA
Hi,

I'm new to CSS layout (trying to abandon table layouts) and am having problems here.

I would like my content (a picture frame containing a swf) to be centered on the page. As it is now, it is left-aligned.

Here is my style sheet:

Code: 
body {
	background-image: url(images/bg.gif);
	text-align: center;
}

div#content {
	position: absolute;
	height: 100%;
	width: 100%; 
	left: 0px;
	top: 0px;
	padding: 0px;
	/*text-align: center;*/
}

/* start picture frame layers */

div#frame-container {
	position: absolute;
	margin-left: 0px auto;
	margin-right: 0px auto;
	left: 0px;
	top: 5px;
	padding: 0px;
}

div#frame-ul {
	position: absolute;
	height: 55px;
	width: 57px;
	left: 0px;
	top: 0px;
	padding: 0px;
}

div#frame-uc {
	position: absolute;
	height: 55px;
	width: 695px;
	left: 55px;
	top: 0px;
	padding: 0px;
}

div#frame-ur {
	position: absolute;
	height: 55px;
	width: 57px;
	left: 750px;
	top: 0px;
	padding: 0px;
}

div#frame-l {
	position: absolute;
	height: 397px;
	width: 57px;
	left: 0px;
	top: 55px;
	padding: 0px;
}

div#main {
	position: absolute;
	height: 397px;
	width: 695px;
	left: 57px;
	top: 55px;
	padding: 0px;
}

div#frame-r {
	position: absolute;
	height: 397px;
	width: 57px;
	left: 750px;
	top: 55px;
	padding: 0px;
}

div#frame-bl {
	position: absolute;
	height: 55px;
	width: 57px;
	left: 0px;
	top: 452px;
	padding: 0px;
}

div#frame-bc {
	position: absolute;
	height: 55px;
	width: 695px;
	left: 55px;
	top: 452px;
	padding: 0px;
}

div#frame-br {
	position: absolute;
	height: 55px;
	width: 57px;
	left: 750px;
	top: 452px;
	padding: 0px;
}

/* end picture frame layers */

/* start menu */

div#menu-container {
	position: absolute;
	height: 55px;
	width: 57px;
	left: 0px;
	top: 525px;
	padding: 0px;
}

div#menu-module01 {
	position: absolute;
	height: 37px;
	width: 152px;
	left: 0px;
	top: 0px;
	padding: 0px;
}

div#menu-module02 {
	position: absolute;
	height: 37px;
	width: 152px;
	left: 177px;
	top: 0px;
	padding: 0px;
}

div#menu-module03 {
	position: absolute;
	height: 37px;
	width: 152px;
	left: 354px;
	top: 0px;
	padding: 0px;
}

div#menu-module04 {
	position: absolute;
	height: 37px;
	width: 152px;
	left: 531px;
	top: 0px;
	padding: 0px;
}

/* end menu */

and my html:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>Saskatchewan Legislature</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_controlShockwave(objStr,x,cmdName,frameNum) { //v3.0
  var obj=MM_findObj(objStr);
  if (obj) eval('obj.'+cmdName+'('+((cmdName=='GotoFrame')?frameNum:'')+')');
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function P7_Scrub(obj) { //v1.0 by PVII
 if(obj.blur){obj.blur();}
}
//-->
</script>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body onLoad="MM_preloadImages('images/btn_module01_o.gif','images/btn_module02_o.gif','images/btn_module03_o.gif','images/btn_module04_o.gif','images/btn_module02_u.gif','images/btn_module03_u.gif','images/btn_module04_u.gif','images/btn_module01_u.gif')">
<div id="content">
	<div id="frame-container">
	  <div id="frame-ul"><img src="images/frame_ul.gif" width="57" height="55"></div>
	  <div id="frame-uc"><img src="images/frame_uc.gif" width="695" height="55"></div>
	  <div id="frame-ur"><img src="images/frame_ur.gif" width="57" height="55"></div>
	  <div id="frame-l"><img src="images/frame_l.gif" width="57" height="397"></div>
	  <div id="main">
	    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"[/URL] name="shell" width="695" height="397" align="middle" id="shell">
          <param name="allowScriptAccess" value="sameDomain" />
          <param name="movie" value="swf/shell.swf" />
          <param name="quality" value="high" />
          <param name="bgcolor" value="#ffffff" />
          <embed src="swf/shell.swf" width="695" height="397" align="middle" quality="high" bgcolor="#ffffff" name="shell" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer"[/URL] swliveconnect="true" />        
</object>
	  </div>
	  <div id="frame-r"><img src="images/frame_r.gif" width="57" height="397"></div>
	  <div id="frame-bl"><img src="images/frame_bl.gif" width="57" height="55"></div>
	  <div id="frame-bc"><img src="images/frame_bc.gif" width="695" height="55"></div>
	  <div id="frame-br"><img src="images/frame_br.gif" width="57" height="55"></div>
	  <div id="menu-container">
	    <div id="menu-module01">
	      <p><a href="javascript:;" onClick="MM_controlShockwave('0','','GotoFrame','0');MM_swapImage('module01','','images/btn_module01_o.gif','module02','','images/btn_module02_u.gif','module03','','images/btn_module03_u.gif','module04','','images/btn_module04_u.gif',1)"><img src="images/btn_module01_u.gif" name="module01" width="152" height="37" border="0" id="module01"></a></p>
        </div>
		<div id="menu-module02">
		  <p><a href="javascript:;" onClick="MM_controlShockwave('0','','GotoFrame','1');MM_swapImage('module01','','images/btn_module01_u.gif','module02','','images/btn_module02_o.gif','module03','','images/btn_module03_u.gif','module04','','images/btn_module04_u.gif',1)"><img src="images/btn_module02_u.gif" name="module02" width="152" height="37" border="0" id="module02" onload="P7_Scrub(this)"></a></p>
	    </div>
		<div id="menu-module03">
		  <p><a href="javascript:;" onClick="MM_controlShockwave('0','','GotoFrame','2');MM_swapImage('module01','','images/btn_module01_u.gif','module02','','images/btn_module02_u.gif','module03','','images/btn_module03_o.gif','module04','','images/btn_module04_u.gif',1)"><img src="images/btn_module03_u.gif" name="module03" width="152" height="37" border="0" id="module03" onload="P7_Scrub(this)"></a></p>
		</div>
		<div id="menu-module04"><a href="javascript:;" onClick="MM_controlShockwave('0','','GotoFrame','3');MM_swapImage('module01','','images/btn_module01_u.gif','module02','','images/btn_module02_u.gif','module03','','images/btn_module03_u.gif','module04','','images/btn_module04_o.gif',1)"><img src="images/btn_module04_u.gif" name="module04" width="152" height="37" border="0" id="module04" onload="P7_Scrub(this)"></a></div>
	  </div>
	</div>
</div>
</body>
</html>

As you can see, everything is absolutely positioned at the moment. I have tried various methods, including setting the first div as absolute and the rest as relative. Anything other than the code I have posted above, has caused quite the mess (an orderly mess, mind you).

I am pretty sure I might not completely understand how it works since nothing I have done so far as worked for me. [mad]

Any help would be greatly appreciated. Thanks.

frozenpeas
 
Sort by date Sort by votes
<...turn monitor spanning on>
The only way to center this: bunch of frames or IFRAME construct. Nothing else is possible with absolute positioned elements.

 
Upvote 0 Downvote
Thanks for the reply.

So other than that, they are correct being absolutely positioned? I thought maybe I was off track with that.

frozenpeas
 
Upvote 0 Downvote
This should be the same method as centering a box with rounded corners, if that helps.

frozenpeas
 
Upvote 0 Downvote
All DIVs are absolute, have height/width, no problems w/ IE5 metrics should appear, code is vanilla Dreamweaver... looks OK for that kind of pages.
 
Upvote 0 Downvote
Could this not be acheived in the same fashion as a 3 column layout?

I am working on that but it's still messed.

frozenpeas
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
824
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
655
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
710
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
238
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top