@Velidan

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

Хотел обернуть хедер и контент во враперы, а между ними поставить 80px блок на 100% ширины, (а потом контент с z-index, абсолютом надвинуть на него). Хороший ли вариант? или есть лучше? Буду очень благодарен за любую подсказку.

Миниатюры

 

0

@paskalnikita

сделать блок во всю длин,внутри него разместить еще три блока. центральному задать отступ снизу 10px, двум соседним - отступ сверху 10px.

0

@Velidan

Спасибо вам большое за ответ. Приблизительно это же и сделал. Потому что -топ с абсолютом совсем не радовал.

0

@paskalnikita

абсолютное позиционирование используют крайне редко, так как такой вариант с позиционированием не совсем хороший

0

@Velidan

Но, как мне дать понять, что боковые блоки должны быть на 100% но должны доходить только до центрального блока и все (т.е. левый и правый со своих сторон тянутся, а центральный блок неподвижный)

(но все равно используют, иначе, если бы был очень плохим такой вариант - его бы убрали из разметки вообще).

0

@paskalnikita

задате в процентах, левый-центральный-правый : 35% - 30% - 35% соответственно

0

@Velidan

Вариант очень даже хороший, но при уменьшении размера браузера получается, что они заползают друг на друга. Думал выставить центральному margin: 0 auto и ширину в 1000px , а остальные тянуть от него, но , походу, так нельзя сделать вообще.

0

@paskalnikita

раз налазят-задайте свойство float.

0

@Velidan

я неправильно выразился, они не то чтобы налезают, а выталкивают друг друга ниже и все (вместо флоата у них inline-block).
Было бы здорово если можно было задать центральный неподвижным, а боковые, чтобы от него плясали, но как это сделать ума не приложу.

0

@paskalnikita

то есть - центральный всегда неподвижен, а соседние перемещаются под него при изменение размеров окна?

0

@Velidan

Именно так. т.е. Когда браузер шире центрального блока в 1000 пикс (эту то блоки появляются и тянутся), ну и если меньше они скрываются.
Но проблема кроется еще вот в чем: я задал ширину 2 блокам (левому и правому) 12.6% (чтобы все впритык) но стоит чуть-чуть изменить размер монитора - все едет в разные стороны.

Не знаю что делать, честно говоря, наверное, придется до варианта с абсолютом вернуться.

Добавлено через 8 минут
Сделал таким образом. Создал блок на всю длину с высотой 100 и цветом фона, дальше создал на всю длину красный блок высотой 60 с абсолютом и расположением по низу. По центру дал блок с белым цветом и z-index 1.
Надеюсь кому-то поможет, потому что мы с paskalnikita (парились долговато) Ну а я сам еще до этого часа 4 потратил.

0