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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Ох уж эти слои !!! помогите подобрать размер среднего слоя 
:(
    Опции темы
Black
  Дата 1.6.2005, 02:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Web-Development
**


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

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



Значит задача элементарная на первый взгляд.
Есть три слоя. Хочется сделать вот такую структуру (см. прикрепленный рисунок):

Первый слой (под цифрой 1) и третий (под цифрой три)
имеют фиксированный размер, пусть будет 300px.

Предположим, что имеем экран размером: 1024x768
Рабочая область окна: 1024px - 24px = 1000 px (24 пикселя уходит на полосу прокрутки браузера)

Вопрос: как растянуть второй слой (под цифрой два) до 400px
(1000px - (300px * 2)) = 400px

Ответ: указать ему 400 px. Хорошо, а если у пользователя другое разрешение экрана...
Как тогда поступить??? Причем полоса прокрутки браузера в разных браузерах разная (т.е. занимает разное кол-во px).

А вот если использовать JavaScript, то можно определить рабочую область экрана, но она всегда указывается не считая размера полосы прокрутки. Т.е. нам будет вернуто 1024px.
Поэтому трудно будет высчитать нужные размеры второго слоя. Да и если пользователь выключит JavaScript, что тогда???

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

Вот простой код странички:

Код

<html>
<head>
<style>

.left { border: black solid 1px; float:left; width: 300px; padding-right:10px; }
.center { border: black solid 1px; float: left; }
.right { border: black solid 1px; float:right; width: 300px; padding-left:10px;  }

</style>
</head>

<body>

<div class='left'>1 слой (здесь 300px)</div>
<div class='center'>2 слой (здесьб неизвестно сколько px, зависит от разрешения экрана пользователя)</div>
<div class='right'>3 слой (здесь тоже 300px)</div>

</body>
</html>



Может быть я чего-то не понимаю по работе со слоями, но уже целый день пытаюсь это сделать и не получается.
Вообщем хотелось бы такой стиль:

Код

.center { float: left; width:(100%-600px);


Жалко что такая запись ошибочна :-)

Если бы это были таблицы то все элементарно:

Код

<table width='100%'>
<tr>

<td width='300'> Тут 300px </td>
<td width='100%'> Хочу 100% - хочу и получу</td>
<td width='300'> Тут тоже 300px </td>

</tr>
</table>


Вообщем, я думаю вы поняли мою проблему. Расписал вроде бы подробно.
Надеюсь вместе нам получится найти решение.

smile

Это сообщение отредактировал(а) PHP-DIRECTOR - 1.6.2005, 02:51

Присоединённый файл ( Кол-во скачиваний: 6 )
Присоединённый файл  structura.gif


--------------------
Могу все, но ничего не умею :-)
PM WWW   Вверх
skalex
Дата 1.6.2005, 07:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Хороший человек
**


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

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



Почему не хотите использовать таблицы ?

Это сообщение отредактировал(а) Mace - 1.6.2005, 07:53
PM   Вверх
Black
Дата 1.6.2005, 08:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Web-Development
**


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

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



Mace
1) Слои технология будущего, хотелось бы ее изучить и уметь применять.

2) Да и вообще, как круто будет, если твой сайт сделан полностью на слоях !!!

3) Хочу придержаться рекомендаций W3C: контент страницы необходимо отделять от физического оформления. Таблицы не предназначены быть макетом для дизайна. Таблицы необходимы для вывода табличных данных.

Хотя никто и не запрещает использовать TABLE



--------------------
Могу все, но ничего не умею :-)
PM WWW   Вверх
skalex
Дата 1.6.2005, 08:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Хороший человек
**


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

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



К сожалению при верстке от слоев я пока не получаю той гибкости, которые могут дать таблицы. К тому же очень капризная вещь в плане кроссбраузерности. Естественно я не отговариваю Вас изучать и применять слои. Наверняка решение Вашей проблемы существует.
PM   Вверх
Cheba
Дата 1.6.2005, 10:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


pointless one
***


Профиль
Группа: Vingrad developer
Сообщений: 1777
Регистрация: 27.11.2003
Где: /dev/null

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



Прекрасный пример.
Не разберешся - поможем.
PM MAIL ICQ   Вверх
GoodBoy
Дата 1.6.2005, 17:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Главный джедай
****


Профиль
Группа: Модератор
Сообщений: 3886
Регистрация: 8.1.2003
Где: КМВ

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



Цитата(PHP @ 1.6.2005, 09:50)
1) Слои технология будущего, хотелось бы ее изучить и уметь применять.

2) Да и вообще, как круто будет, если твой сайт сделан полностью на слоях !!!

1 - бред!!!

2 - бред!!!


--------------------
Чем дальше в лес, тем толще партизаны...

Цитата(igorold @  1.5.2016,  17:40 Найти цитируемый пост)
Индейцы не обратили внимания на поток беженцев из Европы… Теперь они живут в резервациях. 
PM MAIL   Вверх
Black
Дата 1.6.2005, 22:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Web-Development
**


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

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



GoodBoy
не бред :-)

Как говорит W3C - необходимо отделять контент страницы от таблиц, таблицы не для каркаса сайта, а для вывода табличных данных.
Сайт W3C - сделан на div'ах

А Cheba получает плюс.

Я сделал сайт на слоях и все работает, причем даже лучше чем на таблицах.

P.S: Каждое слово W3C имеет силу Божьей Заповеди !!!
Вы должны смотреть на всех, кто не использует XHTML, CSS и DIV, как на еретиков, которых надо сжечь на костре и чем раньше, тем лучше !!!

Слова не мои, а из одной статьи. Правда немного в другом контексте.


--------------------
Могу все, но ничего не умею :-)
PM WWW   Вверх
dm9
Дата 2.6.2005, 02:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Дмитрий Копытин
****


Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

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



Цитата(Cheba @ 1.6.2005, 11:03)
Прекрасный пример.
Не разберешся - поможем.


Помоги...

Попробуй вставить в среднюю ячейку картинку пикселей на 400 в ширину и поизменяй размер окна (поуменьшай) в разных браузерах. Тот же глюк на hunter.vingrad.ru. Эх, не всё хорошо в этих слоях...

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


Web-Development
**


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

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



dm9
да я уже разобрался.

Cheba хорошую ссылку дал. В закладки ее положил и на диск копию сохранил.

А hunter.vingrad.ru тоже хорошо сделан. У меня в FF 1.0.4 нормально отображается.


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


 




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


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

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