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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Проценты от остатка 
:(
    Опции темы
Deadcow
Дата 8.11.2010, 13:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 51
Регистрация: 14.5.2008
Где: Москва

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



Подскажите пожалуйста... существует таблица в три строки, средняя фиксирована в пикселях, нужно, что бы первая и последняя строка занимали ровно по половине оставшегося пространства... Я сколько не работал, как то не вставало такой задачи, и думал выставление процентов автоматически высчитывается из остатка, но нет. Выставляю в первой и 3-й строке height=50% либо height=#, и первая строка занимает 50% экрана, а последняя остаток. Как сделать, что бы всё стояло ровненько? smile 
Спасибо заранее!
PM MAIL WWW Skype   Вверх
Rayled
Дата 8.11.2010, 14:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Deadcow, код ниже, правда там в IE 6 и 7 таблица уходит за экран на высоту средней ячейки. Могут помочь хаки-костыли. Да, и этот код для разметки страницы, если вам не для этого, то можно CSS немного укоротить.  А вообще интересно у вас получается - говорите правильно:
Цитата(Deadcow @  8.11.2010,  13:43 Найти цитируемый пост)
Выставляю в первой и 3-й строке height=50%

А делаете неправильно, видимо не для строки, а для ячейки, то есть не для TR, а для TD.  smile 
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тест</title>
<style type="text/css">
html, body {
 height: 100%;
 margin: 0px;
 background: #fff;
}
table {
 width: 800px;
 height: 100%;
 border-collapse: collapse;
 border: 1px #000 solid;
 margin: 0 auto;
}
td {
 vertical-align: top;
 border: 1px #000 solid;
}
#top {
 height: 50%;
}
#center {
 height: 100px;
}
#bottom {
 height: 50%;
}
</style>
</head>
<body>
<table>
<tr id="top"><td>111</td></tr>
<tr id="center"><td>2222</td></tr>
<tr id="bottom"><td>333</td></tr>
</table>
</body>
</html>

PM   Вверх
Deadcow
Дата 8.11.2010, 14:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 51
Регистрация: 14.5.2008
Где: Москва

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



Код

<table height="100%" width="100%">
    <tr height="50%" align=center valign=bottom class=sub>
        <td></td></tr>
    <tr align=center class=main>
        <td valign=top>
        </td>
    </tr>
    <tr height="50%" align=center valign=top class=sub>
        <td>
        </td>
    </tr>
</table>


Код

.main {
    background-color: #959595;
    height: 450;
    }
.sub {
    background-color: #D3D2D2;
    }


Прописывал именно в строке, конечно, а не в ячейке.

Добавлено через 6 минут и 21 секунду
Проверил, действительно, всё работало изначально у меня, как и у вас, но только в Опере и ИЕ. Проблема существует в ФФ, Хроме и Сафари. Можно ли кроссбраузерно решить эту проблему?
PM MAIL WWW Skype   Вверх
Rayled
Дата 8.11.2010, 15:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Цитата(Deadcow @  8.11.2010,  14:46 Найти цитируемый пост)
Прописывал именно в строке, конечно, а не в ячейке.

В спецификации HTML не существует атрибута height у TR и TABLE.

Цитата(Deadcow @  8.11.2010,  14:46 Найти цитируемый пост)
Проверил, действительно, всё работало изначально у меня, как и у вас, но только в Опере и ИЕ. Проблема существует в ФФ, Хроме и Сафари. Можно ли кроссбраузерно решить эту проблему? 

То есть мой пример у вас не работает? И в каких версиях браузеров, интересно? Например FF и Chrome.
PM   Вверх
Deadcow
Дата 8.11.2010, 15:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 51
Регистрация: 14.5.2008
Где: Москва

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



Цитата(Rayled @  8.11.2010,  15:00 Найти цитируемый пост)
В спецификации HTML не существует атрибута height у TR и TABLE.

Странно, конструкцию <table height="100%" width="100%"> я подсмотрел в учебнике (не официальная документация) и уже несколько лет использовал.. По крайней мере работает именно так, как должно.

Ваш пример я для наглядности немного подправил, вместо "#center { height: 100px;}" высоту поставил в 400 и прописал background-color:red; 
Видно, что красная ячейка начинается с середины экрана, а не располагается по центру.
Фаерфокс последний, родной, 3.6 версии, никакие установленные надстройки точно не могли как то повлиять на отображение страниц. 
Хромом я не пользуюсь, стоит последняя версия, для теста.

PM MAIL WWW Skype   Вверх
Rayled
Дата 8.11.2010, 15:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Цитата(Deadcow @  8.11.2010,  15:13 Найти цитируемый пост)
Странно, конструкцию <table height="100%" width="100%"> я подсмотрел в учебнике (не официальная документация)

Да, есть такое дело, но только для TABLE, причем в спеку не входит, хотя браузеры и понимают.
Цитата(Deadcow @  8.11.2010,  15:13 Найти цитируемый пост)
Видно, что красная ячейка начинается с середины экрана, а не располагается по центру.

Хм, действительно... Надо думать.
PM   Вверх
Deadcow
Дата 8.11.2010, 15:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 51
Регистрация: 14.5.2008
Где: Москва

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



Да уж... Из-за того, что разные браузеры понимают эту систему принципиально по разному, совершенно невозможно устроить хотя бы примерно нормальное отображение страницы.... В css я только недавно начал копаться, может быть можно как то эмулировать эту систему с помощью блоков div? 
PM MAIL WWW Skype   Вверх
Rayled
Дата 8.11.2010, 15:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Так, если заменить в TR height на max-height или min-height, то вроде все работает, но только не в IE 6 и 7...
PM   Вверх
Deadcow
Дата 8.11.2010, 15:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 51
Регистрация: 14.5.2008
Где: Москва

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



но как прописывать? Если минимальная высота может равняться нулю, а максимальная = неизвестное значение, но точно меньше 50%?
Насколько понимаю, значение max-height будет идентично height, то есть для нас никакой разницы не будет, что из этого использовать (это в случае, если помимо максимальной высоты не задан параметр высоты, в чем для нас, опять же, никакого смысла)...
Или я чего-то не понял? Вполне возможно, т.к. у меня уже мозги набекрень)))

Добавлено через 4 минуты и 14 секунд
Блин, ведь простецкая задача, но чертова кроссбраузерность как всегда всё портит))
PM MAIL WWW Skype   Вверх
Rayled
Дата 8.11.2010, 16:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Щас потестил, min-height вроде как более корректно работает, но все-равно чего-то не нравится мне все это...
PM   Вверх
Deadcow
Дата 8.11.2010, 16:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 51
Регистрация: 14.5.2008
Где: Москва

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



На одном сайте нашел сообщение о том, что на отображение может влиять doctype. 
Может быть вся редиска в PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN", и браузеры воспринимают проценты не правильно поэтому?
Я так глубоко не копал и в тип документа никогда не лез... может стоит)?
PM MAIL WWW Skype   Вверх
Rayled
Дата 8.11.2010, 16:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Доктайп может влиять, это да. Но я тестирую на том, который в примере наверху, то есть HTML 4.01 strict и та ж фигня. Так что не из-за этого, не в данном случае. Тут все из-за #$%# производителей браузеров, которые не могут согласованно действовать в плане понимания стандартов. Тк в спеках тоже не всегда все прозрачно написано, вот они и понимают такие моменты по-разному, нет бы #$@ договориться.
PM   Вверх
Deadcow
Дата 8.11.2010, 16:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 51
Регистрация: 14.5.2008
Где: Москва

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



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


 




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


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

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