What could be causing these "areas" or "panels" to intersect with each other?

As I work on constructing a website, I'm facing an issue with the top two sections. They appear correctly when my screen is full size, but as soon as I adjust the screen size, they jump down and create white space.

It seems like I may have approached this project incorrectly, as some other elements are not functioning as expected.

Below is the CSS code:

/* This Resets All Styles */

* {
    hight: 100%;
    margin: 0;
    padding: 0;
}


/*layout*/

p {
    line-height: 20px;
    margin-bottom: 10px;
}

body {
    font-family: 'Open Sans', sans-serif;
}

h1 {
    color: #fff;
    font-size: 55px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-align: center;
}

h2 {
    color: #fff;
    font-size: 40px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-align: center;
}

h3 {
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    margin: 5px 0;
    padding: 20px;
    position: inherit;
    text-align: center;
    z-index: 1;
}

/*boards*/

#board_1, #board_2, #boar_3, #board_4 {
    width: 100%;
}

#board_1 {
    background: url(../img/background_5.png);
    min-height: 750px;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    margin: 0 auto;
}

.board1_p {
    border-bottom: 30px solid;
    color: white;
    font-size: 2em;
    max-width: 600px;
    padding-left: 60%;
    padding-top: 25%;
    text-align: center;
}

#board_2 {
    background-color: green;
    color: #333333;
    height: 100%;
    margin: 0 auto;
    max-height: 1000px;
    min-height: 1000px;
}

And here is the HTML-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>John Doe</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <link rel="stylesheet" href="css/main.css">
    <script src="js/vendor/modernizr-2.7.1.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>
</head>

<body>

        <section id="board_1" />
        <div class="board1_p">
            <p>Hello! Welcome to my online home where you can learn all about me.</p>
        </div>

        <header id="main_header">

            <div class="content">
                <nav class="nav">

                    <ul>
                        <li><a href="#board_1" title="Home">Home</a></li>
                        <li><a href="#board_2" title="About">About</a></li>
                        <li><a href="#board_3" title="Work">Work</a></li>
                        <li><a href="#board_4" title="Contact">Contact</a></li>
                    </ul>

                </nav>

            </div>

        </header>


        <section id="board_2">
            <h2> About</h2>
            <p>Intrigued to know more about me? Dive in!</p>

        </section>

        <section id="board_3">
            <h2>Work</h2>
            <p>Explore my portfolio of work, ranging from client projects to personal endeavors.</p>

        </section>

        <section id="board_4">

            <h2>Reach Out</h2>

        </section>
</body>
</html>

New HTML-

<!DOCTYPE html>
<html lang="en">
<head>


    <link rel="stylesheet" href="css/main.css">


</head>

<body>

        <section id="board_1">

            <div class="board1_p">
                <p>Hello! Welcome to my online home where you can learn all about me.</p>
            </div>


        </section>;

        <section id="board_2">

         <header id="main_header">

            <div class="content">
                <nav class="nav">

                    <ul>
                        <li><a href="#board_1" title="Home">Home</a></li>
                        <li><a href="#board_2" title="About">About</a></li>
                        <li><a href="#board_3" title="Work">Work</a></li>
                        <li><a href="#board_4" title="Contact">Contact</a></li>
                    </ul>

                </nav>

            </div>

        </header>

            <h2> About</h2>

            


                <p>Introduce yourself: who are you, what do you do, and why should we care?</p>

            </section>

            <section id="board_3">
                <h2>Work</h2>
                <p>Showcase your professional achievements and highlight your skills</p>

            </section>

            <section id="board_4">

                <h2>Get in Touch</h2>

            </section>
</body>
</html>

New CSS-

/* This Resets All Styles */

* {
    hight: 100%;
    margin: 0;
    padding: 0;
}


/*layout*/

p {
    line-height: 1.2em;
    margin-bottom: 10px;
}

body {
    font-family: 'Open Sans', sans-serif;
}

h1 {
    color: #fff;
    font-size: 55px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-align: center;
}

h2 {
    color: #fff;
    font-size: 40px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-align: center;
}

h3 {
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    margin: 5px 0;
    padding: 20px;
    position: inherit;
    text-align: center;
    z-index: 1;
}

/*boards*/

#board_1, #board_2, #boar_3, #board_4 {
    width: 100%;
}

