PDA

View Full Version : Cetering something while absoulute postitioning



afesoccer
Aug 24th, 2007, 05:23 AM
How do I center a something while positioning it? Like let's say a menu, I want to center it and also position where it should be based on vertical.



<center><span style="position: absolute; left: 195; top: 195">
MENU</span></center>

Also, I am using a php page.

rmedek
Aug 24th, 2007, 05:54 AM
If it's fixed width it's simple…push it to the right 50% of the container (putting the left edge in the center), then scoot it backwards by 50% of the width (putting the center of the element in the center):


#container {
position: relative;
}

#element {
width: 300px;
position: absolute;
left: 50%;
top: 25px;
margin-left: -150px;
}

<div id="container">
<p id="element">This is centered absolutely.</p>
</div>

afesoccer
Aug 24th, 2007, 06:20 PM
<!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=iso-8859-1" />
<title>Athletes 4 Excellence</title>







<style type="text/css">
<!--
body {
background-image: url();
background-color: #000000;
}

-->
</style><center>
<span style="position: absolute; left: 0px; top: 195px">
I WANT THIS TO BE CENTERED!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</span>








<script type="text/JavaScript">
<!--
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_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_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</center></script>
</head>
<body onload="MM_preloadImages('Thousand Island Hosting/Menu/HOMEhover.gif')">
<div align="center"><img src="AFE Website/New Design/My Webs/AFE/top.png" width="760" height="245" />
</div>
<center>
<p>
<p align="center"><a href="http://www.athletes4excellence.com" target="iframe" onclick="MM_nbGroup('down','group1','Home','',1)" onmouseover="MM_nbGroup('over','Home','Thousand Island Hosting/Menu/HOMEhover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="Thousand Island Hosting/Menu/HOMEGIF.gif" alt="" name="Home" width="55" height="46" border="0" id="Home" onload="" /></a>
<iframe
name="iframe"
width="600"
height="400"
src="http://www.athletes4excellence.com"
frameborder=""
scrolling="yes" ></iframe>
</center>
</body>
</html>




It did not work... that's my code. What I want to center is the "I WANT THIS TO BE CENTERED!!!!!!!!!!..."

blain
Aug 24th, 2007, 07:28 PM
That code makes baby jesus cry.
Have you never heard of separation? or CSS rollovers?

rmedek
Aug 24th, 2007, 08:22 PM
@blain: No flaming, please, no matter what emotional state the baby Jesus is left in.

@afesoccer: I don't see where you tried the code I provided.

afesoccer
Aug 25th, 2007, 04:01 AM
Where would I put it?

afesoccer
Aug 26th, 2007, 01:03 AM
<!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=iso-8859-1" />
<title>Menu</title>
<style type="text/css">
<!--
#container {
position: relative;
}

#element {
width: 125px;
position: absolute;
left: 50%;
margin-left: 125px;
}
.style1 {color: #FFFFFF}



</body>
<div align="container">
<p id="
-->
</style>

<script type="text/JavaScript">
<!--
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_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_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
<body onload="MM_preloadImages('AFE/Menu/homehover.gif','AFE/Menu/trackandfieldhover.gif','AFE/Menu/crosscountryhover.gif')"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="http://www.athletes4excellence.com" target="_top" onclick="MM_nbGroup('down','group1','Home','',1)" onmouseover="MM_nbGroup('over','Home','AFE/Menu/homehover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="AFE/Menu/home.gif" alt="" name="Home" width="125" height="25" border="0" id="Home" onload="" /></a></td>
</tr>
<tr>
<td><a href="http://www.afesoccer.com/trackandfield.html" target="_top" onclick="MM_nbGroup('down','group1','TrackandField','',1)" onmouseover="MM_nbGroup('over','TrackandField','AFE/Menu/trackandfieldhover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="AFE/Menu/trackandfield.gif" alt="" name="TrackandField" width="125" height="25" border="0" id="TrackandField" onload="" /></a></td>
</tr>
<tr>
<td><a href="http://www.afesoccer.com/crosscountry.html" target="_top" onclick="MM_nbGroup('down','group1','CrossCountry','',1)" onmouseover="MM_nbGroup('over','CrossCountry','AFE/Menu/crosscountryhover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="AFE/Menu/crosscountry.gif" alt="" name="CrossCountry" width="125" height="25" border="0" id="CrossCountry" onload="" /></a></td>
</tr>
</table></p>
</div></html>



I think I tried it every way, but it is just not working.

rmedek
Aug 26th, 2007, 02:15 AM
Please use
tags when posting all that code!

You probably need to brush up on some basic HTML/CSS skills before attempting to center things using absolute positioning. Try the tutorials at http://htmldog.com or http://www.w3schools.com. It looks like you are trying to just copy and paste what I gave you into Dreamweaver or something.

The thing you're trying to center (the element in the HTML) gets the ID:


<p id="centered">This will be centered</p>

Code gets added to the CSS to make it centered:


#container {
position: relative; /* this is just in case; it is the container that wraps around your content */
}

#centered {
position: absolute; /* makes the element absolutely positioned */
width: 250px; /* give it a fixed width */
left: 50%; /* push the left edge to the very middle of the #container */
margin-left: -125px; /* slide the element half of it's width back to the left */
}