CSS Newb 001 - Divs & Positioning

In this example below you will see how to do a CSS Newb 001 - Divs & Positioning with some HTML / CSS and Javascript

I'm learning on Codecademy as a Beginner. This is my first project. My goal with this project is to make something that works. and divides up the page in multiple divs.

Thumbnail
This awesome code was written by craigocurtis, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright craigocurtis ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Newb 001 - Divs & Positioning</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <head></head>
  <body>
    <div class="page">
      <div class="center">
        <div class="centercenter"></div>
        <div class="leftcenter">
          <ul>
            <li><a href="#link1">Link 1</a></li>
            <li><a href="#link2">Link 2</a></li>
            <li><a href="#link3">Link 3</a></li>
            <li><a href="#link4">Link 4</a></li>
            <li><a href="#link5">Link 5</a></li>
            <li><a href="#link6">Link 6</a></li>
            <li><a href="#link7">Link 7</a></li>
            <li><a href="#link8">Link 8</a></li>
            <li><a href="#link9">Link 9</a></li> 
            <li><a href="#link10">Link 10</a></li> 
          </ul>
        </div>
        <div>
          <a href="#box1"><div class="lightbox" id="box1">1</div></a>
          <a href="#box2"><div class="darkbox" id="box2">2</div></a>
          <a href="#box3"><div class="lightbox" id="box3"></div></a>
          <a href="#box4"><div class="darkbox" id="box4"></div></a>
          <a href="#box5"><div class="lightbox" id="box5"></div></a>
          <a href="#box6"><div class="darkbox" id="box6"></div></a>   
          <a href="#box7"><div class="lightbox" id="box7"></div></a>
          <a href="#box8"><div class="darkbox" id="box8"></div></a>   

          <a href="#box9"><div class="darkpbox" id="box9"></div></a>
          <a href="#box10"><div class="lightpbox" id="box10"></div></a>
          <a href="#box11"><div class="darkpbox" id="box11"></div></a>
          <a href="#box12"><div class="lightpbox" id="box12"></div></a>
          <a href="#box13"><div class="darkpbox" id="box13"></div></a>
          <a href="#box14"><div class="lightpbox" id="box14"></div></a>
          <a href="#box15"><div class="darkpbox" id="box15"></div></a>
          <a href="#box16"><div class="lightpbox" id="box16"></div></a>
          
        </div>
        <div class="rightcenter"></div>
        <div class="outsidecenter" id="outsidecenter1"></div>
        <div class="outsidecenter" id="outsidecenter2"></div>
      </div>
/***** HEADER ******/
      <div class="header">
        <div class="centerheader">
           <div class="headernavbar"> 
            <ul>
              <li><a href="#anchor1">Item 1</a></li>
              <li><a href="#anchor2">Item 2</a></li>
              <li><a href="#anchor3">Item 3</a></li>
              <li><a href="#anchor4">Item 4</a></li>
              <li><a href="#anchor5">Item 5</a></li>
              <li><a href="#anchor6">Item 6</a></li>
              <li><a href="#anchor7">Item 7</a></li>
              <li><a href="#anchor8">Item 8</a></li>
              <li><a href="#anchor9">Item 9</a></li>
              <li><a href="#anchor10">Item 10</a></li>
              <li><a href="#anchor11">Item 11</a></li>
              <li><a href="#anchor12">Item 12</a></li>

             </ul>
          </div>
        </div> /* put background items first */
        <a href="#sandbox"><div class="leftheader">MY CSSandBox</div></a>
        <div class="rightheader"></div>    
      </div>      
 /**********************************************
I put the header below the main content so this way it actually has a fixed position rather than being covered by the CENTER content 
**********************************************/   
      <div class="footer">
        <div class="centerfooter">
          <ul>
            <a href="#foot1"><li>Foot 1</li></a>
            <a href="#foot2"><li>Foot 2</li></a>
            <a href="#foot3"><li>Foot 3</li></a>
            <a href="#foot4"><li>Foot 4</li></a>
            <a href="#foot5"><li>Foot 5</li></a>
            <a href="#foot6"><li>Foot 6</li></a>
            <a href="#foot7"><li>Foot 7</li></a>
            <a href="#foot8"><li>Foot 8</li></a>
            <a href="#foot9"><li>Foot 9</li></a>
            <a href="#foot10"><li>Foot 10</li>
            </a>
          </ul>
        </div>
        <div class="leftfooter"></div>
        <div class="rightfooter" id="rightfoot"></div>
        <div class="rightfooter"></div>
      </div>
      <div class="superfooter">
          <ul>
            <li><a href="#green1">Green 1</a></li> 
            <li><a href="#green2">Green 2</a></li>
            <li><a href="#green3">Green 3</a></li>
            <li><a href="#green4">Green 4</a></li>
            <li><a href="#green5">Green 5</a></li>
            <li><a href="#green6">Green 6</a></li>
            <li><a href="#green7">Green 7</a></li>
            <li><a href="#green8">Green 8</a></li>
            <li><a href="#green9">Green 9</a></li>
            <li><a href="#green10">Green 10</a></li>
            <li><a href="#green11">Green 11</a></li>
            <li><a href="#green12">Green 12</a></li>


         </ul>
      </div>
    </div>
  </body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/craigocurtis/css-newb-001-divs-andamp-positioning-aBDEI */
