Таблица с текстом и картинками в ячейках

Сообщений: 8

Репутация: 0

Сообщение # 1 | 02:43:48 01 Июн 2013

Здравствуйте.
Неделю назад начал писать новый дизайн для своего сайта.
Столкнулся с проблемой, когда создаешь таблицу с текстом в одной ячейке и с рисунком в другой, то ячейка с текстом начинает съезжать вниз за пределы границы. (смотрите на скрине). Еще, что странно, не работает border="1" и align="center" для таблицы

Вот HTML код:

Код

<div id="blocChat">
                   <table border="1"><tr>
                        <td width="90"><img src="images/cska.png" /></td>
                        <td width="90" height="114">тест,<br/>почему-то текст съезжает вниз</td>
                        <td width="90">тест</td>
                   </tr></table>
               </div>

Вот CSS код:

Код

#blocChat {
      Width:509px;
      Height:250px;
      background-color: #b6b6b6;
      border-radius: 7px;
      position: relative;
      box-shadow: 0 0 7px;
      outline: 0px solid #00cccc;
}

В чем может быть проблема? Помогите пожалуйста help

Новости ЦСКА

Сообщение отредактировал webanet - Суббота, 01 Июн 2013, 14:16:00

Rad_van_Cor

Сообщений: 1179

Репутация: 437

Сообщение # 2 | 03:49:23 01 Июн 2013

Цитата (chebocsary)

В чем может быть проблема? Помогите пожалуйста

ячекам задай id и пропиши vertical-align:top

Это в CSS

Код

#t1 {border:0px;}
#t1_td1 {width:90px;vertical-align:top;text-align:center;}

Это HTML

Код

<table id="t1" ><tr>
<td id="t1_td1" ><img src="images/cska.png" /></td>
<td id="t1_td1">тест,<br/>почему-то текст съезжает вниз</td>
<td id="t1_td1">тест</td>
</tr></table>

fflesh

Сообщений: 1784

Репутация: 1314

Сообщение # 3 | 07:15:09 01 Июн 2013

chebocsary,

Код

table.t1b{border:1px solid #00F;}
table.t1b td{vertical-align:top;}

Код

<table class="t1b"><tr>
<td><img src="/images/cska.png" /></td>
<td>тест,<br/>почему-то текст съезжает вниз</td>
<td>тест</td>
</tr></table>

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8

GeR@In

Сообщений: 141

Репутация: 19

Сообщение # 4 | 11:38:20 01 Июн 2013

или ещё достаточно добавить в тег td атрибут top, пример:

Код

Более 100 бесплатных, внешних ссылок на ваш сайт. подробности

Rad_van_Cor

Сообщений: 1179

Репутация: 437

Сообщение # 5 | 11:59:04 01 Июн 2013

Цитата (GeR@In)

или ещё достаточно добавить в тег td атрибут top, пример:

не знаю, как по мне бред прописывать стили типа: valign="top" color="red" width="100px" итд...
Лучше написать таr - style="valign:top;color:#ff0000;width:100px;"

По сути разницы думаю нет, но второй вариант как то современнее что ли. Не знаю.

Страница 1 из 1 1
Модератор форума: Yuri_G