В конечном счете, я пытаюсь восстановить старый веб-сайт, который соответствует веб-стандартам, и подумал, что попробую намочить ноги в html5 и css3. Я знаю, что ни один из них еще полностью не поддерживается во всех браузерах, но я готов пока работать в любых пределах.
Однако я уже бьюсь головой о раннюю стену и, честно говоря, чувствую себя довольно глупо сейчас Я не могу выделить текст ИЛИ открыть ссылки на страницах, созданных моим кодом.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>The Hominis Inquiry: Reconstructing Psychology, Societies, and Human Ecosystems</title>
<link rel="stylesheet" href="HIcss3.css" />
<script src="HIjs.js"></script>
</head>
<body>
<div class="title">
<div id="search">
<form id="searcher" onclick="startSearch('sbox')">
<input type="text" id="sbox" size="15" value="Search This Site">
<input type="button" id="sbutt" value="Find">
</form>
</div>
</div>
<div class="navigation">
<div id="about"> <a href="about.htm"> About </a> </div>
<div id="blog"> <a href="blog.htm"> Blog </a> </div>
<div id="research"> <a href="research.htm"> Research/ Academic Papers </a> </div>
<div id="hypercourse"> <a href="hypercourses"> Hypercourses </a> </div>
<div id="links"> <a href="links"> Links </a> </div>
<div id="contact"> <a href="about.htm#contact"> Contact </a> </div>
</div>
<div class="download">
<a href="http://www.mozilla.com/firefox/" target="_blank">
Firefox is strongly recommended for viewing this page. Download the latest version free!<img src="firefox.jpg" />
</a>
</div>
<p>
Welcome to HI Updates!
</p>
</body>
</html>
CSS:
body {border:0; margin:0; padding:0; vertical-align:top; text-align:center; background-color:#FFDDAA; color:#440000}
h1 {font-size:3em; font-weight:700}
h2 {font-size:1.5em; font-weight:600}
h3 {font-size:1.25em; font-weight:500}
p {}
a {color:#000066; font-weight:600; text-decoration:none}
a:hover {background-color:#FFFFDD}
a:visited {color:#440066}
div.title {position:fixed; width:100%; height:10.5em; background-image:url(hominquiry_laeroprocni.jpg); }
div.download {text-align:left}
div.download img {border:0; float:left; width:3em; height:3em}
div.navigation {}
#about {}
#blog {}
Это не было проблемой с моим последним макетом в html 4, и я чувствую, что должен пропустить что-то ДЕЙСТВИТЕЛЬНО очевидное ... еще хуже, он прошел через валидатор без заминки: P
Спасибо!