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

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

ayrat9

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

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

Flanker

незнайка
Используй в процентном соотношении.
width="90%"
style="width:90%"

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

an_kalinovski

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

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

ayrat9

Новичок
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?
 

an_kalinovski

Новичок
Могу предложить такое решение

<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>
 

vg2k

Новичок
an_kalinovski, опередил меня ;)

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