Clever Geek Handbook

CSS. Why isn't my content scrolling?

UPDATE 2 I just fixed the "Edit 2" from the bottom where the content of the bodySection div was scrolling on top of the navLogo / navElements div. Position: sibling was the culprit and now I have no position (so it defaults to static from what I understand) in the bodySection class, and works as expected.

I still think some of the things in my code are a bit funky (updated fiddle and code embedded below). For example, to make things line up the way I want, I have very, very strange width properties;

left, mid and rightSection are set to 30% of the width, so they take up ~ 1/3 of the available space. It makes sense.

The bodySection class is 98% wide, with 1% left padding and 2% right padding. Why isn't it 100% wide and 1% padded on both sides? It sits inside a container div which is 100% of the width. I figured I would inherit borders from the parent div.

... The navElements class is 95% wide and if I remove it to 100% it acts all sorts of funny, pushing text off the screen as it is visible on the screen. Why is this?

... The navLogo class is 100% wide and even the img is tagged 100%, but I can tell you the size you see is not 100% the actual image size. This IS the size I want, but it is not 100%, why?

Even on a 32 '' monitor (my external monitor for my laptop), I can see the horizontal scrollbar (at the bottom). Obviously, I don't want this. Why is it here?

Updated script: Fiddle Here

Updated code:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>Frick Solutions - Technology Consulting for Small Business</title>
    <meta name="keywords" content="HTML,CSS"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="/redesign/css/fricksolutions.css"/>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto">
  </head>
  <body id="home">
  <div class ="container">

  <div class="navLogo">
  <a href="/index.html"><img src="/redesign/img/FrickSolutionsLogoWhite.png" style="height:100%; width:AUTO%;"> </a> <!-- style="max-width:40%;max-height:3%;"></a> -->

  <div class="navElements" align="right">
  <li> <a href="/why.html">Why Us?</a></li> 
  <li> <a href="/smallbusiness.html">Small Business</a></li> 
  <li><a href="/servers.html"> Servers </a></li> 
  <li><a href="/athome.html"> @Home </a> </li> 
  <li> <a href="/contact.html">Contact</a> </li>
  </div> <!--Close navLogo div -->
</div> <!--Close navElements div -->
<div class = "bodySection">
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>

<div id = "leftSection">
left text test
</div><!-- Close leftSection -->
<div id = "midSection">
mid text test
</div> <!-- Close midSection -->
<div id = "rightSection">
right text test
</div><!-- Close rightSection -->
</div> <!-- Close bodySection -->
</div> <!-- close container -->

  </body>
</html>

CSS

body {

  color: black;
  font-family: "Roboto", sans-serif;
  background-color: white;
  margin: 0;  /*use this to ensure left most content goes all the way to border of page */
 }





@media screen and (min-width:30em) { /* used to be 600 px */
  .navLogo
  {
  padding-left: 1%;
  padding-right: 1%;
  position: fixed;
  background-color: #373737;
  width: 100%;
  height: 8%;
   }


   .navElements
   {
   padding-right: 1%;
   font-family: "Roboto", sans-serif;
   background-color: transparent;
   position: absolute;
   bottom: 0px;
   width: 95%;
   padding-bottom: .25%;
    }

    .navElements li
    {
    color: white;
    background-color:transparent;
    display: inline-block;
    padding: 5px 10px 0 0;
     }

     .navElements a { text-deocration: none; }
     a:link 
    {
  color: white 

  }
a:visited 
  {
  color: white 
  }
  a:hover
  {
      color: grey;      
  }


 .bodySection{
 padding-left: 1%;
 padding-right: 2%;
 padding-top: 5%;  /*this is here as a hack to make sure the bodySection div shows up under the navLogo/navElement divs*/
 width: 98%; /*
 position: relative;*/
/* overflow: hidden;*/

  }

 #leftSection, #midSection, #rightSection {
 width: 30%;
 min-width: 30%;
 height: 100px;
 border: 1px solid red;
 margin-left: 10px;
 float:left; 
 padding-left: 1%;
 padding-right: 1%;
 padding-top: 1%;
 padding-bottom: 1%;

 }

  .container{
  width: 100%;
  height: auto;
  /*overflow: hidden;*/ }

 }

UPDATE (minus the originally updated Fiddle / Code) Thanks everyone for your help (less than an hour now and I already have a lot of good advice!). I really like this community, although I rarely come here. I will need to change this!

This is a live version of my redesign - And Edit 2, I just realized that what I have is preventing me from clicking any of the links I have entered in the top navigation. I'm guessing it has to do with bodySection overlap (with 5% padding), but would love to hear your ideas.

I haven't implemented too many suggestions at this point, but I know I will (I just need to feed them all and probably check them all). As you can see, I got scrolling, and solved my bodySection problems by putting a 5% top space on the div, so it will always go below the navbar. Unfortunately this does not stop the content of the bodySection div from spanning the navElements and navLogo sections after scrolling has started.

