VPF::empty-cells - Форум программистов

StayAtHome

Дата 14.12.2005, 02:06 (ссылка)

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

Загрузка ...

Домосед

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

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

Очередной раз пытаюсь сдизайнить домашнюю страничку smile

А поскольку веб-дизайнер из меня никакой, то использую только HTML+CSS (причем никаких DIVов, старый добрый Table). B вот захотелось мне сделать страничку без графики. Делаю такие хитрые таблички с рамочками... smile

Но вот беда: если в ячейке таблицы ничего нет, то ее рамка не отображается (хотя в стиле задал "solid").
Пробовал пихать в пустую ячейку   -- тогда высота ячейки увеличивается (а у меня есть и по 4px высотой).
Тогда решил совать туда однопиксельный GIF. Получается отлично, но противоречит моему задуму не использовать графику smile

Умный человек посоветовал делать так:

Код

table { empty-cells: show; }

Супер, но вот гребанный IE это дело игнорирует. Это он в принципе CSS2 не держит или только чтоб мне напакостить? smile

Что посоветуете? Как заставить браузер отображать рамку у пустой ячейки?
ЗЫ. Если кому интересно, промежуточный вариант страницы лежит тут: http://www.stayathome.ho.com.ua/

Ciber SLasH

Дата 14.12.2005, 13:46 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

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

Вставь перед </HEAD>:

Код

<script type='text/javascript'>
var emptyCellsHeight = "4px";  // нужная высота пустых ячеек
onload = function () {
var tables = document.getElementsByTagName("TABLE");

    for (var i = 0; i < tables.length; i++)
        for (var n = 0; n < tables[i].rows.length; n++)
            for (var m = 0; m < tables[i].rows[n].cells.length; m++)
                if (tables[i].rows[n].cells[m].innerHTML == '&nbsp;')
                    tables[i].rows[n].cells[m].style.lineHeight = emptyCellsHeight;
}
</script>

Добавлено @ 13:47
и в каждую пустую ячейку вписывай  

StayAtHome

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

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

Загрузка ...

Домосед

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

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

Угу, попробую. Только вот еще обстоятельство. Высота ячеек у меня задается в CSS через class, она разная для разных класов (от 2px до 4em)

Ciber SLasH

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

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

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

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

Тогда покажи CSS, в котором задаются размеры и HTML-код элемента, к которому применяется этот стиль.
Гадать не хочется...

StayAtHome

Дата 15.12.2005, 02:17 (ссылка)

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

Загрузка ...

Домосед

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

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

Почти получилось!

Код

<style>
table{
}
td {
  font-size: 1px;
  font-family: "Courier New", Courier, mono;
  border-width: 1px;
  border-color: #888888;
  border-style: none;
}
.ButtonText {
        text-align: center;
                                vertical-align: bottom;
        width: 8ex;
        height: 2.5ex;
        font-size: larger;
}
.ButtonBottomLeft {
        height: 6px;
        width: 4px;
        border-bottom-style: solid;
        border-left-style: solid;
}
.ButtonBottomMiddle {
        height: 4px;
        border-bottom-style: solid;
        border-left-style: none;
        width: 6px;
}
.ButtonBottomRight {
        height: 6px;
        width: 4px;
        border-right-style: solid;
        border-bottom-style: solid;
}
.ButtonTopRight {
        border-top-style: solid;
        border-right-style: solid;
}

Код

<table cellpadding="0" cellspacing="0">
    <tr>
      <td></td>
      <td class="ButtonText">старт</td>
      <td class="ButtonTopRight">&nbsp;</td>
    </tr>
    <tr>
      <td class="ButtonBottomLeft">&nbsp;</td>
      <td class="ButtonBottomMiddle">&nbsp;</td>
      <td class="ButtonBottomRight">&nbsp;</td>
    </tr>
  </table>

Тоько в Опере, блин нижняя строка таблиці где-то на 50% выше чем полагается (или в случае использования 1x1.gif) smile

Ciber SLasH

Дата 15.12.2005, 03:01 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

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

Вообще-то в твоём случае на для пустой ячейки (с  ) хватит указать в стилях свойство font-size для произвольной высоты ячейки.

А вообще как я понял из кода выше, ты пытаешься сделать подобие кнопки с помощью таблицы? Если да, то это называется забивать гвозди отбойным молотком — можно было бы гораздо проще сделать...

