How do I make content go outside of a border in html?

Potato Lord 0
Viewed 26

I want to make it so that the word "Test" Is outside of the border. I have tried to google it, but i've come up with little to no sucess. I am also working on bluring the visible lines, so please don't mention them. I understand that the webpage doesn't look great, but I'm working on it. I'm unsure what to put here because I have to have more text and description, which I don't have. I think my question is pretty strait forward.

html, body {
  height: 100%;
  width: 100%;
  background-color: white;
  margin: 0px;
  padding-top: none;
}

h1 {
  padding-left: 30%;
  padding-right: 30%;
  margin-top: 0;
}

h2 {}

h3 {
  padding-left: 30%;
  padding-right: 30%;
}

h4 {}

p {}

.banner {
  background-image: url(doodle.png);
  background-position: center;
  height: 100%;
  width: 100%;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: relative;
  bottom: 14%;
  color: white;
}

#boxed {
  border-style: solid;
  border-height: 50%;
  top: 25%;
  margin-left: 30%;
  margin-right: 30%;
  position: relative;
  text-align: center;
  color: white;
}

#headContent {
  color: white;
}

#aboutUs {
  color: black;
}
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>TITLE</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1> THIS IS AN EXAMPLE OF THE PROBLEM:</h1>
  <img src="https://i.imgur.com/ii1geII.png">
  <!-- This  is the header/banner -->
  <div class="banner">
    <div id="boxed">
      <h1>THIS IS THE CONTNET/CODE</h1>
      <h1>THIS WOULD GIVE OUT PERSONAL INFO</h1>
      <h3>When you send your dog to us, you can have the satasfaction of knowing that your dog will be treated as one of our family</h3>

    </div>
    <!-- This is the majority of the home page -->
    <div id="headContent">
      <h2>
        Our promise -
      </h2>
      <h3>
        We can guarentee that your doodle or small breed dog will have the time of their life staying with us! Your dog will experience robust walks, hours of fun activities, and relaxing evenings on the couch!
      </h3>
      <h2>
        Who are we -
      </h2>
      <h3>
        THIS INFO WOULD DOX ME LOL based dog care buisness specializing in doodles and small breed dogs!
      </h3>
    </div>

    <!-- about us -->
   
    <!-- this is the footer -->
    <footer>

    </footer>
    </div>
    <div id="aboutUs">
      <h1>test</h1>
    </div>
</body>

css html
1 Answers

I edited your post to make it a snippet. Providing a snippet will get you better and faster answers. You have a number of unmatched tags in your html that I have corrected.

The 'test' you say you want to place outside the white border is actually a part of your image. so there's not much you can do about that unless you edit the jpg.

To move the about text TEST just move that whole block below the last div. If you want to position it on the picture use absolute positioning.

html, body {
  height: 100%;
  width: 100%;
  background-color: white;
  margin: 0px;
  padding-top: 0;
}

h1 {
  padding-left: 30%;
  padding-right: 30%;
  margin-top: 0;
}

h2 {}

h3 {
  padding-left: 30%;
  padding-right: 30%;
}

h4 {}

p {}

.banner {
  background-image: url(doodle.png);
  background-position: center;
  height: 100%;
  width: 100%;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: relative;
  bottom: 14%;
  color: white;
}

#boxed {
  border-style: solid;
  border-top: 50%;
  top: 25%;
  margin-left: 30%;
  margin-right: 30%;
  position: relative;
  text-align: center;
  color: white;
}

#headContent {
  color: white;
}

#aboutUs {
  color: black;
}

img{
width:100%;}

#aboutUs2{
position:absolute;
top:-100px;
color:black;
font-size:50px;
}
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>TITLE</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1> THIS IS AN EXAMPLE OF THE PROBLEM:</h1>
  <img src="https://i.imgur.com/ii1geII.png">
  <!-- This  is the header/banner -->
  <div class="banner">
    <div id="boxed">
      <h1>THIS IS THE CONTNET/CODE</h1>
      <h1>THIS WOULD GIVE OUT PERSONAL INFO</h1>
      <h3>When you send your dog to us, you can have the satasfaction of knowing that your dog will be treated as one of our family</h3>

    </div>
    <!-- This is the majority of the home page -->
    <div id="headContent">
      <h2>
        Our promise -
      </h2>
      <h3>
        We can guarentee that your doodle or small breed dog will have the time of their life staying with us! Your dog will experience robust walks, hours of fun activities, and relaxing evenings on the couch!
      </h3>
      <h2>
        Who are we -
      </h2>
      <h3>
        THIS INFO WOULD DOX ME LOL based dog care buisness specializing in doodles and small breed dogs!
      </h3>
      <div id="aboutUs2">
      <h1>test</h1>
    </div>
    </div>

    <!-- about us -->
   
    <!-- this is the footer -->
    <footer>

    </footer>
    </div>
    <div id="aboutUs">
      <h1>test</h1>
    </div>
</body>

DCR0
Related