LINUX.ORG.RU

Несколько вопросов по верстке дивами


0

1

Готовлю макет верстки виртуального тура.
В нем планируется 3 основных окна на странице:
- окно с самими панорамами;
- окно с информацией о данном объекте (история создания и т.п.);
- окно с иллюстрациями (фото из жизни этого факультета).

Верстать хочу резинкой, да бы и на 1024*768 нормально смотрелось и в 1900*1200 не было «маленькой фигней по центру экрана».

Предполагается как-то так:
---------------------
|--------|-окно2--|
|окно1|-----------|
|--------| окно3--|
---------------------

Но нужны и какие-то лимиты, например окно-1 - самое больше, оно не должно сжиматься до 300х200. Для окон-2-3 можно ширину не менее 200рх, а окно-3 можно сжимать по высоте максимально, вплоть до высоты в 100рх (что бы влазил один ряд превьюшек фотографий).

На htmlbook.ru вычитал про min-width max-width и т.п.

Собственно вопросы к вам:
насколько это все корректно работает?
Интересует ваш опыт, а не табличка совместимости на указанном выше сайте.

Можно ли комбинируя эти вещи добавиться, к примеру, такого:
- окно-1-2-3: ширина не более X и не менее Y, в остальном - авто;
- в остальном руководствоваться пропорциями: окно-1 - шире, чем окно-2(3).

Как делать первое (лимиты размеров) - более менее понятно.
А как задавать приоритеты пропорций?

Например для разрешения 1024х768:
- окно-1 - ширина 700рх, окно-2 - ширина 300рх
Для разрешения 1900х1200:
- окно-1 - ширина 1000рх, окно-2 - ширина 400рх

Как делать подобные условия?
Причем, очень желательно, без всяких js вычитывающих разрешение, а просто ориентируясь по размерам окна браузера.

PS
надеюсь, что понятно изложил.


min-width, max-width, в старых ослах не работает погугли про grid фреймворки верстки, 960.gs или там bootstrap, бери те что с fluid контейнерами и вперед

trashymichael ★★★
()

Предполагается как-то так

Тоесть основной контент раскидан змейкой и разбит огромными пустотами?

Kalashnikov ★★★
()
Ответ на: комментарий от pianolender

Кто-то просто не осиливает.

Самый лучший div — это td.


А тебя не смущает, что таблицы служат для вывода данных а не для разметки?

jessey
()

Вполне нормально, min/max width/height - это хорошие, годные свойства.
Для резиновой верстки либо юзай проценты, либо em (на 1024x768 люди в браузере юзают шрифты 11-12, а на 1920x1080 - 13-14), либо линейные единицы (pt/mm/etc, они учтут разный dpi).

moscwich
()
Ответ на: комментарий от jessey

А вас не смущает, что в C для вывода разных типов данных служит один и тот же printf? Каша - она не в коде, она в голове бывает. Если аккуратно верстать, то и не запутаетесь.

pianolender ★★★
()
Ответ на: комментарий от pianolender

А вас не смущает, что в C для вывода разных типов данных служит один и тот же printf?

Нет. Я не пишу на С.

Если аккуратно верстать, то и не запутаетесь.

А я не про запутанность такого кода говорю.

jessey
()

надеюсь, что понятно изложил.

Если честно, про окна я не понял (автор выше, видимо, тоже).

moscwich
()
Ответ на: комментарий от jessey

А тебя не смущает

Не смущает, некоторые даже вместо списков в ворде таблицы юзают, и живут как-то. А верстать таблицами куда как приятнее, они послушные, не кобенятся, не вылезают из родительских элементов, не сбивают разметку.

pianolender ★★★
()
Ответ на: комментарий от jessey

А жопу ватманом вытираешь?

Хо-хо, тут как раз обратная ситуация, пока некоторые подтираются «семантикой», у нас верстка уже готова, причем резиновая и работает во всех браузерах.

Дротите вприсядку, на здоровье. Я уж точно разубеждать не буду.

baverman ★★★
()
Ответ на: комментарий от pianolender

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

zz ★★★★
()
Ответ на: комментарий от jessey

Ну да, сверстаем как попало

Пиксель-в-пиксель и кроссбраузерно это плохо?

бабки получим быстрее

А это действительно красота. Завидовать плохо.

baverman ★★★
()
Ответ на: комментарий от zz

зовите меня.

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

baverman ★★★
()
Ответ на: комментарий от zz

А для таких случаев цсс подключать в зависимости от user-agent не решение?

Перемещение блоков при слишком маленьком размере экрана - это нехорошо, мне кажется

pianolender ★★★
()
Ответ на: комментарий от baverman

