Consolidating my HTML, CSS and JS code in order to adhere to best practices

Question

As I'm getting to grips with front end development I'm looking to consolidate/improve my below HTML, CSS and JS code in terms of adhering to best practices so any advice is appreciated.

Quick overview:

I'm working on a page which has required me to create a page with a nav bar, a horizontal bar below the nav bar, a vertical bar, a dynamic calendar and its controls.

Here's my code fiddle and full screen fiddle.

Any improvement suggestions are appreciated.

Note: for my JS code please see the fiddle.

HTML:

    <header>
        <a href="#" id="logo"></a>

        <nav>
            <a href="#" id="menu-icon"></a>

            <ul>
                <li><a href="#containerjoin">My Profile</a></li> <!--  class="current" -->
                <li><a href="#containerjoin">Log Out</a></li> <!--  class="current" -->
                <li><a href="#">Help and FAQs</a></li>
                <li><a href="#contactus">Contact Us</a></li>
            </ul>               
        </nav>              
    </header>

  <div class="clear"></div>

    <div class="maindiv">

        <div class="horizontalmenubar">

          <label for="show-menu" class="show-menu">MAIN MENU</label>

          <input type="checkbox" id="show-menu" role="button">

          <ul id="menu"> <!-- removed id="menu" -->

            <li><a href="#">Dashboard</a>
              <!-- <ul class="hidden">
                <li><a href="#">SUB MENU OPTION</a></li>
                <li><a href="#">SUB MENU OPTION</a></li>
              </ul>-->
            </li>

            <li>
              <a href="#">H MENU OPTION</a>
              <!-- <ul class="hidden">
                <li><a href="#">SUB MENU OPTION</a></li>
                <li><a href="#">SUB MENU OPTION</a></li>
              </ul>-->
            </li>

            <li>
              <a href="#">H MENU OPTION</a>
              <!-- <ul class="hidden">
                <li><a href="#">SUB MENU OPTION</a></li>
                <li><a href="#">SUB MENU OPTION</a></li>
              </ul>-->
            </li>

            <li><a href="#">H MENU OPTION</a></li>

            <li><a href="#">H MENU OPTION</a></li>
          </ul>
        </div>

        <div class="clear"></div>

        <div class="div_lhs_menu">

            <ul class="js-css-menu responsive vertical">
              <li><a href="#overalldivcalendartable">Calendar</a>
                <!--<div>

                  <ul>
                    <li><b>Col 1</b></li>
                    <li><a href="#">Sublink 1</a></li>
                    <li><a href="#">Sublink 2</a></li>
                    <li><a href="#">Sublink 3</a></li>
                  </ul>

                  <ul>
                    <li><b>Col 1</b></li>
                    <li><a href="#">Sublink 1</a></li>
                    <li><a href="#">Sublink 2</a></li>
                    <li><a href="#">Sublink 3</a></li>
                  </ul>
                </div> -->

              </li>

              <li><a href="#">Dboard option 2</a>
                <!--<div>

                  <ul>
                    <li><b>Col 1</b></li>
                    <li><a href="#">Sublink 1</a></li>
                    <li><a href="#">Sublink 2</a></li>
                    <li><a href="#">Sublink 3</a></li>
                  </ul>

                  <ul>
                    <li><b>Col 1</b></li>
                    <li><a href="#">Sublink 1</a></li>
                    <li><a href="#">Sublink 2</a></li>
                    <li><a href="#">Sublink 3</a></li>
                  </ul>
                </div> -->
              </li>

              <li><a href="#">Dboard option 3</a>
                <!--<div>

                  <ul>
                    <li><b>Col 1</b></li>
                    <li><a href="#">Sublink 1</a></li>
                    <li><a href="#">Sublink 2</a></li>
                    <li><a href="#">Sublink 3</a></li>
                  </ul>

                  <ul>
                    <li><b>Col 1</b></li>
                    <li><a href="#">Sublink 1</a></li>
                    <li><a href="#">Sublink 2</a></li>
                    <li><a href="#">Sublink 3</a></li>
                  </ul>
                </div> -->
              </li>
            </ul>       
        </div>

        <!-- JS targets this div -->
          <div class="overalldivcalendartable">

            <!-- <div id="year"></div> -->

              <div class="controlsdivcalendartable">
                   <span id="btnPrevYr" title="Previous Year"><span><<</span></span>

                   <span id="btnPrev" title="Previous Month"><span><</span></span>

                   <!-- <input type="button" src="images/btnprevmonth.png" alt="Submit" id="btnPrev"/>-->

                   <!-- <div id="month"></div> -->

                     <!-- JS targets this div -->
                     <div id="monthandyear"></div>

                   <!--<input type="button" src="images/btnnextmonth.png" alt="Submit" id="btnNext"/>-->

                   <span id="btnNext" title="Next Month"><span>></span></span>

                   <span id="btnNextYr" title="Next Year"><span>>></span></span>      
                </div>

              <div class="clear"></div>

              <div id="divcalendartable"></div>

            <div id="divcalendartabletwo"></div>         
          </div>
  </div>

    <div class="clear"></div>

    <footer id="footer">
        <section>
            <h3>ABOUT US:</h3>

            <p>qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. <br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. <br></p>             
        </section>

        <section>
            <h3>LIKE, FOLLOW OR WATCH US:</h3>
            <ul class="social">
                <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/facebook.png"/></a></li>               
                <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png"/></a></li>
                <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/youtube.png"/></a></li>                    
            </ul>
        </section>

        <section id="contactus">
            <h3>CONTACT US:</h3>

            <p>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..<br><br><b>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..</b><br><br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..<br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..</p>             
        </section>
    </footer>

    <footer class="footerTwo">
        <p> Copyright &copy; 2015 | qwerty Ltd | All rights reserved.</p>
    </footer>

