VPF::Сужение div'a при его "наезде" на div слева

Sonar

Дата 24.3.2009, 22:48 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

Собственно проблему вы можете увидеть на http://new.jobinrussia.info/bb/

А именно элемент .tags содержит текст: облако тегов, и при изменении ширины окна это облако "сталкивается" с div'ом слева(картинка). При этом текст в облаке тегов должен сужаться по ширине окна(как это происходит в опере и фф), но в ИЕ он просто спрыгивает вниз, под картинку. Как решить эту проблему?

Вот код стиля для .tags и элементов внутри

Код


.tags
{
    max-width:300px;
    text-align:center;
    width:expression(document.body.clientWidth > 300? "300px": "auto" ); /* для IE6 */

}

.tags-title
{
    font-family:Tahoma;
    font-size:20px;
    text-align:center;
}

.tags-cloud
{
    font-family:Verdana;
    font-weight:bold;
    padding-top:10px;
}

А вот, собственно, html код с ключевыми элементами

Код


<![if !IE]><table id="content" cellpadding="0" cellspacing="0">
<tr><td align="right"><![endif]>
    <div id="left">
     <div class="post">
        <table cellpadding="0" cellspacing="0">
     <tr>
        <td colspan="2">
        <div class="post-title">Post title</div>
        </td>
        </tr>
        <tr>
        <td>
        <div class="post-pic">
            <div class="t">
            <div class="b">
            <div class="l">
            <div class="r">
             <div class="bl">
                <div class="br">
                <div class="tl">
                <div class="tr">
                    <img class="picture" src="images/bestbrend_08.jpg" height="423" width="563" />
                </div>
                </div>
                </div>
                </div>
            </div>
            </div>
         </div>
            </div>
        </div>
        </td>
        <td valign="top">
        <div class="rating"><a class="no-decor-white" href="#">+</a> 25 <a class="no-decor-white" href="#">-</a></div>
        </td>
        </tr>
        <tr>
        <td>
        <div class="post-footer">
         <div class="post-tags">Теги: <a class="no-decor-black" href="#">юмор</a></div>
            <div class="commentsdetails" align="right">
                <div class="details"><a class="no-decor-white" href="#">Подробнее</a></div>
             <div class="comments"><a class="no-decor-black" href="#">Комментариев: 38</a> / <a class="no-decor-black" href="#">Просмотров: 180</a> </div>
            </div>
        </div>
        </td>
        </tr>
        </table>
     </div>
    </div>
   <![if !IE]></td>
    <td style="vertical-align:top"><![endif]>
    <div id="right">
     <div class="tags">
         <div class="tags-title">Облако тегов</div>
         <div class="tags-cloud">
            строить больше мух музыка юмор религия разговор сознание пот топ кот код реструктуризация
         </div>
        </div>
    </div><![if !IE]></td>
</tr></table><![endif]>

Вот так это выглядит в ИЕ7
user posted image

А вот так я хочу
user posted image

liliana2

Дата 31.3.2009, 11:28 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

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

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

Задай у основного блока где все лежит, минимальную ширину, которая будт вмещать левый и правый блок без смещения, тогда при сужении окна будет появляться скролл и плыть ничего не будет (ие не понимает min-width, там используй хак)

webster

Дата 31.3.2009, 21:53 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

А зачем надо было делать разный вывод центральных колонок:

Код


<![if !IE]><table id="content" cellpadding="0" cellspacing="0">
<tr><td align="right"><![endif]>

Отсюда в ИЕ остались только плавающие блоки без жесткого табличного каркаса, который как-раз и делил столбец надвое с подобным эффектом - сужения колонок по контенту.

liliana2

Дата 1.4.2009, 05:33 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

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

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

Цитата(webster @ 31.3.2009, 21:53)

Табличный каркас не обязателен, можно сделать резиновую страницу, со всплывающими дивами, задав минимальную ширину основного контентного блока, использую яхак в стилях для ие, и все в шоколаде

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