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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> высота дива, дивы, дивы, дивы 
:(
    Опции темы
yalo
Дата 6.2.2007, 12:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Как в подобном коде сделать так, чтобы блок lft2 по высоте занимал всю получающуюся высоту блока main:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>управление плавающими блоками</title>
<style type="text/css">
html {margin: 0px; padding: 0px; width: 100%; height: 100%;}
body { background: #C0A160;margin: 0px;padding: 10px;}
#glmain {  border: 1px solid #FF00FF; width: 983px;margin: 0px auto;}
#main { width: 983px; padding: 0px; border: 1px solid #FF00FF;float: left;height: auto;}
#lft1 { float: left; width: 30%;  border: 0px solid #FF0000 }
#lft3 { float: left; width: 35%; min-height: 350px; border: 1px solid #FFff00; }
#lft2 { float: left; width: 1px; height: 100%; border: 1px solid #FFff00; margin: 0px 15px; background: url(blspot.gif);}
</style>
</head>
<body>
<div id="glmain">
<div id="main">
    <div id="lft2"></div>
    <div id="lft1">нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br /></div>
    <div id="lft3">минимально-фиксированный блок по высоте</div>
</div></div>
</body>
</html>

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


Бывалый
*


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

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



А что требуется сделать? растянуть blspot.gif по высоте? однопиксельной ширины? Наверняка такой эффект можно сделать с помощью фона блока main 8)
--------------------
 Точка с запятой; 
PM MAIL   Вверх
mishaSL
Дата 6.2.2007, 20:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

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



Насколько я понял твою задачу, ты хочешь получить примерно это:
Код

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>управление плавающими блоками</title>
<style type="text/css">
html {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    }
body {
    background-color: #C0A160;
    margin: 0px;
    padding: 10px;
    }
div#main {
    width: 983px;
    padding: 0px;
    border: 1px solid #FF00FF;
    float: left;
    }
#lft1 {
    float: left;
    width: 30%;
    border: 0px solid #FF0000;
    }
#lft3 {
    float: left;
    width: 35%;
    min-height: 350px; //height:350px;
    border: 1px solid #FFff00;
    }
#lft2 {
    float: left;
    width: 5px;
    background-color: #FFff00;
    height: inherit;
    height: expression(document.getElementById('main').style.height);
    border: 1px solid #FFff00;
    margin: 0px 15px;
    }
</style>
</head>
<body>
<div id="main" style="height: 100%">
    <div id="lft2"></div>
    <div id="lft1">нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br /></div>
    <div id="lft3">минимально-фиксированный блок по высоте</div>
</div>
</body>
</html>


Единственное посмотри как это в Опере работает. В FF и IE все вроде нормально. smile  Желаю удачи в верстке без таблиц, только если ты не профи в этом деле, не надо ставить strict  smile 


--------------------
Лучший способ научиться программированию - это посмотреть как это делают другие...
PM MAIL   Вверх
yalo
Дата 7.2.2007, 07:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



mishaSL, примерно это я и хотела, за исключением двух нюансов:
1) потерялось центрирование относительно страницы блока main
2) Ваш код работает без указания доктайпа, если указывать любой доктайп, уже ничего не работает smile , этот момент, пожалуй, еще печальнее первого...

хотя было интересно узнать некоторые новые фишки smile 
может все-таки как-то можно еще решить мою проблему?
PM MAIL ICQ   Вверх
mishaSL
Дата 7.2.2007, 12:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

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



Чтобы избавиться от этих ньюансов можно сделать так: smile 
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>управление плавающими блоками</title>
<style type="text/css">
html {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    }
body {
    background-color: #C0A160;
    margin: 0px;
    padding: 10px;
    }
div#main {
    width: 983px;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #FF00FF;
    clear: both;
    }
#lft1 {
    float: left;
    width: 30%;
    border: 0px solid #FF0000;
    }
#lft3 {
    float: left;
    width: 35%;
    min-height: 350px; //height:350px;
    border: 1px solid #FFff00;
    }
#lft2 {
    float: left;
    width: 5px;
    background-color: #FFff00;
    height: inherit;
    height: expression(document.getElementById('main').style.height);
    border: 1px solid #FFff00;
    margin: 0px 15px;
    }
</style>
</head>
<body>
<div id="main" style="height: 500px">
    <div id="lft2"></div>
    <div id="lft1">нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br /></div>
    <div id="lft3">минимально-фиксированный блок по высоте</div>
</div>
</body>
</html>



Единственное но: если указывать doctype не получится указать высоту основного div-а 100%, а это бывает очень нужно во многих случаях.


--------------------
Лучший способ научиться программированию - это посмотреть как это делают другие...
PM MAIL   Вверх
SelenIT
Дата 7.2.2007, 13:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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



Цитата(mishaSL @  7.2.2007,  12:43 Найти цитируемый пост)
если указывать doctype не получится указать высоту основного div-а 100%

AFAIK, это заблуждение.