CSS:

/* Full width styling */

* {
    margin: 0;
    border: 0;
    padding: 0;
}

body {
    background: #F5F5F5;
    color: #363636;
    margin: 0;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 20px;  
}

h1 {
    text-align: center;
    font-size: 100%;
    line-height: 120%;
    padding: 5% 0 5% 0;
}

h2 {
    line-height: 280%;
    padding-left: 3%;
    text-decoration: underline;
}

h3 {
    line-height: 120%;
    padding: 5% 0 5% 0;
}

p {
    padding: 1%;
}

img {
    text-align: center;
    max-width: 100%;
    height: auto;
    width: auto;
}

a {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 20px;    
    text-decoration: none;
}

a:hover {
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: underline; 
}

header {
    background-color: #3366FF;
    width: 100%;
    height: 86px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    opacity: 0.90%;
}

#logo {
    margin: 0px;
    float: left;
    width: 200px;
    height: 86px;
    background: url("../images/logo.png") no-repeat center;
}

nav {
    float: right;
    padding: 25px 20px 20px 0;
}

#menu-icon {
    display: hidden;
    width: 100px;
    height: 86px;
    background: url(http://www.w3newbie.com/wp-content/uploads/icon.png);
    padding: 0;
    margin: 0;
}   

a:hover#menu-icon {
    border-radius: 2px 2px 0 0;
}

ul {
    list-style: none;
}

nav ul li {
    display: inline-block;
    float: left;
    padding: 10px;
}

nav ul li a:hover {
    color: #363636;
    text-decoration: none;
}

section {
    width: 29%;
    float: left;
    margin: 2% 2% 2% 2%;
    text-align: center;
}

.clear {
    clear: both;
}

#genericlinkdecoration {
    color: #3366FF;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}

footer {
    background-color: #808080;
    width: 100%;
    overflow: hidden;
}

footer p, footer h3 {
    color: #FFFFFF;
}

footer p a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: normal;
    font-size: 14px;
}

ul.social li {
    display: inline;
}

ul.social img {
    height: 50px;
}

footer.footerTwo {
    border-top: 1px solid #4D4350;
    background-color: #3366FF;
    text-align: center;
}

