HTML5 и СSS3

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

#1 9 февраля 2016 в 18:52
Всем привет!

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

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

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

  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 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 были. Как на картинке…
#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;

Так как то:
  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.  
#10 9 февраля 2016 в 20:55

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

WowChih
А в итоге?
  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.  
#11 10 февраля 2016 в 00:36

Это так...) для привлечения внимания)

WowChih

Тогда циферки измените. К примеру, на 8 и 6. Внимания будет привлечено несоизмеримо больше laugh
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.