2016-01-07 5 views
0

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

В основном то, что я пытаюсь сделать, по существу, делает эту границу серой, где находится серый ящик, и синий для остальной части. Я пробовал искать его, но изо всех сил пытался найти что-то, что точно описывает то, что им нужно.

Серая область шириной 200px и начинается примерно с 26px в левой части страницы.

Может ли кто-нибудь помочь вообще? Заранее спасибо

Border Image

код заголовка здесь - серая коробка является частью логотипа.

<div class="fusion-header" style="height: 91px; overflow: visible;"> 
     <div class="fusion-row"> 

    <div class="fusion-logo" data-margin-top="5px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px"> 
+1

Мы не могу помочь вам без кода – CoderPi

+2

Я вообще не прошу кода, но на этот вопрос было бы лучше, если бы вы показать нам, как создаются серые коробки. Ответы могут сильно различаться в зависимости от того, являются ли они разными элементами или частью одного и того же элемента и т. Д. – Harry

+0

Не уверен, что ive добавил нужный фрагмент кода, который вам нужен, но это было также в css, который ссылается на него - .fusion-header -v2 .fusion-header { border-bottom-width: 4px; !важный; } –

ответ

0

Вы можете переопределить родительскую границу в элементе логотипа, используя отрицательное нижнее поле с размером границы.

.header { 
 
    background: #515151; 
 
    border: 5px solid #5EDBE7; 
 
} 
 

 
.logo { 
 
    width: 200px; 
 
    height: 50px; 
 
    margin: 50px auto; 
 
    background: #5D5D5D; 
 
    
 
    /* Override the container vorder */ 
 
    border-bottom: 5px solid #999; 
 
    margin-bottom: -5px; 
 
}
<div class="header"> 
 
    <div class="logo"></div> 
 
</div>

+0

Спасибо tzi :) –