/* This just makes all font the same. I want to learn now to do the Google Webfonts next! */

* {
  font-family: Futura, Verdona, Sans-serif;
}

body {
  background-color: #AED8CF;
}

/* I'm not sure if I can use these somehow.. */
.page {
}

.header {
}

.center {
}

.footer {
}

/* This can be for the Website logo */
.leftheader {
  height: 3em;
  width: 8em;
  background-color: #78A64D;
  position: fixed;
  top: 0px;
  left: 0px;
  color: #AED8CF;
  text-align: center;
  border: 1px solid #8BD754;
}

/* How do I center all of these items?
   Also how do I make it so background color is larger when hovering? If I use padding, the padding part doesn't change colors... */
.centerheader {
  height: 3em;
  width: 110%;
  background-color: #6F4E56;
  position: fixed;
  top: 0px;
  left: 0px;  
}


/* I've designed this so it kind of looks like a paper "pulling guide" slider.
  For this design, I wanted the header fixed, but I'm sacrificing that design to allow for possible more navigation on the footer for a game-style approach*/

.rightheader {
  height: 3em;
  width: 2em;
  background-color: #728E45;
  top: 0px;
  position: fixed;
  right: 0%;
}

/* This is the main content area */
/* I coded this first to more easily put the left scrollbar on top, both with absolute positions; */
.centercenter {
  height: 200%;
  width: 100%; /* go over 100% */
  background-color: #AED8CF;
  position: absolute;
  top: 2em;
  left: 0px; /* push this way to make up for 110% */
}


/* This is a div box for content on main page */
.lightbox {
  height: 8em;
  width: 9em;
  background-color: #8BD754;
  position: absolute;
}

.lightbox a:link {
  background-color: black;
}

.lightbox a:hover {
  background-color: blue;
}

/* This is a div box for content on main page */
.darkbox {
  height: 8em;
  width: 9em;
  background-color: #728E45;
  position: absolute;
}

.lightpbox {
  height: 8em;
  width: 9em;
  background-color: #926872;
  position: absolute;
}

.darkpbox {
  height: 8em;
  width: 9em;
  background-color: #664E6E;
  position: absolute;
}
/*   Purple = #6F4E56
   Darker Purple = #664E6E
   medium Purple = #926872
   Lighter Purple = #AC8B93
*/

#box1 {
  top: 4em;
  left: 9em;
}

#box2 {
  top: 8em;
  left: 19em;
}

#box3 {
  top: 12em;
  left: 29em;
}

#box4 {
  top: 16em;
  left: 39em;
}

#box5 {
  top: 20em;
  left: 49em;
}

#box6 {
  top: 24em;
  left: 59em;
}

#box7 {
  top: 28em;
  left: 69em;
}

#box8 {
  top: 28em;
  left: 9em;
}

#box9 {
  top: 10em;
  left: 12em;
}

#box10 {
  top: 17em;
  left: 17em;
}

#box11 {
  top: 18em;
  left: 26em;
}

#box12 {
  top: 22em;
  left: 35em;
}

#box13 {
  top: 26em;
  left: 44em;
}

#box14 {
  top: 30em;
  left: 53em;
}

#box15 {
  top: 34em;
  left: 62em;
}

#box16 {
  top: 34em;
  left: 71em;
}

/** This is the far-right scrollbar */
.rightcenter {
  height: 200%;
  width: 2em;
  background-color: #78A64D;
  position: absolute;
  top: 2em;
  right: 0px;
}

/* this is the purple part when you pull the screen to the right */
.outsidecenter {
  height:100%;
  width:10em;
  background-color: #6F4E56;
  position: absolute;
  top: 2em;
  right: -10em;
}

#outsidecenter2 {
  width: 10em;
  height: 100%;
  position: absolute;
  top: 100%;
  bottom: 0em;
  right: -10em;
  display: block;
  background-color: #8BD754;
}

/* This is the main footer in purpe **/
.centerfooter {
  height: 2em;
  width: 110%;
  background-color: #6F4E56;
  position: fixed;
  bottom: 0px;
  left: 0px;
  margin-left: -3em;
}

/* This is the bottom light green part to match the Website name */
.leftfooter {
  height: 2em;
  width: 8em;
  background-color: #78A64D;
  position: fixed;
  bottom: 0px;
  left: 0px;
}

