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


Автор: superphp 26.7.2013, 00:47
Прочитал на сайте хмлбука пример  http://htmlbook.ru/layout/fiksirovannaya-shirina-navigatsiya-sleva

У меня 2 файла

Файл index.php

Код

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Исторический турнир</title>
<link href="style/1.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<header><h1>Исторический турнир</h1></header>
<nav>
<p><a href="stat.html">Статистика турнира</a></p>
<p><a href="interview.html">Интервью с главным судьей</a></p>
<p><a href="ask.html">Конкурсные вопросы</a></p>
</nav>
<article>
<h2>Опрос общественного мнения показал</h2>
<ul>
     <li>что пароход изобретен: Петром I, А. Эйнштейном и А. Поповым;</li>
     <li>Диего Веласкес писал свои полотна в стиле: империализма, кубизма
     и империосионизма;</li>
     <li>Фаросский маяк находится в Фаросе;</li>
     <li>конфуцианство возникло в: Италии, Корее и Франции;</li>
     <li>богами торговли и воровства в Древней Греции были: Марс, Меркурий
     и Дионис;</li>
     <li>Франция – это город;</li>
     <li>богами загробного мира в Египте были: Аид, Анубис и Ассирис;</li>
     <li>столица Золотой Орды — Монголия;</li>
     <li>главные противники Александра Македонского: татаро-монголы, Дедал
     и Цезарь;</li>
     <li>священными птицами — символами Афин были: ворона и орел;</li>
     <li>в Древней Греции морями повелевали боги: Плутон, Нептун и Тритон.</li>
</ul>
</article>
<footer>© Влад Мержевич</footer>
</div>
</body>
</html>


Файл 1.css


Код

body {
font: 10pt Arial, Helvetica, sans-serif; /* Шрифт на веб-странице */
background: #e1dfb9; /* Цвет фона */
}
h2 {
font-size: 1.1em; /* Размер шрифта */
color: #800040; /* Цвет текста */
margin-top: 0; /* Отступ сверху */
}
#container {
width: 500px; /* Ширина слоя */
margin: 0 auto; /* Выравнивание по центру */
background: #f0f0f0; /* Цвет фона левой колонки */
}
#header {
font-size: 2.2em; /* Размер текста */
text-align: center; /* Выравнивание по центру */
padding: 5px; /* Отступы вокруг текста */
background: #8fa09b; /* Цвет фона шапки */
color: #ffe; /* Цвет текста */
}
#sidebar {
margin-top: 10px;
width: 110px; /* Ширина слоя */
padding: 0 10px; /* Отступы вокруг текста */
float: left; /* Обтекание по правому краю */
}
#content {
margin-left: 130px; /* Отступ слева */
padding: 10px; /* Поля вокруг текста */
background: #fff; /* Цвет фона правой колонки */
}
#footer {
background: #8fa09b; /* Цвет фона подвала */
color: #fff; /* Цвет текста */
padding: 5px; /* Отступы вокруг текста */
clear: left; /* Отменяем действие float */
}



В результате выходит что они не читают вроде эти идентификаторы и вот такое на исходе:

user posted image

Автор: Arantir 26.7.2013, 01:34
Цитата(superphp @  25.7.2013,  23:47 Найти цитируемый пост)
В результате выходит что они не читают вроде эти идентификаторы и вот такое на исходе:

Кто "они", какие идентификаторы и что у Вас за браузер?

Автор: starik47 1.8.2013, 18:24
Цитата(superphp @  26.7.2013,  00:47 Найти цитируемый пост)
В результате выходит что они не читают вроде эти идентификаторы


1. Я не увидел связи файлов .html и .css. Во всяком случае, селекторы ID и теги такой связи не показывают.
2. Надо знать в каком браузере и какой версии все это смотрится.

Автор: olldman 6.8.2013, 08:51
Код

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Исторический турнир</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
body {
font: 10pt Arial, Helvetica, sans-serif; /* Шрифт на веб-странице */
background: #e1dfb9; /* Цвет фона */
}
h2 {
font-size: 1.1em; /* Размер шрифта */
color: #800040; /* Цвет текста */
margin-top: 0; /* Отступ сверху */
}
#container {
width: 500px; /* Ширина слоя */
margin: 0 auto; /* Выравнивание по центру */
background: #f0f0f0; /* Цвет фона левой колонки */
}
header {
font-size: 2.2em; /* Размер текста */
text-align: center; /* Выравнивание по центру */
padding: 5px; /* Отступы вокруг текста */
background: #8fa09b; /* Цвет фона шапки */
color: #ffe; /* Цвет текста */
}
#sidebar {
margin-top: 10px;
width: 110px; /* Ширина слоя */
padding: 0 10px; /* Отступы вокруг текста */
float: left; /* Обтекание по правому краю */
}
#content {
margin-left: 130px; /* Отступ слева */
padding: 10px; /* Поля вокруг текста */
background: #fff; /* Цвет фона правой колонки */
}
footer {
background: #8fa09b; /* Цвет фона подвала */
color: #fff; /* Цвет текста */
padding: 5px; /* Отступы вокруг текста */
clear: left; /* Отменяем действие float */
}
</style>
</head>
<body>
<div id="container">
<header><h1>Исторический турнир</h1></header>
<nav id="sidebar">
<p><a href="stat.html">Статистика турнира</a></p>
<p><a href="interview.html">Интервью с главным судьей</a></p>
<p><a href="ask.html">Конкурсные вопросы</a></p>
</nav>
<article id="content">
<h2>Опрос общественного мнения показал</h2>
<ul>
     <li>что пароход изобретен: Петром I, А. Эйнштейном и А. Поповым;</li>
     <li>Диего Веласкес писал свои полотна в стиле: империализма, кубизма
     и империосионизма;</li>
     <li>Фаросский маяк находится в Фаросе;</li>
     <li>конфуцианство возникло в: Италии, Корее и Франции;</li>
     <li>богами торговли и воровства в Древней Греции были: Марс, Меркурий
     и Дионис;</li>
     <li>Франция – это город;</li>
     <li>богами загробного мира в Египте были: Аид, Анубис и Ассирис;</li>
     <li>столица Золотой Орды — Монголия;</li>
     <li>главные противники Александра Македонского: татаро-монголы, Дедал
     и Цезарь;</li>
     <li>священными птицами — символами Афин были: ворона и орел;</li>
     <li>в Древней Греции морями повелевали боги: Плутон, Нептун и Тритон.</li>
</ul>
</article>
<footer>© Влад Мержевич</footer>
</div>
</body>
</html>


Учимся читать код. Пример? Пожалуйста: #header --> <header> - не находите, что связи нет? Идентификатор элемента не есть элемент.

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