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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Плывут ячейки таблицы 
:(
    Опции темы
Aleshka
Дата 2.9.2008, 19:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 54
Регистрация: 10.12.2007
Где: Харьков

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



Сделал верстку сайта вроде бы все ничего. старался все делать divaми. Но в месте где выводится информация сделал таблицу, т.к как данные должны выводится в две колонки. Для этого в таблицу вставил  строку  через <tr> и разбил ее на ячейке. Две ячейки и между ними  пустая полоса (для красоты) . Все вроде было ничего но затем вставил елемент padding и все поехало колонки стали странным образом изменять свой размер причем во всех браузарах по разному.  Пробился пол дня ничего не получается. Вот пример как это выглядит СмВот как выглядит.  И вот вид самой таблицы. Выкладываю часть html, просто не уверен что нужна остальная часть если будет нужна выложу
Код

html:<tr> <td id="context_news">
    <div class="slave">
    Данные
    </div>
 </td>
      <td id="table_border"></td>

    <td id="context_page">
    <div class="master">Данные второй колонки</div>
    </td>
        </tr>
        </table> 
 Ниже привожу css
Код

#context_news{
    background-color:#97b1c4;
    width:230px;
    margin:0px;
   
}
#context_page{
    background-color:#71A5C9;
    width:530px;
    margin:0px;
    
}.slave{
    padding:1cm;
}
.master{
    padding:1cm;
}


Это сообщение отредактировал(а) Aleshka - 2.9.2008, 20:06
PM MAIL ICQ   Вверх
webster
Дата 2.9.2008, 20:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Паддинг - он прибавляется к заданной ширине элемента, т.е. элемент как бы становится еще шире, поэтому лучше использовать для отступов по горизонтали margin у вложенного элемента, а по-вертикали padding, у родителя.
PM MAIL   Вверх
Aleshka
Дата 3.9.2008, 08:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 54
Регистрация: 10.12.2007
Где: Харьков

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



Для начала я решил использовать padding не для таблицы, а для встроенного элемента. Это поправило проблему в firefox м и даже в opere, а вот в ie60. Проблема небольшая отсалась, там происходит сдвижка на 2px. Т.е если сдвигаю на 2px то в ie все отображается нормально, а вот в перечеслинных выше браузерах проблема естественно проявляется. 
Цитата

Паддинг - он прибавляется к заданной ширине элемента, т.е. элемент как бы становится еще шире, поэтому лучше использовать для отступов по горизонтали margin у вложенного элемента, а по-вертикали padding, у родителя.
 Сделал как Вы советовали результат тот же. Правда margin не очень подходит, т.к как использую при определенных условиях scroll, следовательно если я выставляю свойство css margin, то полоса прокрутки тоже смещается на размер  самого margina.

Это сообщение отредактировал(а) Aleshka - 3.9.2008, 08:47
PM MAIL ICQ   Вверх
kizune
Дата 3.9.2008, 09:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Код

<table>
    <tr> <td id="context_news">
    <div class="slave" align="center">
        <div class="slave_child">
            Данные
        </div>
    </div>
    </td>
    <td id="table_border"></td>
    <td id="context_page">
    <div class="master" align="center">
    <div class="master_child">
        Данные второй колонки
    </div>
    </div>
    </td>
    </tr>
    </table> 


Код

    #context_news{
    background-color:#97b1c4;
    width:230px;
    margin:0px;
   
}
#context_page{
    background-color:#71A5C9;
    width:530px;
    margin:0px;
    
}.slave_child{
width:210px;
text-align:left;

    
    
}
.master_child{
    width:510px;
    text-align:left;
}


а если добавить еще один вложенный элемент

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


 




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


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

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