Question

我正在尝试从头开始构建我的第一个网站。我在Photoshop中模拟了设计，并且一直试图将代码转换成几个小时。但我没有走远。事实上，我被困在标题的导航栏上。

看起来不对，但它不起作用。我正在使用无序内联列表，并尝试链接标题中的不同矩形。但是，我不能点击标题中的任何内容。

下面是html和css文件的代码以及标题的模型。关于标题栏不起作用的任何建议都将非常感激。

以下是图片的链接：http://rookery9.aviary.com.s3.amazonaws.com/3961000/3961027_eb89_625x625.jpg

**理想情况下，您可以点击“”。*

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;
}

Answer 1

问题是你的文字缩进：-9999px;您必须在屏幕上有元素才能单击它。值得注意的是，文本（li）下面没有图像的概念。它只是一个背景图像，所以默认行为给出你提供的代码堆栈左侧的所有链接。我已经成立了：

http://jsfiddle.net/Mxpdr/

为了让您玩它，您可以使用此工具通过更改css和javascript代码（我删除了Google分析数据）来了解事物的实时工作方式。将css中的位置替换为图像的实际位置，您可以看到它的实际外观，并让人们找到帮助解决问题的地方。

干杯。

Answer 2

尝试为锚标签指定一个定义的宽度。 Safari正在渲染它们的宽度：0px over this。

只有fyi，#fbead上的颜色#wrap不是颜色的有效十六进制代码。另外，你为什么只在身体标签上position: relative;？

HTML / CSS - 网站帮助

2 个答案: