HTML/CSS - 网站帮助
我正在尝试从头开始构建我的第一个网站。我在 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;
}
I'm trying to build my first website from scratch. I mocked up the design in Photoshop, and have been trying to convert into code for a few hours. But I haven't got far. In fact, I'm stuck on the header's navigation bar.
It looks right, but it doesn't work. I'm using an unordered-inline list, and trying to link different rectangles in the header. I can't click on anything in the header, though.
The code for the html and css files, and a mockup of the header, are below. Any advice on why the header bar isn't working would be much appreciated.
Here's a link to the image: http://rookery9.aviary.com.s3.amazonaws.com/3961000/3961027_eb89_625x625.jpg
**Ideally, you would be able to click on either "".*
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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尝试为锚标记指定一个定义的宽度。 Safari 在这里以 width: 0px 渲染它们。
仅供参考，
#wrap上的颜色#fbead不是颜色的有效十六进制代码。另外，为什么你在 body 标签上使用
position:relative;呢？Try giving the anchor tags a defined width. Safari is rendering them with width: 0px over here.
And just fyi, the color
#fbeadon#wrapis not a valid hex code for a color.Also, why did you but
position: relative;on the body tag?问题是你的文本缩进：-9999px；您必须让该元素出现在屏幕上才能单击它。还值得注意的是，文本 (li) 没有其下方图像的概念。它只是一个背景图像，因此您提供的代码的默认行为会将所有链接堆叠在左侧。我已经设置了：
http://jsfiddle.net/Mxpdr/
供你玩，你可以使用此工具通过更改 css 和 javascript 代码（我删除了谷歌分析数据）来实时了解事物的运行情况。将 css 中的位置替换为图像的真实位置，您可以看到它的实际外观，并为人们提供一个地方来帮助解决您的问题。
干杯。
the problem is your text-indent: -9999px; You have to have the element on screen to click it. It also likely worth noting that the text (li) has no concept of the image underneath it. It is just a background image, so the default behavior given the code you supplied it the stack all the links over on the left hand side. I have set up:
http://jsfiddle.net/Mxpdr/
for you to play with it, you can use this tool to get a sense of how things are working in real time by making changes to the css and javascript code (I removed the google analytics data). Replace the locations in the css with real locations for images and you can see how it will actually look and get people a place to help work out your issue.
Cheers.