How would I push the 2 grey blocks down, keeping it 157px between the two blocks?
How would I be able to use
margin-top:
or something else
to push down the grey blocks?
Keeping it 157px between the 2 blocks.
From this:
To this:
When you are using absolute positioning you use these offset properties
and enter the value you desire
Along with simple math to tell you what the values you desire are
This isnât using absolute positioning:
Well since they are display:block then you act as if you were in the normal page flow and use margin-top to place the 1st block where you want it.
Then rinse and repeat your way down
Use bg colors or outline so you can see what your doing on this one
#container span {
display: block;
height: 157px;
background:red
}
I donât want the image to move.
Thatâs what adding margin does to it, it moves everything lower.
All I want to be able to do is move the 2 grey blocks lower keeping it 157px between both of them.
Right , thatâs called normal page/layout flow
Normal layout flow
Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout. Letâs look at a quick HTML example:
That is what you work with when you build real working web pages
Is there a piece of code that I can use that will let me move both grey blocks at the same time keeping it 157px between both of them?
Do you want good code or do you want something that you might understand? Non-responsive, of course.
How would I be able to maneuver both grey blocks at the same time keeping it 157px between both of them?
#container {
position: relative;
width: 500px;
height: 500px;
background-image: url(https://i.imgur.com/sC3tdOw.png);
}
#container::before,
#container::after {
content: '';
position: absolute;
width: 100%;
}
#container::before {
top: 93px;
height: 100px;
background-color: #ccc;
}
#container::after {
bottom: 50px;
height: 100px;
background-color: #ccc;
}
Now youâre using absolute positioning⌠which is it to be?
absolute positioning seems to be the better approach to this.
Unless if what Iâm trying to do can be done both ways.
Absolute positioning:
Other Way:
Assuming that it can, what do you want to do with it next?
How would I be able to maneuver both grey blocks at the same time keeping it 157px between both of them?
What does the red color bar symbolize in the âOther Wayâ fiddle?
To me, it looks like you now have two different bars that are 157px high, one red one and one through which the background image can be seen, plus two or three three gray bars of undetermined height.
Is that correct?
Here is how you can do that
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Page</title>
<style>
.container {
display:table;/*establish block format for .inner margin-top*/
margin:0 auto;
width: 500px;
height: 500px;
background-image: url(https://i.imgur.com/sC3tdOw.png);
}
.inner {
position:relative;
margin-top:71px; /*this margin shifts the entire block*/
height:357px;
outline:2px dashed red;
}
.inner::before, .inner::after {
content:"";
position:absolute;
top:0;
height: 100px;
width:100%;
background:#ccc;
}
.inner::after {
top:auto;
bottom:0;
}
</style>
</head>
<body>
<div class="container">
<div class="inner"></div>
</div>
</body>
</html>
Thatâs exactly what I wanted.
And why did I say that.
So you could see what you were doing, you had one block laid directly on top the other and you couldnât see what was happening.
BG colors or outline help you see what your doing, then you remove them later after you get things under control
Late to the finish line, I am - no surprise there - neverthelessâŚ
for what itâs worth, here is another version of Ray.Hâs code that does not use absolute positioning.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/stylesheet.css">
<title>template</title>
<!--
https://www.sitepoint.com/community/t/editing-an-image-in-css/283825/24
-->
<style>
#container {
display:table;
width:500px;
height:500px;
background-image: url(https://i.imgur.com/sC3tdOw.png);
margin:0 auto;
}
#container::before,
#container::after {
content:"";
display:block;
height:100px;
background-color:#ccc;
opacity:.8; /* optional transparency for gray bars */
margin-top:71px; /* distance from top of container to the top gray bar. *//* (500px - 157px - 100px - 100px) / 2 = 143px / 2 = 71.5px */
}
#container::after {
margin-top:157px; /* space between gray bars */
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>