/* This is a small light green squalre for stylistic purposes to match the rightcenter green bar */
.rightfooter {
  height: 2em;
  width: 2em;
  background-color: #78A64D;
  position: fixed;
  bottom: 0px;
  right: 0%;
}

/* This was a cool idea I had to give a more raw sidebar approach - this is the visual queue to the user */
#rightfoot {
  width:12em;
  background-color: #728E45;
}

/******* element styling ********/

/* This centers the header items */ 
.headernavbar {
    margin-left: 8em;  
}

.centerheader ul {
  position: relative;
  top: -0.7em;
}

/* Here's the key to put padding within link!! */
.centerheader ul a {
  padding: 0.5em;
}

.centerheader ul li {
  width: auto; /* key here is auto. I tried using em's but that screwed most of it up */
}
/* above code mades them blocky */

.centerheader ul a:link {
  border: 2px solid #8BD754; /* light green */
  color: #8BD754; /* light green */
}

.centerheader ul a:hover {
  color: #6F4E56; /* purple */
  background-color: #AED8CF; /* light blue */  
}

.centerheader ul a:visited {
  border: 1px solid #6F4E56; /* purple */
  color: #AC8B93; /* light purple */
  background-color: #8BD754; /* light green */
}

.centerheader ul a:active {
  color: white;
  background: black;
}

/* this positions the footer */

.centerfooter ul {
  position: relative;
  margin-left: 10em;
  bottom: 1em;
}

.centerfooter ul a:link {
  border: 1px solid #AED8CF; /* blue */
  color: #AED8CF; /* blue */
}

.centerfooter ul a:hover {
  color: #6F4E56; /* purple */
  background-color: #8BD754; /* light green */
}

.centerfooter ul a:visited {
  border: 1px solid #6F4E56; /* purple */
  color: #AC8B93; /* light purple */
  background-color: #AED8CF; /* blue */
}

.centerfooter ul a:active {
  color: white;
  background-color: black;
}
/**** *****/

/* Text formatting */

a {
  text-decoration: none;
}

ul {
  font-size: 1em;
  link-style-type: none;
}

li {
  width: 5em;
  height: 2em;
  display: inline-block;
  text-align: center;
  margin-bottom: 10px;
  margin-top: 10px;
}

/*** Green Superfooter ****/ 
/********Color Schemes****
   Blue = #AED8CF
   Darker Blue = #ACCBD7
   Sea Blue = #5AAF9D

   Purple = #6F4E56
   Darker Purple = #664E6E
   medium Purple = #926872
   Lighter Purple = #AC8B93

   Light Greem = #8BD754
   Green = #78A64D
   Dark Green = #728E45
***********************/

/* Just an experiment to cover up fixed elements - this is because of the position on the HTML page, nothing really special, but kind of a  headache when tryign to figure out placement. **/
.superfooter {
  left: 8em;
  width: 87.4%;
  height: 4em;
  background-color: #78A64D;
  position: absolute;
  bottom: -4em;
}

.superfooter ul {
  position: relative;
  margin-left: auto;
  bottom: 0.25em;
}

.superfooter ul a {
  padding: 1em .5em 1em .5em;
}

.superfooter ul li {
  width: auto;
}

.superfooter ul a:link {
  border: 1px solid #6F4E56;
  color: #6F4E56;
}

.superfooter ul a:hover {
  color: #6F4E56;
  background-color: #8BD754;
}

.superfooter ul a:visited {
  border: 1px solid #78A64D;
  color: #8BD754;
  background-color: #6F4E56;
}

.superfooter ul a:active {
  color: white;
  background-color: black;
}




/** Left sidebar links **/

.leftcenter {
  height: 200%;
  width: 8em;
  background-color: #728E45;  
  position: absolute;
  top: 3em;
  left: 0px;
}

.leftcenter ul {
  position: absolute;  
}

.leftcenter ul a {
  padding: 1em;
}


.leftcenter ul li {
  width: auto;
}

.leftcenter ul a:link {
  background-color: #8BD754;
  color: #6F4E56;
  border: 2px solid #6F4E56;
}

.leftcenter ul a:hover {
  background-color: #AC8B93;
}

.leftcenter ul a:visited {
   background-color: #78A64D;
   color: #728E45;
   border: 1px solid #78A64D;
}

.leftcenter ul a:active {
  background-color: black; 
  color: white;
}


/********Color Schemes****
   Blue = #AED8CF
   Darker Blue = #ACCBD7
   Sea Blue = #5AAF9D

   Purple = #6F4E56
   Darker Purple = #664E6E
   medium Purple = #926872
   Lighter Purple = #AC8B93

   Light Greem = #8BD754
   Green = #78A64D
   Dark Green = #728E45
***********************/

Comments