/*@media screen and (max-width : 768px), screen and (min-width: 768px) and (max-width: 1024px)  {  */
@media screen and (max-width : 768px) {
    body {
        position: absolute;
    }

    header {
        position: absolute;
    }

    #menu-icon {
        display: inline-block;
    }   

    nav {
        padding: 0;
    }

    nav ul, nav:active ul {
        display: none;
        position: absolute;
        background: #FFFFFF;
        border: 1px solid #D6D6D6;
        right: 20px;
        top: 60px;
        width: 50%;
        border-radius: 2px;
    }

    nav:hover ul {
        display: block;
    }

    nav ul li a {
        color: #363636;
        text-decoration: none;
    }

    nav ul li a:hover {
        color: #3366FF;
        text-decoration: none;
    }

    nav li {
        width: 100%;
        margin: 0;
    }

    section {
        float: left;
        width: 100%;
        margin: 0;
        padding: 0;
    }                       
}

.horizontalmenubar {
    margin-top: 86px;
    background: #D6D6D6;
    height: 50px;
}

/*Strip the ul of padding and list styling*/
.horizontalmenubar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/*Create a horizontal list with spacing*/
.horizontalmenubar li {
    display:inline-block;
    float: left;
    margin-right: 0px;
    width: 200px;
    border-right: 2px solid #FFFFFF;
}

/*Style for menu links*/
.horizontalmenubar li a {
    display: block;
    text-align: center;
    line-height: 50px;
    color: #000000;
    background: #D6D6D6;
    text-decoration: none;
}

/*Hover state for top level links*/
.horizontalmenubar li:hover a {
    background: #F5F5F5;
    color: #3366FF;
}

/*Hide dropdown links until they are needed*/
.horizontalmenubar li ul {
    display: none;
}

/*Make dropdown links vertical*/
.horizontalmenubar li ul li {
    display: block;
    float: none;
}

/* Style the <a> tag nested in sub-menus */
.horizontalmenubar li ul li a {
    padding: 0 5px 0 5px;
    line-height: 25px;  
}

/* Style the hovering of the <a> tag nested in sub-menus */
.horizontalmenubar li:hover ul li a {
    background: #D6D6D6;
    color: #000000; 
}

/* Style the hovering of the <a> tag nested in sub-menus */
.horizontalmenubar li ul li a:hover {
    background: #F5F5F5;
    color: #3366FF; 
}

/*Display the dropdown on hover*/
.horizontalmenubar ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #000000;
    background: #D6D6D6;
    text-align: center;
    padding: 10px 0;
    display: none;
    font-weight: bold;
    font-size: 20px;
}

/*Hide checkbox*/
.horizontalmenubar input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
.horizontalmenubar input[type=checkbox]:checked ~ #menu{
    display: block;
}

/*@media screen and (max-width : 768px), screen and (min-width: 768px) and (max-width: 1024px)  {  */
/*@media screen and (max-width : 1024px) {*/

    /*Make dropdown links appear inline
    .horizontalmenubar ul {
        position: static;
        display: none;
    }*/

    /*Create vertical spacing
    .horizontalmenubar li {
        margin-bottom: 1px;
    }*/

    /*Make all menu links full width
    .horizontalmenubar ul li, li a {
        width: 100%;
    }*/

    /*Display 'show menu' link*/
    /*.show-menu {
        display:block;
    }*/
/*}*/

/*@media screen and (min-width: 1024px) and (max-width : 1224px) {
    .horizontalmenubar li {
        width: 180px;
    }
}*/

.maindiv {
    width: 1280px;
    margin: 0 auto;
}

/* LHS div */
.div_lhs_menu {
    margin: 10px 0 0 0;
    float: left;
}

/* Main menu */
.js-css-menu {
  display: inline-block;
}

.js-css-menu, .js-css-menu ul, .js-css-menu li {
  list-style: none; 
  padding: 0; 
  margin: 0;
}

.js-css-menu a {
  text-decoration: none;
}

.js-css-menu > li {
  display: inline-block; 
  float: left;
  margin-top: 2px;
  background-color: #D6D6D6;
}

.js-css-menu > li > a {
  color: #000000; 
  display: block;
  padding: 10px 15px;
}

.js-css-menu > li:hover > a {
  background: #F5F5F5;
  color: #3366FF;
}

/* Dropdown */
.js-css-menu > li div {
  position: absolute; 
  display: none;
  background: #D6D6D6;
}

.js-css-menu > li:hover div {
  display: block;
}

