HTML5 и СSS3

растягивание элементов сайта по ширине

#1 9 февраля 2016 в 18:52

Всем привет!

Делаю свой шаблон для двойки. Пробовал и платные и бесплатные, но в итоге остановился на том, что нужен свой.

Есть некий wrapper шириной 980px, который ограничивает header, hav и слайдер.
Задача игнорировать wrapper и растягивать по ширине header, hav и слайдер.
Сделал, но в итоге получается дублирование <div id="wrapper"> внутри каждого из контейнеров вида header, hav и слайдер.
Как сделать это красиво? Без дублирования… пробовал всё — не получается, мозг уже не варит)

Пока насилую стандартный дефолтный шаблон.
Конструкция такая

/* Wrapper ================================================================== */
 
#wrapper{
    width: 980px;
    margin: 0 auto;
}
 
/* Header =================================================================== */
 
header{
    margin:auto;
	height: 70px;
        line-height: 70px;
	padding: 0 14px;
        background: linear-gradient(to bottom, #5172bf, #4a67ae);
	width:100%;
	border-bottom: 1px solid #FFFFFF;
}
 
header #logo a{
    display: block;
    float: left;
    width: 178px;
    height: 50px;
    margin-top:10px;
    background: url("../images/logo.png") no-repeat left center;
}

Прикрепленный файл

20160209_1j3c3.png 1 Мб

гравислайдер

#2 9 февраля 2016 в 19:05

Есть некий wrapper шириной 980px, который ограничивает header, hav и слайдер.
Задача игнорировать wrapper и растягивать по ширине header, hav и слайдер.
WowChih

Вынести header, hav и слайдер за контейнер wrapper или создать другой контейнер (так же за пределами wrapper ) с похожими свойствами, но шириной 100% и поместить в него,

#3 9 февраля 2016 в 19:20

Есть некий wrapper шириной 980px, который ограничивает header, hav и слайдер.
Задача игнорировать wrapper и растягивать по ширине header, hav и слайдер.
WowChih

Вынести header, hav и слайдер за контейнер wrapper или создать другой контейнер (так же за пределами wrapper ) с похожими свойствами, но шириной 100% и поместить в него,

Rainbow

Это я уже делал...) Получается, что логотип и поиск разбегаются в разные стороны)
Менюшка тоже. А хотелось бы, чтобы они в пределах этих же 980px были. Как на картинке…

гравислайдер

Сегодня в 09:00

#4 9 февраля 2016 в 19:24

Вынести header, hav и слайдер за контейнер wrapper или создать другой контейнер (так же за пределами wrapper ) с похожими свойствами, но шириной 100% и поместить в него,
Rainbow

Правильно вам посоветовали.

Только дополнительно оберни header и nav в div
<div style="width:100%;">
<div style="width:980px; margin:0 auto;">
header
nav
slider
</div>
</div>

линейными стилями показал, чтоб нагляднее было. Далее классы присвоите

#5 9 февраля 2016 в 19:31

Только причем тут html5 и css3?

#6 9 февраля 2016 в 19:56

Только причем тут html5 и css3?

Azami

Это так...) для привлечения внимания)
Так все и сделано, но вопрос был собственно в игнорировании родительских 980px для растяжения бэкграунда и прочих свойств по ширине внутренних элементов...
Но, видимо без дополнительных оборачиваний так не получится…

гравислайдер

#7 9 февраля 2016 в 20:04

Но, было бы интересно сэкономить несколько строк кода...)

гравислайдер

#8 9 февраля 2016 в 20:12

Тогда через position:absolute; но дописать div все равно придется.
Как альтернатива js, но это уже аццкий костыль

#9 9 февраля 2016 в 20:40

Получается, что логотип и поиск разбегаются в разные стороны)
WowChih

Так их нужно тоже в контейнер внутри header, только уже со свойствами:
width: 980px;
margin: 0 auto;

Так как то:

 
<header class="header">  //  width: 100%;
 
    <div class="logo-search"> //  width: 980px;
 
	//  здесь логотип и поиск
 
            </div>
</header>			
 
<div id="wrapper">
// страница
</div>

#10 9 февраля 2016 в 20:55

Но, было бы интересно сэкономить несколько строк кода...)
WowChih

А в итоге?

 
<div class="auto-width">
	<header>
		<nav>
			<div class="980">
				<!-- menu -->
			</div>
		</nav>
		<div class="980">
			<div class="logo">
 
			</div>
			<div class="search">
 
			</div>
		</div>
	</header>
	<div class="980">
 
	</div>
</div>