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:

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

Absolute positioned TD creates a gap upon being displayed

Hey there, I am facing an issue with a table I have. In each row (TR), the last TD element has a class called 'abs'. The style for this class is specified in the provided code snippet. Initially, this element is hidden. However, when you hover o ...

jqueryhtmlcss

Scrollbar visibility issue

Recently, I came across a curious behavior regarding browser scrollbars. To see it in action, check out this link. HTML: <div class='container'> <div class='fix' /> </div> CSS: body { margin: 0; } .container ...

htmlcssscrollbar

Please submit the form to log in with your credentials

Here is the HTML code snippet for a form where users can enter their username and password to log in: <form Name ="form1" Method ="POST" ACTION = "userlogin.php" id="form1"> <div id="main_body" class="full-width"> <label>User ...

javascriptphphtmlajax

The JavaScript and CSS properties are not functioning properly with the HTML text field

I came across this CodePen example by dsholmes and made some modifications: Here Furthermore, I have developed my own form on another CodePen pen: Link The issue I'm facing is related to the placeholders/labels not disappearing when typing in text f ...

javascriptjqueryhtmlcss

Using Twitter bootstrap with Node.js and Express framework

Is it possible to integrate Twitter Bootstrap with Node.js and Express? I understand that I need to place CSS and Javascript files in the ./public directory (if it's set as default). However, when trying to implement Twitter Bootstrap on Node.js and ...

javascriptcssnode.jstwitter-bootstrapexpress

Methods for passing JavaScript variables to PHP

I have encountered this problem on Stack Overflow before, but I couldn't find a solution that worked for me. I am using Codeigniter and have a form where users can rate a product. What I need to achieve is to insert the user's rating into the dat ...

javascriptphpjqueryhtmlcodeigniter

Using Ajax in a separate JavaScript file

How can I retrieve data from an Ajax call made from a different .js file? Here is the code snippet I have been working with: function ajax(url, success, error) { success += "(data)"; error += "(xhr, ajaxOptions, thrownError)"; console.log("St ...

ajaxhtmljquery-mobile

Synchronizing two navigation menus on a single-page application website

Let me start by saying that I specialize in back end development and am facing a specific challenge with building a website that includes two navigation menus. The main navigation menu features links like Home, while the sub-navigation menu includes option ...

javascriptjquerycssangularjstwitter-bootstrap

Attempting to store form data in a database using PHP has proven to be unsuccessful in my efforts

I am facing an issue while trying to add HTML form data into the database using PHP. Unfortunately, I am unable to successfully insert the HTML form data into the database and I'm not sure what mistake I might be making in my code. Below is the code ...

phphtmlmysqlmysqliforms

What is the best method for selecting or isolating the code for a single animation created using JavaScript?

Currently, I am attempting to extract the CSS and JS code of an image reveal animation that is part of a static HTML page: https://i.stack.imgur.com/bnmaO.gif The challenge lies in the fact that the desired effect is one among many showcased image animat ...

javascriptjqueryhtmlcss

Eliminating bottom section in HTML/CSS

I've got this code snippet: new WOW().init(); /* AUTHOR LINK */ $('.about-me-img img, .authorWindowWrapper').hover(function() { $('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('tr ...

javascripthtmlcssanimation

Horizontal Alignment of DIV Tags

I'm currently working on aligning some div tags to serve as contact links on my website. My goal is for them to be positioned on the right-hand side and aligned in a single line. Here's how they look at the moment: Here's the preferred ali ...

htmlcsstext-alignment

Enhance the "content switcher" code

I have been working on improving my "contenthandler" function. It currently changes different articles when I click different buttons, which I am satisfied with. However, I believe there may be a better approach to this and would appreciate any advice on h ...

javascripthtml

Enhancing Time Precision in CakePHP: Introducing Quarter-Accurate Time Input

I'm currently implementing time inputs using the following code snippet: $form->input("time") However, the select boxes generated have minute-accuracy, which is unnecessary for my project. Is there a way to restrict the options in the select lis ...

htmlformscakephptime

Displaying the Polymer Paper spinner when the page is still loading

How can I make the polymer paper spinner display while the body tag is set to unresolved? I'm experiencing a brief blank screen before the page finishes loading. I'm feeling lost and unsure of how to begin. Check out the Polymer Project documen ...

jqueryhtmlpolymer

Implementing key strokes in an HTML input field within a geckoWebBrowser

I am currently using the "geckoWebBrowser1" component to navigate to a URL that displays a login textbox with the ID: login-email Although I have successfully inserted "[email protected]" into the aforementioned textbox, it is essential to simulate k ...

javascriptjqueryhtmlkeyeventgecko

Tips for implementing a jQuery mouseleave function for multiple div elements sharing the same id

I am facing an issue with my website where multiple divs share the same id. I need to implement a mouseleave function for all of these divs that have this specific id. Within my $(document).ready function, I currently have the following code... $('#m ...

javascriptjqueryhtml

Adjust padding of radio button labels in Qualtrics for a cleaner, more streamlined appearance

As I delve into the world of CSS, my goal is to customize the existing survey theme known as "Minimal 2014". Specifically, my focus is on minimizing the spacing in various areas to create a more compact design. So far, I've successfully reduced the g ...

cssqualtrics

Adjust the header's alignment to seamlessly coincide with the uppermost part of the

I'm encountering this peculiar issue with a website I recently started designing. My aim is to make the header perfectly aligned with the top of the page. However, despite my attempts, there persists a stubborn gap that measures around 20px, defying a ...

htmlcss

I am struggling to get the pop-up to close using the current code. I suspect that the issue might be related to the variable I was previously using in WordPress. I have made changes but the pop-up

While delving deeper into the realm of Javascript, I encountered a stumbling block with a single popup intended for the main page of a WordPress website I am constructing. Despite my attempts to modify the code's variables, they seem unyielding. Surpr ...

javascripthtmlcss