Html - Struggling with CSS layouts

RykaRay
November 15, 2024
95 views
4 votes
4 Answers

I would like my header to span the full width of the page, and it is not. (.red and .green), I would like my footer to not be seen until scrolled down to and then to stay at the bottom of the page, I would like my nave to be flush with the left side of the screen and stay there.

type here<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Reno, NV</title>
   <style>
      body  {
      background-image: url("RenoAtNight.jpg");
      background-repeat:no-repeat;
      background-attachment: fixed;
      background-size: cover;
      }
   </style>
</head>
<body>
   <header class="red"> 
      <h1>Reno, NV</h1>
      <h2>The Littlest Big City! </h2>
   </header>
   <nav>
      <a href="index.html">Home</a>nbsp
      <a href="Carson-city.html">Carson City</a>nbsp
      <a href="Reno.html">Reno, NV</a>nbsp
      <a href="Elko.html">Elko</a>nbsp
      <a href="Las Vegas.html">Las Vegas</a>nbsp
     
   </nav>
   <section>
      <p>Why Aren't you appearing, bro? 
         A bunch of Lorem edited out to not muddy the code too much. 
      </p>
   </section>
   <footer>
      <p>
         More lorem placeholder text.
      </p>
      
   </footer>>
</html>
   
</body>
</html>

*{
  box-sizing: border-box;
}


.green{
   display:block;
   text-align:center;
   background:radial-gradient( rgba(255, 145, 0, 0.595), rgb(138, 154, 91));
   margin-top:20px;
   border-top:20px black solid;
   border-bottom:20px black solid;
}

.red{
  text-align:center;
  background:radial-gradient( rgb(4, 63, 135, 0.9), rgb(111, 4, 4, 0.95));
  margin-top:20px;
  border-top:20px black solid;
  border-bottom:20px black solid;
  left:0px;
  width:100%
}


h1{
  font-size:4rem;
}

nav a:hover {
  color:gray;
  font-size:.98em;

}
nav{
  display:block;
  height:100vh;
  width:20%;
  background-color:black;
  padding:15px;
  position:fixed;
  margin:0px;
  left:0px;
 }
 a {
   display:block;
   color:white; 
 }
section{
  display:block;
  width:70%;
  background-color: rgba(255, 255, 255, 0.7);
  position:relative;
  left:25%;
}

footer{
  position:absolute;
  left: 20%;
  bottom: 0;
  width: 80%;
  background-color: red;
  color: white;
  text-align: center;
}

I have played around with gridbox, float, EVERY SINGLE POSITIONING OPTION IN THE FREAKING WORLD!!!!!!

Tags: css html

Answers

- Russell
- November 15, 2024 at 5:31 am
- 0 votes
0
It’s easiest to start with some pre-built styles such as bootstrap. ref: https://getbootstrap.com/ They already have templates that will give you a sticky footer and a more modern horizontal navigation that behaves appropriately in mobile sizes e.g. https://getbootstrap.com/docs/5.3/examples/sticky-footer-navbar/

"I would like my header to span the full width of the page, and it is not."

Browsers normally have an automatic style for margin that you need to override.
E.g. body {margin: 0}

"I would like my footer to not be seen until scrolled down to and then to stay at the bottom of the page"

Have a look at how the bootstrap example achieves this using margin-top: {auto}

"I would like my nave to be flush with the left side of the screen and stay there."

See above answer about auto margin in browsers that you need to override

"I have played around with gridbox, float,…."

Check out flex.

Login or Signup to reply.

