Oleh
-
Posts
7 -
Joined
-
Last visited
Oleh's Achievements
Explorer (1/14)
0
Reputation
-
Так в том и дело, что я спрашивал можно ли задать стиль ТОЛЬКО для ячеек внешней таблицы так, как это делается только для дочерних элементов с помощью знака ">". Но в таблице <td> не является непосредственно дочерним для <table>, т.к. между ними ещё есть <tr>. Я хотел задать стиль ТОЛЬКО для ячеек внешней таблицы, чтобы НЕ приходилось перебивать стиль для ячеек внутренней таблицы. Но как я понимаю, применить стиль ТОЛЬКО (">") для дочерних элементов можно только в случае, если эти дочерние элементы являются дочерними элементами первого уровня (т.е., напр., div > div ), а выбрать ТОЛЬКО дочерние элементы второго и дальше уровня с помощью знака ">" не получится (div div > div).
-
Как отцентровать по вертикали текст в <div></div> или в <p></p> ? По горизонтали получается с помощью text-align: center; В описании (http://htmlbook.ru/css/vertical-align) написано, что "middle - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента." Я задал ширину и высоту для контейнера. То по идее к центральной точке текста или изображения должна добавляться половина высоты контейнера от верхней его границы. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title></title> <style type="text/css"> #cont1 { width: 500px; height: 300px; border: 1px solid black; } #cont1 span { vertical-align: middle; } </style> <script type="text/javascript"> </script> </head> <body> <div id="cont1"> <span>Текст</span> </div> </body> </html> (Прошёл книгу по HTML и CSS. Начал учить JavaScript - забыл многое из HTML и CSS.)
-
Это не работает. Если написать #table1 > tr > td, то пропадают границы ячеек и внешней, и внутренней таблиц. Я такой CSS-код и сам пробовал. Не получается с помощью знака ">" выбирать только потомки второго и далее уровней. Знак ">" работает только с потомками первого уровня.
-
Стандартный режим - это HTML или XHTML ?
-
Прошёл книгу "Изучаем HTML, XHTML и CSS" (O'Reilly). Книга нормальная, всё понятно написано. После прочтения книги, в результате советов, которые там дают читателям, сейчас страницы пишу на XHTML Strict. Почему - сказать не могу. Просто в книге читателя плавно подвели к тому, что HTML - это вчерашний день, а сегодняшний - Strict XHTML. И нужно писать страницы на XHTML Strict, чтобы разные браузеры чётко понимали на каком языке написана разметка страницы. Пытался на форумах найти ответ на вопрос "На чём писать: HTML, XHTML или HTML5 ?". Каждый хвалит свою корову. И аргументов у каждого - целая куча. Сейчас прохожу книгу "Изучаем JavaScript" (O'Reilly, м.Моррисон). Думал, что она будет такая же нормальная, как и про "HTML, XHTML и CSS". Оказалось полностью наоборот. Но, думаю, раз прошёл уже 2 главы, то пройду всю книгу. На полпути бросать - неправильно. Столкнулся с ситуациями, когда JS-код из учебника отказывается работать в страницах, в которых указано, что они написаны на XHTML Strict. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Пример. В XHTML-странице не работает функция resizeRock(), которая изменяет размер изображения. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title></title> <style type="text/css"> </style> <script type="text/javascript"> var userName; function resizeRock() { document.getElementById("rockImg").style.height = (document.body.clientHeight - 100) * 0.9; } function greetUser() { alert('Hello, I am your pet rock.'); } function touchRock() { var userName=prompt("Как Вас зовут ?","Введите Ваше имя"); if(userName) { alert("Рад Вас видеть, "+userName+"."); document.getElementById("rockImg").src="rock_happy.png"; setTimeout("document.getElementById('rockImg').src='rock.png';",1*60*1000); } } </script> </head> <body onload="resizeRock(); greetUser();"> <div style="margin-top: 100px; text-align: center;"> <img id="rockImg" src="rock.png" alt="iRock" style="cursor:pointer" onclick="touchRock();" /> </div> </body> </html> Вот images. А если вверху удалить "<!DOCTYPE html... и т.д." и оставить только открывающий тег <html>, то при обновлении страницы функция resizeRock() работает и изображение "rock.png" увеличивается в размере. Почему эта функция не работает на XHTML-странице ? Если это зависит от типа стандарта языка - HTML или XHTML, то как узнать о том, какой JS-код будет работать в HTML, а какой - в XHTML ? Кстати, такая же ситуация у меня была и с CSS, но наоборот. В XHTML-странице CSS-код работал, а в HTML странице - не работал. Люди ! Какой стандарт HTML использовать ? Может вообще начинать страницу с просто тега <html> без всяких "<!DOCTYPE..." ? Кто сталкивался с такой ситуацией - ответьте, пожалуйста !
-
Нет, мне наоборот, определённому куску (внутренней таблице) НЕ нужно задавать стиль. Мне нужно, чтобы внутренняя (вложенная) таблица (в которой: Имя, Адрес, Город, Страна, Индекс) не наследовала стиль ячейки (внешней таблицы), в которой она находится. Проблема в том, что если для ячеек внешней таблицы (#table1) задать границу "border: 1px solid black;", то ячейки внутренней таблицы унаследуют этот стиль, что мне не нужно. Эту ситуацию приходится исправлять переопределением стиля для ячеек внутренней таблицы. В книге написано, что есть возможность выбирать только дочерние элементы. Например, есть элемент с id - #table1, у него есть дочерние элементы первого уровня - это строки <tr>, дочерние элементы второго уровня - ячейки <td> и т.д. Ну я вроде бы сам разобрался. Пример с <div> и <p> (который приводится в книге). Есть возможность применять стиль только к дочерним элементам первого уровня через знак ">", например "#cont1 > p { }". Стиль элементов <p> контейнера #cont1 не будет применяться к элементам <p> вложенных контейнеров #cont2 и #cont3. <div id="cont1"> <p></p> <div id="cont2"> <p></p> <div id="cont3"> <p></p> </div> <p></p> </div> <p></p> </div> Но не получится написать так: "#cont1 div > p { }", т.к. <p> уже будет дочерним элементом второго уровня для "#cont1". Придётся контейнеру второго уровня присваивать id или class и писать "#cont2 > p { }". Я думал, что с помощью знака ">" есть возможность выбирать только дочерние элементы как первого уровня, так и второго, третьего и т.д. В общем, я так понял, что с таблицей не получится так, как с <div> и <p> из-за элемента <tr>.
-
Непонятна ситуация с указанием потомков элемента. Есть таблица (2 столбца, 5 рядов). В правой ячейке третьего ряда вложена такая же таблица. Для внешней таблицы задан стиль #table1 { border: 1px solid black; } Если указан только этот стиль для внешней таблицы, то он не наследуется внутренней таблицей. Задаю стиль для ячеек внешней таблицы: #table1 td { border: 1px solid black; height: 30px; width: 100px; } Стиль для ячеек внешней таблицы наследуется для ячеек внутренней таблицы, хотя на сайте http://htmlbook.ru/css/border написано, что свойство "border" не наследуется. В книге ("Изучаем HTML, XHTML и CSS", Эрик Фримен, Элизабет Фримен, с.466) написано, что для того, чтобы выбрать только дочерний элемент, нужно поставить знак "больше" между элементов и потомком, т.е. #table1 > td. Но в таблице между ними ещё есть строки ("<tr>"). Получается нужно #table1 tr > td ? Как применить стиль только к элементам <td> внешней таблицы, чтобы не затрагивались ячейки внутренней таблицы ? <table id="table1"> <tr> <td>Выберите кофе:</td> <td> <select name="beans"> <option value="Смесь">Домашняя смесь</option> <option value="Боливия">Боливия</option> <option value="Гватемала">Гватемала</option> <option value="Кения">Кения</option> </select> </td> </tr> <tr> <td>Тип:</td> <td> <input type="radio" name="beantype" value="зерна" checked="checked" />Кофе в зёрнах<br /> <input type="radio" name="beantype" value="молотый" />Молотый кофе </td> </tr> <tr> <td>Дополнительные услуги:</td> <td> <input type="checkbox" name="extras[]" value="упаковка" />Подарочная упаковка<br /> <input type="checkbox" name="extras[]" value="каталог" checked="checked" />Доставка каталога вместе с заказом </td> </tr> <tr> <td>Доставить по адресу:</td> <td> [indent]<table> <tr> <td>Имя:</td> <td><input type="text" name="name" /></td> </tr> <tr> <td>Адрес:</td> <td><input type="text" name="address" /></td> </tr> <tr> <td>Город:</td> <td><input type="text" name="city" /></td> </tr> <tr> <td>Страна:</td> <td><input type="text" name="state" /></td> </tr> <tr> <td>Индекс:</td> <td><input type="text" name="zip" /></td> </tr> </table>[/indent] </td> </tr> <tr> <td>Комментарии клиентов:</td> <td><textarea name="comments" rows="10" cols="48"></textarea></td> </tr> <tr> <td></td> <td><input type="submit" value="Заказать сейчас" /></td> </tr> </table>