.js-css-menu > li div ul {
  float: none;
}

.js-css-menu > li div ul li {
  padding: 10px 15px;
  margin-bottom: 2px;
}

.js-css-menu > li div ul li:hover {
  background: #FFFFFF;
  color: #407D94; 
}

.js-css-menu.vertical > li {
  display: block; 
  float: none; 
  position: relative;
}

.js-css-menu.vertical > li div {
  width: 150px; 
  top: 0;
  left: 181px; /* Adjust the left value according to the width of the vertical menu */
}

.js-css-menu.vertical > li div ul li:hover {
  background: #FFFFFF;
  color: #407D94;
}

.js-css-menu.vertical > li div ul li a {
  color: #555;
}

/*@media screen and (max-width : 768px), screen and (min-width: 768px) and (max-width: 1024px)  {  */
@media screen and (max-width : 768px) {

    /* Vertical */
    .js-css-menu.vertical {
      width: 100%; /* Adjust the width of the vertical menu */
    }
}

/* Generic table styling */
.overalldivcalendartable {
    margin: 20px 0 12px 20px;
    float: left;
}

.controlsdivcalendartable {
    float: left;
}

table { 
  border-collapse: collapse;
  table-layout: fixed; 
}

th { 
  background: #333; 
  color: white; 
  font-size: 20px;
  font-weight: bold; 
  padding: 6px;
  vertical-align: top;
}

td { 
  padding: 6px; 
  border: 1px solid #ccc;
  vertical-align: top;
  width: 130px;
  height: 100px;
  font-size: 20px;
}

#divcalendartable {
    margin-top: 20px;
}

#btnPrevYr, #btnPrev, #monthandyear, #btnNext, #btnNextYr {
    font-size: 35px;
    font-weight: normal;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    float: left;
    margin-right: 20px;

    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */

    /* No support for these yet, use at own risk */
    -o-user-select: none;
    user-select: none;
}

#monthandyear {
    cursor: default;
}

#monthandyearspan {
  width: 200px;
  display: inline-block;  
  font-size: 35px;
  font-weight: normal;
  vertical-align: middle;
  text-align: center;
  /*background: #00FFCC;*/
}   

#monthandyear {
  vertical-align: middle;
  float: left;
  font-weight: normal;
}

.daysheader {
  background: #C0C0C0;
  height: auto;
  text-align: center;
}

#prevmonthdates, #nextmonthdates, #currentmonthdates  {
    font-size: 20px;
    font-weight: bold;
}

#prevmonthdates, #nextmonthdates {
  background-color: #E0E0E0;
}

#currentmonthdates {
  background-color: #FFFFFF;
}

/*Apply styling UL cellvaluelist*/
#cellvaluelist {
  font-family:'Trebuchet MS', Tahoma, Sans-serif;
  font-size: 20px;  
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 130px;
}

/*Apply styling on all LI items in the UL cellvaluelist*/
#cellvaluelist > li {
  list-style-type: none;
  text-align: left;
  border-bottom: 2px solid #F5F5F5;
  width: 130px;
}

/*Eliminate border on last list item*/
#cellvaluelist > li:last-child {
  border: none;
  width: 130px;
}

/*Styling for the span in the main list*/
#cellvaluelist > li span {
  text-decoration: none;
  color: #000;
  display: block;
  width: 130px;

  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}

/*Shared styling for swim and chrono*/
.swim, .chrono {
    font-size: 15px;
    font-weight: normal;
    width: 130px;
    overflow: auto; 
}

/*Styling for the list items in the table cells*/
.swim {
  background: #626FD1;
}

/*Hover on the 1st LI item on the list in the table cell*/
.swim:hover {
  background: #F5F5F5;
  cursor: pointer;
}

/*Styling for the list items in the table cells*/
.chrono {
    background: #EDCF47;
}

/*Hover on the 2nd LI item on the list in the table cell*/
.chrono:hover {
  background: #F5F5F5;
  cursor: pointer;
}

/*Styling for the list items in the table cells*/
.couponcode {
    background: #47ED4D;
    font-size: 15px;
    font-weight: normal;
}

