PDA

View Full Version : Border problem



Allweb247
Mar 30th, 2015, 11:47 AM
University of Toronto | Awesome Screenshot (http://awesomescreenshot.com/0e14r5qq2f)

I have a problem... I don't know how to insert a border in this case... as you can see I have one active <li> item and that item needs to be without border-bottom. I've done that, but now I don't have border on the top in the left side of main content. How can I do this? It's any chance I can do this without Javascript or do I need a script which calculates the width of those test items and then add a new li in front of them and make it the widht of main content minus those 4 <li> items and add border-bottom on it?

Thank You

Allweb247
Apr 7th, 2015, 10:48 AM
Edit fiddle - JSFiddle (http://jsfiddle.net/ky1Lwo3c/)

I reproduced the problem in a fiddle, now you can understand it better.

sunfighter
Apr 7th, 2015, 07:12 PM
If you change the margin to this:


ul {
margin-bottom: 10px;
}
So you can see what is happening you will see your code does work.

Here is a little easier code:


<head>
<meta charset="utf-8">
<title>Upcomming nova</title>
<style>
ul li {
display: inline-block;
border: 1px solid #000;
margin-right:-5px;
padding: 5px;
}
ul {
margin-bottom: 10px;
}
.active {
border-bottom: 0;
}
#box {
display:block;
width: 400px;
height: 500px;
border: 1px solid #000;
padding: 20px;
}
</style>
</head>
<body>

<ul id="list">
<li>Example1</li>
<li>Example2</li>
<li>Example3</li>
</ul>
<span id="box">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#list li").bind("click", function() {
$("#list li").each(function(){$("li").css("border-bottom", "1px solid black")});
$(this).css("border-bottom", "none" );
});
});
</script>
</body>
</html>

ramarjun
Apr 9th, 2015, 03:25 PM
css property have box layout module must understand and use that...its very simple to make show your coding