Как создать границу, на которой будет отображаться div, минус поля

Question

Хорошо, у меня проблема. Я использую 960 gs, и, как вы можете видеть из кода, для меня это сложный макет. Часть моей проблемы заключалась в том, что все должно было иметь 10px желоба. Но некоторые дивизии этого не сделали. Поэтому, чтобы достичь макета, я хотел, чтобы мне пришлось добавить верхний край 10px в некоторые из div. Ну, тогда мне нужно было добавить эффект изменения цвета наложения на divs. Ну, как вы можете видеть на divs, где я добавил 10px, граница тоже идет по краю. Не добиваться того, чего я хочу. Я создал класс и некоторый jquery, где он удалял маржу, но затем, когда вы наводите курсор на те divs, они перемещаются/сдвигаются. Опять же, не добиваясь того эффекта, который я хочу. Пожалуйста, помогите - как я могу исправить мою сетку, поэтому мне не нужно добавлять верхний край или как добавить добавку, которая не включает мои поля. Мой HTML ниже, но я положил все мои кода, JS и CSS на jsfiddle смотрите: http://jsfiddle.net/penrysh/mr99962t/

<div class="page"> 
<div class="container_14"> 
<div class="grid_6 alpha omega"> 
<div class="grid_6 alpha"> 
<article class="grid_4 alpha results"> 
<div id="bulletin" class="tooltip" title="Tip1"> 
<h2>Bulletin Board</h2> 
<p></p> 
</div> 
</article> <!-- end Bulletin Board --> 
<article class="grid_2 omega results"> 
<div id="take5" class="tooltip" title="Tip2"> 
<ul> 
<li><h3>Take 5</h3></li> 
<li><img src="http://placehold.it/75x75" alt="Learning Break icon" /></li> 
<li><a href="#take5Box" title="Take 5 Learning Break" class="lightbox">Learning Break</a></li> 
<div id="take5Box"> 
<h3>Take 5</h3> 
<p>More content...</p> 
<a href="#">Take 5</a> 
</div> 
</ul> 
</div> 
</article> <!-- end Take 5 --> 
<article class="grid_2 omega results1"> 
<div id="longTerm" class="tooltip" title="Tip3"> 
<ul> 
<li><h3>Long Term</h3></li> 
<li><img src="http://placehold.it/75x75" alt="Long Term Learning icon" /></li> 
<li><a href="#longTermBox" title="Long Term Learning" class="lightbox">Learning</a></li> 
<div id="longTermBox"> 
<h3>Long Term Learning</h3> 
<p>More content...</p> 
<a href="#">Long Term Learning</a> 
</div> 
</ul> 
</div> 
</article> <!-- end Long Term --> 
<div class="clear"></div> 
<article class="grid_6 alpha omega results1"> 
<div id="career" class="tooltip" title="Tip4"> 
<h2>Career Insight: Highlight your work!</h2> 
<p>Create a Sharepoint blog where you can link to, upload, and discuss your work. It all becomes part of your professional portfolio.</p> 
</div> 
</article> <!-- end Career Insight --> 
</div> 
</div> 

<div class="grid_8 omega"> 
<div class="grid_8 omega"> 
<article class="grid_8 alpha omega results"> 
<div id="whatIs" class="tooltip" title="Tip5"> 
<h2>What is the Learning and Development Network?</h2> 
</div> 
</article> <!-- end What is --> 
<div class="clear"></div> 
<article class="grid_6 alpha results1"> 
<div id="featured" class="tooltip" title="Tip6"> 
<h2>Featured Courses</h2> 
<table> 
<tbody> 
<tr> 
<td><img src="http://placehold.it/75x75" alt="Health Care 101" /></td> 
<td><a href="#"></a></td> 
</tr> 
<tr> 
<td><img src="http://placehold.it/75x75" alt="Our Values" /></td> 
<td><a href="#">Our Values</a></td> 
</tr> 
</tbody> 
</table> 
</div> 
</article> <!-- end Featured courses --> 

<article class="grid_2 omega results1"> 
<div id="kl" class="tooltip" title="Tip7"> 
<ul> 
<li><img src="http://placehold.it/75x75" alt="" /></a></li> 
<li><a href="#klBox" title="" class="lightbox"></a></li> 
<div id="klBox"> 
<h3></h3> 
<p>More content...</p> 
<a href="#"></a> 
</div> 
</ul> 
</div> 
</article> <!-- end KL --> 
<article class="grid_2 omega results1"> 
<div id="myLearning" class="tooltip" title="Tip8"> 
<ul> 
<li><img src="http://placehold.it/75x75" alt="" /></li> 
<li><a href="#myLearningBox" title="M" class="lightbox">My Learning</a></li> 
<div id="myLearningBox"> 
<h3></h3> 
<p>More content...</p> 
<a href="#"></a> 
</div> 
</ul> 
</div> 
</article> <!-- end --> 
</div> 
</div> 
<div class="clear"></div> 
</div> <!-- end Container --> 
</div> <!-- end Page --> 

Answer 1

Пожалуйста, обратите внимание на эту jsFiddle, я считаю, что это то, что вам нужно. Я сделал то, что я установил margin-top из 10px для каждого элемента с классом results1 и удалил все предыдущие margin-top10px, которые вы установили для разных элементов. Поскольку вы устанавливаете границу для класса results1_hover, к ней необходимо применить и margin-top, а не его дочерний контейнер.