/*Hover on the last LI item on the list in the table cell*/
.couponcode:hover {
  background: #F5F5F5;
  cursor: pointer;
}

/*Apply the hover on the UL coupontooltipullist*/
.couponcode:hover .coupontooltipullist {
    display: block;
}

/*UL in the tooltip*/
.coupontooltipullist {
    display: none;
    position: absolute;
    z-index: 1000;
    padding: 5px;
}

/*Shared UL and LI list properties in the tooltip*/
.coupontooltipullist, .coupontooltip_li_list {
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;
    cursor: pointer;    
}

/*LI in the tooltip*/
.coupontooltip_li_list {
    background: #D6D6D6;
    border-bottom: 2px solid #F5F5F5;
    padding: 10px;
 }

/*IMG in the LI in the tooltip*/
.coupontooltipimg {
    width: 55px;
    height: 48px;
    float: left;
    padding-right: 5px;    
}

/*Span in the LI in the tooltip*/
.coupontooltiplistspan {
  float: right;
}

This does not seem to work as it should, the page is completely unusable on narrow viewports, despite the fact that you are using media queries. — cimmanon, Apr 9 at 18:24

Quill · Answer 1 · 2015-08-20 13:40:33Z

up vote 0 down vote

You could consolidate your code using a JavaScript framework line Angular.JS, using the ng-repeat directive will allow you to replicate multiple lines of code like below. This will eliminate HTML tag repetition & offer expandability for the future. If needed, you can find plenty of documentation on the Angular.JS website.

<ul class="hidden" ng-repeat="link in subMenu">
    <li>
        <a class="link" href="#" alt="{{link.altText}}">{{link.name}}</a> 
    </li>
</ul>

edited Aug 20 at 13:40

Quill
5,01231056

answered Apr 10 at 14:09

Sean Parsons
746

Why would you even suggest this? How many KB is Angular? How is that a better trade-off than what the OP already has? – cimmanon Apr 10 at 16:14

Doing Website speed tests, a CDN from Angular hosted by Google takes minuscule amount of time, about 0.60% of the website load time. – Sean Parsons Apr 10 at 16:23

That does not answer my question: how is it better than what the OP already has? There is no speed benefit here. This is as bad as making jQuery a dependency just so you can avoid writing out document.getElementById (qsa, etc.). – cimmanon Apr 11 at 1:52

Ok but that's your opinon, not everyone prefers to use POJO vs. a framework which takes care of all vendor prefixes and browser incompatibilities and allows you to get more work done with less lines of code. He asked for consolidation not for 2 people to butt heads, In my opinion Angular allows for all of the JavaScript components to live in one place and to me that is consolidation and will allow him to eliminate extra lines of HTML consolidating his HTML file. If this isn't how YOU would do it, please instead of butting heads with me, HELP the person asking the question. – Sean Parsons Apr 11 at 12:05

I am helping this person by pointing out this is a terrible suggestion that is costly to the user (not everyone has high speed internet + powerful device to run it). Depending on a 19kb (compressed) library just so you can save yourself from having to write a few extra lines of code is poor justification. Again, I don't believe there is a benefit to this. Writing the markup by hand is superior. Generating the markup on the server side (and caching it if it doesn't change often) is superior. – cimmanon Apr 11 at 12:18

add a comment |

cimmanon · Answer 2 · 2015-04-11 17:14:59Z

Learn to love Shorthand

You're writing out a lot more than you need to by using the longhand version in quite a few places:

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 20px;  
}

h3 {
    padding: 5% 0 5% 0;
}

Could be shortened to:

body {
    font: 14px/20px "Helvetica Neue", Arial, sans-serif;
}

h3 {
    padding: 5% 0;
}

Overqualification

There's no need to write out every single ancestor in your selectors. Always choose the shortest possible selector that will match the desired element. The li element is guaranteed to be a child of the ul element according to the HTML specification (assuming your document is valid), making the ul unnecessary baggage.

nav ul li {

}

nav ul li a:hover {

}

.horizontalmenubar li ul li a:hover {

}

Can be simplified to:

nav li {

}

nav li a:hover {

}

.horizontalmenubar li li a:hover {

}

Clearfix

