Asad Mahmood Asad Mahmood - 4 months ago 7
HTML Question

Why is my shading only showing when I put in more text in the section compared to the column?

Look at the right column, at the bottom there isn't any shading, I am not sure why that is after tinkering with it.
enter image description here

However whenever I add more text to the section the shading is correct on the side column as so:

enter image description here

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>int222_162d16 - Assignment 2 - Home Page</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" />
</head>
<body>
<nav class="fixed-nav-bar">
<ul class="nav">
<li class="nav"><a class="nav" href="../index.html">&spades; My Zenit Account</a></li>
<li class="nav"><a class="active" href="index.html">Home</a></li>
<li class="nav"><a class="nav" href="gallery.html">Gallery</a></li>
<li class="nav"><a class="nav" href="video.html">Video</a></li>
<li class="nav"><a class="nav" href="audio.html">Audio</a></li>
<li class="nav"><a class="nav" href="table.html">Tables With CSS</a></li>
<li class="nav"><a class="nav" href="pizza/index.html">Forms</a></li>
<li class="nav"><a class="nav" href="css/sitecss.css">CSS Used</a></li>
<li class="nav"><a class="nav" href="extra/index.html">Extra</a></li>
</ul>
</nav>
<h1>Welcome To The Home Page!</h1>



<div class="s">

<aside class="r">
<p class="c"><b><u>Recommended Links</u></b></p>
<p><b>CSS</b></p>
<table>
<ol>
<li><a href="http://www.csstutorial.net/">CSS Tutorials</a></li>
<li><a href="http://www.htmldog.com/guides/css/beginner/">HTML Dog CSS Beginner Tutorials</a></li>
<li><a href="http://www.csstutorial.net/">CSS Tutorials</a></li>
</ol>
<p><b>JavaScript</b></p>
<ol>
<li><a href="http://www.csstutorial.net/">CSS Tutorials</a></li>
<li><a href="http://www.htmldog.com/guides/css/beginner/">HTML Dog CSS Beginner Tutorials</a></li>
<li><a href="http://www.csstutorial.net/">CSS Tutorials</a></li>
</ol>
</table>
</aside>

<section class="s">
<h3>HTML5 & CSS Normalize</h3>
<p>The reason why we use normalize.css is due to it providing cross-browser consistency in the styling of HTML elements.</p>
</section>

<section class="s">
<h3>TEXT</h3>
<p>
TEXTTEXTTEXT</u>
</p>
</section>


</div>



<footer class=f>
<script>
var dt=new Date(document.lastModified); // Get document last modified date
document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
</script>
</footer>

</body>
</html>


CSS:

ul.nav
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
border: 1px solid #e7e7e7;
box-shadow: 5px 2px 10px #808080;
}

li.nav
{
float: left;
}

li a.nav
{
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color on hover*/

li a:hover:not(.active)
{
background-color: #ddd;
}

li a.active
{
display: block;
color: #ffffff;
background-color: #9999ff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

section.s /*shadow on sections*/
{
background-color: #ccccff;
box-shadow: 5px 2px 10px 3px #808080;
width:65%;
}


aside.r
{
float: right;
width: 33%;
background-color: #ccccff;
box-shadow: 5px 2px 10px 3px #808080;
}

p.c
{
text-align: center;
width: 100%;

}

footer.f
{
bottom: 0;
width:100%;
background:#ccccff;
color:#000000;
border:1px solid #cccccc;
position:absolute;
text-align:center;
font-weight:bold;
display:inline-block;
margin: 0px auto;
line-height:20px;
box-shadow: 5px 2px 10px 3px #808080;
clear: both;
}

aside p { margin-top: 0 }

html, body {
max-width: 100%;
overflow-x: hidden;
}

Answer

Remove overflow-x: hidden for body,html

html, body {
    max-width: 100%;
   /* overflow-x: hidden;*/
}

ul.nav
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f3f3f3;
    border: 1px solid #e7e7e7;
    box-shadow: 5px 2px 10px #808080;
}

li.nav 
{
    float: left;
}

li a.nav 
{
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color on hover*/

li a:hover:not(.active) 
{
    background-color: #ddd;
}

li a.active
{
    display: block;
    color: #ffffff;
    background-color: #9999ff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

section.s /*shadow on sections*/
{
    background-color: #ccccff;
    box-shadow: 5px 2px 10px 3px #808080;
    width:65%;
}


aside.r 
{
  float: right;
  width: 33%;
  background-color: #ccccff;
  box-shadow: 5px 2px 10px 3px #808080;
}

p.c
{
    text-align: center;
    width: 100%;

}

footer.f
{
          bottom: 0;
          width:100%;
          background:#ccccff;
          color:#000000;
          border:1px solid #cccccc;
          position:absolute;
          text-align:center; 
          font-weight:bold;
          display:inline-block;
          margin: 0px auto;
          line-height:20px;
          box-shadow: 5px 2px 10px 3px #808080;
          clear: both;
}

aside p { margin-top: 0 }

html, body {
    max-width: 100%;
   /* overflow-x: hidden;*/
}
<ul class="nav">
        <li class="nav"><a class="nav" href="../index.html">&spades; My Zenit Account</a></li>
        <li class="nav"><a class="active"  href="index.html">Home</a></li>
        <li class="nav"><a class="nav" href="gallery.html">Gallery</a></li>
        <li class="nav"><a class="nav" href="video.html">Video</a></li>
        <li class="nav"><a class="nav" href="audio.html">Audio</a></li>
        <li class="nav"><a class="nav" href="table.html">Tables With CSS</a></li>
        <li class="nav"><a class="nav" href="pizza/index.html">Forms</a></li>
        <li class="nav"><a class="nav" href="css/sitecss.css">CSS Used</a></li>
        <li class="nav"><a class="nav" href="extra/index.html">Extra</a></li>
      </ul>
    </nav>
    <h1>Welcome To The Home Page!</h1>



    <div class="s">

        <aside class="r">
            <p class="c"><b><u>Recommended Links</u></b></p>
            <p><b>CSS</b></p>
            <table>
                <ol>
                    <li><a href="http://www.csstutorial.net/">CSS Tutorials</a></li>
                    <li><a href="http://www.htmldog.com/guides/css/beginner/">HTML Dog CSS Beginner Tutorials</a></li>
                    <li><a href="http://www.csstutorial.net/">CSS Tutorials</a></li>
                </ol>
                <p><b>JavaScript</b></p>
                <ol>
                    <li><a href="http://www.csstutorial.net/">CSS Tutorials</a></li>
                    <li><a href="http://www.htmldog.com/guides/css/beginner/">HTML Dog CSS Beginner Tutorials</a></li>
                    <li><a href="http://www.csstutorial.net/">CSS Tutorials</a></li>
                </ol>
            </table>
        </aside>

        <section class="s">
            <h3>HTML5 & CSS Normalize</h3>
            <p>The reason why we use normalize.css is due to it providing cross-browser consistency in the styling of HTML elements.</p>
        </section>

        <section class="s">
            <h3>TEXT</h3>
            <p>
                TEXTTEXTTEXT</u>
            </p>
        </section>


    </div>



    <footer class=f>
       <script>
          var dt=new Date(document.lastModified);   // Get document last modified date
          document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
       </script>
    </footer>

Comments