Editing an image in CSS

HTML & CSS
21

How would I push the 2 grey blocks down, keeping it 157px between the two blocks?

22

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:

23

margin-top

When you are using absolute positioning you use these offset properties
and enter the value you desire

top
bottom

Along with simple math to tell you what the values you desire are

1 Like
24

This isn’t using absolute positioning:

25

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
}
26

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.

27

Right , that’s called normal page/layout flow

Introduction to CSS layout

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

2 Likes
28

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?

29

Do you want good code or do you want something that you might understand? Non-responsive, of course.

30

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;
}
31

Now you’re using absolute positioning… which is it to be?

32

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:

33

Assuming that it can, what do you want to do with it next?

34

#22

How would I be able to maneuver both grey blocks at the same time keeping it 157px between both of them?

35

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?

36

@Ray.H said to do that.

#8

37

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>
3 Likes
38

That’s exactly what I wanted.

39

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 :slight_smile:

3 Likes
40

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>
2 Likes