Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > empty-cells


Автор: StayAtHome 14.12.2005, 02:06
Очередной раз пытаюсь сдизайнить домашнюю страничку 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
Вставь перед </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
и в каждую пустую ячейку вписывай &nbsp;

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

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

Автор: StayAtHome 15.12.2005, 02:17
Почти получилось!
Код
<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
Вообще-то в твоём случае на для пустой ячейки (с &nbsp;) хватит указать в стилях свойство font-size для произвольной высоты ячейки.

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

Автор: R.M. 15.12.2005, 03:08
Цитата(Ciber @ 15.12.2005, 04:01)
забивать гвозди отбойным молотком

smile smile smile
Добавлено @ 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>

Автор: Ciber SLasH 15.12.2005, 03:41
Цитата
Или если ты нехочеш выделения кнопки то так

То вот так:
Код
<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
smile Касательно отбойного молотка -- ну вот интересно мне такого эффекта добиться! Можно проще без рисунков? smile
Касательно CSS -- чайник я, всего пару дней как серьезно начал изучать.
Касательно кнопки -- там фишка вся в том, что у нее рамка должна быть не сплошная . smile

Автор: Ciber SLasH 15.12.2005, 03:54
Дык рамки задаются так:
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
smile Все равно ты меня не понял. Если б все было так просто. smile
Ты мой код видел в браузере? Или на страничку заглядывал?

Автор: R.M. 15.12.2005, 04:12
StayAtHome
Я думал ты гдето сглючил а оказываеца задумано не делать четверть рамки.....
А вообще непонимаю откуда принцип "не юзать картинки"?? Мне кажется без них или извращаца (как ты) или всё будет выглядеть стрёмно. ИМХО меняй принципы smile
Добавлено @ 04:15
Сунул в бэкграунд рамку и ок

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

Цитата(Ciber @ 15.12.2005, 04:41)
То вот так:

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

Автор: StayAtHome 15.12.2005, 04:19
Куксикус
Да по приколу мне! smile Я там и градиент наваял без картинок! smile Только опять - Опера и Лис его нормально рисуют, а Осел не растягивает по высоте smile

Автор: R.M. 15.12.2005, 04:35
StayAtHome
Цитата(StayAtHome @ 15.12.2005, 05:19)
Я там и градиент наваял без картинок!

покажи smile

Автор: StayAtHome 15.12.2005, 04:40
Дык я уже показывал : http://www.stayathome.ho.com.ua/ smile

Автор: R.M. 15.12.2005, 04:46
Понятно smile

Автор: Ciber SLasH 15.12.2005, 05:12
Так бы сразу и сказал, что тебе нужен градиент для фона.
Тогда можно сделать примерно так:
Код
<!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
Ciber SLasH
smile Пасиб. Только он прри изменениии размеров окна не перерисовывается. Можно?
А то что на : http://slayeroffice.com/code/gradient/ -- эт уж перебор. smile

Автор: StayAtHome 15.12.2005, 15:38
Остановился на таком варианте:
Код

<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
А по мне так вот такой вариант самый лучший, и лёгкий:
Код
<!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 в аттаче.

Автор: StayAtHome 15.12.2005, 18:39
Ciber SLasH
Разумеется, это самый простой способ. "Но мы не ищем легких путей" smile
А еще в твоем варианте, в Internet Explorerе постояно выскакивает панелька от рисунка с кнопками "соранить, напечатать" smile
В принципе "тема раскрыта"... Всем спасибо! smile

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)