VPF::Блоки с закругленными углами, фиксированый размер

4epT

Дата 3.11.2008, 21:07 (ссылка)

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

Загрузка ...

Опытный

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

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

Добрый вечер!

Вот кол HTML странички:

Код


<html>
    <head>
        <title>Index</title>
        <style type="text/css">
        .leftTop {background: transparent; width:100%; height:100%; margin:0 auto;}
        .leftTop h1, .leftTop p {margin:0 10px;}
        .leftTop h1 {font-size:2em; color:#000; letter-spacing:1px;}
        .leftTop p {padding-bottom:0.5em;}

        .leftTop .top, .leftTop .bottom {display:block; background:transparent; font-size:1px;}
        .leftTop .b1, .leftTop .b2, .leftTop .b3, .leftTop .b4, .leftTop .b5 {display:block; overflow:hidden; height:1px; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}
        .leftTop .b1 {margin:0 5px; background:#000;}
        .leftTop .b2 {margin:0 4px;}
        .leftTop .b3 {margin:0 3px;}
        .leftTop .b4 {margin:0 2px;}
        .leftTop .b5 {margin:0 1px;}

        .leftTop .boxcontent {display:block; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}
        </style>
    </head>
    <body style="width:100%; height:100%;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table border="0" style="width:100%; height:100%;">
        <tr style="width:100%; height:25%;">
            <td align="center" style="width:25%;">
                <div class="leftTop">
                <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b>
                <div class="boxcontent">
                <h1>leftTop Border</h1>
                </div>
                <b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
                </div>
            </td>
            <td align="center" style="width:50%;">
                <div class="leftTop">
                <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b>
                <div class="boxcontent">
                Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
                </div>
                <b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
                </div>
            </td>
            <td align="center" style="width:25%;">
                <div class="leftTop">
                <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b>
                <div class="boxcontent">
                <h1>leftTop Border</h1>
                </div>
                <b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
                </div>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    </body>
</html>

Он рисует в верху три блока с закругленными кроями ... Каким образом можно сделать чтобы каждый блок был фиксированого размера (высота и ширина, чтобы ее можно было задать) причем если в каком - то блоке ни текста ничего другого, то он тоже должен быть фиксированого размера .... Надеюсь понятно изложил вопрос )) Помогите пожалуйста ))

ksnk

Дата 3.11.2008, 22:33 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Самый, imho, кроссброузерный и короткий способ - применить фиксированный лейаут у таблицы

Строку 22 нужно заменить на

Код


    <table border="0" style="width:100%; height:100%;table-layout:fixed;">
    <col width="100px"><col width="auto"><col width="300px">

Тут, правда, приходится следить, чтобы текст ДЕЙСТВИТЕЛЬНО не вылезал за границы. А учитывая, что в FireFox есть фича - Ctrl+ - увеличивать размер шрифта по самое немогу - задача начинает относится к разряду принципиально нерешаемых smile

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

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