HTML/CSS - Справка по сайту

Я пытаюсь создать свой первый сайт с нуля. Я издевался над дизайном в Photoshop и пытался конвертировать в код в течение нескольких часов. Но у меня далеко. Фактически, я застрял на панели навигации заголовка.HTML/CSS - Справка по сайту

Он выглядит правильно, но он не работает. Я использую unordered-inline list и пытаюсь связать разные прямоугольники в заголовке. Тем не менее я не могу нажимать на что-либо в заголовке.

Код для файлов 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'? –

@George: Это общий трюк, используемый для скрытия текста, чтобы экранные считыватели и веб-гусеницы все еще могли на нем забираться, но он явно скрыт. «Дисплей: нет» обычно предотвращает это. – mpen

проблема заключается в вашем текстовом отступе: -9999px; Чтобы щелкнуть по нему, вы должны иметь элемент на экране. Также, вероятно, стоит отметить, что текст (li) не имеет понятия об изображении под ним. Это всего лишь фоновое изображение, поэтому поведение по умолчанию с учетом кода, который вы предоставили ему, содержит все ссылки, расположенные слева. Я настроил:

http://jsfiddle.net/Mxpdr/

для вас, чтобы играть с ним, вы можете использовать этот инструмент, чтобы получить представление о том, как вещи работают в режиме реального времени вносить изменения в CSS и код JavaScript (я удалил данные аналитики Google). Замените места в css реальными местоположениями для изображений, и вы можете увидеть, как это будет выглядеть на самом деле, и заставить людей поработать над вашей проблемой.

Cheers.

источник

2010-05-18 06:20:27 Gabriel

Фактически, если элемент определен как уровень блока (который в этом случае), текст-отступ не должен иметь значения – jordanstephens

это текстовый отступ в ли, который является проблемой. http://jsfiddle.net/Mxpdr/2/ – Gabriel

ах, я этого не заметил, извините! – jordanstephens

Попробуйте указать якорные метки определенной ширины. Safari предоставляет их ширину: 0px здесь.

И только fyi, цвет #fbead на #wrap не является допустимым шестнадцатеричным кодом для цвета. Кроме того, почему вы, но position: relative; на теге тела?

источник

2010-05-18 06:25:05 jordanstephens

HTML/CSS - Справка по сайту

ответ

Смежные вопросы