Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Скрывающийся при маленьком разрешении фон 
:(
    Опции темы
BzZzzZzz
Дата 2.4.2009, 15:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 11
Регистрация: 23.3.2009

Репутация: нет
Всего: нет



Шапка сайта состоит из 3 картинок.
1 2 3
картинка 2 - фиксирована по центру
1 и 3 - прилеплены к краям

Возможно ли сделать так, чтобы картинки 1 и 3 были не видны при разрешении меньше 1024, а при расширении экрана постепенно появлялись и оставались прилепленными к краям?
PM MAIL   Вверх
bars80080
Дата 2.4.2009, 18:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



можно, если сделать крайние колонки узкие с бэкграундными картинками 1 и 3. колонка 2 фиксированной ширины. при расширении картинки 1 и 3 будут показываться, надо только расположить их соответствующим образом: top right для картинки 1, и top left для картинки 3
PM MAIL WWW   Вверх
BzZzzZzz
Дата 2.4.2009, 18:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 11
Регистрация: 23.3.2009

Репутация: нет
Всего: нет



Цитата(bars80080 @ 2.4.2009,  18:07)
можно, если сделать крайние колонки узкие с бэкграундными картинками 1 и 3. колонка 2 фиксированной ширины. при расширении картинки 1 и 3 будут показываться, надо только расположить их соответствующим образом: top right для картинки 1, и top left для картинки 3

Мне такой вариант тоже в голову приходил, но разве при нем на 1024 не появится горизонтальная полоса прокрутки?
PM MAIL   Вверх
ksnk
Дата 2.4.2009, 19:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Картинки - не элементы разметки(img), а background .

для пущей демонстрабельности, можно это показать на таблицах:
Код

<table style="width:100%"><col width="auto"><col width="200"><col  width="auto">
<tr>
<td tyle="backgroung:url(PIC_LEFT_BG.jpg) 0 right no-repeat;">1</td>
<td tyle="backgroung:url(PIC_CENTER_BG.jpg) ;"><div style="height:300px;">2</td>
<td tyle="backgroung:url(PIC_LEFT_BG.jpg) 0 0 no-repeat;">3</td>
</tr>
</table>



--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
BzZzzZzz
Дата 2.4.2009, 19:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 11
Регистрация: 23.3.2009

Репутация: нет
Всего: нет



Цитата(ksnk @ 2.4.2009,  19:05)
Картинки - не элементы разметки(img), а background .

для пущей демонстрабельности, можно это показать на таблицах:
Код

<table style="width:100%"><col width="auto"><col width="200"><col  width="auto">
<tr>
<td tyle="backgroung:url(PIC_LEFT_BG.jpg) 0 right no-repeat;">1</td>
<td tyle="backgroung:url(PIC_CENTER_BG.jpg) ;"><div style="height:300px;">2</td>
<td tyle="backgroung:url(PIC_LEFT_BG.jpg) 0 0 no-repeat;">3</td>
</tr>
</table>

Если так делать, то при большом разрешении картинки по бокам будет равняться не по краям
PM MAIL   Вверх
ksnk
Дата 2.4.2009, 20:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



BzZzzZzz,  Уменя картинки прижаты к центральной ячейке. Если нужно прижать их и краям - нужно поменять 0 0 на right 0  и наоборот...

Это сообщение отредактировал(а) ksnk - 2.4.2009, 20:03


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
BzZzzZzz
Дата 2.4.2009, 20:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 11
Регистрация: 23.3.2009

Репутация: нет
Всего: нет



Цитата(ksnk @ 2.4.2009,  20:03)
BzZzzZzz,  Уменя картинки прижаты к центральной ячейке. Если нужно прижать их и краям - нужно поменять 0 0 на right 0  и наоборот...

Тогда при маленьком разрешении картинки 1 и 3 будут перекрываться центральной колонкой. Это уже не то)
PM MAIL   Вверх
ksnk
Дата 2.4.2009, 20:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



BzZzzZzz, Вот по этому, "умные люди" приклеивают их к центральной ячейке. smile

Если фон позволяет себя сжимать , то можно в правую-левую ячейки положить 
<img src="PIC_LEFT_BG" style="width:100%;">
Хотя я плохо представляю себе приличный фон с такими свойствами ...


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
BzZzzZzz
Дата 2.4.2009, 20:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 11
Регистрация: 23.3.2009

