Margin into absolute position

HTML & CSS
1

Is there such a thing as a converter that converts margin into absolute position?

I’m asking because I was told to only use position absolute to position play buttons.

I have about 7 I need to do.

Is there a way to figure it out using simple math?

2

That’s not many. Why don’t you do it manually? It would be less work than finding a converter and learning how to implement it. You need to learn when to use tools appropriately and when using tools is just overkill.

1 Like
3

Cause then I would need to keep taking screenshots and measuring.

4

Why do you need screenshots? You can view the results in your browser, and your browser has developer tools to help you determine distances. If you make good use of those, you will make your job much easier.

5 Likes
5

Get the Web developer toolbar for your browser, it has a ton of useful tools including a ruler :slight_smile:

1 Like
6

The pixels used in margins are the same pixels used in absolute positioning. If you’ve used margins to move something then how did you work out the margin needed? You didn’t use a tool for that did you? It’s exactly the same process for absolute positioning.

If you want to move an element somewhere then you must know where you want to put it? If the div is 150px square and you want something of 50px square placed centrally then it doesn’t take much thought to work out what the positioning needs to be (top:50px and left 50px). Indeed if the element you are placing is a fixed width and height you don’t need to do any calculations as margin:auto will centre an absolute element vertically and horizontally when top,left,right and bottom are set to zero.

Here are both examples (which we have already been through several times already).

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.test1 {
	position:relative;
	width:150px;
	height:150px;
	background:red;
	margin:20px;
}
.mid1 {
	position:absolute;
	top:50px;
	left:50px;
	width:50px;
	height:50px;
	background:green;
}
/* second example */
.test2 {
	position:relative;
	width:150px;
	height:150px;
	background:red;
	margin:20px;
	
}
.mid2 {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:50px;
	height:50px;
	margin:auto;
	background:green;
}
</style>
</head>

<body>
<div class="test1">
  <div class="mid1"></div>
</div>
<div class="test2">
  <div class="mid2"></div>
</div>
</body>
</html>

Don’t make this sound harder than it is! It is simple but better than that it is easy.

4 Likes
7

I have this one that I have made, but I’ve always been using it for margin, never absolute.

 <style type="text/css">
#holder {
    width:330px;
    height:300px;
    border:3px solid red;
    position:relative;
}

.hvcentered {
    width:100px;
    height:50px;
    background-color:#00a0b0;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}
</style>

<div id="holder">
    <div class="hvcentered"></div>
</div>
8

Thank you…

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.