Подгоняют пусть верстальщики им за это платят. Иметь два лаеута и портировать туда сюда новый функционал явно дороже.

zz ★★★★
()
Ответ на: комментарий от pianolender

Ну тут что не подключай таблица она и есть таблица. В этом профит блочной верстки и заключен.

zz ★★★★
()
Ответ на: комментарий от zz

Подгоняют пусть верстальщики им за это платят.

Я только балуюсь, а знакомые зубры-верстаки делают практически всё таблицами, потому-что тупо быстрее, и в поддержке дешевле.

// Я раньше тоже фанател от дивов, пока писал для себя. Практика показала обратное — они не нужны.

baverman ★★★
()
Ответ на: комментарий от zz

Согласен. Первый случай, когда мне привели аргумент по делу, а не феееекнули в стиле «это не-се-ман-тич-но, во»

pianolender ★★★
()
Ответ на: комментарий от baverman

Видимо у меня какие то более молодые зубры верстки, которые пользуют html5shiv и вся верстка в последнее время приходит с header,footer,nav,section вместо дивов :)

zz ★★★★
()
Ответ на: комментарий от jessey

А если бы писал, то наверное сильно бы удивился узнав, что при операции сложения k+n, результатом операции является k увеличенное на n, не зависимо от того, чем были k и n - float, int, double, long или short.

А вот если бы C разрабатывали те же люди, что и html, то k увеличиволось бы на n, только если бы n было int или short, и только если бы само k было long. А если бы k было float, то его дробная часть округлялась бы до ближайшего дробного с количеством знаков равных наибольшему делителю n, но только при компиляции gcc, а при компиляции любым другим компилятором до наибольшего общего делителя k и n.
Операция умножения была бы возможно только если предыдущей операцией была конкатенация строк с нечетным количеством символов в результирующей строке, а компилятор от майкрософт компилил (есть же такой? а то я тоже не пишу на c...) бы в том числе и закоментированные инструкции, не поддерживал бы деление четного на 4 и обязательно бы падал при попытке проверить условие «а != 37».
При этом Kalashnikov убеждал бы всех что это интуитивное и предсказуемое поведение...

Suntechnic ★★★★★
()
Ответ на: комментарий от jessey

Очевидно в том, что именно на изощренность фантазии разрабов html и браузерных движков хотел указать baverman говоря, что самый лучший div это td.

Suntechnic ★★★★★
()
Ответ на: комментарий от jessey

Весьма необычный вывод... Почему бы это? Венда скорее напоминает плавающий div. А линукс iframe. В таком контексте правильным выводом относительно линукса было бы - «самая лучшая венда это QNX».

Suntechnic ★★★★★
()
Ответ на: комментарий от moscwich

слева одно большое окно, справа от него 2 малых, у малых - ширина одинакова, а сумма высот = высоте первого.

dk-
() автор топика
Ответ на: комментарий от baverman

табличная верстка лучше чем верстка divами?!

XoFfiCEr ★★☆☆
()
Ответ на: комментарий от jessey

А тебя не смущает, что таблицы служат для вывода данных а не для разметки?

А тебя не смущает, что в спецификации html4/xhtml нет выравнивания блоков по вертикали?

minakov ★★★★★
()
Ответ на: комментарий от Kalashnikov

Основная проблема таблиц - ОЧЕНЬ большая зависимость их размеров от содержимого. Но и это решается вложенными в ячейки дивами. Лично я верстаю дивами с JS, который растягивает высоту минимального блока до размера максимального, но таблицы плохим тоном не считаю - во многих случаях они позволяют обойти ограничения блоков

minakov ★★★★★
()
Ответ на: комментарий от jessey

В этом диалоге ты выглядишь тупой школотой.

sdio ★★★★★
()

Работает, но для сильно разных экранов лучше добавить еще media-запросы в CSS

Ну и для нового проекта я бы советывал взять готовый шаблон, вроде twitter bootstrap

maxcom ★★★★★
()

Свойства с min/max работают ок, причём именно в соответствии с приведённой таблицей совместимости. Для старых версий ие существуют костыли.

А вот для задания разных пропорций для разных разрешений есть такая крутая штука, как CSS Media Queries.

Apple-ch ★★
()

почитал http://twitter.github.com/bootstrap/
для моей задачи инструмент избыточен.
ведь мне по сути лишь 3 окна надо разметить.
а когда весь код вручную сам пишешь (с моим нубским навыком), то хоть немного запоминаешь.

вопрос:
насколько безопасно указывать размеры дивов в процентах?
я просто каждому диву задам размер в процентах от родительского, а так же минимальное и максимальное значение.

dk-
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.