Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Rowspan и иже с ним...


Автор: ПашкаКорчагин 9.2.2008, 17:39
Не знаю как разрешить проблему... надеюсь кто-то подскажет решение.. вот небольшой пример кода

Код

<table border=1 cellspacing=0 cellpadding=0>
     <tr >
          <td style="height:40px; width:200px; vertical-align:top;" >
          <p  align=center >Should be fixed</p>
          </td>

          <td colspan=2 rowspan=2 style="vertical-align:top;">
          <p>&nbsp; </p>
          <p align=center> Resizable</p>
          <p>&nbsp;</p>
          <p>&nbsp; </p>
          <p>&nbsp; </p>  
          <p>&nbsp; </p>  
          <p>&nbsp; </p>  
          <p>&nbsp; </p>
          <p>&nbsp; </p>
          <p>&nbsp; </p>
          </td>
     </tr>

     <tr >
          <td style="vertical-align:top;">
          <p  align=center >Placeholder</p>
          </td>
     </tr>
</table>


Поле "Should be fixed"  я попытался  зафиксировать по высоте и ширине - однако ни фига! Чем больше текста пишется в поле Resizable- тем длиннее в высоту растягивается поле "Should be fixed" . А мне нужен маленький неменяющийся прямоугольникв этом месте...

HELP: Что делать?

Автор: WebDisaster 10.2.2008, 08:42
А такой вариант получения "маленького прямоугольничка" не рассматривали?

<tr >
          <td>
                        <p style="height:40px; width:200px; vertical-align:top; background-color:#CCCCCC; text-align:center">Should be fixed</p>
          </td>

          <td colspan=2 rowspan=2 style="vertical-align:top;">

И нужна ли вообще эта таблица?

Автор: ПашкаКорчагин 10.2.2008, 10:03
Цитата(WebDisaster @ 10.2.2008,  08:42)
А такой вариант получения "маленького прямоугольничка" не рассматривали?

<tr >
          <td>
                        <p style="height:40px; width:200px; vertical-align:top; background-color:#CCCCCC; text-align:center">Should be fixed</p>
          </td>

          <td colspan=2 rowspan=2 style="vertical-align:top;">

И нужна ли вообще эта таблица?

это не решает проблему... 
Код

          <td>
                        <p style="height:40px; width:200px; vertical-align:top; background-color:#CCCCCC; text-align:center">Should be fixed</p>
          </td>

эта ячейка будет ресайзиться вместе с Resizable
 а мне нужно что бы размер менял только Placeholder

Добавлено через 3 минуты и 2 секунды
таблицу пользую так как нужно чтобы размер Should be fixed+Placeholder  был равен размеру Resizable

Автор: WebDisaster 10.2.2008, 13:04
Цитата(ПашкаКорчагин @  10.2.2008,  10:03 Найти цитируемый пост)
1) таблицу пользую так как 2) нужно чтобы размер Should be fixed+Placeholder  был равен размеру Resizable 

Не вижу связи первого со вторым. Я бы эту задачу решал div'ами. Если, конечно, я её правильно понял (что не видя макета не так просто).

Код

<!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">
div#outer {
    float: left;
    background-color:#FFC;
    width: 100%;
}
div#container {
    width: 200px;
    float: left;
}
div#placeholder {
    border-top: 1px solid #f00;
}
div#should_be_fixed {
    height: 40px;
}
div#resizable {
    margin-left: 200px;
    background-color:#C90;
}
</style>
</head>

<body>
<div id="outer">
    <div id="container">
        <div id"should_be_fixed">
            <p>Should be fixed</p>
        </div>
        <div id="placeholder">
            <p>Placeholder</p>
        </div>    
    </div>
    <div id="resizable">
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
    </div>
</div>
</body>
</html>

Автор: ПашкаКорчагин 10.2.2008, 13:23
немного подправил стили (мне нужно чтобы размер placeholder динамически .. в зависимости от размера resizable)... в принципе подходить... но... всегда есть но...в Мозиле не работает
Код


<!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">
div#outer {
    float: left;
    background-color:#FFC;
    width: 100%;
    display:table-row;
}
div#container {
    width: 200px;
    float: left;
    display:table-column;
}
div#placeholder {
    border-top: 1px solid #f00;
}
div#should_be_fixed {
    height: 40px;
}
div#resizable {
    margin-left: 200px;
    background-color:#C90;
    display:table-column;
}
</style>
</head>
<body>
<div id="outer">
    <div id="container">
        <div id"should_be_fixed">
            <p>Should be fixed</p>
        </div>
        <div id="placeholder">
            <p>Placeholder</p>
        </div>    
    </div>
    <div id="resizable">
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
        <p>Resizable</p>
    </div>
</div>
</body>
</html>

Автор: WebDisaster 10.2.2008, 14:04
Ну до того, как Вы "поправили" в Мозиле это работало тоже. Ещё раз  повторяю, что мне тупо нужно видеть макет, иначе я не понимаю, в чём смысл всех Ваших поправок в коде.

Автор: ПашкаКорчагин 11.2.2008, 10:32
Возможно это поможет...
собственно то что пытаюсь сделать...
Should be fixed- синий header... c закругленными углами
Placeholder  - место для формы
 Resizable- DataTable

Автор: NDenis 11.2.2008, 15:40
Цитата(ПашкаКорчагин @  10.2.2008,  13:23 Найти цитируемый пост)
немного подправил стили 

а зачем вы вставляли display:table-column;??
без этого (то что WebDisaster выложил) работает на ура

Автор: WebDisaster 11.2.2008, 17:57
ПашкаКорчагин,  ширина блока "Data Table" фиксированная или...? Чему она должна быть равна? Высота имеет значение? Бордеры должны быть именно такими (т.е. с промежутком между левой и правой колонкой)?

Автор: ПашкаКорчагин 12.2.2008, 09:52
ширина Data Table не фиксированная... висота 100%... бордеры именно такие

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)