How do I join my list and div using css? - html

Question

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:
Desired result:
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>

Answer 1

I will give you the conceptual solution that can easily be achieved with pure CSS.
1) Set the list item to have borders at top, bottom, and left.
2) Then bring the list item above the larger box with z-index.
3) Finally, you will need to either shift the list to the right or the box to the left by the amount of your border width, so that they overlap to cover the small part of the border that is supposed to stay hidden under the list item.

Answer 2

#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.

Answer 3

You are seeing the border of the file information. There are two possible solutions:
1 - don't put a left border on the .item class. (But this will still not look right)
2 - Make the li overlap the content area slightly. You'll need to raise the z-index of the content and use a negative margin to bring them together.

Answer 4

Not the prettiest solution, but if you are okay with removing the white background of the "inactive" tabs, you can do some overlapping:
Demo
Your #list and #list li will need to be changed like this:
#list {
list-style-type: none;
padding: 0;
margin: 0;
position: relative; /*added*/
left: 1px; /*added*/
}
#list li {
margin:0 0 10px 0;
/*removed background*/
padding: 10px;
cursor: pointer;
color: rgb(149,149,149);
font-size: 11pt;
}