Меню
Что нового?

Вывод HTML в зависимости от ширины экрана пользователя

  • Автор темы Автор темы ayrat9
  • Дата начала Дата начала

ayrat9

Новичок
Вывод HTML в зависимости от ширины экрана пользователя

Есть много маленьких таблиц (16, но может быть < или >) фиксированной ширины (170). В данный момент они выводятся строго по 3 в ряд, чтобы не портить внешний вид сайта для юзеров с экранами 1024x768. Соответственно у пользователей с шириной экрана более 1000 пикселей справа остается много пустого места. Заказчик требует чтобы на его компе такого (empty space) не было.
Подскажите пожалуйста, можно ли средствами HTML организовать универсальный вывод для заполнения страницы этими таблицами по "полной программе", т.е. чтобы в браузере НЕ ПОЯВЛЯЛАСЬ полоса прокрутки ширине? Если нельзя обойтись только HTML, то чем может помочь Яваскрипт?
 
Используй в процентном соотношении.
width="90%"
style="width:90%"

По идее оно берет процентное содержание от размеров документа(но не могу утверждать, потому-что у меня часто с этим бывают проблемы, хотя всё правельно описал, приходиться приходить к жестким размерам)
 
Re: Вывод HTML в зависимости от ширины экрана пользователя

Автор оригинала: ayrat9
Есть много маленьких таблиц (16, но может быть < или >) фиксированной ширины (170). В данный момент они выводятся строго по 3 в ряд, чтобы не портить внешний вид сайта для юзеров с экранами 1024x768. Соответственно у пользователей с шириной экрана более 1000 пикселей справа остается много пустого места. Заказчик требует чтобы на его компе такого (empty space) не было.
Подскажите пожалуйста, можно ли средствами HTML организовать универсальный вывод для заполнения страницы этими таблицами по "полной программе", т.е. чтобы в браузере НЕ ПОЯВЛЯЛАСЬ полоса прокрутки ширине? Если нельзя обойтись только HTML, то чем может помочь Яваскрипт?
Нажмите для раскрытия...
Уточняющий вопрос - ширина таблиц должна остаться жесткой? Т.е. если появится место на еще одну таблицу - то что их стало 4 вместо 3 или они могут действительно растягиватся и сжиматся как хочешь?
 
flanker: с процентами я уже играл - в моем случае не помогает (да и браузеры разные по-разному реагируют)
an_kalinovski: ширина мал. таблиц жесткая (170), и если появится место под еще одну таблицу, то их должно становиться на 1+

в общем-то я уже начал с яваскриптом баловаться:

function cat_rub_resort()
{
// Определение браузера
IE = (document.all); // Internet Explorer?
NC = (document.layers); // Netscape?
Opera = (document.getElementById); // Opera?
if (IE || Opera) send = document.body.clientWidth;
if (NC) send = window.innerWidth;
if (send<1025)
{
//for (i=3; i<17; i+=3) {gg='document.getElementById("cat_' + i + '").innerHTML="</td></tr><tr><td align=center>"'; eval(gg);}
for (i=3; i<17; i+=3) {gg='document.getElementById("cat_' + i + '").innerHTML="<br><br><br><br><br><br><br><br><br><br>"'; eval(gg);}
}
if (send<1281 && send>1024)
{
//for (i=4; i<17; i+=4) {gg='document.getElementById("cat_' + i + '").innerHTML="</td></tr><tr><td align=center>"'; eval(gg);}
for (i=4; i<17; i+=4) {gg='document.getElementById("cat_' + i + '").innerHTML="<br><br><br><br><br><br><br><br><br><br>"'; eval(gg);}
}
if (send<1401 && send>1280)
{
//for (i=5; i<17; i+=5) {gg='document.getElementById("cat_' + i + '").innerHTML="</td></tr><tr><td align=center>"'; eval(gg);}
for (i=5; i<17; i+=5) {gg='document.getElementById("cat_' + i + '").innerHTML="<br><br><br><br><br><br><br><br><br><br>"'; eval(gg);}
}
}
функция вызывается после загрузки всех таблиц

Хотелось бы использовать закомментированные строки, но есть трабла: объект, которому меняется innerHTML не что иное как <div> и расположен он посреди большой таблицы (контейнера для маленьких). Может кто знает, есть ли в Языке разметки тег не обрабатываемый браузерами, но которому можно вставить innerHTML?
 
Могу предложить такое решение

<div style="width:170px; float:left;">Bla-blabla</div>
<div style="width:170px; float:left;">Bla-blabla</div>
<div style="width:170px; float:left;">Bla-blabla</div>
<div style="width:170px; float:left;">Bla-blabla</div>
<div style="width:170px; float:left;">Bla-blabla</div>
<div style="width:170px; float:left;">Bla-blabla</div>
<div style="width:170px; float:left;">Bla-blabla</div>
<div style="width:170px; float:left;">Bla-blabla</div>
 
an_kalinovski, опередил меня ;)

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