Интересная задачка.

tamirov · March 25, 2013

Изложу в теории без конкретного примера.

Суть:

Есть блок контента с фиксированной шириной, выровненный по центру при помощи "margin: 0 auto".

Требуется реализовать только несложными средствами CSS (без скриптов) по бокам окна браузера полосы фиксированной ширины (например 50px каждая), естественно, они должны быть "прилеплены" к бокам окна браузера. Но при минимальных размерах окна они не должны наезжать на/за тело контента, а просто должны скрываться за окном браузера, не приводя к появлению нижнего скролла.

Вот так!

Сам занимаюсь версткой лет 6, то ли я устал и туплю, но за день ничего путного в голову не пришло.

Вот для примера даю пару набросков.

Т.е. не должно быть нижней полосы прокрутки.

Edited March 28, 2013 by tamirov

web-monster · March 25, 2013

CSS Media Queries не поможет? Например при достижении определенной ширины присваивать display: none этим полоскам или что-то в этом роде

tamirov · March 25, 2013

CSS Media Queries не поможет? Например при достижении определенной ширины присваивать display: none этим полоскам или что-то в этом роде

Да, но это все сложно достаточно + Javascript для ie, я так понимаю..

Никак не могу смириться что не вижу относительно простого кроссбраузерного решения на чистом CSS, может оно есть? Собственно, из-за этого пост и создал!

Edited March 25, 2013 by tamirov

Switch74 · March 25, 2013

выравнивание фона подобной схемой:


left:50%;
Margin-left:-половина ширины страницы в px;

tamirov · March 25, 2013

выравнивание фона подобной схемой:
left:50%;
Margin-left:-половина ширины страницы в px;

Давайте без флуда, ну при чем здесь кусок этого!

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

CoDy · March 25, 2013

Создать блок-обвертку, для своего контейнера, растянуть его по всей ширине. в качестве фона для блока-обвертки указать нужное симметричное изображение и спозиционировать данный фон по центру.

tamirov · March 25, 2013

Создать блок-обвертку, для своего контейнера, растянуть его по всей ширине. в качестве фона для блока-обвертки указать нужное симметричное изображение и спозиционировать данный фон по центру.

И как полосы будут прижаты к краям при изменении размеров окна браузера?

Господа, ведь html-код простой совсем получится, ну попробуйте, прежде чем писать.

Sensei · March 25, 2013

http://jsfiddle.net/sensei/QrDLc/

CoDy · March 25, 2013

И как полосы будут прижаты к краям при изменении размеров окна браузера? Господа, ведь html-код простой совсем получится, ну попробуйте, прежде чем писать.

Просил идею... Тебе их накидали. Верстальщик с 6-ти летним опытом работы такие вопросы задавать не будет. Хочешь готовое решение, так и скажи.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
  <meta name="generator" content="PSPad editor, www.pspad.com" />
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  <title>Untitled</title>
<style type="text/css">
* {
    border: 0;
    margin: 0;
    padding: 0;
}
.qwer {
	  width:100%;
	  background: url(Untitled-1.png) repeat-y center;
}
.fdsfsd {
	  width:80%;
	  margin:0 auto;
	  border: solid #000 1px;
}

</style>
</head>
<body>
	  <div class="qwer" >
		    <div class="fdsfsd" >
<br />			
<br /><br /><br /><br /><br />
		    </div>

	  </div>
</body>
</html>

Надеюсь, имея 6-ти летний опыт верстки разберешься.

tamirov · March 25, 2013

http://jsfiddle.net/sensei/QrDLc/

Я сейчас c Ubuntu в Firefox смотрю, не знаю как с кроссбраузерностью, но и так уже видно, что это не то: полосы не уходят за края окна браузера при достижении заданной минимальной ширины, а заезжают за тело контента, а фона-то у него нет! Я специально сформулировал в посте подробно суть вопроса.

P.S. Мне это интересно стало уже в плане теории, а не приспичило заказчику.

"CoDy" - без комментариев.

Edited March 25, 2013 by tamirov

Viper · March 25, 2013

