HTML5 и СSS3

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

 
Посетитель
small user social cms
Сообщений: 67
Всем привет!

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

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

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

Код PHP:
  1. /* Wrapper ================================================================== */
  2.  
  3. #wrapper{
  4. width: 980px;
  5. margin: 0 auto;
  6. }
  7.  
  8. /* Header =================================================================== */
  9.  
  10. margin:auto;
  11. height: 70px;
  12. line-height: 70px;
  13. padding: 0 14px;
  14. background: linear-gradient(to bottom, #5172bf, #4a67ae);
  15. width:100%;
  16. border-bottom: 1px solid #FFFFFF;
  17. }
  18.  
  19. header #logo a{
  20. display: block;
  21. float: left;
  22. width: 178px;
  23. height: 50px;
  24. margin-top:10px;
  25. background: url("../images/logo.png") no-repeat left center;
  26. }
  27.  
Прикрепленные файлы:
20160209_1j3c3.png | 519.82 Кб | Скачали: 235
Делаю blogonarium.ru
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 1724
WowChih:
Есть некий wrapper шириной 980px, который ограничивает header, hav и слайдер.
Задача игнорировать wrapper и растягивать по ширине header, hav и слайдер.

Вынести header, hav и слайдер за контейнер wrapper или создать другой контейнер (так же за пределами wrapper ) с похожими свойствами, но шириной 100% и поместить в него,
Реклама
cms
Посетитель
small user social cms
Сообщений: 67
Rainbow:

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

Вынести header, hav и слайдер за контейнер wrapper или создать другой контейнер (так же за пределами wrapper ) с похожими свойствами, но шириной 100% и поместить в него,
Это я уже делал...) Получается, что логотип и поиск разбегаются в разные стороны)
Менюшка тоже. А хотелось бы, чтобы они в пределах этих же 980px были. Как на картинке..
Делаю blogonarium.ru
Посетитель
small user social cms
Медаль
Сообщений: 272
Rainbow:
Вынести header, hav и слайдер за контейнер wrapper или создать другой контейнер (так же за пределами wrapper ) с похожими свойствами, но шириной 100% и поместить в него,
Правильно вам посоветовали.

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

линейными стилями показал, чтоб нагляднее было. Далее классы присвоите
Редактировалось: 2 раз (Последний: 9 февраля 2016 в 19:28)
Посетитель
small user social cms
Медаль
Сообщений: 272
Только причем тут html5 и css3?
Посетитель
small user social cms
Сообщений: 67
Azami:

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

Это так...) для привлечения внимания)
Так все и сделано, но вопрос был собственно в игнорировании родительских 980px для растяжения бэкграунда и прочих свойств по ширине внутренних элементов...
Но, видимо без дополнительных оборачиваний так не получится...
Делаю blogonarium.ru
Посетитель
small user social cms
Сообщений: 67
Но, было бы интересно сэкономить несколько строк кода...)
Делаю blogonarium.ru
Посетитель
small user social cms
Медаль
Сообщений: 272
Тогда через position:absolute; но дописать div все равно придется.
Как альтернатива js, но это уже аццкий костыль
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 1724
WowChih:
Получается, что логотип и поиск разбегаются в разные стороны)

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

Так как то:
Код PHP:
  1.  
  2. <header class="header"> // width: 100%;
  3.  
  4. <div class="logo-search"> // width: 980px;
  5.  
  6. // здесь логотип и поиск
  7.  
  8. </div>
  9. </header>
  10.  
  11. <div id="wrapper">
  12. // страница
  13. </div>
  14.  
Редактировалось: 1 раз (Последний: 9 февраля 2016 в 20:41)
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1842
WowChih:
Но, было бы интересно сэкономить несколько строк кода...)
А в итоге?
Код PHP:
  1.  
  2. <div class="auto-width">
  3. <header>
  4. <nav>
  5. <div class="980">
  6. <!-- menu -->
  7. </div>
  8. </nav>
  9. <div class="980">
  10. <div class="logo">
  11.  
  12. </div>
  13. <div class="search">
  14.  
  15. </div>
  16. </div>
  17. </header>
  18. <div class="980">
  19.  
  20. </div>
  21. </div>
  22.  
Редактировалось: 1 раз (Последний: 9 февраля 2016 в 20:55)
Чем меньше знаешь - тем Больше тупой.
OneMinima шаблон ICMS2
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 2782
WowChih:
Это так...) для привлечения внимания)
Спойлер
Украинский для инстант
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.