I'm going to remove the code and fiddle below (to avoid confusion) and post the updated code / fiddle here.

Original post (minus code and fiddle link)

So, I am relatively new to CSS (since you can distinguish my css file attached in FIDDLE), but I am working on making it work better. I am a professional technology consultant and want to expand my skills / services to include web design (plus, I want my own site to look great without having to pay for it!).

After a bunch of trial and error, I finally got my top nav that looked the way I wanted it to.

Then I started playing with content, I wanted something like a 3x2 table to display icons and text. I got it working (3x1, with text only now) as expected, but after doing that I figured I needed something between the title bar and the css table, so I figured I would tossed a bunch of dummy text and made sure the scrolling went as expected. What I found was that I was unable to force the page scroll body at all.

I've done a lot of research trying to fix this, most of the posts say "stop using fixed position" or whatever before that. Unfortunately, if I remove the fixed position, the navbar either breaks or remains visible.

In short, this is what I'm looking for: My navigation bar should be on screen 100% of the time. I don't need any crazy jQuery to get it to the top at a specific scroll point - I just want it to be there always.

My content should be below the navbar, in the main div (bodySection). Inside the bodySection, I will need to inline my 3x1 (or 3x2) CSS table consisting of leftSection, midSection, rightSection.

Any hints / tips / tricks to clean up my CSS and its HTML implementation would be greatly appreciated. I'm completely self-taught (HTML and CSS - started learning HTML in the mid 90s as a pre-teen) so I expect to learn a good bit every time I interact with people here on the forum.

+3


source to share


5 answers


There are quite a few things wrong (no offense, we all had to start somewhere). I'm going to post the code to fix it and write some analysis and some advice in a couple of hours or so.

body {
    color: black;
    font-family:"Roboto", sans-serif;
    background-color: white;
    margin: 0;
    /*use this to ensure left most content goes all the way to border of page */
}
@media screen and (min-width:30em) {
    /* used to be 600 px */
    .navLogo {
        padding-left: 1%;
        padding-right: 1%;
        position: fixed;
        /* max-width: 40%; */
        background-color: #373737;
        width: 100%;
        height: 30px;
    }
    .navElements {
        padding-right: 5%;
        font-family:"Roboto", sans-serif;
        background-color: transparent;
        position: fixed;
        padding-top: 5px;
        padding-left: 25%;
    }
    .navElements li {
        color: white;
        background-color:transparent;
        display: inline-block;
        padding-left: 15px;
    }
    .navElements a {
        text-deocration: none;
    }
    a:link {
        color: white
    }
    a:visited {
        color: white
    }
    a:hover {
        color: grey;
    }
    #bodySection {
        padding-top: 25px;
        padding-left: 1%;
        padding-right: 2%
        width: 98%;
    }
    #leftSection, #midSection, #rightSection {
        width: 30%;
        min-width: 30%;
        height: 100px;
        /* border: 1px solid red; */
        margin-left: 10px;
        float:left;
        padding-left: 1%;
        padding-right: 1%;
        padding-top: 1%;
        padding-bottom: 1%;
    }
    #container {
        width: 100%;
        height: auto;
    }
}
      

        
        
        
      

    
<body id="home">
  <div class ="container">
    <div class="navLogo">
      <a href="/index.html">
        <img src="/img/FrickSolutionsLogoWhite.png" style="height:100%; width:AUTO%;">
      </a>
    </div>
    <div class="navElements" align="right">
      <li><a href="/why.html">Why Us?</a></li>
      <li><a href="/smallbusiness.html">Small Business</a></li>
      <li><a href="/servers.html"> Servers </a></li>
      <li><a href="/athome.html"> @Home </a></li> 
      <li><a href="/contact.html">Contact</a></li>
    </div>
    <div id = "bodySection">
      
      here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>

      
      <div id = "leftSection">
  	    <p>left text test</p>
      </div><!-- Close leftSection -->
      <div id = "midSection">
  	    <p>mid text test</p>
      </div> <!-- Close midSection -->
      <div id = "rightSection">
        right text test
      </div><!-- Close rightSection -->
    </div> <!-- Close bodySection -->
  </div>
</body>
Run codeHide result


First of all, I suggest downloading some web development tools to help understand your problems. Personally, I use chrome creation tools (comes with chrome preinstalled). Right click and check the item to pull out a variety of web development tools.

I also suggest reading up at W3 Schools and their extensive library of simple examples and tutorials.

Ok, tip time:

  • 2 body tags are not recommended.
  • Body tag IDs are not recommended.
  • Usage is not recommended to use padding attribute instead.
  • Insert your elements correctly for organizational purposes and easy error detection.

One of your big mistakes that I noticed is understanding the parameters of the "position" attribute. For 99% of your page you want static positioning by default, this puts your content in relation to your other content. For navigation and objects that should remain in view regardless of scrolling, use "fixed". There are very few cases where the use of "absolute" is required.



