The font background color appears to be malfunctioning

body {
  margin: 0;
  background-color: white;
  background: linear-gradient(to right, #000000, #ffffff, #ffffff, #000000);
  line-height:25px;
}
h2{
    color: black;
    text-align: center;
    display: block;
    font-family: 'Montserrat', sans-serif;
    padding-left: 14px;
    font-size: 16px;
    text-decoration: none;
    font-weight: normal;
    background-color: orange;
}

p{
    margin: auto;
    width: 32%;
    color: black;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    padding-bottom: 14px;
    font-size: 12px;
    text-decoration: none;
}

form{
    margin: auto;
    width: 32%;
    color: black;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    text-decoration: none;
    font-weight: bold;
     
}

input[type=text], select {
  display: block;
  margin: 8px 0;
}
input[type=date], select {
  display: block;
  margin: 8px 0;
}
input[type=submit], select {
  margin-left: 50%;
  margin-top: 10%
}

.nadpis{
    color: black;
    text-align: center;
    display: block;
    font-family: 'Montserrat', sans-serif;
    padding-left: 14px;
    font-size: 32px;
    text-decoration: none;
    font-weight: bold;
}
<!DOCTYPE html>
<html lang="cs">
    <head>
        <title>Hlavní stránka</title>
        <link rel='icon' href='favicon.ico?' type='image/x-icon'/>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style></style>                                                       
    </head>
    <body>
        <h1 class="nadpis">Vítejte v online dotazníku</h1>
        <h2>Vyplnění tohoto formuláře pomůže mé práci</h2>
        <br>

        <form action="https://youtu.be/dQw4w9WgXcQ">
            <label>
              Jméno:<input type="text" name="jmeno" required />
            </label>

            <label>
              Příjmení:<input type="text" name="prijmeni" required />
            </label>



            Pohlaví:
            <br>
            <input type="radio" name="pohlavi" value="muz" required>
            <label for="muz">Muž</label><br>
            <input type="radio" name="pohlavi" value="zena">
            <label for="zena">Žena</label><br>

            <label>
            Datum narození:<input type="date" name="narozeniny" required />
            </label>

        <h2>Teď k Vašim preferencím</h2>

            Kde všude hrajete hry:
            <br>
            <input type="checkbox" name="pc" value="pc">
            <label for="pc">Počítač</label><br>
            <input type="checkbox" name="konzole" value="konzole">
            <label for="konzole">Konzole</label><br>
            <input type="checkbox" name="mobile" value="Telefon">
            <label for="mobile">Telefon</label><br>

            Jak moc jste spokojeni s vládními opatřeními:
            <br>
            <label>
                <input type="range" name="spoko" min="0" max="50" required>
            </label><br>


            Vyberte vaši oblíbenou barvu:
            <br>
            <label>
                <input type="color" name="barva">
            </label>           

            <br>
            <input type="submit" value="Submit">
        </form>

    </body>
</html>

I am working on a form page for my school project and I want it to look better. Although the code is completed, I am facing issues with the styling. The first H2 has the whole page background color while the H2 in the form has the text only on the white background of the page. Any tips or suggestions on improving the appearance of the form are appreciated. Thank you.

htmlcssbackground-color

Answer №1

As per your recent comment, the request is to limit the width of the first h2 element to match that of the h2 within the form. Given that the form occupies 32% of the width, you can achieve this by adding the following CSS rule:

body>h2 {
  width: 32%;
  margin-left: 34%;
}

This CSS snippet sets the width of all direct child h2 elements of the body to 32% and centers them by applying a margin-left of 34% (which is calculated as 100% minus 32%, divided by 2):

body {
  margin: 0;
  background-color: white;
  line-height: 25px;
}

h2 {
  color: black;
  text-align: center;
  display: block;
  font-family: 'Montserrat', sans-serif;
  padding-left: 14px;
  font-size: 16px;
  text-decoration: none;
  font-weight: normal;
  background-color: orange;
}

body>h2 {
  width: 32%;
  margin-left: 34%;
}

p {
  margin: auto;
  width: 32%;
  color: black;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  padding-bottom: 14px;
  font-size: 12px;
  text-decoration: none;
}

form {
  margin: auto;
  width: 32%;
  color: black;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  text-decoration: none;
  font-weight: bold;
}

input[type=text],
select {
  display: block;
  margin: 8px 0;
}

input[type=date],
select {
  display: block;
  margin: 8px 0;
}

input[type=submit],
select {
  margin-left: 50%;
  margin-top: 10%
}

.nadpis {
  color: black;
  text-align: center;
  display: block;
  font-family: 'Montserrat', sans-serif;
  padding-left: 14px;
  font-size: 32px;
  text-decoration: none;
  font-weight: bold;
}
<!DOCTYPE html>
<html lang="cs">

<head>

  <title>Hlavní stránka</title>
  <link rel='icon' href='favicon.ico?' type='image/x-icon' />
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style></style>


</head>

<body>
  <h1 class="nadpis">Vítejte v online dotazníku</h1>
  <h2>Vyplnění tohoto formuláře pomůže mé práci</h2>
  <br>



  <form action="https://youtu.be/dQw4w9WgXcQ">
    <label>
          Jméno:<input type="text" name="jmeno" required />
      </label>

    <label>
          Příjmení:<input type="text" name="prijmeni" required />
      </label> Pohlaví:
    <br>
    <input type="radio" name="pohlavi" value="muz" required>
    <label for="muz">Muž</label><br>
    <input type="radio" name="pohlavi" value="zena">
    <label for="zena">Žena</label><br>

    <label>
          Datum narození:<input type="date" name="narozeniny" required />
      </label>

    <h2>Teď k Vašim preferencím</h2>

    Kde všude hrajete hry:
    <br>
    <input type="checkbox" name="pc" value="pc">
    <label for="pc">Počítač</label><br>
    <input type="checkbox" name="konzole" value="konzole">
    <label for="konzole">Konzole</label><br>
    <input type="checkbox" name="mobile" value="Telefon">
    <label for="mobile">Telefon</label><br> Jak moc jste spokojeni s vládními opatřeními:
    <br>
    <label>
          <input type="range" name="spoko" min="0" max="50" required>
      </label><br> Vyberte vaši oblíbenou barvu:
    <br>
    <label>
          <input type="color" name="barva">
      </label>

    <br>
    <input type="submit" value="Submit">
  </form>

</body>

</html>

Answer №2

To style the first h2 within a div, you can use CSS like this: 

.heading h2{background-color: orange;}

body {
  margin: 0;
  background-color: white;
  line-height:25px;
}
h2{
  color: black;
  display: block;
  font-family: 'Montserrat', sans-serif;
  padding-left: 14px;
  font-size: 16px;
  text-decoration: none;
  font-weight: normal;  
}

.heading {
  text-align: center;
}

.heading h2 {
  background-color: orange;
}


p{
  margin: auto;
  width: 32%;
  color: black;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  padding-bottom: 14px;
  font-size: 12px;
  text-decoration: none;
}

form{
  margin: auto;
  width: 32%;
  color: black;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  text-decoration: none;
  font-weight: bold;

}

input[type=text], select {
  display: block;
  margin: 8px 0;
}
input[type=date], select {
  display: block;
  margin: 8px 0;
}
input[type=submit], select {
  margin-left: 50%;
  margin-top: 10%
}
.nadpis{
  color: black;
  text-align: center;
  display: block;
  font-family: 'Montserrat', sans-serif;
  padding-left: 14px;
  font-size: 32px;
  text-decoration: none;
  font-weight: bold;
}
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

<h1 class="nadpis">Welcome to the online survey</h1>
<div class="heading"><h2>Filling out this form will help my work</h2></div>
<br>
<form action="https://youtu.be/dQw4w9WgXcQ">
    <label>
    Name:<input type="text" name="name" required />
    </label>

    <label>
    Surname:<input type="text" name="surname" required />
    </label>
    Gender:
    <br>
    <input type="radio" name="gender" value="male" required>
    <label for="male">Male</label> 
    <input type="radio" name="gender" value="female">
   <label for="female">Female</label><br>

    <label>
    Date of Birth:<input type="date" name="birthday" required />
    </label>

    <h2>Now onto your preferences</h2>

    Where do you play games:
    <br>
    <input type="checkbox" name="pc" value="pc">
    <label for="pc">PC</label> 
    <input type="checkbox" name="console" value="console">
    <label for="console">Console</label> 
    <input type="checkbox" name="mobile" value="Phone">
    <label for="mobile">Mobile Phone</label><br>

    How satisfied are you with government measures:
    <br>
    <label>
    <input type="range" name="satisfaction" min="0" max="50" required>
    </label><br>
    Choose your favorite color:
    <br>
    <label>
    <input type="color" name="color">
    </label>
    <br>
    <input type="submit" value="Submit">
</form>

Answer №3

Your form width is set to 32%, which means that if your <h2> tag is inside the form, the background will only cover 32% of it. To resolve this issue, you can wrap your content in a <div> and use flexbox and justify-content to center it.

Below is a sample code example. You can further enhance the styling using CSS by adjusting margins and padding.

<!DOCTYPE html>
<html lang="cs">
...
</html>

To make the <h2> tag smaller, you can modify the code as follows: 

<!DOCTYPE html>
<html lang="cs">
...
</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

Creating an interactive Table of Contents in Sharepoint using only JavaScript

Imagine you have a massive Sharepoint wiki page filled with various heading tags like H1, H2, H3, and H4 - now picture creating a dynamic Table of Contents using these tags. The goal is to categorize these tags by group and utilize the HTML <detail> ...

javascripthtmlfor-loopsharepointtableofcontents

Incorporating tawk.to into a Nuxt/Vue application

Has anyone had success implementing tawk.to in a Nuxt application? I took the initiative to create a file called "tawk.js" in my plugin folder and added the following code: var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date() (function () { ...

javascripthtmlvue.jsnuxt.jstawk.to

Bootstrap 4's form validation feature is malfunctioning

link to plunker Here's what I'm looking to achieve. I am currently using Bootstrap 4 for my website. Specifically, I have a basic contact form that I am attempting to enhance with tooltip validation. Unfortunately, the form validation is not ...

htmlcsstwitter-bootstrapbootstrap-4

Connections between Wordpress websites and CSS styling

My inquiry consists of three parts: I am currently in the process of constructing a portfolio website using Wordpress, and I have encountered some peculiar links. For instance, on my about page, the link appears as localhost/AFolder/anotherfolder/ind ...

phpcsswordpress

Unable to generate dynamic HTML through AJAX request

I made an Ajax API call and received the response in JSON format. I need to create dynamic HTML to display each value in HTML elements. I tried getting the response from the API but couldn't generate the HTML. Can someone assist me with this? Also, I ...

javascriptjqueryhtmlajaxapi

Center the content within the div

Is there a way to center the content of the second column within this div? I've tried various methods without success so far. I'm currently using Bootstrap 4. Can anyone provide guidance on how to achieve this? <div class="card"> < ...

htmlcssbootstrap-4

Updating every occurrence of a string in the visible text of a webpage: A step-by-step guide

I need to include the registered trademark symbol beside all mentions of a brand, which I'll refer to as "SomeBrand", on a client's website. Here is my current approach: function updateSomeBrand(){ var elements = document.getElementsByTagName( ...

javascripthtml

Unable to choose from the dropdown menu

I'm having trouble with selecting options on a selectbox when the select option is overlapping my menu. The menu I'm using is a jQuery Plugin. When the select box overlaps the menu, the options are hidden. I tried adjusting the z-index of my div ...

jqueryhtmlcssformsdrop-down-menu

Outlook 2010 failing to display background-color correctly

Recently, I've been facing a challenge in getting my email to display correctly in Outlook 2010 while maintaining compatibility with web rendering. I'm trying to steer clear of using table styling for obvious reasons but haven't had much suc ...

htmlcssemailoutlookoutlook-2010

Tips for showing the value in the subsequent stage of a multi-step form

Assistance is required for the query below: Is there a way to display the input field value from one step to the next in multistep forms? Similar to how Microsoft login shows the email in the next step as depicted in the image below: https://i.sstatic.ne ...

javascriptphphtmlcss

Manage the border around the image by incorporating a timer countdown - starting from a complete circle, transitioning to a partial arc, and finally disappearing completely

My expertise lies in html, css, and angularjs for front-end development. I have an image that is initially surrounded by a thick border forming a full circle. As a countdown of one minute begins, I want the border to gradually disappear as time progresses. ...

javascripthtmlangularjs

When hovering over a select option, a description and clickable link will be displayed

I need to display a description with a clickable link when hovering over any option in the select tag. <div class="col-lg-4"> <div class="form-group"> <label class="form-label">Goal</label> <select name="semiTaskType ...

javascripthtmlajax

Unable to alter or eliminate the grey background using material-ui

Struggling with a React application that incorporates material-ui. Despite my efforts, I can't seem to get rid of an unwanted grey background in one section of the app. Attempted solutions: body { background-color: #ffffff !important; } * { b ...

cssreactjsmaterial-ui

Displaying a webpage within a viewport without utilizing any predefined templates

Currently seeking a solution to effectively display HTML emails within a Rails 4.2 application view without utilizing an iframe, which has proven to be unreliable. The current method of rendering is as follows: %iframe{srcdoc: "#{@email.html}" I have re ...

ruby-on-railshtmlruby-on-rails-4iframe

Changing the background color of the canvas using Javascript

I want to create a rect on a canvas with a slightly transparent background, but I don't want the drawn rect to have any background. Here is an example of what I'm looking for: https://i.stack.imgur.com/axtcE.png The code I am using is as follo ...

javascripthtmlcsscanvas

Why is the Bootstrap template working on index.html but not on any other React components?

Greetings to all who stumble upon this post! Hello, I have been diligently working on a React application and am eager to integrate a Bootstrap template. However, everything seems to be in order except for the responsiveness of the template. It lacks anim ...

htmlcssreactjstwitter-bootstrap

I aim to decrease the number of decimal places in the code provided below

When working on an HTML page, I encountered a challenge with the decimal numbers displaying more positions than desired - for instance: 13.16 instead of 13.167. Despite my attempts to rectify this using the code snippet below, it is still not functioning ...

javascripthtmlnode.jsangularjs

Does the downloading of images get affected when the CSS file has the disabled attribute?

Is it possible to delay the download of images on a website by setting the stylesheet to 'disabled'? For example: <link id="imagesCSS" rel="stylesheet" type="text/css" href="images.css" disabled> My idea is to enable the link later to tri ...

javascriptcss

Dynamic search form technology

My HTML view includes a search form and AJAX code to handle the form request $(document).ready(function() { console.log('Ready'); $('.search-wrapper').on('click', '#find-dates', function(a) { a. ...

javascriptjqueryhtmlajax

Executing a Javascript function when a form is submitted

function validateForm() { alert("Form submitted successfully"); return true; } <form onsubmit="return validateForm()" action="add.php" method="post" id="p1"> <center>Add New Survey</center> <p>&nbsp;&l ...

javascriptphpjqueryhtml