HTML/CSS - 网站帮助

我试图从头开始构建我的第一个网站。我在Photoshop中嘲弄了设计，并且一直试图将代码转换为几个小时。但我还没有太多。事实上，我被困在标题的导航栏上。HTML/CSS - 网站帮助

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

下面是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; 
}

来源

2010-05-18 user339866

'text-indent'是什么？ – 2010-05-18 06:23:49

@George：这是一种常见的窍门，用于隐藏文本，以便屏幕阅读器和网络爬虫仍然可以接收文本，但它明显隐藏。 “Display：none”通常可以防止这种情况发生。 – mpen 2010-05-18 06:40:01

问题是你的文本缩进：-9999px;你必须让屏幕上的元素点击它。它也可能值得注意的是，文本（li）没有它下面的图像的概念。它只是一张背景图片，所以默认的行为是给你提供的代码，它将堆栈的所有链接放在左边。我已经设置了：

http://jsfiddle.net/Mxpdr/

让你玩它，你可以使用这个工具来获得事情是如何实时通过更改的CSS和JavaScript代码的工作的感觉（我删除谷歌分析数据）。将css中的位置替换为图像的真实位置，您可以看到它的实际外观，并让人们找到解决问题的地方。

干杯。

来源

2010-05-18 06:20:27 Gabriel

实际上，如果元素被定义为块级别（在这种情况下），那么文本缩进应该不是问题 – jordanstephens 2010-05-18 06:25:51

它是li上的文本缩进问题。 http://jsfiddle.net/Mxpdr/2/ – Gabriel 2010-05-18 06:27:53

啊我没有注意到一个，对不起！ – jordanstephens 2010-05-18 06:28:35

尝试给定位标签定义宽度。 Safari在这里以宽度：0px渲染它们。

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

来源

2010-05-18 06:25:05 jordanstephens

HTML/CSS - 网站帮助

回答

相关问题