CODEWITHSUNDEEP
htmlcss
Jammi
Jammi

Reputation: 177

I got a tiny bug with my website

I'm trying to keep this website as simple as possible.

Problem one: Basically I'm trying to mirror the header to footer, but they won't match.

Problem two: There is unnecessary whitespace between the navbar and headerBlue

I've a link to the desired effect here! https://i.sstatic.net/2bJ9Q.png

Any help would be greatly appreciated.

Html code:

<!DOCTYPE html>
<html>
<head>
<meta name="language" content="en">
 <link href="teststyle.css" type="text/css" rel="stylesheet" />
 <title>Neecal Natural Stone Care</title>
</head>
<body>

<section class="wrapper"> 
    <div class="HeaderRed">
      <strong><p>Header</p></strong>
    </div>
    <div class="Spacer"></div>
    <div class="HeaderBlue">
      <strong><p>header blue</p></strong>
    </div>
   <div class="navbar">
     <ul>
           <li><a href="About.html" title="About">About</a></li>
           <li><a href="Contact.html" title="Contact">Contact</a></li>
           <li><a href="PhotoGallery.html" title="Gallery">Gallery</a></li>
           <li><a href="NewArchive.html" title="News Archive">News Archive</a></li>
      </ul>
    </div> <!-- nav bar  !-->
    <section class="main">


    </section><!-- body closed  !-->
 <div class="footerBlue">
  <p>footer blue</p>
   </div>

 <div class="Spacer"></div>

<strong><p></p></strong>
    <div class="footerRed">
      <ul>
           <li><strong><a href="Copyright.html">Copyright</a></strong></li>
           <li><strong><a href="SiteMap.html">SiteMap</a></strong></li> 
      </ul>
    </div> <!-- footer  !-->
</section><!-- wrrapper  !-->
</body>
</html>

CSS Code:

      body {
      font-family:Arial, Helvetica, sans-serif; 
      padding: 2.5%;
      font-size: 12px;
      font-weight: normal;
      margin: 2.5%;
      background: #FFF;
    }

    li {
      display:inline;
    }

    div {
    display: block;
    }

    .HeaderRed{
      border-top-right-radius: 25px;
      border-top-left-radius: 25px;
      background-color: #b51a22;
      width: 100%;
      height: 100px;
      padding-top: 5%;
    }

    .Spacer{
      background-color: white;
      width: 100%;
      height: 100%;
    }

    .HeaderBlue{
      background-color: #12357d;
      width: 100%;
      height: 100px;
    }

    .wrapper{
      width: 100%;
      height: 100%;
      border: 1px dashed black;
      border-top-right-radius: 25px;
      border-top-left-radius: 25px;
      border-bottom-right-radius: 25px;
      border-bottom-left-radius: 25px;
      padding: 2%;
    }

    .navbar{
      width: 100%;
      height: 100%;
      text-align: center;
      border-radius: 2%;
      background-color: #13367c;

    }

    .main{ 
      width: 100%;
      height: 100%;
      background-color: white;
      border: 1px solid black;
    }

    .footerBlue{
      width: 100%;
      height: 100%;
      background-color: #12357d;
    }

    .footerRed{
      width: 100%;
      height: 100%;
      border-radius: 2px;
      border-bottom-right-radius: 25px;
      border-bottom-left-radius: 25px;
      background-color: #b51a22;
      text-align: center;
    }

Upvotes: 1

Views: 104

Answers (2)

Carl0s1z
Carl0s1z

Reputation: 4723

The solution to problem 1 (Basically I'm trying to mirror the header to footer, but they won't match.) is:

.footerRed {
  ...
  height: 100px;          /*change the height in px */
  padding-top: 5%;        /* add a padding-top */
 }

The answer on problem 2 (Problem two: There is unnecessary whitespace between the navbar and headerBlue) is:

Reset the standard margin of the ul:

ul {margin:0;}

DEMO

Upvotes: 1

Dan
Dan

Reputation: 8784

Ensure footerRed matches headerRed

.footerRed {
      border-bottom-right-radius: 25px;
      border-bottom-left-radius: 25px;
      background-color: #b51a22;
      width: 100%;
      height: 100px;
      padding-top: 5%;
      line-height: 100px;
      text-align: center;
}

Removing whitespace between headerBlue and navbar

nav > ul {
    margin-top: 0;
}

Here's a JSFiddle of the updated.

Upvotes: 1

Related Questions