А вот зачем указывать doctype для XHTML при Content-type для HTML (в мете), для меня все-таки загадка... Если все равно планируется отдавать документ как HTML, нужно ли заморачиваться с X?


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
mishaSL
Дата 7.2.2007, 13:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

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



Цитата(SelenIT @  7.2.2007,  13:05 Найти цитируемый пост)
Цитата(mishaSL @  7.2.2007,  12:43 Найти цитируемый пост)
если указывать doctype не получится указать высоту основного div-а 100%

AFAIK, это заблуждение.


Это я и вправду наспех ответил.

Вот так:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=windows-1251" />
<title>управление плавающими блоками</title>
<style type="text/css">
html {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 99%;
    }
body {
    background-color: #C0A160;
    margin: 0px;
    padding: 0px;
    height: 99%;
    }
div#main {
    width: 983px;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #FF00FF;
    clear: both;
    }
#lft1 {
    float: left;
    width: 30%;
    border: 0px solid #FF0000;
    }
#lft3 {
    float: left;
    width: 35%;
    min-height: 350px; //height:350px;
    border: 1px solid #FFff00;
    }
#lft2 {
    float: left;
    width: 5px;
    background-color: #FFff00;
    height: inherit;
    height: expression(document.getElementById('main').style.height);
    border: 1px solid #FFff00;
    margin: 0px 15px;
    }
</style>
</head>
<body>
<div id="main" style="height: 100%">
    <div id="lft2"></div>
    <div id="lft1">нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br /></div>
    <div id="lft3">минимально-фиксированный блок по высоте</div>
</div>
</body>
</html>



Цитата(SelenIT @  7.2.2007,  13:05 Найти цитируемый пост)
А вот зачем указывать doctype для XHTML при Content-type для HTML (в мете), для меня все-таки загадка... Если все равно планируется отдавать документ как HTML, нужно ли заморачиваться с X? 



То что указано в мета (имею ввиду html или xhtml) не как не влияет на отображение.  
SelenIT, если не согласен то приведи пример. smile 




--------------------
Лучший способ научиться программированию - это посмотреть как это делают другие...
PM MAIL   Вверх
yalo
Дата 7.2.2007, 13:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



mishaSL, спасибо большое! теперь действительно работает. Удивительно прямо как мало стоило изменить, чтобы работало все также и с доктайпом, у меня почему-то никак не получалось внести поправки при доктайпе так, чтобы эффект был равнозначный, вывод: еще учиться и учиться!
PM MAIL ICQ   Вверх
mishaSL
Дата 7.2.2007, 13:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

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



Цитата(yalo @  7.2.2007,  13:36 Найти цитируемый пост)
вывод: еще учиться и учиться! 


Учение свет smile  smile 


--------------------
Лучший способ научиться программированию - это посмотреть как это делают другие...
PM MAIL   Вверх
SelenIT
Дата 7.2.2007, 14:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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



Цитата(mishaSL @  7.2.2007,  13:18 Найти цитируемый пост)
То что указано в мета (имею ввиду html или xhtml) не как не влияет на отображение.

На режим рендеринга точно не влияет, согласен. Кодировки может побить в некоторых браузерах...

Просто я не вижу логики в такой записи. Вначале гордо объявить на весь мир: "Смотрите, у меня тут крутейший, новейший и валиднейший XHTML!" а буквально через несколько строчек успокоить: "Ладно, я пошутил, на самом деле это просто HTML"? Вообще есть известное мнение, что делать xhtml есть смысл только тогда, когда планируется отдавать его с соотв. Content-Type'ом (application/xhtml+xml).

Если я чего-то недопонимаю - буду благодарен за разъяснения и освобождение от моих заблуждений... smile


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
mishaSL
Дата 7.2.2007, 16:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

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



Цитата(SelenIT @  7.2.2007,  14:16 Найти цитируемый пост)
Если я чего-то недопонимаю - буду благодарен за разъяснения и освобождение от моих заблуждений...


Понимаешь ты правильно, но не доконца.

Обычно я верстаю в xhtml и ставлю meta:
Код

    <meta http-equiv="content-type" content="text/html; charset=windows-1251" />

    <meta http-equiv="content-type" content="application/xhtml+xml; charset=windows-1251" />


Объясняю почему:

не все браузеры понимают второй meta-тег (с application/xhtml+xml;) к примеру IE6:
Код

Unfortunately, IE6 does not support application/xhtml+xml (in fact, it
does not support XHTML at all).


По-этому те браузеры которые понимают (application/xhtml+xml) переопределяют content-type c помощью следующего meta-тега. А те которые не понимают (к примеру IE6) - пользуются первым.

Вот так... smile 




--------------------
Лучший способ научиться программированию - это посмотреть как это делают другие...
PM MAIL   Вверх
SelenIT
Дата 7.2.2007, 17:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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



Цитата(mishaSL @  7.2.2007,  16:20 Найти цитируемый пост)
те браузеры которые понимают (application/xhtml+xml) переопределяют content-type c помощью следующего meta-тега.


