What is the best way to ensure that my <h1> header stays above my <h2> header at all times?

As a novice in web design, I recently took on the challenge of creating my own website. I am a graphic designer and came up with a mock-up of how I envision the site to look. While I managed to complete most parts of it, there's one specific area where I'm struggling – keeping my <h1> header on top of my <h2> header. Currently, they are displayed side by side over a video background that plays on loop. Additionally, I aim to add a horizontal line between these two headers as per my design. Below you'll find snippets of the HTML & CSS codes I've used. For reference, I have also included an image comparing my design with the current state of the website. Any advice or recommended tutorial videos would be greatly appreciated. Thank you in advance.

If anyone has tips for me or knows of some helpful video tutorials, please share them. Thanks!

The H1 & H2 reside within the "Video Section" under the class=section.

CSS Code & HTML

@font-face {
          src: url(fonts/KeepCalm-Medium.ttf);
          font-family: keepcalm;
        }
<!doctype html>
        <html lang="en">
htmlcssheaderpositionalignment

Answer №1

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="testtry.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>testtry</title>  
</head>
<body>

<!--Topbar-->

<div class="topbar">
    <ul class="topbar">
    <img src="Images/phone.png" alt="Call me at" class="phone">
    <li class="topbar topbartext">416-948-2164</li>
    <img src="mail1.png" alt="Email me at" class="mail">
    <li class="hotmail"><a href=""><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="137e7a7072767f723e716667617c7d537b7c677e727a7f3d7072">[email protected]</a></a></li>
</ul>
</div>

<!--Navbar Responsive-->

<div class="Navcontainer">
    <nav class="navbar navbar-expand-lg navbar-light">
          <a href="#"><img src="Logo1.png" alt="Micaela Butron Logo" class="logo"></a>
            <h1 class="logotext">
                    I'm Micaela Butron.
                    <span>an <span>Urban Designer</span>, + Graphic Designer.</span>
            </h1>

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-lg-auto">
                  <li class="nav-item active"><a class="nav-link active" href="#">Home</a></li>
                  <li class="nav-item active"><a class="nav-link active" href="#">Resume</a></li>
                  <li class="nav-item active"><a class="nav-link active" href="#">Portfolio</a></li>
                    <li class="nav-item active"><a class="nav-link active" href="#">Contact</a></li>
            </ul>
          </div>
    </nav>
</div>


<!--VideoSection-->

<div class="section">
  <div>
        <h1>Micaela <span>Butron</span></h1>
  </div>
  <hr>
  <span class="line"></span>

    <h2>Designer</h2>


    <div class="video-container">
        <video autoplay loop muted>
        <source src="Images/Videos/Video.mp4" type="video/mp4">
    </video>
    </div>
</div>

<!--Bootstrap Javascript Link-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

