How do I get the images to go below the blue line

HTML & CSS
1

I almost got it here, how do I fix it?

The images are now stuck in the border outline.

How do you fix that?

image

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>


<style type="text/css">

.outer1 {
  width: 1500px;
  /*1500*/
  height: 500px;
  background-color: #000;
  margin: 0 auto;
  position: relative;
}

.outer2 {
  background-color: #000;
  margin: 0 auto;
  width: 615px;
  height: 150px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.hr3 {
  color: orange;
  font-style: normal;
  font-size: 65px;
  font-family: georgia;
  text-align: center;
  height: 150px;
  outline: 5px solid teal;
  margin-top: 0;
  margin-bottom: 0;
}

.hr3 span {
  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 2px;
  margin-left: 35px;
  margin-right: 37px;
}

.hr4 {
  float: right;
  margin-right: 37px;
}

.hr4 img {
  margin-top: -220px;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  padding-top: 160px;
}

.hr4 img+img {
  margin-left: 8px;
}

.hr9 {
  color: green;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  font-family: georgia;
  margin-left: 60px;
  margin-top: -227px;
  transform: rotate(-.9deg);
  outline: 0px dashed white;
  padding-top: 160px;
}

.color {
  color: #1155CC;
}




</style>


<body>
<div class="outer1">

<div class="outer2">

    <p class="hr3">testing<span></span></p>

    <div class="hr4"><img class="resize" src="https://i.imgur.com/UMxeP0B.png " alt=""><img class="resize"src="https://i.imgur.com/SjSUmlT.png" alt=""><img class="resize" src="https://i.imgur.com/OEFt686.png" alt=""><img class="resize"src="https://i.imgur.com/iI7hHv9.png" alt=""><img class="resize"src="https://i.imgur.com/pzSFYoc.png" alt=""></div>

    <div class="hr9">
        <p>testing</p>
 
    </div>
</div>
</div>

</body>
</html>
3

margin-bottom: -60px; fixed it.


.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 65px;
  font-family: georgia;
  text-align: center;
  height: 150px;
  outline: 5px solid #38761d;
  margin-top: 0;
  margin-bottom: -60px;
}
4

asasass,

  1. Always validate code while writing it and again after finishing.
    https://validator.w3.org/nu/
    https://jigsaw.w3.org/css-validator/

  2. Avoid absolute positioning unless you have the knowlege to use it appropriately.

  3. If you find yourself using unusually large negative margins and large paddings, beware of alligators.

See if this works for you…

<!doctype html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>images below blue line</title>
<!--
https://www.sitepoint.com/community/t/how-do-i-get-the-images-to-go-below-the-blue-line/330143
asasass
Jun 8,2019 5:18 AM
-->
    <style>
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
.outer1 {
    display:table;
    width:100%;
    max-width:42rem;
    background-color:#000;
    padding:1.5rem;
    margin:0 auto;
}
.outer2 {
    border:0.375rem solid teal;
    padding-bottom:0.725rem;
    margin:0 auto;
}
.hr3 {
    color:orange;
    font-style:normal;
    font-size:4rem;
    font-family:georgia,serif;
    text-align:center;
    padding:0.375rem 0;
}
.hr3 span {
    display:block;
    height:0.3125rem;
    background-color:#15c;
    transform:rotate(-.9deg);
    margin-top:0.125rem;
    margin-left:2.25rem;
    margin-right:2.3125rem;
}
.hr9 {
    width:80%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:green;
    font-style:normal;
    font-weight:bold;
    font-size:1.2rem;
    font-family:georgia,serif;
    padding:0.5rem 0;
    margin:0 auto;
}
.hr4 {
    display:flex;
}
.hr4 img {
    width:2.5rem;
    height:2.5rem;
    border-radius:0.333rem;
}
.hr4 img+img {
    margin-left:0.5rem;
}
    </style>
</head>
<body>

<div class="outer1">
    <div class="outer2">
        <div class="hr3">testing<span></span></div>
        <div class="hr9">testing
            <div class="hr4">
                <img class="resize" src="https://i.imgur.com/UMxeP0B.png" alt="">
                <img class="resize" src="https://i.imgur.com/SjSUmlT.png" alt="">
                <img class="resize" src="https://i.imgur.com/OEFt686.png" alt="">
                <img class="resize" src="https://i.imgur.com/iI7hHv9.png" alt="">
                <img class="resize" src="https://i.imgur.com/pzSFYoc.png" alt="">
            </div>
        </div>
    </div>
</div>

</body>
</html>

images-below-blue-line.zip (1010 Bytes)

5

The box needs to be sitting on a 1500px x 500px background centered in the middle.

That’s what I used absolute positioning to do.

6

Hai, asasassan!

Absolute positioning is usually a poor choice, as you’ve been told many, many times.

<!doctype html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>images below blue line</title>
<!--
https://www.sitepoint.com/community/t/how-do-i-get-the-images-to-go-below-the-blue-line/330143
asasass
Jun 8,2019 5:18 AM
-->
    <style>
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
.outer1 {
    display:flex;      /* changed from "display:table" */
    width:1500px;
    height:500px;
    background-color:#000;
    margin:0 auto;
}
.outer2 {
    width:615px;
    border:5px solid teal;
    padding-bottom:11px;
    margin:auto;       /* changed from "margin:0 auto" */
}
.hr3 {
    color:orange;
    font-style:normal;
    font-size:4rem;
    font-family:georgia,serif;
    text-align:center;
    padding:6px 0;
}
.hr3 span {
    display:block;
    height:5px;
    background-color:#15c;
    transform:rotate(-.9deg);
    margin-top:2px;
    margin-left:36px;
    margin-right:36px;
}
.hr9 {
    width:80%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:green;
    font-style:normal;
    font-weight:bold;
    font-size:1.2rem;
    font-family:georgia,serif;
    padding:8px 0;
    margin:0 auto;
}
.hr4 {
    display:flex;
}
.hr4 img {
    width:40px;
    height:40px;
    border-radius:6px;
}
.hr4 img+img {
    margin-left:8px;
}
    </style>
</head>
<body>

<div class="outer1">
    <div class="outer2">
        <div class="hr3">testing<span></span></div>
        <div class="hr9">testing
            <div class="hr4">
                <img class="resize" src="https://i.imgur.com/UMxeP0B.png" alt="">
                <img class="resize" src="https://i.imgur.com/SjSUmlT.png" alt="">
                <img class="resize" src="https://i.imgur.com/OEFt686.png" alt="">
                <img class="resize" src="https://i.imgur.com/iI7hHv9.png" alt="">
                <img class="resize" src="https://i.imgur.com/pzSFYoc.png" alt="">
            </div>
        </div>
    </div>
</div>

</body>
</html>

images-below-blue-line-v2.zip (1.0 KB)

1 Like
7

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