mishaSL, Вы в этом уверены? Это подтверждается экспериментом? Просто у меня возникает ощущение, что или я не понимаю чего-то очевидного, или Вы не совсем понимаете, что такое Content-type... 


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
mishaSL
Дата 7.2.2007, 18:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

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



Цитата(SelenIT @  7.2.2007,  17:28 Найти цитируемый пост)
mishaSL, Вы в этом уверены? Это подтверждается экспериментом? Просто у меня возникает ощущение, что или я не понимаю чего-то очевидного, или Вы не совсем понимаете, что такое Content-type...  


Думаю мы говорим немного о разном...

meta-теги это рекомендации браузеру (которыми он пользуется крайне редко) и информация о странице. Там можно указать все что угодно. Любой браузер оперирует заголовками которые приходят ему от сервера. Если в заголовке указано что это страница (text/html) то она отображается как html это понимают все браузеры. Но с появлением xhtml появился каже content-type = application/xhtml+xml, это понимаю далеко не все браузеры. А что самое страшное это не понимает IE6, если в IE приходит заголовок content-type = application/xhtml+xml он предлагает сохранить эту страницу, в отличие от скажем FF который ее вполне корректно отображает. 

В доказательство моих слов делаем простой эксперимент c использованием PHP:

на первой странице(страница сохранена в utf-8) отправляем заголовки application/xhtml+xml и смотрим что получилось:

заметим что в мета-теге мы специально указали другой тип документа и даже другую кодировку

Код

<?
header('Content-type: application/xhtml+xml; charset=utf-8');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />

<title>управление плавающими блоками</title>

</head>
<body>
<div id="main" style="height: 100%">
    <div id="lft2"></div>
    <div id="lft1">нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br /></div>
    <div id="lft3">минимально-фиксированный блок по высоте</div>
</div>

</body>
</html>


Эта страница нормально отображается в FF и в Opere, а IE предлагает ее сохранить.

Если мы заменим заголовок на :
Код

<?
header('Content-type: text/html; charset=utf-8');
?>


то все будет отображаться точно также, только еще и в IE будет все нормально.

Указание мета-тегов на странице в любом случае необходимо. Как минимум для того чтобы когда пользователь сохранил эту страницу локольно (за исключение IE, т.к. он сам заменяет мета на необходимые) он мог без проблем ее посмотреть в той кодировке для которой она предусмотрена.




--------------------
Лучший способ научиться программированию - это посмотреть как это делают другие...
PM MAIL   Вверх
SelenIT
Дата 7.2.2007, 19:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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



mishaSL, спасибо за прекрасный эксперимент, но я так и не понял, где из него вытекает
Цитата(mishaSL @  7.2.2007,  16:20 Найти цитируемый пост)
те браузеры которые понимают (application/xhtml+xml) переопределяют content-type c помощью следующего meta-тега.

Или Вы ведете речь исключительно о кодировке?
Интересно также сделать намеренную ошибку в верстке (напр., незакрытый тег) и повторить эксперимент в FF.
Вообще у проблемы непонимания xhtml браузерами есть решение (была еще одна проблема у Оперы 7.2х, она будто бы понимала xhtml, но отказывалась исполнять JS в нем, но сейчас она к счастью давно утратила актуальность). Аргумент про локальное сохранение страницы, конечно, существенный, но все равно не понимаю, зачем для этого 2 взаимоисключащих меты...

P.S. Большая просьба к модераторам: разделите, пожалуйста, тему - спор о целесообразности <meta http-equiv="Content-type"> и взаимовлиянии стандарта, мета-тегов, режима интерпретации и режима рендеринга не имеют отношения к высоте дива, но, мне кажется, в ходе этой дискуссии может высплыть немало полезной информации...

Это сообщение отредактировал(а) SelenIT - 7.2.2007, 19:25


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
mishaSL
Дата 7.2.2007, 19:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

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



Цитата(SelenIT @  7.2.2007,  19:19 Найти цитируемый пост)
Интересно также сделать намеренную ошибку в верстке (напр., незакрытый тег) и повторить эксперимент в FF.


Соответственно FF анализирует XML код и выдаст ошибку. Если в этом примере заменить <div id="lft2"></div> на <div id="lft2">. ТО:
Код

Ошибка синтаксического анализа XML: несоответствующий тег. Ожидается: </div>. 
Адрес: http://localhost/test.php 
Строка 18, символ 3:</body>
--^


Добавлено @ 19:45 
Цитата(SelenIT @  7.2.2007,  19:19 Найти цитируемый пост)
Или Вы ведете речь исключительно о кодировке?


Речь идет о том что главное в мета-теге главное указать кодировку. При чем указать чтобы ее понял любой браузер, не зависимо от понимания xhtml и xml.

А суть этого эксперимента была в том:
Что мы пишем в мета-теге application/xhtml+xml или text/html. Это далеко не значит что мы указали браузеру как интерпритировать этот документ. 


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


 




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


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

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