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

Using Paper.js to access and manipulate document.body.style.opacity within a paperscript

My website is essentially one large canvas image. Currently, the body fades in when loaded using this code: <body onLoad="document.body.style.opacity='1'"> However, I want to initiate this fade within my paperscript because sometimes the ...

javascriptcsshtmlpaperjs

Directive containing tracking code script

I'm working on creating a directive to dynamically include tracking code scripts in my main page: <trackingcode trackingcodevalue="{{padCtrl.trackingnumber}}"></trackingcode> This is the directive I have set up: (function () { 'use ...

javascripthtmlangularjsangularjs-directivematomo

Tips for implementing a CSS loader exclusively on a particular section of your content

Is it possible to apply a loader image to a specific section of content on a webpage? All the tutorials I've come across for loader images focus on applying them to entire webpages. However, I am looking to implement a simple loader only to a specifi ...

javascriptcssclassloader

Identifying child elements in jQuery with identical IDs

Consider this HTML setup: <div id="contentRead"> ... <div id="List"></div> </div> ... <div id="contentWrite"> ... <div id="List"></div> </div> ...

javascriptjqueryhtml

"Troubleshooting issues with Material Design components in AngularJS: Why is <md-select> not functioning correctly

I'm attempting to implement the <md-select> tag, but I can't seem to achieve the same result as shown here. This is the code I've written: <div layout="column" layout-align="center center" style="margin: 0px 10px 0px 5px;"> & ...

javascripthtmlangularjsmaterial-designangular-material

My jQuery carousel seems to be malfunctioning. Check out the issue here on JSFiddle

I found this amazing resource for jQuery carousel functionality: If you'd like to see it in action, check out the JSFiddle demo I created: http://jsfiddle.net/svQpc/ However, I've encountered a small issue with the Horizontal version of the car ...

jqueryhtmlcss

Tips for making a 2D grid on a webpage

Is there a way to implement a 10x10 grid on a webpage where users can click anywhere on the grid and have their (x, y) position recorded with one decimal place accuracy, covering values between 0.0-10.0 or 0.1-9.9? Appreciate any guidance! ...

javascripthtml

supplying various color variables to a single class

I am working on a webpage with multiple elements sharing the same CSS class. I want each element to have a unique background color, but I don't want to create a bloated CSS file. Is there a way to achieve this by adding a parameter in my HTML like cla ...

css

Implementing Material-UI’s FlatButton and Dialog in ReactJS for dynamic TableRow functionality

I am working with Material-UI and have implemented a <Table> component. Each dynamically rendered <TableRow> in the <TableBody> needs to include a button (<FlatButton>) within one of the columns. When this button is clicked, a <D ...

javascripthtmlreactjsmaterial-ui

What is the best way to extract data from dynamically generated radio buttons?

UPDATE I previously attempted the recommended adjustments in the initial response, but encountered issues with radio buttons allowing multiple selections and the label number controlling the top radio button. Subsequently, I have experimented further...I w ...

htmljqueryasp.net-corerazor-pages

Adding HTML components to an image with adjustable dimensions

A graphic designer has provided us with an image featuring three selection boxes. I implemented the necessary HTML elements and CSS to display three overlapped selection boxes on top of the image, using pixel values for positioning. However, the original ...

htmlcssimageresponsive-designscaling

Attempting to execute a PHP script through a JavaScript if statement

I have a form that requires validation with JavaScript. In one of the if statements, after all other conditions have been validated, I want to execute my PHP script that updates an SQL database with one of the passwords. Here is the final validation code: ...

javascriptphphtmlformsvalidation

CSS margin dispute

I'm facing an issue with two CSS classes - container and top_menu. The top_menu should not have a margin on top when used within the container class, but it somehow does. Removing the container div resolves this. How can I resolve this problem? Below ...

htmlcssmargin

Ways to adjust the brightness of any color when hovered over

Is it possible to create a universal effect where an element becomes darker or lighter when hovered over, regardless of the initial color? Here is an example: .change-color{ Background:green; width:100px; height:100px } .change-color:hover{ Background ...

javascriptjqueryhtmlcss

Difficulty with collapsing icon in Bootstrap's navigation bar

I am in the process of building a bootstrap website and facing an issue with the collapsible navigation bar. The nav toggle button is always visible, but I want it to only appear when the nav bar goes to a medium size. How can I achieve this? The code sni ...

htmlcsstwitter-bootstrapbootstrap-4

Utilizing CSS and jQuery to align images in the center of the screen

I'm attempting to display a larger image when hovering over a thumbnail using jQuery and CSS. I have two images like this <td> <% if camera["is_public"] == "t" %> <img src="https://media.evercam.io/v1/cameras/&l ...

javascriptjqueryhtmlcss

Load CSS stylesheet depending on Internet Explorer document mode

As I work on my website, I am facing the challenge of incorporating different versions of my style sheet based on the browser's document mode, not the browser mode. For instance, if the documentmode = ie8, I may need to load main_ie8.css, whereas for ...

javascripthtmlcssinternet-explorerinternet-explorer-9

Shifting a static-width table within a predetermined width container

Unable to modify the HTML code for this project, I am in need of a CSS-only solution. Dealing with an unpleasant HTML structure that is causing some issues. A side by side comparison on fiddle shows where I'm currently at in the process. The challeng ...

htmlcss

Why are the links in the navgoco slide menu failing to function properly?

I utilized a demo from jQueryRain to create a collapsible menu using jQuery. However, after completion, I discovered that none of the links were functioning properly. Upon visiting the documentation page, I noticed that many users were encountering the sam ...

javascriptjqueryhtml

What is the proper way to credit the glyphicons element in Twitter's bootstrap framework?

According to the section on icons in the Base CSS page of GitHub's Twitter bootstrap, Glyphicons Halflings were not originally available for free. However, thanks to an agreement between Bootstrap and the creators of Glyphicons, developers can now use ...

javascripthtmltwitter-bootstrapglyphicons