R.M.

Дата 15.12.2005, 03:08 (ссылка)

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

Загрузка ...

Анархист

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

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

Цитата(Ciber @ 15.12.2005, 04:01)

забивать гвозди отбойным молотком

Добавлено @ 03:12
ты чтото вобще сверхестественное твориш, тоже самое можно сделать так

Код


.button {border: 1px solid black; background-color: white; color: black;}

Добавлено @ 03:17
Или если ты нехочеш выделения кнопки то так

Код


.button {border: 0px; color: black; background-color: white;}
TABLE {border-collapse: collapse;}
TD {border: 1px solid black;}

Код


<table>
<tr>
<td><input type=submit class=button></td>
</tr>
</table>

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

Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia

Ciber SLasH

Дата 15.12.2005, 03:41 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

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

Цитата

Или если ты нехочеш выделения кнопки то так

То вот так:

Код

<html>
<head>
<meta http-equiv="MSThemeCompatible" content='No'>
<style type='text/css'>
button {border: 1px solid black; background: white}
</style>
</head>

<body>
<button onClick='void(0)'>Button</button>
</body>
</html>

StayAtHome

Дата 15.12.2005, 03:47 (ссылка)

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

Загрузка ...

Домосед

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

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

Касательно отбойного молотка -- ну вот интересно мне такого эффекта добиться! Можно проще без рисунков? smile

Касательно CSS -- чайник я, всего пару дней как серьезно начал изучать.
Касательно кнопки -- там фишка вся в том, что у нее рамка должна быть не сплошная . smile

Это сообщение отредактировал(а) StayAtHome - 15.12.2005, 03:52

Ciber SLasH

Дата 15.12.2005, 03:54 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

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

Дык рамки задаются так:
border-top, border-right, border-bottom, border-left.
Вот и делай бордюр там, где тебе нужно, а где не нужно просто не задавай.

Для примера:

Код

<html>
<head>
<meta http-equiv="MSThemeCompatible" content='No'>
<style type='text/css'>
button {
    border-top: 2px solid red;
    border-right: 2px solid red;
    border-bottom: 2px solid red;
    border-left-style: none;
    background: white
}
</style>
</head>
<body>
<button onClick='alert("Не баловайся :)")' onFocus='this.blur()'>Button</button>
</body>
</html>

StayAtHome

Дата 15.12.2005, 04:07 (ссылка)

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

Загрузка ...

Домосед

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

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

Все равно ты меня не понял. Если б все было так просто. smile

Ты мой код видел в браузере? Или на страничку заглядывал?

R.M.

Дата 15.12.2005, 04:12 (ссылка)

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

Загрузка ...

Анархист

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

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

StayAtHome
Я думал ты гдето сглючил а оказываеца задумано не делать четверть рамки.....
А вообще непонимаю откуда принцип "не юзать картинки"?? Мне кажется без них или извращаца (как ты) или всё будет выглядеть стрёмно. ИМХО меняй принципы smile

Добавлено @ 04:15
Сунул в бэкграунд рамку и ок

Ciber SLasH
Сам не баловайся smile

Цитата(Ciber @ 15.12.2005, 04:41)

То вот так:

кликаеш на кнопку и выделяется кнопка дополнительным бэкграундом (ИЕ)

Это сообщение отредактировал(а) Куксикус - 15.12.2005, 04:17

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

StayAtHome

Дата 15.12.2005, 04:19 (ссылка)

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

Загрузка ...

Домосед

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

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

Куксикус
Да по приколу мне! smile

Я там и градиент наваял без картинок! smile

Только опять - Опера и Лис его нормально рисуют, а Осел не растягивает по высоте smile

Это сообщение отредактировал(а) StayAtHome - 15.12.2005, 04:23

R.M.

Дата 15.12.2005, 04:35 (ссылка)

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

Загрузка ...

Анархист

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

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

StayAtHome

Цитата(StayAtHome @ 15.12.2005, 05:19)

Я там и градиент наваял без картинок!

покажи

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

StayAtHome

Дата 15.12.2005, 04:40 (ссылка)

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

Загрузка ...

Домосед

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

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

Дык я уже показывал : http://www.stayathome.ho.com.ua/ smile

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