Now, unrelated to this page if you really want a nice aesthetic and don't want to spend 400 hours developing stylesheets. I highly recommend a responsive css template like bootstrap.

For a great (maybe biased) example of front-end web development, I'll happily point you to my resume website. http://www.brennen-sprimont.com/ . Right click and check the page to get the code.

UPDATE 1 Now for the text displaying "above" the navbar. You need to edit your "bodySection" z-index to be lower or navLabel higher to get the desired result.

UPDATE 2

@media screen and (min-width: 30em)
.bodySection {
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 5%;
}

Your total width was 101%, which caused the scrollbar to appear. Now of course the 3 divs are not perfectly centered, this is because you fill 1% on your parent (bodySection) and then have a 10px left margin on the div on the left.

The reason navElements is so weird is because it's in navLogo, which has% based percentages that throw you 102%. Adding absolute ignores the margins of the parent divs.

+2


source


Your div container is marked as a class in your HTML, but you have defined it as an id in your CSS. Note that in CSS # for ID and. for class

The script you provided does not load correctly, but you can make your content in your scrolling div with overflow. If you are going to keep it as a class you can try



.container{
width: 100%;
height: auto;
overflow: scroll;
}
0


source


It might be a good idea not to have 2 body tags as convention. With nav elements, you can just make them position:fixed; top:0; left:0;

. This is usually enough to get them to stick to the top with several problems.

You will nest all your content in a div with the nav-logo class, which can cause some problems. I would just double check that you have all your divs closed, it is easy to miss them sometimes.

Also, it's kind of a vague outline of how a website can be structured using the new html5 syntax for things, generally I start with something like this and work my way up from there, so I know it's decent

<body> <header> </header> <nav> <ul><li></li></ul> </nav> <section> <article></article> <article></article> <article></article> </section> <footer> </footer> </body>

0


source


OK think this is a freebie, you had a lot of syntax errors and very difficult code to read. Remember, when you are building your site, the gap is your friend! I've cleaned up your code a bit to make it easier to understand. here is the fiddle http://jsfiddle.net/61q7avrL/3/

  <div class ="container">

      <div class="navLogo">
          <a href="/index.html"><img src="/img/FrickSolutionsLogoWhite.png" style="height:100%; width:AUTO%;"/></a> 

      <div class="navElements" align="right">
          <li><a href="/why.html">Why Us?</a>&nbsp;&nbsp;</li> 
          <li><a href="/smallbusiness.html">Small Business</a> &nbsp;&nbsp;</li> 
          <li><a href="/servers.html"> Servers </a>&nbsp;&nbsp;</li> 
          <li><a href="/athome.html"> @Home </a> &nbsp;&nbsp;</li> 
          <li><a href="/contact.html">Contact</a> </li>
      </div>
      </div>    
  </div>
      <div id = "bodySection">
          <div id = "leftSection">
                    left text test
          </div>
          <div id = "midSection">
                    mid text test
          </div>
          <div id = "rightSection">
                        right text test
          </div> 
       </div>

and your css

    body {
    color: black;
    font-family:"Roboto", sans-serif;
    background-color: white;
    margin: 0;
    /*use this to ensure left most content goes all the way to border of page */
}
#container {
     width: 1200px;
     height: 1200px;
}

#bodySection {
        padding-left: 1%;
        padding-right: 2%;
        width: 98%;

}
#leftSection, #midSection, #rightSection {
        width: 30%;
        height: 400px;
        margin-top: 40px;
        border: 1px solid red;
        margin-left: 1%;
        float:left;
        padding: 1%;
}
.navLogo {
        padding-left: 1%;
        padding-right: 1%;
        position: fixed;
        /* max-width: 40%; */
        background-color: #373737;
        width: 100%;
        height: 8%;
}
.navElements {
        padding-right: 1%;
        font-family:"Roboto", sans-serif;
        background-color: transparent;
        position: absolute;
        bottom: 0px;
        width: 95%;
        padding-bottom: .25%;
}
.navElements li {
        color: white;
        background-color:transparent;
        display: inline-block;
}
.navElements a {
        text-deocration: none;
}
a:link {
        color: white
}
a:visited {
        color: white
}
a:hover {
        color: grey;
}


@media screen and (min-width:600px) {
}
0


source


check it

@media screen and (min-width: 30em)
.bodySection {
  padding-left: 1%;
  padding-right: 2%;
  padding-top: 5%;
  width: 98%;
  /* position: relative; */
  /* overflow: hidden; */
}

padding left 1%, padding right 2% and width 98%, so all 101% is wrong,

it should be 100%. so just do 98% to 97%. then the scrolling will go.

http://jsfiddle.net/hznpw2dg/3/ demo

0


source






More articles:


All Articles