Positioning lines on either side of h1 headings

I have attempted to adjust the positioning of the lines next to the h1 elements on either side and make them scale accordingly when resizing the window. I envision it looking like this:

----This that this
    Here we go-----

I have provided the fiddle link. I've experimented with floating the div to the left, positioning it absolutely, but I'm struggling to get it right. I've left the red bar div and removed the other one. Once I figure out one, I should be able to tackle the other. Any guidance would be appreciated.

HTML 

    <h1 class="mainPageTopText">
      Find this that this.
      <div class="banner-bottom"></div>
    </h1>

    <h1 class="mainPageBottomText">
      Here we go.
    </h1>
  </div>
</div>

CSS

.mainPageWriting {
  display: flex;
}

.mainPageTopText {
  width: 500px;
  position: absolute;
  margin-right: 400px;
  margin-top: 50px;
  z-index: 12;
  font-family: 'Luxim';
  background: rgba(255, 255, 255, 1.0);
  color: black;
}

.banner-bottom {
  height: 10px;
  width: 100%;
  left: 0;
  position: absolute;
  background-color: red;
  z-index: 100;
}

.mainPageBottomText {
  position: absolute;
  margin-top: 100px;
  padding-left: 100px;
  z-index: 12;
  font-family: 'Luxim';
  background: rgba(255, 255, 255, 1.0);
  color: black;
}

.centered {
  background: #1D2731;
  display: flex;
  align-items: left;
  justify-content: center;
  height: 100%;
}

.banner-bottom {
  height: 10px;
  width: 100%;
  left: 0;
  position: absolute;
  background-color: red;
  z-index: 100;
}

Fiddle https://jsfiddle.net/angatvir/aujrkpLk/183/

htmlcss

Answer №1

I believe this may be the solution you seek

according to

----This that this
    Here we go-----

instead of

----This that this Here we go-----


#special {
}
#first {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "line text .";
}
#first .line {
  grid-area: line;
  height: 5px;
  align-self: center;
  background: red;
}
#first .text {
  grid-area: text;
}
#second {
  display: grid;
  grid-area: text-below;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: ". text line";
}

#second .line {
  grid-area: line;
  height: 5px;
  align-self: center;
  background: green;
}
#second .text {
  grid-area: text;
}
<h1 id="special">
  <span id="first">
  <span class="text">This that this</span>
  <span class="line"></span>
  </span>
  <span id="second">
  <span class="text">Here we go</span>
  <span class="line"></span>
  </span>
</h1>

Answer №2

This solution appears to be quite straightforward, utilizing psudo-elements.

.mainPageTopText::before,
.mainPageTopText::after {
content: '----';
display:inline;
}
   <h1 class="mainPageTopText>
      Discover this and that.
      Let's get started.
    </h1>

Answer №3

Utilize the :before and :after pseudo-elements with the content property to add decorative lines and style them accordingly

.mainPageWriting {
    display: flex;
  }

  .mainPageTopText {
    width: 500px;
    position: absolute;
    margin-right: 400px;
    margin-top: 50px;
    z-index: 12;
    font-family: 'Luxim';
    background: rgba(255, 255, 255, 1.0);
    color: black;
  }

.mainPageTopText:before{
  content:'----';
}

  .mainPageBottomText {
    position: absolute;
    margin-top: 100px;
    padding-left: 50px;
    font-family: 'Luxim';
    background: rgba(255, 255, 255, 1.0);
    color: black;
  }
  .mainPageBottomText:after{
    content:'-----';
  }
    .centered {
    background: #1D2731;
    display: flex;
    align-items: left;
    justify-content: center;
    height: 100%;
  }
  
    .banner-bottom {
    height: 10px;
    width: 100%;
    left: 0;
    position: absolute;
    background-color: red;
    z-index: 100;
  }
<div class="centered">
<div class="mainPageWriting">

  <h1 class="mainPageTopText">
    Find this that this.
  </h1>
  
  <h1 class="mainPageBottomText">
    Here we go.
  </h1>
</div>
</div>

Answer №4