#board_1 {
    background: url(../img/background_5.png);
    min-height: 750px;
    background-repeat: no-repeat;
    background-size: cover;
    height: 1020px;
    margin: 0 auto;
}

.board1_p {
    border-bottom: 30px solid white;
    color: white;
    font-size: 2em;
    max-width: 600px;
    padding-left: 60%;
    padding-top: 25%;
    text-align: center;
}

#board_2 {
    background-color: green;
    color: #333333;
    height: 100%;
    margin: 0 auto;
    max-height: 1000px;
    min-height: 1000px;
}

 nav ul li
{
 display: inline-block;
 margin: 10px;
}

#board_3 {
    background-color: blue;
    color: #333333;
    height: 100%;
    margin: 0 auto;
    max-height: 1000px;
    min-height: 1000px;
}

#board_4 {
    background-color: red;
    color: #333333;
    height: 100%;
    margin: 0 auto;
    max-height: 1000px;
    min-height: 1000px;
}
htmlcss

Answer №1

After reviewing your code, I made some modifications and corrections:

  1. In the CSS, you had a hight property in the * selector.
  2. In the HTML, there were issues with opening and closing tags such as using <main>, closed a <div>, and misusing <section../>.

I have rectified these errors and also identified an issue with the navigation. The menu elements like <div>, <nav>, <ul>, and <li> need to be positioned fixed to prevent overflow on browser size reduction.

Below are the updated codes, where I have removed the menu section for now. Please review and if this aligns with your requirements, focus on resolving the menu positioning.

HTML: 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Zack Reid</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <!--External Stlye-->

  <link rel="stylesheet" href="stil.css">
  <script src="js/vendor/modernizr-2.7.1.min.js"></script>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>
</head>

<body>
  <!--artical starts here-->
  <article>
    <!--header which holds the nav and title-->
    <section id="board_1">
      <div class="board1_p">
        <p>Hi, that's me over there. This is my home, well, my internet home - everything about me.</p>
      </div>
    </section>
    <!--header ends-->

    ...

</html>

CSS: 

/* This Resets All Styles */

* {
  padding: 0;
  margin: 0;
  height: 100%;
}
/*layout*/
p {
  line-height: 1.2em;
...

#board_4 {
  background-color: red;
  color: #333333;
  height: 100%;
  margin: 0 auto;
  max-height: 1000px;
  min-height: 1000px;
}

Ensure to validate your links. Also, note the changes made to the style link and background image.

EDIT:

New HTML Code:

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="stil.css" />

    <title>Zack Reid</title>
 </head>

...

New CSS with corrected properties:

/* This Resets All Styles */
...

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

Efficiently adjusting the height of a sticky sidebar

I am currently implementing a Bootstrap grid with two divs in a row. I need my reply-container to be fixed (sticky). However, when setting position: fixed; it is affecting the element's width by adding some additional width. With position: sticky, set ...

cssvue.jsbootstrap-4grid

The CSS_MODULES encountered a module build error when utilizing the extract-text-webpack-plugin

