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 - 網站幫助

回答

相關問題