CSS

     @font-face{
    src: url(fonts/KeepCalm-Medium.ttf);
    font-family: keepcalm;}

    @font-face{
        src: url(fonts/GOTHIC.TTF);
        font-family: centurygothic;}

    body {
        margin: 0px;
        padding: 0px;}

    hr{
      border-top-color: black;
    }
    /**Video Section**/
    .section {
        position: relative;
        text-transform: uppercase;
        width: 100%;
        height: 534px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      flex-direction: column;
    }

    .section h1 {
        text-align: center;
        justify-content: center;    
        height: 108px;
        width:342px;
        font-family: keepcalm;
        font-size:36px;
        color: #000;
        font-weight:500;
        line-height: 60px;
        transform: scale(1.189,1.189);
        letter-spacing: 15px;
        margin: 0px;
        padding: 0px;
        z-index: 1;
      display: block;
      padding-bottom: 150px;
    }
    hr{
      border-top: 1px solid red !important;  
    }


    .section span { font-size: 48px;}

    /* hr {
        display: block;
        z-index: 1;} */

    .section h2{
        width: 181px;
        height: 22px;
        font-family: centurygothic;
        color: #000;
        font-size:35px;
        font-weight: 400;
        letter-spacing: 9px;
        z-index:2;
      display: block;
    }

    .video-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;}

    /*Topbar Section*/
    .topbar {
        margin: 0px;
    }
    .topbar { 
        background-color: #e8e8e8;
        font-family: KeepCalm;
        font-size: 14px;
        align-items:flex-start;
        color: #000000;
        list-style: none;
        text-decoration: none;
        text-align: left;
        padding: 0px 0 0px 70px;}


    .topbar > li {
        display: inline-block;
        padding: 0 20px 0 20px;}

    .topbar > li > a {
        text-decoration: none;
        color: #000000;}

    .phone {
        width:20px;
        padding: 4px 0 0px 4px }

    .mail {
        height: 14px;
        }
    /**Logo Section**/
    .logo{
        float:left;
        padding-bottom: 10px;
        padding-left: 20px;}

    /**Logo Text**/

    .logotext {
        font-size: 14px;
        position: absolute;
        left: 140px;
        font-family: KeepCalm;
        float:left;
        padding-bottom: 10px;
        }

    .logotext span {
        font-size: 14px;
        display: block;
        line-height: 14px;
        font-family: CenturyGothic;
        font-weight: 400;
    }

    .logotext span span {
        font-size: 14px;
        display: inline;
        line-height: 14px;
        font-family: CenturyGothic;
        font-weight: 400;
        background:  #e8e8e8;
    }
    /*Navigation Responsive*/
    .selector-for-some-widget {
        box-sizing: content-box;}

    .nav-item {
        background-color: #fff;
        font-family: KeepCalm;
        font-size: 14px;
        align-items:flex-start;
        color: #000000;
        list-style: none;
        text-align: right;
        padding: 20px 0 20px 0px;}

    .nav-item  {
        display: inline-block;
        padding: 0 20px 0 20px;}

    .nav-item {
        text-decoration: none;
        color: #000000;}

    .navbar-light .navbar-nav .nav-item .nav-link:hover {
        color:  #e8e8e8;}

    /*Topbar & Navigation Responsive*/

    @media (max-width: 768px){
        .logo{
        width:5em;  
        padding-bottom: 1px;
        padding-left: 0px;
        }

        .logotext {
            font-size: 0.7em;
            line-height: 9pt;
            padding-bottom: 1px;
            padding-right: 100px;}

        .logotext span {
            line-height: 9pt;
            font-size: 0.8em;
            }
        .logotext span span {
            background: #FFFFFF;
            font-size: 1em;
            }
        .video-container {display: none;}
    }

    @media (max-width: 580px){
        .mail{width: 0px;}
        .hotmail{font-size: 0px;}
        .video-container {display: none;}
    }

    @media (max-width: 350px){``
        .topbar {font-size: 0px;}
        .phone{ width:0px;}
        .mail {display: 0px;}
        .logotext { font-size: 0px;}
    }

Answer №2

To optimize your website for smaller screens, you can insert the following snippet into your CSS stylesheet specifically targeting screen widths of 991px and below:

@media (max-width: 991px){
    .container {
        flex-direction: column;
    }
    .container h1 {
        height: auto;
        margin-bottom: 20px;
        padding-bottom: 10px;
        position: relative;
    }
    .container h1:after {
        content: '';
        background-color: #FFF;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 120px;
        height: 8px;
        margin: 0 auto;
    }
    .container h2 {
        height: auto;
        width: auto;
    }
}

Answer №3

Link to the code snippet

Here is an example:


    .wrapper{
     text-align:center; 
    }
    <div class="section">
    <div class="wrapper">
      <h1>Michaela Burton</h1>
      <h2> Designer</h2> 
      </div>
    Section continues blah blah blah 
    </div>

To center the H1 and H2 elements, they should be wrapped in another div with the centering styles applied as shown above.

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

What is the best method for sending the styled and checked option via email?

Just finished customizing the checkboxes on my contact form at cleaners.se/home. Here's my question: If I select "telefon," how can I ensure that this option is sent to my email? In Contact Form 7, I used to simply type a shortcode. Is there a simila ...

javascripthtmlcsswordpresscontact-form-7

Two distinct sets of radio buttons with separate functionalities

I have a unique situation where I have two distinct sections that contain sets of radio buttons with different values and IDs. However, I am facing an issue as I can only select one button at a time for both sets. My requirement is to have these two sets ...

csshtmlradio-button

What determines which HTML file is loaded based on the user's browser?

I've been searching online but can't find a definite answer - is it possible to load different HTML based on the type of browser being used? In my specific case, this seems to be the only solution. After trying everything else, it looks like the ...

javascripthtmlloading

What mechanism does angularjs employ to detect the $dirty state in the absence of a form tag?

I have implemented $window.addEventListener('beforeunload' to detect changes on a page successfully. Additionally, I am using $transitions.onStart... to monitor navigation with the browser buttons. I find it puzzling though, as my HTML template l ...

htmlangularjs

Guide to deactivating a control within a User Control

I anticipated that making this change would be straightforward, but I am encountering some difficulties. Initially, my asp.net markup for the server control appears like this: <ucTextArea:UserControlTextArea ID="taRemarks" runat="server" /> However ...

c#htmlasp.netwebformsmarkup

AngularJS's ng-click attribute is used to call a function within a controller

I am trying to invoke the Supportticket() function from myController on ng-click, but I am encountering issues with it not working as expected. Can someone please assist me with this matter? The Supportticket() method is located within the controller in my ...

c#asp.net-mvchtmlangularjs

Upgrade your input button style using jQuery to swap background images

I have an input button with an initial background image. When a certain condition changes, I want to update its image using jQuery without overriding the button's global CSS in the stylesheet. Is there a way to only change the background attribute wit ...

javascriptjqueryhtmlcss

Adjustable Greybox Overlay Resizes Window Dimensions

Utilizing greybox on my business website allows users to easily log in and access their accounts. View an example of my site However, when the login or sign up window is activated at the top of the page, the page or window size changes, causing scroll bar ...

cssajaxscrollbaroverlaygreybox

What is the best way to start with maximum padding when in full screen mode, and then gradually decrease to minimum padding as the browser width decreases?

Trying to adjust my padding with the formula padding-left: clamp( 60px, calc( value - value ), 186px) but struggling to resize it correctly as I reduce my browser width ...

htmlcssfrontendweb-frontendclamp

Go through each row in a table and retrieve the value of a column only if the checkbox

Is there a way to extract only the values in the serial column if the checkbox is checked for that row using jquery? I am currently able to retrieve the serial value, but unsure how to incorporate the checkbox condition. HTML: <table id="usersTable"&g ...

htmljquery

Aligning the column to the right to ensure the text is centered horizontally on the screen

<div className={css.title} > <div className={css.row}> <div className={css.columnLeft}> <div className={css.header}>Images</div> </div> <div className={css.col ...

cssreactjsflexbox

What is the best way to link and store invoice formset with the main form foreign key in Django?

I am new to Django and need help. I am trying to save my invoice in a database, but the issue I'm facing is that I can't retrieve the foreign key from the main form when I try to save the formset. View.py def createInvoice(request):` if requ ...

javascriptpythonhtmldjango

What is the best way to align two HTML elements in a single column?

I need to adjust the layout of an existing <td> in order to display a checkbox and one additional field on the same line. The current setup places these elements on separate lines. Below is the provided HTML code: <!DOCTYPE html> <html> ...

htmlcsshtml-table

Exploring the Power of Nested *ngFor in Angular 2

I am struggling with passing indexes to a function where the first parameter (ii) is coming back as undefined. <div *ngFor="let tab of screen.data.tabs; let indexTab = i;"> <div *ngIf="tab.active"> <div *ngIf="tab.questions"&g ...

htmlangulartypescriptngfor

Curved edges navigation bar design

Having trouble rounding the corners of my navigation bar. When I use border-radius: 15px;, it rounds all the corners of the <a> tag, but I only want to round the corners of the <li> tags to adjust the margins of the whole toolbar. Check out th ...

htmlcss

Ensuring divs are centered when resizing the page

Is there a way to center an unordered list of tables while ensuring that it remains centered even when the window is resized? The list should move each table to a new line if they can no longer fit. Check out the code snippet below for reference: <d ...

htmlcss

Validating groups of fields using Angular fieldsets

AngularJS validation is working well with ng-required. However, I am interested in checking if all the form elements within my fieldset are valid. <form> <fieldset> <legend> Part one <img src="/co ...

javascripthtmlangularjsformsvalidation

Rejuvenate a just-launched window.open starting from the about:blank

After receiving data from an ajax result, I am trying to open a pdf in a new window. However, the pdf viewer is only displayed if I manually resize the window (using manual hotspot resizing). How can I ensure that the contents display properly in its popu ...

javascripthtmlajaxwindow

IE11 is unable to display the background image

I am attempting to create a process roadmap by using background images on list items. The background-image on the list item is not showing up in IE11 (also in all versions of IE10, 9, etc). CSS CODE body{padding: 50px 0;} .status-line { width: 80%; ...

htmlcssinternet-explorer

Navigating around web pages with Python and Selenium: How to interact with non-button elements through clicking

I am currently working with Python's selenium library and trying to interact with an element that is not of the button class. My browser/web driver setup involves Google Chrome. Below is my code snippet for reference: from selenium import webdriver ...

pythonhtmlseleniumselenium-webdriverselenium-chromedriver