While processing CSS with CSS modules in a production environment, I encounter an error, but everything works fine in the development environment. Here is the configuration for webpack.base.js: const path = require("path") const webpack = require("webpac ...

javascriptcssreactjswebpackcss-modules

Ways to verify if a web URL is contained within an HTML textbox

In the process of developing a frontend form for WordPress, I have incorporated a basic HTML textbox for users to input a web URL. My goal now is to ensure that the entered value is indeed a valid URL and not just arbitrary text. Is there a way to perfor ...

phphtmlwordpressforms

The FileReader.result is found to be null

Currently, I am in the process of setting up a page that allows users to upload a txt file (specifically a log file generated by another program) and then modify the text as needed. Initially, my goal is to simply console.log the text, but eventually, I pl ...

javascripthtmlfile

Maintain the previous droppable positioning after refreshing the page

I am encountering an issue with the .droppable event. I have set up two sections where I can move elements, but every time the page is refreshed, the positioning of the elements reverts to the initial position. How can I maintain the last positioning of th ...

javascriptjqueryhtmlcssdroppable

Creating a text design that spans two lines using Scalable Vector Graphics (SVG

I am working with an SVG that displays strings pulled from an Array... {"label":"Here is an example of the string...", "value":4}, The text above is shown in an SVG element as... <text>Here is an example of the string...<text> I would like ...

javascriptjquerycsssvg

I'm wondering if anyone has any insights as to why the CSS rule `body{ overflow: auto;}` is not functioning properly for me. Despite my attempts of adding a class to the body tag and

I am facing an issue where adding body tags to my code in Visual Studio code does not yield the desired results. Interestingly, it doesn't seem to be a syntax error in CSS. body{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI&apo ...

htmlcss

Stream music from SoundCloud by simply clicking a button on an external source, no need

My post contains an embedded SoundCloud player using the following code: <iframe class="soundcloud_iframe" width="100%" height="166" scrolling="no" frameborder="no" src="'.esc_url('https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcl ...

jqueryhtmlwordpressiframesoundcloud

Tips on maintaining and hiding the vertical scrollbar when a popup is open, alongside the navigation bar positioned at the top of the page

After reviewing this pen, my goal is to create a popup that maintains access to the navigation bar (hence avoiding Bootstrap's Modal). However, I am facing the challenge of keeping the scrollbar visible while preventing scrolling in the background whe ...

javascripthtmlcss

Blog entries alternating between a pair of distinct hues

I want to create a design where each post container has a different color from the one next to it. Essentially, I would like the containers to alternate between two distinct colors. The left side shows how it currently appears, while the right side depict ...

javascripthtmlcss

Exploring the Information Within HTML Forms

When my HTML form sends data to the server, it looks like this: { r1: [ '1', '2', '3' ], r2: [ 'Top', 'Greg', 'Andy' ], r3: [ 'validuser', 'invaliduser', 'validuser&a ...

javascripthtmljson

Updating a jQuery div issue

Hey there, I apologize for bothering you again, but I'm facing another issue with jQuery. It's the same code. $('.tab').click(function() { $(this).unbind("click"); var classy = $(this).attr("class").split(" ").splice(- ...

jqueryhtmlupdating

Conceal a Tag with CSS

Looking to conceal a label using CSS <p class="half_form "> <label for="property_bathrooms">Bathrooms (*only numbers)</label> <input type="text" id="property_bathrooms" size="40" class= ...

csslabel

Tips for automatically resizing a canvas to fit the content within a scrollable container?

I have integrated PDF JS into my Vue3 project to overlay a <canvas id="draw_canvas"> on the rendered pdf document. This allows me to draw rectangles programmatically over the pdf, serving as markers for specific areas. The rendering proces ...

javascripthtmlcssvue.jscanvas

How about mixing up your backgrounds with an overlay effect for a unique look?

Hey there, I'm currently working on adding random backgrounds to my website through an overlay, but I've hit a roadblock when it comes to displaying them. Here is the code I'm working with: .css / .php #intro { background: ...

javascriptjqueryhtmlcss

Inserting a pause between a trio of separate phrases

I am dealing with three string variables that are stacked on top of each other without any spacing. Is there a way to add something similar to a tag in the ts file instead of the template? Alternatively, can I input multiple values into my angular compo ...

htmlangulartypescript

"Using jQuery to trigger a click function on elements with the same

Whenever I click the comment link all of the divs are opening but i need that particular only to be opened. HTML: <div> <a href="#" class="ck">comment</a> <div class="cmt"> <input type="text" class="txt"/> ...

jqueryhtml

Creating if-else conditions in React can be achieved by utilizing the ternary

How can I make an if-else condition dynamic based on a button click? I have tried implementing it but it doesn't seem to work. I attempted to create conditions for different languages. For example, clicking the button labeled "Español" should print ...

htmlreactjs

Calculate the total value of an object using Typescript

Here is the data that I have: [Products, Products, Products, Products] 0: Products {product_id: "1", Product_type_id: "11", Subtotal:450, …} 1: Products {product_id: "2", Product_type_id: "22", Subtotal:550, …} 2: Products {product_id: ...

htmlangulartypescriptcalculator

Retrieving Text following an HTML Element with a Parsing Tool

I'm currently utilizing PHP Simple HTML DOM for the development of a web scraper application. Here is the HTML structure from which we need to extract the City/State name, such as "Daviston, AL" in the example below. Can anyone assist me wi ...

phphtmlsimple-html-dom