Reputation: 5260

HTML sidebar is cover by the content

My sidebar is covered by the main tabbed menu. I have put it in the jsfiddel.

It works with firefox but not chrome. It didn't work in jsfiddle either. Any idea?

Here is the HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Nav</title>
    <link href="nav.css" rel="stylesheet"/>
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<!--            -->
<body ng-app="App" >
  <nav>
    <ul> <span>My App</span>
        <li class="sub">
            <a href="#">Version</a>
            <ul>
                <li class="sub">
                    <a href="#">V2</a>
                    <ul ng-controller="V2Ctrl">
                        <li ng-repeat = "v2 in V2s"><a href="#">{{v2}}</li>
                    </ul>
                </li>
                <li class="sub">
                    <a href="#">V3</a>
                    <ul ng-controller="V3Ctrl">
                        <li ng-repeat = "v3 in V3s"><a href="#">{{v3}}</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
  </nav>
      <aside class="side" align="left">
         <table onclick="reply_click(event)" ng-app="App" ng-controller="TableCtrl" >
               <tr ng-repeat = "table in tables">
                 <td><button id = "{{table}}" width = "70">{{table}}</button></td>
               </tr>
         </table>
      </aside>
  <article class="tabs">


      <section id="erd">
        <h2><a href="#erd">ERD</a></h2>
        <p>This content appears on tab ERD.</p>
      </section>

      <section id="col">
        <h2><a href="#col">Columns</a></h2>
        <p>This content appears on tab Columns.</p>
      </section>

      <section id="home">
        <h2><a href="#home">Home</a></h2>
        <p>This content appears on tab Home. lfkdgl;k  lkfd;lkg ';lkfg ;lkg 'df;lk ;lk ';lk ';fdlkg ';fdlkg';dflk;ldfkg';lkdlfkdfkglkdf lkjhlsdjhfljdfhlkjdh jh jhkjdhfkjsdhf skjdhf lk h dsfjlkjsdlkfj;dslkfj  dskfj;kj sdfkj fkdj;lfkjsd;lkfj   sdkfj ;slkj sdfj;lskjf   skdj flksjdf ; sdfkj ;sdlkfj dskfj sdkjfhueuu suehu heu he u heu heh ueh ufhu fhe uueh ush uhsudh ue huhuhufheuheu u heiu h euh eh ue </p>
      </section>

  </article>


  <footer align="bottom">
    <span>"Copyright&copy; 2016 </span></span>
  </footer>

  <script>
    var app = angular.module('App', []);
    app.controller('TableCtrl', function($scope) {
        $scope.tables = ['category','supplier','customer','dept','empl','orders'];
    });
    app.controller('V2Ctrl', function($scope) {
        $scope.V2s = ['2.10','2.11','2.12','2.13','2.14','2.15','2.16','2.17','2.18','2.19','2.20','2.21','2.22','2.23','2.24','2.25','2.26','2.27','2.28'];
    });  
    app.controller('V3Ctrl', function($scope) {
        $scope.V3s = ['  ','   SP1','   SP2','   SP3','   SP4','   SP5','   SP6','   SP7','   SP8','   SP9','   SP10'];
    });  
  </script>

</body>
</html>

and the CSS

#logo{
    position: absolute;
    right:10px;
    bottom: 10px;
}
body{
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
}
nav {
    background-color: #333;
    border: 1px solid #333;
    color: #fff;
    display: block;
    margin: 0;
    padding: 0;
    z-index: 9999;
}
nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 9999;
    text-align: center;
}
na ul span {
    width: 300px
    margin-top: 250%;;
}
nav ul li {
    margin: 0;
    display: inline-block;
    list-style-type: none;
    transition: all 0.2s;
}

nav > ul > li > a {
    color: #aaa;
    display: block;
    line-height: 1em;
    /*padding: 0.5em 2em;*/
    padding: 0.2em 3em;
    text-decoration: none;

}

