Нуждаюсь в экстренной помощи. JS/Резина

[Bondarov]

Приветствую! Господа, нужна помощь.

Есть макет. Вопрос в том, как его сверстать таким образом, что бы при уменьшении окна броузера сжимались все картинки, совершенно ВСЕ, как логотип, так и кнопки и букет (в данном случае). Потому, если оставить все изображения как есть, они остаются при малых разрешениях монитора ГРОМАДНЫ.

Для наглядки —

Посоветовали скрипт — http://designformasters.info/stuff/adaptiv...ayout_news.html

При сжатии и разжатии окна броузера, Вы заметите как себя ведет скрипт. Но вопрос, как его использовать? Ссылку на скрипт в документе html указал, все классы в css соответствующие скрипту так же указал. Реакции нет. В чем моя ошибка?

Спасибо.

Edited March 20, 2010 by Bondarov

[hf3]

Посоветовали скрипт — http://designformasters.info/stuff/adaptiv...ayout_news.html

Скрипт адски тормозит и вешает браузер.

А Насколько маленьким должно быть разрешение чтобы что картинки казались громадными? Меньше 800 на 600 встретить уже тяжеловато. И то это редкость

[Verder]

Скрипт адски тормозит и вешает браузер.

А Насколько маленьким должно быть разрешение чтобы что картинки казались громадными? Меньше 800 на 600 встретить уже тяжеловато. И то это редкость

А если задать размеры картинок в процентах?

http://freeway-design.ru/prim/ (max-width не ставил)

[monkeymafia]

Этот код получает размеры экрана в 2 переменные : width - ширина, height - высота.

<script language="javascript">
<!--
var height=0; var width=0;
if (self.screen) {
width = screen.width
height = screen.height
}	
//-->
</script>

Этот код изменяет значения css стиля в зависимости от значения переменных width или height.

 <script language="JavaScript">

if ( height < 769) {
	var obj;
	obj=document.getElementById('news');
	obj.style.height='225px';}
 </script>

