VPF::Комбинация float и min-width - Форум программистов

Stampede

Дата 9.7.2008, 23:04 (ссылка)

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

Загрузка ...

Гносеолог

Профиль
Группа: Участник Клуба
Сообщений: 963
Регистрация: 25.4.2005
Где: Calgary, Alberta, Canada

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

Всем привет!

Ситуация такая: есть примитивнейший ХТМЛ-код, который дает примерно вот такую картинку:

user posted image

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

К сожалению, при коротком тексте подписи закладка получается слишком маленькая, некрасивая. Пробуем исправить при помощи свойства width="80px" для внутреннего элемента:

user posted image

Уже получше, но длинная подпись вылезает за края. И это естественно, потому что для таких случаев надо использовать свойство min-width и делать подработку напильником для IE6. Это, собственно, именно то, с чего я начинал и обо что споткнулся. Потому что, как оказалось, в FF при этом ломается выравнивание текста, а в Опере вообще все съезжает к едрене фене:

user posted image

Потыкать страницу вживую можно вот здесь: http://bfigeiro.googlepages.com/min-width.html, а ее исходный текст выглядит вот так:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN">

<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

#top {
    position: relative;
    height: 80px;
    border: 1px solid yellow;
}

#tabs {
    position: absolute;
    bottom: 0px;
    right: 0px;
    border: 1px solid blue;;
}

#tabs div {
    float: left;
    bottom: 0px;
    left: 0px;
    margin-bottom: 10px;
    border: 1px solid red;
}

#tabs div a {
    display: block;
    min-width: 80px;
    text-align: center;
    padding: 2px 10px;
}
</style>

<script type="text/javascript" language="javascript">
</script>

</head>

<body>

<div id="top">
    <div id="tabs">
        <div><a href="">Tab1</a></div>
        <div><a href="">Tab2</a></div>
        <div><a href="">Internationalization</a></div>
    </div>
</div>

<div style="position: relative; clear: both;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean molestie consequat pede. Proin pede. Suspendisse potenti. Fusce a justo nec sem cursus aliquet. Integer egestas viverra sem. Pellentesque erat. Sed et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi eget risus a lectus euismod semper. Nullam imperdiet, purus in elementum varius, eros mauris facilisis neque, in pharetra pede mauris sit amet lacus. Integer id leo vel quam suscipit viverra. Vestibulum non tortor non sapien accumsan egestas.
</div>

</body>

</html>

Есть у кого-нибудь идеи, как побороть? Глюк хотя и не особо критичный, но досадный. Одного времени сколько схавал, зараза :(

Как обычно, вопрос из разряда "плюсоперспективных" smile

--------------------

"If you want something done right, do it yourself"
По секрету: выучить английский - реально!

webster

Дата 10.7.2008, 00:42 (ссылка)

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

Загрузка ...

Опытный

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

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

Если известна величина самого большого слова на закладке, то удобнее использовать размеры в em, к тому же они масштабируются вместе с текстом, при увеличении размера шрифта в IE6. А так же, если не является обязательным вопрос о наведении точно на текст ссылки закладки, а допустимо наведение мыши на всю область закладки (что является наиболее удобным вариантом для пользователя), то можно даже несколько упростить запись условия:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

#top {
    position: relative;
    height: 80px;
    border: 1px solid yellow;
}

#tabs {
    position: absolute;
    bottom: 0px;
    right: 0px;
    border: 1px solid blue;;
}

#tabs a {
    display: block;
    border: 1px solid red;
    float: left;
    width: 10em;
    line-height: 2em;
    text-align: center;
}
#tabs a:hover {text-decoration: none;}
</style>

<script type="text/javascript" language="javascript">
</script>

</head>

<body>

<div id="top">
    <div id="tabs">
        <a href="">Tab1</a>
        <a href="">Tab2</a>
        <a href="">Internationalization</a>
    </div>
</div>