Revamp your HTML and CSS code as shown below:

    <div class="centered">
        <div class="mainPageWriting">

          <h1 class="mainPageTopText">
            <div class="left-line"></div>
            Discover new possibilities.

          </h1>

          <h1 class="mainPageBottomText">
            Let's get started.
            <div class="right-line"></div>
          </h1>
        </div>
        </div>

css

        .centered {
        background: #1D2731;
        display: flex;
        align-items: left;
        justify-content: center;
        height: 100%;
      }



      .mainPageWriting{
        padding:50px 100px;
      }

      .mainPageTopText {
        width: auto;
        position: relative;
        /* margin-right: 400px; */
        margin-top: 50px;
        z-index: 12;
        text-align: left;
        margin: 0px;
        font-family: 'Luxim';
        padding-left: 50px;
        padding-right: 50px;
        background: rgba(255, 255, 255, 1.0);
        color: black;
    }

    h1 .left-line {
        content: "";
        position: absolute;
        width: 40px;
        height: 2px;
        background: #000;
        top: 17px;
        left: 0px;
    }

    .mainPageBottomText {
        position: relative;
        /* margin-top: 100px; */
        /* padding-left: 100px; */
        text-align: right;
        z-index: 12;
        margin: 0px;
        padding-left: 50px;
        padding-right: 50px;
        font-family: 'Luxim';
        background: rgba(255, 255, 255, 1.0);
        color: black;
    }

    h1 .right-line {
        content: "";
        position: absolute;
        width: 40px;
        height: 2px;
        background: #000;
        top: 17px;
        right: 0px;
    }

Answer №5

Check out this code with some added styles. Use pseudo elements to create lines and remove the banner-bottom div.

.mainPageWriting {
    display: flex;
  }

  .mainPageTopText {
    width: 500px;
    position: absolute;
    margin-right: 400px;
    margin-top: 50px;
    z-index: 12;
    font-family: 'Luxim';
    background: rgba(255, 255, 255, 1.0);
    color: black;
  }
  
  

  .mainPageBottomText {
    position: absolute;
    margin-top: 100px;
    padding-left: 100px;
    z-index: 12;
    font-family: 'Luxim';
    background: rgba(255, 255, 255, 1.0);
    color: black;
  }
  
 
 
 
 /*** add these */
 
 
.mainPageTopText::before{
 content:"";
 position:absolute;
 height:0;
 border:1px dashed;
 width:20%;
 top:0;
 bottom:0;
 left:-25%;
 margin:auto;
}


 
    
.mainPageBottomText::after{
 content:"";
 position:absolute;
 height:0;
 border:1px dashed;
 width:20%;
 top:0;
 bottom:0;
 right:-25%;
 margin:auto;
}

/** add these **/
  
  
    .centered {
    background: #1D2731;
    display: flex;
    align-items: left;
    justify-content: center;
    height: 100%;
  }
  
<div class="centered">
<div class="mainPageWriting">

  <h1 class="mainPageTopText">
    Check out this awesome example.
  </h1>
  
  <h1 class="mainPageBottomText">
    Here is the result.
  </h1>
</div>
</div>

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

The column on the right does not extend all the way to the bottom of the page

Hello, I currently have a website with the following design: I'm looking to extend the right column all the way down to the bottom of the body, even if there's not enough content to push it down. How can I accomplish this using CSS? Here is the ...

csshtml

Even after setting [attr.disabled]="false" in Angular, the Textarea still remains disabled

I am currently utilizing ngModel for a textarea, and I would like to be able to enable and disable the textarea based on a certain condition. Even though I have bound it correctly and the value is changing to [attr.disabled]="false", the textarea remains d ...

javascripthtmlangulartextareainput-field

Where would you start looking if the right side of a table border is not visible?

Where should I start looking if the right side border of a table element in a div is not visible? ...

htmlcsscss-tables

elevate design css/widget/components

I am currently on the lookout for samples of boot strap floating css/widget/parts. Despite googling with keywords like 'floating / fixed', I have only come across sticky footer and header examples, or some simple panel samples. By 'floatin ...

csstwitter-bootstrap

Utilize jQuery to apply inline styles to dynamically created div elements

I am attempting to apply inline styles to a div using jQuery. The current state of the div, as seen in Firebug, is shown below: https://i.sstatic.net/rqhIc.jpg My goal is to retain the existing CSS while adding margin-left:0 and margin-right:0 to the cur ...

