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

R.M.

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

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

Загрузка ...

Анархист

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

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

Понятно

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

Ciber SLasH

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

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

Загрузка ...

Эксперт

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

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

Так бы сразу и сказал, что тебе нужен градиент для фона.
Тогда можно сделать примерно так:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type='text/javascript'>
onload = function () {
var grad = document.getElementById("gradient");
var r,g,b;
var ClientWidth, ClientHeight;

    if (self.innerHeight) {
        ClientWidth = self.innerWidth;
        ClientHeight = self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight) {
        ClientWidth = document.documentElement.clientWidth;
        ClientHeight = document.documentElement.clientHeight;
    }
    else if (document.body) {
        ClientWidth = document.body.clientWidth;
        ClientHeight = document.body.clientHeight;
    }

var step = Math.round(ClientHeight / (0xFF - 0xB0));

    grad.style.height = ClientHeight;
    for (var i = 0xFF; i > 0xB0; i--) {
        r = i-0xA;
        g = i-0x5;
        b = i;
        var elem = document.createElement("DIV");
        elem.style.width = ClientWidth + "px";
        elem.style.height = step + "px";
        elem.style.backgroundColor = 'rgb(' +r+ ', ' +g+ ', ' +b+ ')';
        grad.appendChild(elem);
    }
}
</script>
<style type='text/css'>
body {margin: 0; padding: 0}
#gradient {position: absolute; z-index: 0; font-size: 1px; overflow: hidden}
#main {position: absolute; z-index: 1; padding: 1em}
</style>
</head>

<body>
<div id='gradient'></div>
<div id='main'>
Здесь контент
</div>
</body>
</html>

А вообще, вот градиент на все случаи жизни, для любых элементов, кроссбраузерный: http://slayeroffice.com/code/gradient/

StayAtHome

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

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

Загрузка ...

Домосед

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

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

Ciber SLasH
smile

Пасиб. Только он прри изменениии размеров окна не перерисовывается. Можно?
А то что на : http://slayeroffice.com/code/gradient/ -- эт уж перебор. smile

StayAtHome

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

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

Загрузка ...

Домосед

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

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

Остановился на таком варианте:

Код


<html>
<style>
#bg{
      font-size: 1px;
      overflow: hidden;
      position: absolute;
                              float: left;
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      z-index: 1;
   border:1px solid white;
}
.g
{
font-size:2px;
}
</style>
<body topmargin="0" leftmargin="0">
<div id="bg">
      <script language="JavaScript" type="text/javascript">
              document.write('<table cellpadding="0" cellspacing="0" width="100%" height="100%">');
              for(i=0xFF;i>0xB0;i--){
                r=i-0xA; g=i-0x5; b=i;
              document.write('<tr style=" background-color: RGB(' + r + ', ' + g + ', ' + b + ');"><td class="g">&nbsp</td></tr>');
              };
              document.write('</table>');
      </script>
</div>
</body>
</html>

Ciber SLasH

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

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

Загрузка ...

Эксперт

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

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

А по мне так вот такой вариант самый лучший, и лёгкий:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<meta name="Generator" content='EditPlus 2.20.211'>
<meta name="Author" content='Ciber SLasH'>
<script type='text/javascript'>
function doBK() {
var obj = document.getElementById('bkg');

    if (self.innerHeight) {
        obj.width = self.innerWidth;
        obj.height = self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight) {
        obj.width = document.documentElement.clientWidth;
        obj.height = document.documentElement.clientHeight;
    }
    else if (document.body) {
        obj.width = document.body.clientWidth;
        obj.height = document.body.clientHeight;
    }
    obj.style.display = '';
}
</script>
<style type='text/css'>
html, body {margin: 0; padding: 0}
#bkg {z-index: 0; position: absolute}
#content {z-index: 1; position: relative}
</style>
</head>

<body onLoad='doBK()' onResize='doBK()'>
<img id='bkg' src='bg.png' style='display: none'>
<div id='content'>
Контент
</div>
</body>
</html>

Картинка bg.png в аттаче.

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

bg.png 0,50 Kb

StayAtHome

Дата 15.12.2005, 18:39 (ссылка)

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

Загрузка ...

Домосед

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

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

Ciber SLasH
Разумеется, это самый простой способ. "Но мы не ищем легких путей" smile

А еще в твоем варианте, в Internet Explorerе постояно выскакивает панелька от рисунка с кнопками "соранить, напечатать" smile

В принципе "тема раскрыта"... Всем спасибо! smile

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