How do I join my list and div using css?


Tags: html,css,html5,css3

Problem :

I need your help.

I am attempting to no avail, in trying to figure out as to how to make my li join neatly with my div. I have attached an example of the problem as well as the desired result. Maybe there are some CSS tricks to this, but I am no where near that skilled to figure this out on my own, only to see that it has been done on some websites.

Problem:
enter image description here

Desired result:
enter image description here

window.onload = function() {
  $("#list li").click(function(){
    var $li = $(this);
    var selector = $li.data("show");   // => "#item1"
    $('.item').addClass('hidden');
    $('ul').children().removeClass('selected');
    $(selector).removeClass("hidden"); //but show matching item
    $(this).addClass("selected"); //but show matching item
    alert($(this).attr("class").split(' '))
  });
  $("#list li").eq(0).click();
}
* {
  font-family: Segoe UI;
  font-size: 9pt;
}
#container {
  bottom: 0; left: 0; top: 0; right: 0;
  margin: auto;
  position: absolute;
  width: 900px;
  height: 600px;
}
#list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#list li {
  margin:0 0 10px 0;
  background: #FFF;
  padding: 10px;
  cursor: pointer;
  color: rgb(149,149,149);
  font-size: 11pt;
}
.item {
  width: 100%;
  height: 100%;
  border: 1px solid red;
}
#menu {
  float: left;
  width: 25%;
  height: 100%;
}
#content {
  float: left;
  width: 75%;
  background-color: rgb(238,238,238);
  height: 100%;
}
.hidden{ display:none; }
#list li.selected {
  color: rgb(149,149,149);
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  border-left: 1px solid red;
}
.selected {
  background: rgb(238,238,238) !important;
  color: rgb(51,51,51) !important;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div id="menu">
    <ul id="list">
      <li data-show="#item1">File Information</li>
      <li data-show="#item2">My Summary</li>
      <li data-show="#item3">Comments</li>
    </ul>
  </div>
  <div id="content">
    <div id="item1" class="hidden item">FILE INFORMATION</div>
    <div id="item2" class="hidden item">MY SUMMARY</div>
    <div id="item3" class="hidden item">COMMENTS</div>
  </div>
</div>



Solution :

   #list li.selected {
      color: rgb(149,149,149);
      border-top: 1px solid red;
      border-bottom: 1px solid red;
      border-left: 1px solid red;
      width: 205px;
      z-index: 40;
      position: absolute;
   }

Please try this

Hope this help you.


    CSS Howto..

    How to navigate from one field to another field using Enter Key function in MVC5

    How apply CSS to browse button

    How to link a main.css to all Django templates? [closed]

    how to properly override CSS in external file

    How to style sets of labels and fields in a form with pure CSS and get proper alignment?

    PHP - How to change the class of a link

    Logo not showing on top of header img

    How can apply multiple background color to one div

    How to select only top-level li in recursive menu?

    How to horizontally center a header that is position:absolute

    How to position hidden speech bubbles

    How to add CSS Hack specifically for IE10?

    How to set specific css value for javaFX ProgressBar during Runtime?

    How do I make this responsive layout with CSS?

    How do I avoid a fullscreen background image to scale with appearing scroll bars?

    How to animate through stacked images Javascript

    How to center a child div with a smaller parent div

    How to give a css code for combined classes in HTML [duplicate]

    HTML CSS: How to align grid to content area?

    How to fit a dynamic PHP form in a div (to be able to fit fullpage.js)?

    How set font-size in TinyMce

    How to get same cursor(hand) on links in all browser?

    In HTML, how can I wrap a word at . (dot), just like it wraps at - (dash)?

    How do you make an image or button glow when you mouse over using javascript or jquery?

    How to add CSS to ASP.NET site with WebOptimization and Bundling

    How to use CSS attribute selector for an SVG element with namespaced attribute href?

    How to stretch individual background images in CSS

    How do I put these on the same line?

    CSS how to style a parent item when a textarea is in focus?

    CSS - How to make IE7 respect min-width