nav li > ul{
    display : none;
    margin-top:1px;
    background-color: #bbb;

}

nav li > ul li{
    display: block;
}

nav  li > ul li a {
    color: #111;
    display: block;
    line-height: 1em;
    padding: 0.2em 2em;
    text-decoration: none;
}

nav li:hover {
    background-color: #666;
}
nav li:hover > ul{
    position:absolute;
    display : block;
}
nav li > ul > li ul  {
    display: none;
    background-color: #888;
}
nav li > ul > li:hover > ul  {
    position:absolute;
    display : block;
    margin-left:100%;
    margin-top:-3em;
}

nav ul > li.sub{
    background: url(ic_keyboard_arrow_down_white_18dp.png) right center no-repeat;
    z-index: 5; 
    overflow: visible;
}

nav ul > li.sub li.sub{
    background: url(ic_keyboard_arrow_right_white_18dp.png) right center no-repeat;
    z-index: 5; 
    overflow: visible;
}

/*****************************************************************************/
aside {
    display: block;
    position: absolute;
  width: 80px;
  height: 550px;
  padding-right: 0;
  margin: 0;
  align: left;
  overflow: auto;
  background-color: lightblue
}
/*
article.side aside
{
    width: 90px;
    height: 500px;
    margin: 2em auto;
    background-color: red;
  z-index:100;
}*/
article {
/*  position: relative; */
}

article.tabs
{
    position: relative;
    display: block;
    width: 1100px;
    height: 500px;
    margin: 2em auto; 
        background-color: green;

}
article.tabs section
{
    position: absolute;
    display: block;
    left: 0;
    width: 1100px;
    height: 500px;
    padding: 10px 20px;
    background-color: #ddd;
    border-radius: 5px;
    box-shadow: 0 3px 3px rgba(0,0,0,0.1);
    z-index: 0;
}
article.tabs section:first-child
{
    z-index: 1;
}
article.tabs section h2
{
    position: absolute;
    font-size: 1em;
    font-weight: normal;
    width: 120px;
    height: 1.5em;
    top: -1.5em;
    left: 10px;
    padding: 0;
    margin: 0;
    color: #999;
    background-color: #ddd;
    border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2
{
    left: 132px;
}
/*
article.tabs section:nth-child(3) h2
{
    left: 254px;
}*/

article.tabs section h2 a
{
    display: block;
    width: 100%;
    line-height: 1.5em;
    text-align: center;
    text-decoration: none;
    color: inherit;
    outline: 0 none;
}
article.tabs section:target,
article.tabs section:target h2
{
    color: #333;
    background-color: #fff;
    z-index: 2;
}
article.tabs section,
article.tabs section h2
{
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
footer 
{
    color: #999;
  text-align:center
  background-color: #333;
  width: 100%;
  bottom: 0;
  position: fixed;
}

Upvotes: 0

Answers (3)

Graham

Reputation: 1960

You have a left sidebar with a width of 80px. So for the content to not cover is to push it 80 px to the right.

Do you know what padding and margin does?

You have a (in this case) an article with class tabs. - Margin is the space around the article. - You can use padding to give space from the side of the article to the inner elements.

Right now you have margin: 2em auto if you specify margin with two values the first value one is for the left and right sides and the second value for the top and bottom sides. Since you probaly only want margin on the left you can change it to two different values:

margin-left: 80px; or margin: 0px 0px 0px 80px This second way of describing margin is a way to set all the margins in one line margin: top right bottom left;

Hopes this explains your problem properly.

Upvotes: 1

Argiris A

Reputation: 156

article.tabs{margin-left:80px;
}

Upvotes: 1

silviagreen

Reputation: 1729

Adding margin-left: 82px solves the issue.

article.tabs {
  position: relative;
  display: block;
  width: 1100px;
  height: 500px;
  margin: 2em auto;
  background-color: green;
  margin-left: 82px;
}

Upvotes: 1

HTML sidebar is cover by the content

Answers (3)

Related Questions