Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.09.2013, 10:17
Новичок на форуме
Отправить личное сообщение для kadomsky Посмотреть профиль Найти все сообщения от kadomsky
 
Регистрация: 06.10.2011
Сообщений: 7

Оооочень "резиновая" верстка
Передо мной стоит задача создать сайт вот с такой мазаичной резиновой версткой http://www.dunhill.com/
Обратите внимание - как сайт ведет себя при масштабировании. Он так "ловко" меняет всю расстановку блоков, что они всегда подогнаны без пустых пятен, хотя все разного размера.
Теперь о там что я пробовал. Для начала подметил, что все блоки отличаются друг от друга в кратное число раз по площади, как листы бумаги а1, а2, .... и т.д. Соответственно создал несколько дивов и расставил их более менее хаотично, назначил им float: left, и начал масштабировать.
<style>
.a4 {
width: 297px;
height: 210px;
}
.a3 {
width: 297px;
height: 420px;
}
.a2 {
width: 594px;
height: 420px;
}
.a2plus {
width: 594px;
height: 630px;
}
div {
border: 1px solid gray;
DISPLAY: block;
background: #c99;
float: left;
padding: 0;
margin: 0;
}
</style>
<div class="a2plus">&nbsp;</div>
<div class="a3">&nbsp;</div>
<div class="a2">&nbsp;</div>
<div class="a3">&nbsp;</div>
<div class="a2">&nbsp;</div>
<div class="a3">&nbsp;</div>
<div class="a4">&nbsp;</div>
<div class="a4">&nbsp;</div>
<div class="a2">&nbsp;</div>
<div class="a2">&nbsp;</div>
<div class="a4">&nbsp;</div>
<div class="a4">&nbsp;</div>
<div class="a4">&nbsp;</div>

Но ничего не вышло. Все раскладывается с кучей белых незаполненых пятен и сразу и при масштабировании браузера.
Попробывал придумать алгоритм расстановки при $(window).resize(...
Но сломал голову, как это сделать.

Прошу подсказать css или js или совместное решание.
В исходники js и css, прикрапленные к странице лазить уже пытался, но так и не нашел способа решения.
Зарание спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 19.09.2013, 10:38
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

@media screen вам в помощь
но на том сайте вроде js-ом ресайзит, от этого и тормоза такие
Ответить с цитированием
  #3 (permalink)  
Старый 20.09.2013, 11:22
Новичок на форуме
Отправить личное сообщение для kadomsky Посмотреть профиль Найти все сообщения от kadomsky
 
Регистрация: 06.10.2011
Сообщений: 7

МОЖНО ПРИМЕР КАКОЙ ТО..
Ответить с цитированием
  #4 (permalink)  
Старый 20.09.2013, 11:38
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,124

Сообщение от animhotep
на том сайте вроде js-ом ресайзит
Там не только меняется/подгоняется размер "существующих" элементов... Там и новые добавляются в довесок некоторым элементам для пущей "заполняемости" страницы.

Т.ч., kadomsky, работы ты себе набрал валом!
Ответить с цитированием
  #5 (permalink)  
Старый 20.09.2013, 13:06
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

Сообщение от kadomsky
МОЖНО ПРИМЕР КАКОЙ ТО..
пример чего? гугол знает о @media screen а пример ресайза через js на dunhill.com
Ответить с цитированием
  #6 (permalink)  
Старый 21.09.2013, 16:28
Профессор
Отправить личное сообщение для tenshi Посмотреть профиль Найти все сообщения от tenshi
 
Регистрация: 20.03.2008
Сообщений: 1,183

http://css-tricks.com/snippets/css/a-guide-to-flexbox/
__________________
.ня
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
верстка для мобильных устройств torsar (X)HTML/CSS 3 25.04.2013 21:20
При установке CSS для Body "overflow: hidden" съезжает верстка, в чем дело? Slevin Kelevra Общие вопросы Javascript 18 08.07.2012 20:27
Требуется верстка с использованием bootstrap projectdev2012 Работа 0 31.03.2012 19:35
Верстка в две колонки greatilya (X)HTML/CSS 8 05.08.2011 00:40
верстка под 17 дюймовый монитор Артем125 (X)HTML/CSS 8 20.08.2010 23:09