*В данном случае если высота экрана меньше чем 769 пикселей (т.е 768 и ниже, 17' мониторы) то JS находит ID с названием news и уменьшает его изменяет его параметр высоты на 225px,

другими словами применяет этот код :

#news {height:225px;}

PS А вообще люди правы насчет низкого разрешения! 1024х768 уже раритет, а про 800х600 забудь

[Verder]

Этот код получает размеры экрана в 2 переменные : width - ширина, height - высота.

<script language="javascript">
<!--
var height=0; var width=0;
if (self.screen) {
width = screen.width
height = screen.height
}	
//-->
</script>

Этот код изменяет значения css стиля в зависимости от значения переменных width или height.

 <script language="JavaScript">

if ( height < 769) {
	var obj;
	obj=document.getElementById('news');
	obj.style.height='225px';}
 </script>

*В данном случае если высота экрана меньше чем 769 пикселей (т.е 768 и ниже, 17' мониторы) то JS находит ID с названием news и уменьшает его изменяет его параметр высоты на 225px,

другими словами применяет этот код :

#news {height:225px;}

PS А вообще люди правы насчет низкого разрешения! 1024х768 уже раритет, а про 800х600 забудь

Прикольно.

Слушай, а можно как-то на JS сделать, чтобы определенный блок был всегда внизу экрана? Это я про футер говорю. Чтобы в CSS не извращаться, а то достало уже. Скрипты находил на эту тему, но они кривые все какие-то и тормозные. Должен быть выриант полегче. Подозреваю, что это не так сложно сделать, но в JS не силен.

[monkeymafia]

Прикольно.

Слушай, а можно как-то на JS сделать, чтобы определенный блок был всегда внизу экрана? Это я про футер говорю. Чтобы в CSS не извращаться, а то достало уже. Скрипты находил на эту тему, но они кривые все какие-то и тормозные. Должен быть выриант полегче. Подозреваю, что это не так сложно сделать, но в JS не силен.

В этом коде находим высоту body (не путать с высотой экрана).

<script language="javascript">

var height=0;
if (self.screen) {
height = document.body.offsetHeight;
}	
</script>

Если футер по высоте допустим 30px то задаем в CSS #footer {} и присваиваем его блоку в html.

<script language="javascript">
	var obj;
	obj=document.getElementById('footer');
	obj.style.position='absolute';
			obj.style.top=height - 30,'px';
</script>

Насчет последней конструкции не уверен, надо порыться в интернете - как присоединить к цифре буквы 'px', так как насколько я знаю css нужно знать с какими единицами работать.

Логика всего выше сказанного такак :

1.Узнаем размер body.

2.Правильно располагаем элемент футер.

3.Задаем ID футера абсолютное значение, чтоб мы могли расположить его где угодно на экране.

4.Задаем его расположение от верхнего края ...т.е размер экрана минус высоту самого футера.

Правда выше написанное имеет смысл только если нет полосы прокрутки справа, т.е контент умещается в начальное поле body. Потому как таким образом мы задаем четкое расположение элементу футер.Для того чтоб все время прижимался к низу - надо писать код,что при прокрутке все время обновлялось положение. Я не настолько силен в JS к сожалению, я собственно выучил только то что надо было для одного проекта. Легче не изобретать велосипед и делать через CSS:

http://zodios.net/htmlcss/downfooter.html Здесь подробно описано как это сделать несколькими вариантами

http://csstemplater.com/ Здесь можно создать CSS макет для сайта, можно выбрать опцию "прижать футер к низу окна браузера"

[Verder]

Спасибо за развернутый ответ.

Через CSS уже давно все делается, но хочется универсальное решение на скрипте. Понимаю, что и минусы есть (например дольше страница будет грузиться), но и плюсы очевидны.

Хотя с другой стороны, зачастую, низ и прижимать не надо.

В любом случае буду копать в сторону JS, язык очень гибкий и универсальный.

[Bondarov]

Этот код получает размеры экрана в 2 переменные : width - ширина, height - высота.

Код

<script language="javascript">

<!--

var height=0; var width=0;

if (self.screen) {

width = screen.width

height = screen.height

}

//-->

</script>

Этот код изменяет значения css стиля в зависимости от значения переменных width или height.

Код

<script language="JavaScript">

if ( height < 769) {

var obj;

obj=document.getElementById('news');

obj.style.height='225px';}

</script>

*В данном случае если высота экрана меньше чем 769 пикселей (т.е 768 и ниже, 17' мониторы) то JS находит ID с названием news и уменьшает его изменяет его параметр высоты на 225px,

другими словами применяет этот код :

Код

#news {height:225px;}

Ничего не работает у меня (((

А если задать размеры картинок в процентах?

http://freeway-design.ru/prim/ (max-width не ставил)

Да, Verder, это конечно здоровски, но IE сжимает картинку лишь до оригинальной ширины, меньше никак, больше — разжимай сколько влезет. А в FF и Opera всё ОК.

#logo {
  padding-top: 40px;
  width: 20%;
}

#logo img{
  max-width: 301px;
}

<td id="logo" rowspan="2"><img src="images/logo.png" width="100%" /></td>

Все таки хотелось бы разобраться с этим чудесным скриптом —

http://designformasters.info/stuff/adaptiv...ayout_news.html

Отчего у меня не работает он, ни ппод денвером, ни в холостую. Ссылку на скриппт ппрописал, скрипт в папку положил, в css задал спец. классы, которые соответствуют классам в скрипте. Хелп ми. Спасибо за ввнимание и ппомощь.

[Bondarov]

Спасибо всем. ПРоблема решена.

[psywalker]

Спасибо всем. ПРоблема решена.

Ну раз решена, покажи другим решение. Выложи код полностью от А до Я, вместе с картинками и т.д.