Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Absolute positioning

Posted on 2000-02-16
6
Medium Priority
?
228 Views
Last Modified: 2013-12-25
 Using CSS and the Style attribute, I can theoretically position any element anywhere on the page.
   In practice however, because the absolute positioning is done with the top left corner of the element, it seems to be almost impossible to force an element to go to the very center of the page, or to be at the very end. In other words an absolute position of 50% does not center the element, but its top left corner.
   This seems crazy to me, but still...

   Is there any way to get around this?
0
Comment
Question by:Centsi
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 7

Expert Comment

by:nettrom
ID: 2526520
I believe that using regular CSS it should be possible to center the element if you set all margins to "auto".  e.g:

<div style="margin:auto;">
content goes here
</div>

then it should be centered.  this may not be particularly well-supported though.  so usually when I want something centered I use JavaScript.

<script type="text/javascript">
function myWinHeight(myWindow) {
  if(document.layers) {
   return(myWindow.innerHeight);
  } else if(document.all) {
   return(document.body.clientHeight);
  }
}

function myWinWidth(myWindow) {
  if(document.layers) {
   return(myWindow.innerWidth);
  } else if(document.all) {
   return(document.body.clientWidth);
  }
}

function myLayerWidth(layerID) {
  if(document.layers) {
return(document.layers[layerID].document.width);
  } else if(document.all) {
return(document.all[layerID].clientWidth);
  }
}

function myLayerWidth(layerID) {
  if(document.layers) {
    return(document.layers[layerID].document.width);
  } else if(document.all) {
    return(document.all[layerID].clientWidth);
  }
}

function myLayerHeight(layerID) {
  if(document.layers) {
    return(document.layers[layerID].document.height);
  } else if(document.all) {
    return(document.all[layerID].clientHeight);
  }
}

function myMoveTo(layerID, xpos, ypos) {
  if(document.layers) {
    document.layers[layerID].moveTo(xpos, ypos);
  } else if(document.all) {
    document.all[layerID].style.left = xpos;
    document.all[layerID].style.top = ypos;
  }
}

function centerLayer(layerID) {
  var winWidth = myWinWidth(self);
  var winHeight = myWinHeight(self);
  var layerWidth = myLayerWidth(layerID);
  var layerHeight = myLayerHeight(layerID);

  var leftPos = Math.floor((myWinWidth-myLayerWidth)/2);
  var topPos = Math.floor((myWinHeight-myLayerHeight)/2);

  myMoveTo(layerID, leftPos, topPos);
}
</script>

and then invoke on load.  example:

<body onload="centerLayer('myDiv')">

<div id="myDiv" style="position:absolute;">
....content goes here...
</div>

(all code written from the top of my head, if there are errors let me know and I'll check my previously written scripts and supply code that works (I've done this probably a half-dozen times now) :)
0
 
LVL 5

Expert Comment

by:mayhew
ID: 2532677
If you know the height and width in pixels of your object, you can use javascript and css (dhtml) to center.

obj.style.pixelleft = (screen.width-400)/2


where 400 is the width of your element, for example.


Note, the code above is IE.  DHTML opens a can of worms as far as cross browser code goes.

That might not be a problem for you, I just thought I'd mention it.
0
 

Author Comment

by:Centsi
ID: 2534550
  Firstly, unluckilly, I don't know the height of my image(s).
   Secondly, for me, that is too much javascript! and thirdly, I tried margin: auto, but I think I put it in the wrong place: should it go in a div which contains the image? I tried putting margin: auto in the img tag itslef which had no affect.
0
Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

 
LVL 7

Expert Comment

by:nettrom
ID: 2534560
it should go into the div.  so if the div contains an image do:

<div style="margin:auto;">
<img src=" ... ">
</div>

the JavaScript isn't too difficult to use, you don't have to worry about the code, all you need to do is to call one function in the onload, the rest is simply cut'n'paste. :)
0
 

Author Comment

by:Centsi
ID: 2538364
 I have now tried margin: auto in a containing div, and in the body, but it seems to make no difference.
  What are the other options with margin: ?
  (I am at the moment only aiming to work with IE5)
0
 
LVL 7

Accepted Solution

by:
nettrom earned 300 total points
ID: 2543025
I have researched a bit further into the CSS level 1 & CSS level 2 specifications, as well as some newsgroup posts.  the result is not pleasing.  currently, there seems to be no support for centering the content both vertically and horisontally without the use of a scripting language.

it's possible to center the content of the DIV using "text-align:center", so if the content is an image it can easily be centered horisontally.  the problem is centering it vertically though.  so far, no support, sorry.

so, in short, you'll have to use the JavaScript solution I posted earlier, or you won't get the centering you're looking for.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

609 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question