javascriptjqueryhtmlcsswordpress

|Webview|Best Practices for Integrating Upload Script

I am currently developing an Android app using WebView and I need to implement a code for uploading on Android. I came across the following code snippet and I want to convert it into JavaScript instead of Java (if possible). It needs to be linked to the up ...

javascriptjavaandroidhtmlwebview

Deactivate Pagination with a Button-Based Approach

After conducting thorough research online, I have experimented with various approaches but unfortunately, none have proven successful. view image description here I am seeking guidance on how to disable pagination when clicking on the replace button. Due ...

htmlcssangularjs

Prevent the float:left property from causing my div to overlap with another div

Is there a way to style "a" so that it can take up space and float to the left simultaneously? <div style="background:#111"> <div id="a" style="float:left; height:30px"></div> </div> ...

htmlcss

Is Angular4 preloaded with bootstrap library?

I started a new angular4 project and wrote the code in app.component.html <div class="container"> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class ...

csstwitter-bootstrapangular

Steps to gather all the images within a directory

Take a look at this demo When you click on the "next" button, new images are loaded from the internet. In my application, all the images are stored in the img/image folder with names like 1.jpg, hi.png, etc. My question is, how can I display these image ...

javascriptjquerycssbackbone.js

Utilizing cheerio to set outerHTML in HTML

Could someone kindly assist me with setting the outerHTML of an element using cheerio? I seem to be encountering some issues with this process. For example, let's consider the following HTML structure: <div class="page-info"> <s ...

javascripthtmlnode.jsnpmcheerio

Is it necessary to bring in CSS for the following page?

Should CSS be imported and used across multiple pages in a web application? Is the page structure outlined below considered acceptable, or is there a standard practice to follow? /pages /home index.js index.module.css /cart ...

cssreactjsnext.jsdirectory-structurereact-css-modules

Issues with forms displaying as raw text within Laravel 5

I recently entered the realm of Laravel. While following a tutorial on OpenClassrooms, I encountered some challenges as the tutorial was for Laravel 4 and I am using Laravel 5. After struggling to adapt my controllers and resolve namespace dependency erro ...

phphtmlformslaraveltext

Problem with jQuery offset: SWF position remains unaffected

I attempted to create a code that would position an SWF file on top of an HTML button using jQuery's offset function to determine the coordinates. However, despite my efforts, the SWF does not appear to move as intended. var offset = $("#button").off ...

jquerycssoffset

Troubleshooting Problem with Button Image Display in CSS

I have created a custom CSS for a PayPal sprite that I made. Below is an image comparison showing how it appears in Internet Explorer and Firefox. Here is the code to display the sprite: .ppsprite { background: url('/images/paypal_sprite.png') ...

css

Adjust the width of columns using HTML and CSS

UPDATED: Here is a real-life scenario I am facing: I am trying to adjust the width of columns in my table using inline CSS. Let me provide you with an example: The Table was initially set to 100%, like this: <table width=100% ...> The total number ...

htmlcss

Guide to placing an element behind text using Bootstrap 3

On my webpage, I have a straightforward Bootstrap Jumbotron displayed prominently: <div class="jumbotron"> <div class="container"> <h1>Welcome to My Wonderful Site</h1> <p>There's some information her ...

htmlcsstwitter-bootstrap-3

Trigger javascript function with a button click

Is there a way to trigger a JavaScript function from an HTML button that is not functioning properly? REVISED To see the issue in action, please visit this jsfiddle link: http://jsfiddle.net/winresh24/Sq7hg/341/ <button onclick="myFunction()">Try i ...

javascripthtmlbutton

Displaying multiple div elements when a button is clickedLet multiple divs be

ISSUE Hello there! I'm facing a challenge where I need to display a div when a button is clicked. The issue arises from having multiple divs with the same class, making it difficult for me to target each individual div... Image1 Image2 Desired Outco ...

javascriptjqueryhtmlcss

The Limits of JavaScript Tables

Currently facing an issue with a webpage under development. To provide some context, here is the basic layout of the problematic section: The page features a form where users can select from four checkboxes and a dropdown menu. Once at least one checkbox ...

javascriptjqueryhtmlcss