Design a unique border for a div element that extends a top-border all the way through the header and a bottom-border that

I am trying to achieve the design displayed in this mockup: https://i.sstatic.net/sYEPu.png

Here is my current progress: https://codepen.io/raney24/pen/VOmjBY

.header-border {
  width: 100%;
  margin-bottom: 10px;
  border-left: red solid 1px;
  border-right: red solid 1px;
  border-bottom: red solid 1px;
  .heading, .heading-subtitle {
    text-align: center;
  }
  .heading > span, .heading-subtitle > span {
    background-color: white;
    box-shadow: white 11px 0px 0px,
                white -13px 0px 0px;
    &:after {
      content: '';
      border-top: 1px solid red;
      height: 1px;
      width: 100%;
      display: block;
      position: relative;
      top: -20px;
      z-index: -1;
    }
  }
  .heading-subtitle > span {
    &:after {
      top: -13px;
    }
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="header-border">
      <h2 class="heading"><span>Learn More About What We Do</span></h2>
      <div class="col-sm-4">
        <div class="header-border">
          <h4 class="heading-subtitle"><span>Coding School</span></h4>
          <p>Awesome Inc U is our coding school. It is for both adults and children. We have taught over 1500 people to code with us.</p>
           <div class="text-center">
             <a class="btn btn-sm btn-primary" href="#">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </div> <!-- row-->
</div><!-- container -->

I am facing a challenge moving the borders down without overlapping the header borders. I am open to suggestions on alternative approaches or solutions.

While I am willing to use JavaScript/JQuery, I would prefer to avoid it if possible.

htmlcssborder

Answer №1

Eliminated the use of :after in CSS and instead applied margin: -20px to reposition the header at the top. Check out the link below for more details:

https://codepen.io/Xenio/pen/EzNgaB

.header-border {
  width: 100%;
  margin-bottom: 10px;
  border: red solid 1px;
  
  .heading, .heading-subtitle {
    text-align: center;
    margin-top: -20px
  }
 
 .heading > span, .heading-subtitle > span {
    background-color: white;
    box-shadow: white 11px 0px 0px,
                white -13px 0px 0px;
  }
  .heading-subtitle > span {
    &:after {
      top: -13px;
    }
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="header-border mt-4">
      <h2 class="heading"><span>Learn More About What We Do</span></h2>
      <div class="col-sm-4 mt-5">
        <div class="header-border">
          <h4 class="heading-subtitle"><span>Coding School</span></h4>
          <p>Awesome Inc U is our coding school. It is for both adults and children. We have taught over 1500 people to code with us.</p>
           <div class="text-center">
             <a class="btn btn-sm btn-primary" href="#">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </div> <!-- row-->
</div><!-- container -->

Answer №2

fieldset {
 position: relative; 
padding: 35px 25px 75px;
 }
fieldset legend
 {
 left:50%;
 } 
.legend2 
{ position: absolute; 
bottom: -1.4ex; 
left: 50%; 
background: white 
 }
caption, .legend2 
{ padding: 0 2px 
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>


<fieldset><legend align="center">Main Heading <span class=legend2><button>click here</button></span></legend>
  Enter content here.
</fieldset>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Verify whether the current location is within the circle

I am conducting a test to determine if my current location falls within a given radius of 300m. If it does, return true; otherwise return false. Below is the code I am currently using: <body> <button onclick="getLocation()"> ...

javascripthtmlwebgeolocationmaps

Creating a Vue.js v-for loop to dynamically display a series of DIVs in segments

Here is the code I am currently working with: <div class="container-fluid" id="networdapp" style="display:none;"> <div class="row" > <div v-for="(result,i) in results" :key="i" class="col-sm-6" > <div class=" ...

javascripthtmlcssvue.jsvuejs2

Learn the method for toggling images in HTML while simultaneously storing a 0 or 1 in a flag variable

In my design, I would like to have a star icon that displays two star icons at once - one blank and the other yellow. These stars will swap their appearance when clicked or tapped on touch screen devices. Additionally, I want to be able to store values as ...

html

Why won't the main bar column in Bootstrap extend to the entire width of the page?

https://i.sstatic.net/oh455jA4.pngI've set up a basic row with two child columns: the sidebar column with className='col-md-2' and the mainbar column with className='col-md-10'. The parent row has a display:flex property to positio ...

htmlcssbootstrap-5

Navigate to a particular section in the webpage

There are a few div elements with the class .posts that each have an attribute data-id which corresponds to the ID in a MySQL database. <div class="posts" data-id="1"></div> <div class="posts" data-id="2"></div> If I want to scrol ...

javascriptjqueryhtmlscroll

Angular js is a powerful framework that allows for the seamless transition of views, except for the home

I am currently using the ng-animate module to implement sliding effects for my app views. Each route has its own unique slide animation. Take a look at my simple code below: HTML: <div ng-view ng-animate class="slide"></div> CSS: /*Animatio ...

javascriptcssangularjsslideng-animate

The iFrame that is generated dynamically becomes null when accessed from a page that has been loaded using JQuery

One issue I am facing is with a dynamically created iframe in regular javascript. It functions perfectly fine when called from a static page using conventional methods. However, when it is being called from a page loaded by jQuery, I encounter an error s ...

javascriptjqueryhtml

Adding a border to the <area> element: A step-by-step guide

Can a border be added around an <area> element? This would be useful for testing an imagemap, however the following code does not achieve the desired effect: area { outline: 1px solid red; border: 1px solid red; } ...

javascripthtmlcss

Is it possible to generate a separate table for each user using PHP?

Embarking on a new adventure, I have chosen to create an online shopping website for a college project. My roadblock comes at the sign-up stage. I envisioned users having separate tables to store products they add to their carts, allowing them to add more ...

phphtmlmysqldatabase-design

The validation process did not pass because of a manually inputted value

When a user selects a file, the filename value is automatically inserted into the fileName field. However, the validation fails because the field is still considered empty until at least one more character is added. How can I fix this issue? This is how t ...

htmlangularjsvalidation

Every time I hover, my jQuery code keeps repeating the hover effect

I am currently facing an issue that has me stumped on finding a solution. The problem arises when I hover over the .div multiple times, the animation just doesn't stop and keeps running continuously. What I aim for is to have the .hidden element fad ...

javascriptjqueryhtmlcss

Visitor capacity for the website has been restricted

I have created a website that I want only individuals with a license to access. I am wondering how I can restrict each license to a certain number of nodes, meaning the number of visitors allowed. For example: A person with a license for 2 visitors should ...

javaphpjqueryhtml

Why can't we use percentages to change the max-height property in JavaScript?

I am currently working on creating a responsive menu featuring a hamburger icon. My goal is to have the menu list slide in and out without using jQuery, but instead relying purely on JavaScript. HTML : <div id="animation"> </div> <button ...

javascripthtmlcss

Issue with image magnification on Internet Explorer 9 using the Cloud Zoom plugin extension for Joomla

Recently, I've been utilizing a Joomla plugin called cloud zoom to enhance our gallery by providing an image magnification effect when hovering over the large image. You can see it in action on this link here. While it works flawlessly on most browser ...

javascriptjqueryhtmlinternet-explorer-9zooming

The React component designed to consistently render video frames onto a canvas is unfortunately incompatible with iOS devices

I'm facing an issue with my code snippet that is supposed to draw video frames on a canvas every 42 milliseconds. It's working perfectly on all platforms and browsers except for iOS. The video frames seem unable to be drawn on canvas in any brows ...

javascripthtmliosreactjshtml5-canvas

Is there a way to disable the calendar linking feature in the iPhone Mail Client

I am currently working on an application where I generate emails with time stamps. However, when viewing these emails in the iPhone mail client, the timestamp gets turned into a link with an ugly blue color and underline. Is there a way to prevent this fro ...

iphonehtmlcssios

Incorrect Pixel Width with Relative Positioning in Internet Explorer 11

I'm encountering a positioning problem that seems to be specific to Internet Explorer (11). I'm attempting to absolutely position a div tag in relation to another element. The problematic code snippet appears as follows: <div id="FacebookWra ...

htmlcssinternet-explorer

Customizing Material-UI Grid: Is it possible to assign a background color solely to the cells, without affecting the surrounding empty spaces?

I've been experimenting with designing a grid system that incorporates a gradient background color. The issue I'm facing is that the background color extends to the empty spaces between the grid cells as well. Is there a way to scope the gradient ...

cssmaterial-ui

Dynamically updating the scroll area in Ionic using real-time data

Hello, I am currently working on an Ionic project and have created a code pen for it. At the moment, the code pen just displays an image with two buttons for zooming in and out. However, I have encountered an issue. When I click on zoom in and scroll to ...

javascripthtmlangularjsionic-framework

Using HTML and CSS, we can achieve a fixed position using the `position: sticky`

On my website, I have elements that utilize transformations. One issue I've encountered is that these transformations end up resizing the viewport. Normally, I would address this by setting overflow-x: hidden for both html and body, but doing so disru ...

htmlcsscss-transformssticky