VPF::Проблема с ячейками в таблице - Форум программистов

korisarimi

Дата 29.10.2006, 10:12 (ссылка)

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

Загрузка ...

Шустрый

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

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

Нужно сделать таблицу, как на прикрепленном рисунке.

Что-то я пробовал вот так:

Код


<table>
 <tr style="background-color:#993333; height:40px;">
    <td width="5">&nbsp;</td>
    <td width="100" style="background-color:#CCCCCC; text-align:center; width:"><a href="a" style="color:#993333">О предприятии</a></td>
    <td width="100">Контакты</td>
    <td>Прайс-лист</td>
  </tr></table>

Не получается

Присоединённый файл ( Кол-во скачиваний: 12 )

head.jpg 3,22 Kb

griker

Дата 29.10.2006, 10:52 (ссылка)

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

Загрузка ...

MDMA

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

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

Вот так будит лучше smile

Код


<style>
td {font-size: 10pt; color: ffffff}
</style>
<table width="100%" cellspacing="0">
   <tr style="background-color:#993333; height:30px;">
      <td width="5">&nbsp;</td>
      <td width="100" style="background-color:#CCCCCC; text-align:center; width:"><a href="a" style="color:#993333">О предприятии</a></td>
      <td width="100" align="center">Контакты</td>
      <td>Прайс-лист</td>
   </tr>
</table>

Это сообщение отредактировал(а) griker - 29.10.2006, 11:26

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

I don't respect police

SelenIT

Дата 29.10.2006, 12:50 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

Предлагаю "радикальный" вариант:

Код


<style type="text/css">
#menu { 
  float: left;
  font-family: tahoma, sans-serif;
  font-size: 76%;
  background-color:#933;
  width: 100%;
  border-top: #f80 1px solid;
  border-bottom: #f80 2px solid;
  margin: 0;
  padding: 0; }
#menu li {
  float: left;
  margin: 0 -2px 0 8px;
  padding: 5px;
  list-style-type: none;
  display: inline; /* "лекарство" от удвоения марджинов для IE */ }
#menu li#act {
  background-color:#ccc;
  padding: 6px 5px 7px;
  position: relative;
  top: -1px;
  margin-bottom: -3px;
}
#menu a {
  color: #fff;
  text-decoration: none; }
#menu li#act a {
  color:#933;
  text-decoration: underline; }
</style>
<!--  ...  -->
<ul id="menu">
   <li id="act"><a href="#">О предприятии</a></li>
   <li><a href="#">Контакты</a></li>
   <li><a href="#">Прайс-лист</a></li>
</ul>

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Guedda

Дата 29.10.2006, 13:07 (ссылка)

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

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

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

Цитата(SelenIT @ 29.10.2006, 13:50

)

Предлагаю "радикальный" вариант:

Это слишком сложный вариант. Я думаю, что лучше подойдёт вариант griker.

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

Ll 2

korisarimi

Дата 29.10.2006, 13:14 (ссылка)

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

Загрузка ...

Шустрый

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

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

SelenIT, Решение интересное, но боюсь заказчик не поймет...

Мне нужно таблицой бы.

Но за решение спасибо! Навела на позитивные мысли

Вопрос такой почему?:

Код


<table>
<tr style="border-top: #f80 1px solid">
<td>ascascasccs</td>
</tr>
</table>

не работает?

А вот так:

Код


<style>
#center td{border-top: #f80 1px solid}
</style>

<table>
<tr id="center">
<td>ascascasccs</td>
</tr>
</table>

Работает...

Почему?

SelenIT

Дата 29.10.2006, 14:23 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

korisarimi, в первом случае стиль применяется к tr, во втором - к td. Если у таблицы стоит border=0, то border от tr, видимо, "схлопывается" вместе с border-ами ячеек и потому невидим, а при отдельном указании стиля для самих ячеек он перекрывает умолчательное значение для всей таблицы (как я это понимаю)...

P.S. А почему заказчик не поймет варианта без таблицы?

Это сообщение отредактировал(а) SelenIT - 29.10.2006, 14:27

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

korisarimi

Дата 29.10.2006, 14:37 (ссылка)

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

Загрузка ...

Шустрый

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

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

Как уже писал Guedda, слишком сложный вариант.

И еще один вопрос, код который написал griker, работает.
Но стоит добавить сверху шапку(jpg рисунок), как все съезжает

другими словами
так работает

Код


<style>
td {font-size: 10pt; color: ffffff}
</style>
<table width="100%" cellspacing="0">
   <tr style="background-color:#993333; height:30px;">
      <td width="5">&nbsp;</td>
      <td width="100" style="background-color:#CCCCCC; text-align:center; width:"><a href="a" style="color:#993333">О предприятии</a></td>
      <td width="100" align="center">Контакты</td>
      <td>Прайс-лист</td>
   </tr>
</table>

А так, все съезжает, выравнивается по центру...

Код


<style>
td {font-size: 10pt; color: ffffff}
</style>
<table width="100%"  cellspacing="0px" cellpadding="0px">
  <tr>
    <td colspan="6"><img src="images/head.jpg" width="100%"></td>
  </tr>
  <tr style="background-color:#993333; height:30px;">
      <td width="5">&nbsp;</td>
      <td width="100" style="background-color:#CCCCCC; text-align:center; width:"><a href="a" style="color:#993333">О предприятии</a></td>
      <td width="100" align="center">Контакты</td>
      <td>Прайс-лист</td>
   </tr>

Почему так

Это сообщение отредактировал(а) korisarimi - 29.10.2006, 14:39

SelenIT

Дата 29.10.2006, 14:44 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

colspan="6", а столбцов только 4 - может, поэтому? Обязательно ли вообще лепить все - и шапку, и меню - в 1 таблицу?

А что касается сложности... по-моему, отлаживать косяки в сложной таблице с rowspan-ами и colspan-ами гораздо сложнее, чем вносить изменения в CSS при элементарной верстке - но это исключительно ИМХО)

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

korisarimi

Дата 29.10.2006, 15:01 (ссылка)

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

Загрузка ...

Шустрый

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

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

А что такое элементарная верстка?

SelenIT

Дата 29.10.2006, 15:07 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

Я имел в виду, что от сложности в любом случае никуда не уйти, просто в одном случае она вся останется в HTML (в пределе - по отдельной ячейке таблицы для каждого отступа/черты и т.п.), а в другом случае HTML будет простейшим до неприличия (как мой список:), но появятся нетривиальные стили, выносимые в отдельный CSS. И по моему субъективному мнению отлаживать второй вариант все-таки проще, чем первый)

korisarimi

Дата 29.10.2006, 15:15 (ссылка)

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

Загрузка ...

Шустрый

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

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

Я понял твою идею.

Всем спасибо за помощь.

Вопрос решен!!

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