<div style="position: relative; clear: both;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean molestie consequat pede. Proin pede. Suspendisse potenti. Fusce a justo nec sem cursus aliquet. Integer egestas viverra sem. Pellentesque erat. Sed et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi eget risus a lectus euismod semper. Nullam imperdiet, purus in elementum varius, eros mauris facilisis neque, in pharetra pede mauris sit amet lacus. Integer id leo vel quam suscipit viverra. Vestibulum non tortor non sapien accumsan egestas.
</div>

</body>

</html>

Дальнейшее усовершенствования кода может коснуться только размеров закладок, можно сделать несколько меньший (усредненный) базовый размер:

Код


#tabs a {
    display: block;
    border: 1px solid red;
    float: left;
    min-width: 5em;
    padding: 0em 1em;
    line-height: 2em;
    text-align: center;
}
* html #tabs a {width: 5em;}
*+html #tabs a {width: auto;}

и здесь потребуются хаки только для IE6, который "не понимает" свойства min-width и IE7, чтобы устранить фикстированное значение ширины, как для IE6. Одно условие правильной отработки пары этих хаков - это корректно записанный DOCTYPE:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Это сообщение отредактировал(а) webster - 10.7.2008, 01:03

Stampede

Дата 10.7.2008, 02:03 (ссылка)

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

Загрузка ...

Гносеолог

Профиль
Группа: Участник Клуба
Сообщений: 963
Регистрация: 25.4.2005
Где: Calgary, Alberta, Canada

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

Увы, чуда не произошло. Как только мы изменили запись с "width: 10em" на "min-width: 5em" (стр. соответственно 26 и 5 в ваших сниппетах), сразу же все и сломалось, как и было в моем исходном варианте.

--------------------

"If you want something done right, do it yourself"
По секрету: выучить английский - реально!

webster

Дата 10.7.2008, 02:27 (ссылка)

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

Загрузка ...

Опытный

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

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

Хорошо, тогда можно использовать ширину блока с закладками, равную 100% (все-равно она абсолютнопозиционирована и не влияет на другие элементы), а сами закладки сделать плавающими по правому краю (только придется изменить порядок следования их в коде HTML на обратный):

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

#top {
    position: relative;
    height: 80px;
    border: 1px solid yellow;
}

#tabs {
    width: 100%;
    position: absolute;
    bottom: 0px;
    right: 0px;
    border: 1px solid blue;;
}

#tabs a {
    display: block;
    border: 1px solid red;
    float: right;
    min-width: 5em;
    padding: 0em 1em;
    line-height: 2em;
    text-align: center;
}
* html #tabs a {width: 5em;}
*+html #tabs a {width: auto;}
#tabs a:hover {text-decoration: none;}
</style>

<script type="text/javascript" language="javascript">
</script>

</head>

<body>

<div id="top">
    <div id="tabs">
        <a href="">Internationalization</a>
        <a href="">Tab2</a>
        <a href="">Tab1</a>
    </div>
</div>

<div style="position: relative; clear: both;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean molestie consequat pede. Proin pede. Suspendisse potenti. Fusce a justo nec sem cursus aliquet. Integer egestas viverra sem. Pellentesque erat. Sed et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi eget risus a lectus euismod semper. Nullam imperdiet, purus in elementum varius, eros mauris facilisis neque, in pharetra pede mauris sit amet lacus. Integer id leo vel quam suscipit viverra. Vestibulum non tortor non sapien accumsan egestas.
</div>

</body>

</html>

Это сообщение отредактировал(а) webster - 10.7.2008, 03:09

Stampede

Дата 10.7.2008, 08:06 (ссылка)

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

Загрузка ...

Гносеолог

Профиль
Группа: Участник Клуба
Сообщений: 963
Регистрация: 25.4.2005
Где: Calgary, Alberta, Canada

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

Да, webster, что называется, не мытьем так катаньем smile

Ну что ж, как воркэраунд действительно сгодится. Получи заслуженного плюса!

Это сообщение отредактировал(а) Stampede - 10.7.2008, 08:08

--------------------

"If you want something done right, do it yourself"
По секрету: выучить английский - реально!

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