Try this code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Reno, NV</title>
    <style>
      body {
        background-image: url("RenoAtNight.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      h1 {
        font-size: 4rem;
      }

      a {
        display: block;
        color: white;
      }

      .menu {
        display: grid;
        place-items: center;
        height: 100vh;
        width: 20%;
        background-color: black;
        padding: 15px;
        position: fixed;
        margin: 0px;
        top: 0;
        left: 0px;
      }

      nav a:hover {
        color: gray;
        font-size: 0.98em;
      }

      .section-warper {
        margin-left: 20%;
      }

      section {
        display: block;
        background-color: rgba(255, 255, 255, 0.7);
        position: relative;
      }

      .green {
        display: block;
        text-align: center;
        background: radial-gradient(
          rgba(255, 145, 0, 0.595),
          rgb(138, 154, 91)
        );
        margin-top: 20px;
        border-top: 20px black solid;
        border-bottom: 20px black solid;
      }

      .red {
        text-align: center;
        height: 140px;
        background: radial-gradient(rgb(4, 63, 135, 0.9), rgb(111, 4, 4, 0.95));
        border-top: 20px black solid;
        border-bottom: 20px black solid;
        left: 0px;
        width: 100%;
      }

      .section-content {
        min-height: calc(100vh - 140px - 20px - 20px);
      }

      footer {
        width: 100%;
        height: 20px;
        margin-top: 20px;
        background-color: red;
        color: white;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div class="menu">
      <nav>
        <a href="index.html">Home</a>nbsp
        <a href="Carson-city.html">Carson City</a>nbsp
        <a href="Reno.html">Reno, NV</a>nbsp <a href="Elko.html">Elko</a>nbsp
        <a href="Las Vegas.html">Las Vegas</a>nbsp
      </nav>
    </div>
    <div class="section-warper">
      <header class="red">
        <h1>Reno, NV</h1>
        <h2>The Littlest Big City!</h2>
      </header>

      <div class="section-content">
        <section>
          <p>
            Why Aren't you appearing, bro? A bunch of Lorem edited out to not
            muddy the code too much.
          </p>
        </section>
        <section>
          <p>
            Why Aren't you appearing, bro? A bunch of Lorem edited out to not
            muddy the code too much.
          </p>
        </section>
        <section>
          <p>
            Why Aren't you appearing, bro? A bunch of Lorem edited out to not
            muddy the code too much.
          </p>
        </section>
        <section>
          <p>
            Why Aren't you appearing, bro? A bunch of Lorem edited out to not
            muddy the code too much.
          </p>
        </section>
        <section>
          <p>
            Why Aren't you appearing, bro? A bunch of Lorem edited out to not
            muddy the code too much.
          </p>
        </section>
        <section>
          <p>
            Why Aren't you appearing, bro? A bunch of Lorem edited out to not
            muddy the code too much.
          </p>
        </section>
      </div>
      <footer>
        <p>More lorem placeholder text.</p>
      </footer>
    </div>
  </body>
</html>

This is very low quality effort. Please go through some online tutorial how to layout web page. I would recommend https://www.w3schools.com/css/css3_flexbox.asp.

You layout is messed up. There is not header, no main container, no footer. Only tag with random css.

You do not use position randomly.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.green {
  display: block;
  text-align: center;
  background: radial-gradient(rgba(255, 145, 0, 0.595), rgb(138, 154, 91));
  margin-top: 20px;
  border-top: 20px black solid;
  border-bottom: 20px black solid;
}

.red {
  text-align: center;
  background: radial-gradient(rgb(4, 63, 135, 0.9), rgb(111, 4, 4, 0.95));
  border-top: 20px black solid;
  border-bottom: 20px black solid;
  width: 100%;
}

h1 {
  font-size: 4rem;
}

nav a:hover {
  color: gray;
  font-size: 0.98em;
}
.nav-container {
  display: block;
  height: 100%;
  width: 20%;
  background-color: black;
  padding: 15px;
  position: fixed;
  margin: 0;
  left: 0;
  top: 130px;
}
nav {
  background-color: black;
}
a {
  display: block;
  color: white;
}
section {
  display: block;
  width: 70%;
  background-color: rgba(255, 255, 255, 0.7);
  position: relative;
  left: 25%;
}

footer {
  background-color: red;
  color: white;
  text-align: center;
}

<header class="red">
  <h1>Reno, NV</h1>
  <h2>The Littlest Big City!</h2>
</header>
<div class="nav-container">
  <nav>
  <a href="index.html">Home</a>
  <a href="Carson-city.html">Carson City</a>
  <a href="Reno.html">Reno, NV</a>
  <a href="Elko.html">Elko</a>
  <a href="Las Vegas.html">Las Vegas</a>
</nav>
</div>

<section>
  <p>
    Why Aren't you appearing, bro? A bunch of Lorem edited out to not muddy the code too much.
  </p>
  <p>
    Why Aren't you appearing, bro? A bunch of Lorem edited out to not muddy the code too much.
  </p>
  <p>
    Why Aren't you appearing, bro? A bunch of Lorem edited out to not muddy the code too much.
  </p>
  <p>
    Why Aren't you appearing, bro? A bunch of Lorem edited out to not muddy the code too much.
  </p>
  <p>
    Why Aren't you appearing, bro? A bunch of Lorem edited out to not muddy the code too much.
  </p>
  <p>
    Why Aren't you appearing, bro? A bunch of Lorem edited out to not muddy the code too much.
  </p>
  <p>
    Why Aren't you appearing, bro? A bunch of Lorem edited out to not muddy the code too much.
  </p>
  <p>
    Why Aren't you appearing, bro? A bunch of Lorem edited out to not muddy the code too much.
  </p>
</section>
<footer>
  <p>More lorem placeholder text.</p>
</footer>

header to span the full width of the page

Most browsers have their default style on the body tag, margin: 8px; that’s where the white space came from. You can use the below CSS to overwrite it.

html,
body {
  padding: 0;
  margin: 0;
}

footer to not be seen until scrolled down to and then to stay at the bottom of the page

Don’t use position: absolute;, just leave it as default position.

nav to be flush with the left side of the screen

You should check out the flexbox layout.
Wrap the nav the main content with flex

As you have set width: 20%;, add flex-grow: 1; to main content, so it can expand all the rest of the space.

and stay there
use position: sticky; top: 0;

Put everything together

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

.green {
  display: block;
  text-align: center;
  background: radial-gradient(rgba(255, 145, 0, 0.595), rgb(138, 154, 91));
  margin-top: 20px;
  border-top: 20px black solid;
  border-bottom: 20px black solid;
}

.red {
  text-align: center;
  background: radial-gradient(rgb(4, 63, 135, 0.9), rgb(111, 4, 4, 0.95));
  border-top: 20px black solid;
  border-bottom: 20px black solid;
  left: 0px;
  width: 100%;
}

h1 {
  font-size: 4rem;
}

.flex {
  display: flex;
}

.flex .main-content{
  flex-grow: 1;
}

nav a:hover {
  color: gray;
  font-size: 0.98em;
}
nav {
  display: block;
  height: 100vh;
  width: 20%;
  background-color: black;
  padding: 15px;
  position: sticky;
  margin: 0px;
  top: 0;
  left: 0px;
}
a {
  display: block;
  color: white;
}
section {
  padding: 1em;
  /*   display: block; */
  /*   width: 70%; */
  background-color: rgba(255, 255, 255, 0.7);
  /*   position: relative; */
  /*   left: 25%; */
}

footer {
  /*   left: 20%; */
  /*   bottom: 0; */
  /*   width: 100%; */
  background-color: red;
  color: white;
  text-align: center;
  padding: 1em;
}
footer p {
  margin: 0;
}

<style>
  body {
    background-image: url("RenoAtNight.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }
</style>
<header class="red">
  <h1>Reno, NV</h1>
  <h2>The Littlest Big City! </h2>
</header>

<div class="flex">
  <nav>
    <a href="index.html">Home</a>nbsp
    <a href="Carson-city.html">Carson City</a>nbsp
    <a href="Reno.html">Reno, NV</a>nbsp
    <a href="Elko.html">Elko</a>nbsp
    <a href="Las Vegas.html">Las Vegas</a>nbsp
  </nav>
  <div class="main-content">
    <section>
      <p>Why Aren't you appearing, bro?
        A bunch of Lorem edited out to not muddy the code too much.
        <br>
      </p>
      <p>Why Aren't you appearing, bro?
        A bunch of Lorem edited out to not muddy the code too much.
        <br>
      </p>
      <p>Why Aren't you appearing, bro?
        A bunch of Lorem edited out to not muddy the code too much.
        <br>
      </p>
      <p>Why Aren't you appearing, bro?
        A bunch of Lorem edited out to not muddy the code too much.
        <br>
      </p>
      <p>Why Aren't you appearing, bro?
        A bunch of Lorem edited out to not muddy the code too much.
        <br>
      </p>
      <p>Why Aren't you appearing, bro?
        A bunch of Lorem edited out to not muddy the code too much.
        <br>
      </p>
      <p>Why Aren't you appearing, bro?
        A bunch of Lorem edited out to not muddy the code too much.
        <br>
      </p>
      <p>Why Aren't you appearing, bro?
        A bunch of Lorem edited out to not muddy the code too much.
        <br>
      </p>
      <p>Why Aren't you appearing, bro?
        A bunch of Lorem edited out to not muddy the code too much.
        <br>
      </p>
      <p>Why Aren't you appearing, bro?
        A bunch of Lorem edited out to not muddy the code too much.
        <br>
      </p>
      <p>Why Aren't you appearing, bro?
        A bunch of Lorem edited out to not muddy the code too much.
        <br>
      </p>
      <p>Why Aren't you appearing, bro?
        A bunch of Lorem edited out to not muddy the code too much.
        <br>
      </p>
      <p>Why Aren't you appearing, bro?
        A bunch of Lorem edited out to not muddy the code too much.
        <br>
      </p>
      <p>Why Aren't you appearing, bro?
        A bunch of Lorem edited out to not muddy the code too much.
        <br>
      </p>
      <p>Why Aren't you appearing, bro?
        A bunch of Lorem edited out to not muddy the code too much.
        <br>
      </p>
      <p>Why Aren't you appearing, bro?
        A bunch of Lorem edited out to not muddy the code too much.
        <br>
      </p>
    </section>
    <footer>
      <p>
        More lorem placeholder text.
      </p>
    </footer>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Struggling with CSS layouts

Answers