Репутация: нет
Всего: нет



Цитата(ksnk @ 2.4.2009,  20:41)
BzZzzZzz, Вот по этому, "умные люди" приклеивают их к центральной ячейке. smile


 smile 
PM MAIL   Вверх
BzZzzZzz
Дата 4.4.2009, 10:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 11
Регистрация: 23.3.2009

Репутация: нет
Всего: нет



up....
PM MAIL   Вверх
ksnk
Дата 4.4.2009, 12:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Цитата

up.... 

чего up-то? smile 
Не понятно как себя должна вести эта конструкция, если размеры окна стремительно уменьшаются.

Чтобы уменьшить энтропию, предлагаю ограничить минимальные размеры экрана разумным числом. К примеру арифметической суммой ширИн картинок... В конце концов, нету такого дизайна, который одинаково прилично смотрелся бы и на 320px и на 1024





--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
BzZzzZzz
Дата 4.4.2009, 18:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 11
Регистрация: 23.3.2009

Репутация: нет
Всего: нет



Цитата(ksnk @ 4.4.2009,  12:16)
чего up-то? smile 
Не понятно как себя должна вести эта конструкция, если размеры окна стремительно уменьшаются.

Чтобы уменьшить энтропию, предлагаю ограничить минимальные размеры экрана разумным числом. К примеру арифметической суммой ширИн картинок... В конце концов, нету такого дизайна, который одинаково прилично смотрелся бы и на 320px и на 1024

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

Это сообщение отредактировал(а) BzZzzZzz - 4.4.2009, 18:05

Присоединённый файл ( Кол-во скачиваний: 6 )
Присоединённый файл  Untitled_18.png 5,98 Kb
PM MAIL   Вверх
ksnk
Дата 4.4.2009, 18:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Код

<div style="position:relative;">
  <div style="background:red;width:200px;height:200px;float:left;"></div>
  <div style="background:green;width:200px;height:200px;float:right;"></div>
  <div style="clear:both;"></div>
  <div style="position:absolute;width:100%;z-index:2;top:0;left:0;height:200px;">
     <div style="background:blue;width:600px;height:200px;margin:0 auto;"></div>
  </div>
</div>

Как-нибудь так... Она правда лагает в FF при изменении размеров экрана , да и в IE тормозит при отрисовке.

Добавлено через 8 минут и 40 секунд
O! Вот еще с таблицами. Почти без лагов smile
Код

<table style="width:100%;table-layout:fixed;"><col wodth="auto"><col width="600"><col width="auto">
<tr>
<td><div style="overflow:hidden;">
   <div style="background:red; margin:0 auto 0 0;width:200px;height:200px;"></div>
</div></td>
<td style="background:blue;">
</td>
<td><div style="overflow:hidden;">
   <div style="background:green; margin:0 0 0 auto;width:200px;height:200px;"></div>
</div></td>
</tr></table>




--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
BzZzzZzz
Дата 4.4.2009, 18:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 11
Регистрация: 23.3.2009

Репутация: нет
Всего: нет



Цитата(ksnk @ 4.4.2009,  18:28)
Код

<div style="position:relative;">
  <div style="background:red;width:200px;height:200px;float:left;"></div>
  <div style="background:green;width:200px;height:200px;float:right;"></div>
  <div style="clear:both;"></div>
  <div style="position:absolute;width:100%;z-index:2;top:0;left:0;height:200px;">
     <div style="background:blue;width:600px;height:200px;margin:0 auto;"></div>
  </div>
</div>

Как-нибудь так... Она правда лагает в FF при изменении размеров экрана , да и в IE тормозит при отрисовке.

Добавлено @ 18:37
O! Вот еще с таблицами. Почти без лагов smile
Код

<table style="width:100%;table-layout:fixed;"><col wodth="auto"><col width="600"><col width="auto">
<tr>
<td><div style="overflow:hidden;">
   <div style="background:red; margin:0 auto 0 0;width:200px;height:200px;"></div>
</div></td>
<td style="background:blue;">
</td>
<td><div style="overflow:hidden;">
   <div style="background:green; margin:0 0 0 auto;width:200px;height:200px;"></div>
</div></td>
</tr></table>

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

PM MAIL   Вверх
ksnk
Дата 4.4.2009, 19:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



В каком это, интересно месте на той картинке красный и зеленый "над" синим?


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0650 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.