http://jsfiddle.net/sensei/QrDLc/

Не все так просто) Если даже и будет известна высота блоков, то остается еще такой нюанс как прозрачность фона)

Great Rash · March 25, 2013

Без скриптов реализовать это не получится, по крайней мере кроссбраузерно. Можно боковушки сделать при помощи position: fixed; с процентной шириной, но сделать так чтоб они ни при каких условиях не заезжали за контейнер нереально.

tamirov · March 25, 2013

Без скриптов реализовать это не получится, по крайней мере кроссбраузерно. Можно боковушки сделать при помощи position: fixed; с процентной шириной, но сделать так чтоб они ни при каких условиях не заезжали за контейнер нереально.

Не верю, наверное, мне просто нужен отдых и простое решение окажется очевидным.

Edited March 25, 2013 by tamirov

Switch74 · March 25, 2013

http://jsfiddle.net/PUSgC/

на одном CSS и без таблиц можно реализовать через @media

Edited March 25, 2013 by Switch74

tamirov · March 25, 2013

http://jsfiddle.net/PUSgC/
на одном CSS и без таблиц можно реализовать через @media

Да, нет, это все мудреж.

Все должно быть проще и кажется у меня получилось, по крайней мере на простой тестовой верстке в Firefox.

Сегодня-завтра потестю в других браузерах, если все получится, выложу решение.

tamirov · March 26, 2013

Ну, что ж. Выкладываю решение.

Хотелось бы услышать критику, но только обоснованную, сразу скажу что для ie6 и ниже в принципе вопрос не стоит.

sigma77 · March 26, 2013

http://joxi.ru/_r1RUdg5CbDVKP_KThM

Решение не универсально. Нельзя определить минимальную ширину экрана при которой полосы были бы видны целиком.

Полосы я бы сделала псевдоэлементами. Зачем засорять разметку блоками несущими только декоративную функцию.

Great Rash · March 26, 2013

Критикую:

tamirov · March 26, 2013

Критикую:

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

UPD: Что и сделал.

Edited March 26, 2013 by tamirov

tamirov · March 26, 2013

http://joxi.ru/_r1RUdg5CbDVKP_KThM
Решение не универсально. Нельзя определить минимальную ширину экрана при которой полосы были бы видны целиком.
Полосы я бы сделала псевдоэлементами. Зачем засорять разметку блоками несущими только декоративную функцию.

Люди, я понимаю вы бы говорили что плохо что полосы тянутся неограниченно, хорошо бы их разрастание ограничить для очень больших экранов.

А то что вы указываете - это просто лечится коррекцией цифр в css, что я и сделал сейчас чтобы это не отвлекало.

Насчет псевдоэлементов - это не интересно т.к. требует фильтры для ie т.е. Javascript. Да и все-равно, наверняка, с псевдоэлементами будут обнаруживаться ещё глюки.

А насчет засорения разметки 2-мя дивами... мне кажется подключение фильтров и прочих библиотек - вот это засорение.

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

Edited March 26, 2013 by tamirov

sigma77 · March 26, 2013

Я оцениваю исходя из предложенного тз.

Боковые блоки фиксированые, при достижении определенного минимального размера, например, 1280px, боковины уходят за границы экрана.

А так вы постоянно при увеличении экранов будете цифирками играть?

Что касается псевдоэлементов, то ИЕ7 в 99% случаев уже давно не актуален.

tamirov · March 26, 2013

Я оцениваю исходя из предложенного тз.
Боковые блоки фиксированые, при достижении определенного минимального размера, например, 1280px, боковины уходят за границы экрана.
А так вы постоянно при увеличении экранов будете цифирками играть?
Что касается псевдоэлементов, то ИЕ7 в 99% случаев уже давно не актуален.

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

Наверняка решение есть без псевдоклассов, повторяю, мне это интересно в плане теории (такие задачки хорошо мозги прочищают ).

Кстати, думаю вы несколько спешите насчёт ie7.

Sign In

Интересная задачка.

Question

Link to comment

Share on other sites

21 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information