J'essaie de créer mon premier site Web à partir de zéro. Je me suis moqué du design de Photoshop et j'ai essayé de le convertir en code pendant quelques heures. Mais je ne suis pas loin. En fait, je suis coincé sur la barre de navigation de l'en-tête.HTML/CSS - Aide sur le site Web
Cela semble correct, mais cela ne fonctionne pas. J'utilise une liste non ordonnée et j'essaie de lier différents rectangles dans l'en-tête. Cependant, je ne peux pas cliquer sur quoi que ce soit dans l'en-tête.
Le code pour les fichiers html et css, et une maquette de l'en-tête, sont ci-dessous. Tout conseil sur la raison pour laquelle la barre d'en-tête ne fonctionne pas serait très apprécié.
Voici un lien vers l'image. http://rookery9.aviary.com.s3.amazonaws.com/3961000/3961027_eb89_625x625.jpg
** Idéalement, vous pourrez cliquer sur soit "" *
home.html:
<!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" lang="en" xml:lang="en">
<head>
<!-- Title -->
<title>I am Gabe Audick.</title>
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Gabe Audick" />
<meta name="Copyright" content="Gabe Audick" />
<!-- Stylesheets -->
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
<!-- RSS -->
<link rel="alternate" type="application/rss+xml" title="gabeaudick RSS" href="http://feeds.feedburner.com/gabeaudick" />
</head>
<body>
<!-- Navigation Bar -->
<div id="wrap">
<div id="header">
<ul>
<li><a href="#">Previous</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
</div>
<!-- END -->
<!-- Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- End of Google Analytics -->
</body>
</html>
style.css :
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
color: #000;
font-size: 14px;
font-family: 'Century Gothic', Helvetica, sans-serif;
position: relative;
}
#wrap {
background-color: #000;
color: #fbead;
height: 26px;
width: 100%;
}
#header {
background: url(./images/home.gif) center no-repeat #000;
height: 26px;
}
#header ul li{
float:left;
list-style-type:none;
margin-right:12px;
text-indent:-9999px;
}
#header li a:link, #header li a:visited{
outline:none;
display:block;
height:26px;
text-indent:-9999px;
}
En quoi consiste le 'text-indent'? –
@George: Il s'agit d'une astuce couramment utilisée pour masquer le texte afin que les lecteurs d'écran et les robots d'exploration puissent toujours le détecter, mais il est visiblement caché. "Display: none" empêche généralement cela. – mpen