Хорошо, у меня есть проблема. Я использую 960 gs, и, как вы можете видеть из кода, по крайней мере для меня это сложная компоновка. Часть моей проблемы заключалась в том, что все должно было иметь отступ 10px. Но некоторые div этого не сделали. Поэтому, чтобы добиться желаемого макета, мне пришлось добавить верхнее поле в 10 пикселей к некоторым элементам div. Ну, тогда мне нужно было добавить изменение цвета заполнения эффекта наведения в div. Ну, как вы можете видеть на элементах div, где я добавил 10 пикселей, граница также проходит по краю. Не достигнув желаемого. Я настроил класс и некоторый jquery, где он удалит поля, но затем, когда вы наводите курсор на эти div, они перемещаются/смещаются. Опять не добился того эффекта, которого хочу. Пожалуйста, помогите - либо как я могу исправить свою систему сетки, чтобы мне не нужно было добавлять верхнее поле, либо как я могу добавить отступ, который не включает мои поля. Мой 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 -->
