сделать границу перейти к верхней части страницы под другими элементами

Question

Так у меня есть навигация в верхней части моей страницы и сОн блок под ним ..

Что я хочу, чтобы иметь границу блока сНу идти вверх по навигационной панели ..

Вот фотография, чтобы продемонстрировать то, что я до сих пор:

borderthing http://puu.sh/4pkgO.png

Спасибо за помощь, если кто-нибудь знает, как!

Answer 1

Вот пример проверки концепции. Детали будут отличаться в зависимости от фактического дизайна.

Начнем со следующего HTML:

<div class="nav-wrap"> 
    <ul class="nav"> 
     <li>Home</li> 
     <li>About This</li> 
    </ul> 
</div> 

и использовать следующие правила CSS:

.nav { 
    text-align: center; 
    border: 1px dotted lightgray; /* for demo only */ 
} 
.nav li { 
    display: inline-block; 
    padding: 10px; 
    margin: 0 20px; 
    background-color: white; 
} 
.nav-wrap { 
    position: relative; 
    border-bottom: 1px solid blue; 
    height: 20px; 
} 

Идея заключается в том, чтобы добавить блок обертку вокруг навигации (.nav-wrap), а затем установите нижнюю граничит с ним. Затем вы можете поместить границу, отрегулировав высоту обертки.

Блок .nav фактически переполняется из оболочки, но в этом случае он обеспечивает полезный эффект.

См демо на jsFiddle

Design Примечание: Блок обертка не является строго необходимым, но очень часто, вам может понадобиться ul блок, чтобы установить общую высоту для панели навигации или какой-позиционированием для многоуровневое меню. Обертка дает вам больше возможностей дизайна.

Answer 2

Вы можете настроить навигацию на абсолютное позиционирование или использовать z-индекс.

Answer 3

Дайте отрицательное значение Дивой маржи - KK