There's no reason to be using empty elements to clear floats. It is a very outdated practice that needs to go away. Modern clearfix techniques involve the use of overflow: hidden on a suitable ancestor element or the micro clearfix on the floated element:

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

Line-height

There's no good reason to specify line-height in px, or any other unit for that matter (see: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/). You're modifying the line-height 4 times because the font-size for those elements is different. Instead, just leave off the unit.

body {
    line-height: 20px;  
}

h1 {
    line-height: 120%;
}

h2 {
    line-height: 280%;
}

h3 {
    line-height: 120%;
}

Becomes

body {
    line-height: 1.4;
}

h1 {
    line-height: 1.2;
}

h2 {
    line-height: 2.8;
}

h3 {
    line-height: 1.2;
}

But you might decide that 1.4 is plenty good enough for both h1 and h3, so you can reduce further to just setting it on the body and h2 elements:

body {
    line-height: 1.4;
}

h2 {
    line-height: 2.8;
}

Take advantage of inheritance

footer {
    background-color: #808080;
    width: 100%;
    overflow: hidden;
}

footer p, footer h3 {
    color: #FFFFFF;
}

footer p a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: normal;
    font-size: 14px;
}

Can be simplified to this:

footer {
    background-color: #808080;
    overflow: hidden;
    color: #FFFFFF;
}

footer a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: normal;
    font-size: 14px;
}

Beware when using `display: inline`

It's rare that you'll want to set a block element to inline, most of the time you want to use inline-block. Using inline can cause unexpected behavior when used with certain other styles. It's not a problem in this case, but it is something to be aware of in the future.

ul.social li {
    display: inline;
}

Media queries are used, but the page is not responsive

When I see the use of media queries, I fully expect the page to be responsive. That is not the case here. For very narrow viewports (such as the output window for jsfiddle), the page is outright unusable. The menu cannot be accessed or viewed without scrolling horizontally. Part of it is caused by this style:

@media screen and (max-width : 768px) {
    body {
        position: absolute;
    }
}

The other part is caused by using the default styling for your table. Very wide tables must have their display properties adjusted in order for them to fit on a narrow viewport. The minimum amount of styling necessary to pull this off is the following:

/* add thead and tfoot if you're using them */
table, tbody, tr, th, td { display: block }

Here's a couple of fancy tables I've reformatted with CSS to be responsive: http://codepen.io/cimmanon/pen/ukBqo

Doing and undoing

You modify the font-size of links four times, why?

body {
    font-size: 14px;
}

a {
    font-size: 20px;    
}

#genericlinkdecoration {
    font-size: 14px;
}

footer p a {
    font-size: 14px;
}

Take advantage of inheritance and only modify the font-size for the uncommon case:

body {
    font-size: 14px;
}

.mySpecialLink {
    font-size: 20px;
}

Free yourself from px

There are very few instances where using px is the most appropriate unit of choice. Namely, when you want something to be exactly that many pixels wide (usually just images).

Using px for font-size and for specifying the width of any element intended for holding text is the worst offender. Just ask your granny if she can read text that's 14px without having to squint or lean forward.

Using ems, rems, or percentages are almost always the most appropriate choice when it comes to text. These units will respect the user's font-size preferences if they have one.

current community

your communities

more stack exchange communities

Consolidating my HTML, CSS and JS code in order to adhere to best practices

2 Answers 2

Learn to love Shorthand

Overqualification

Clearfix

Line-height

Take advantage of inheritance

Beware when using `display: inline`

Media queries are used, but the page is not responsive

Doing and undoing

Free yourself from px

Your Answer

Not the answer you're looking for? Browse other questions tagged html css or ask your own question.

Linked

Hot Network Questions

asked	5 months ago
viewed	97 times
active	25 days ago

current community

your communities

more stack exchange communities

Consolidating my HTML, CSS and JS code in order to adhere to best practices

2 Answers 2

Learn to love Shorthand

Overqualification

Clearfix

Line-height

Take advantage of inheritance

Beware when using display: inline

Media queries are used, but the page is not responsive

Doing and undoing

Free yourself from px

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged html css or ask your own question.

Linked

Related

Hot Network Questions

Beware when using `display: inline`