Цвет фона/ширина пробега до 100% на элементе css

Я пытаюсь получить белый фон за заголовком, чтобы оставаться на ширине текста, а не пробежать всю дорогу справа от экрана, так как он делает Сейчас:Цвет фона/ширина пробега до 100% на элементе css

http://www.jmakhotels.com/post-ranch-inn-california-big-sur-new/

он должен выглядеть следующим образом: http://www.jmakhotels.com/images/title-tag.jpg ... но я не могу понять, как установить ширину так, чтобы она динамична для различных длин заголовка. Это должно быть просто, но это сводит меня с ума! Этот элемент заголовка .header должен просто быть шириной текста + 10x отступом слева и справа.

Вот CSS для синего DIV (который будет изображение БГД), и элемент заголовка:

.main-header { 
background-color: #009cff; 
width: 100%; 
height: 300px; 

} 

.header-title { 
    margin: -58px 0 0 18px; 
    padding:10px; 
    background-color: rgba(255,255,255,.8); 
    width:auto; 

}

Большое спасибо всем, кто может помочь мне понять это.

источник

2014-12-29 hudsonian

Можете ли вы переместить h2 в div '# content'? –

Правило display:table в правиле .header-title исправит проблему (, не испортив поля).

источник

2014-12-29 18:07:37

Это сработало - просто любопытно, почему? Спасибо вам в любом случае! – hudsonian

@hudsonian Он заставляет элемент действовать как элемент '

', который обтекает содержимое. –

Полезно знать - спасибо! – hudsonian

Изменение .header-title к display:inline-block затем добавить margin-bottom: -36px; к .main-header

Итак:

.main-header { 
    background-color: #009cff; 
    height: 300px; 
    margin-bottom: -36px; 
    width: 100%; 
} 

.header-title { 
    background-color: rgba(255, 255, 255, 0.8); 
    display: inline-block; 
    margin: -58px 0 0 18px; 
    padding: 10px; 
}

Также не нужно width:auto

источник

2014-12-29 18:05:34

Это сработало, спасибо! – hudsonian

@hudsonian Добро пожаловать. Рад, что у тебя есть ответ! –

Попробуйте добавить стиль отображения: встроенный блок;

Я предполагаю, что заголовок заголовок используется в div, который окружает заголовок. Вам также не нужна ширина: auto;

источник

2014-12-29 18:06:15

Спасибо, я ценю! – hudsonian

Ваш заголовок-заголовок (h2) является блочным элементом, он должен быть элементом встроенного блока для захвата ширины самого элемента.

Однако заголовок заголовка может быть помещен внутри основного заголовка вместо элемента ниже. Быстрое исправление было бы переместить .header-элемент заголовка снизу DIV .main-заголовка внутрь:

<div class="main-header"> 
    <h2 class="header-title">This will be the title</div> 
</div>

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

.main-header { 
    position: relative; 
}

Теперь мы можем позиционировать заголовок-название в нижней части элемента основного заголовка:

h2.header-title { 
    position: absolute; 
    bottom: 0; <- stick to the bottom of main-header 
    left: 1em; 
}

Вы можете удалить запас из заголовок-заголовок класса в вашем CSS, потому что вы уже указываете заголовок заголовок в нижней части основного заголовка.

источник

2014-12-29 18:14:43 Grily

Большое спасибо за этот очень тщательный ответ - абсолютно полезно. Я ценю это! – hudsonian

Смежные вопросы