链接无法在任何浏览器中单击

时间：2012-02-29 19:45:43

标签： html css z-index

我有一些社交媒体图标是图片链接。我能够突出显示它们，所以我知道它们没有被任何其他页面元素覆盖。但是，它们并没有链接到任何东西。

我的标题中的链接工作正常，经过一些调试后，我了解到任何链接（无论是图像还是文本）在放入#container div时都不起作用。

以下是我网站的链接： http://stevepolitodesign.comlu.com/

这是HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Steve Polito Design</title>

<!--[if lt IE 7]>
    <link rel="stylesheet" href="css/ie6.1.1.css" media="screen, projection" type="text/css" />
<![endif]-->

<!-- CSS -->
<link href="css/normal.css" rel="stylesheet" type="text/css" media="screen" />

<!-- FONTS -->
<link href="fonts/@font-face.css" rel="stylesheet" type="text/css" />

<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script  src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script  src="js/site_js.js" type="text/javascript"></script>

</head>

<body>

    <div id="banner"> <!-- START BANNER --> 

        <img src="images/logo.png" width="121" height="121" alt="Steve Polito Design Logo"  class="logo"/>  

    </div> <!-- END HEADER -->

    <div id="header"> <!-- START HEADER -->

        <div id="navigation"> <!-- START NAVIGATION -->

            <ul class="leftNav">
                <li class="left"><a href="#about" class="scrollTo">about</a></li>
                <li class="right"><a href="#services" class="scrollTo">services</a></li>
            </ul>

            <ul class="rightnav">
                <li class="left"><a href="#work" class="scrollTo">work</a></li>
                <li class="right"><a href="#contact" class="scrollTo">contact</a></li>

            </ul>
        </div> <!-- START NAVIGATION -->

    </div> <!-- END HEADER -->

    <div id="container"> <!-- START CONTAINER -->

        <div id="about"> <!-- START ABOUT -->

            <blockquote class="displayText">
                <h1 class="aboutHeading">i create beautiful things for both <span class="grey">print</span> and <span class="grey">web.</span></h1>
            </blockquote>

            <p class="aboutText">my name is steve polito, and i love design. whether it be for print or for web, i believe the most successful design is always the most simple. i enjoy the challenge that comes with every project, and use each undertaking as a learning experience. my portfolio contains works made using photoshop, illustrator, indesign, dreamweaver, after effects, html + css and jquery. you can also check out my resume here.</p>

            <div id="socialMedia"> 
                <a href="www.facebook.com"><img src="images/FB.png" height="32" width="32" alt="Facebook" /></a>
                <a href="www.flickr.com"><img src="images/FLICKR.png" height="32" width="32" alt="FlickR" /></a>
                <a href="www.youtube.com"><img src="images/YOUTUBE.png" height="32" width="32" alt="Youtube"/></a>  
            </div>

      </div>  <!-- END ABOUT -->

      <div id="services"> <!-- START SERVICES -->

            <blockquote class="displayText">
                <h1 class="servicesHeading">here is what i<span class="red"> do</span> and what i <span class="red">know.</span></h1>
                <a href="index.html" title="TEST">TEST</a>
            </blockquote>

            <div id="myServices"> <!-- START MYSERVICES --> 

                <ul class="print">
                    <li class="listHeading">print.</li>
                    <li>logo</li>
                    <li>branding</li>
                    <li>publications</li>
                    <li>package</li>
                    <li>posters</li>
                </ul>

                <ul class="web">
                    <li class="listHeading">web.</li>
                    <li>micro sites</li>
                    <li>seo</li>
                    <li>drupal</li>
                    <li>web design</li>
                </ul>

                <ul class="skills">
                    <li class="listHeading">skills.</li>
                    <li>photoshop</li>
                    <li>illustrator</li>
                    <li>indesign</li>
                    <li>html+css</li>
                    <li>jquery</li>
                    <li>seo</li>
                    <li>drupal</li>
                </ul>

            </div> <!-- START MYSERVICES -->

      </div> <!-- END SERVICES -->

      <div id="work"> <!-- START WORK -->

        <blockquote class="displayText">
            <h1 class="workHeading">here is a sample of my <span class="white"> work.</span></h1>
        </blockquote>

      </div> <!-- END WORK -->

      <div id="contact"> <!-- START CONTACT -->

        <blockquote class="displayText">
            <h1 class="contactHeading">i would <span class="red"> love </span> to here from<span class="red"> you.</span></h1>
        </blockquote>

      </div> <!-- END CONTACT -->

    </div> <!--END CONTAINER -->

</body>
</html>

这是CSS：

@charset "UTF-8";
/* CSS Document */

/* CSS RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* HTML TAGS */

body {
    background:url(../images/960_BG.jpg);
    background-repeat: repeat-x;
    background-color:#000;
}


/* LAYOUT */

#header {
    width: 100%;
    height: 64px;
    background:url(../images/header_BG.png);
    background-repeat:repeat-x;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

#navigation {
    width: 90%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
}

#header ul li a:link{
    display: inline-block;
    text-decoration:none;
    font-family: 'TeXGyreAdventorBold';
    font-size: 20px;
    color: #aa2c23;
    text-shadow: 0px 1px 0px #000;
}

#header ul li a:visited{
    display: inline-block;
    text-decoration:none;
    font-family: 'TeXGyreAdventorBold';
    font-size: 20px;
    color: #aa2c23;
    text-shadow: 0px 1px 0px #000;
}

#header ul li a:hover{
    display: inline-block;
    text-decoration:none;
    font-family: 'TeXGyreAdventorBold';
    font-size: 20px;
    color: #666;
    text-shadow: 0px 1px 0px #000;
}

#header ul li a:active{
    display: inline-block;
    text-decoration:none;
    font-family: 'TeXGyreAdventorBold';
    font-size: 20px;
    color: #666;
    text-shadow: 0px 1px 0px #000;
}

#banner {
    width: 168px;
    height: 175px;
    position: fixed;
    background:url(../images/banner_BG.png);
    background-repeat: no-repeat;
    right: 50%;
    margin-right: -84px;
    top: -5px;
    z-index: 1;
    text-align: center;
}

#container {
    width: 100%;
    max-width: 960px;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    z-index: -1;
}

#about {
    width: 100%;
    max-width: 940px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 0px;
    padding-top: 175px;
    height: 825px;
}

#socialMedia {
    display: block;
    text-align: center;
    width: 300px;
    margin-right:auto;
    margin-left: auto;
    margin-top: 50px;
}

#socialMedia a:link {
    display: inline-block;
    opacity: .5;
    margin: 0 5% 0 5%;
}

#socialMedia a:visited {
    display: inline-block;
    opacity: .5;
    margin: 0 5% 0 5%;
}

#socialMedia a:active {
    display: inline-block;
    opacity: .5;
    margin: 0 5% 0 5%;
}

#socialMedia a:hover {
    display: inline-block;
    opacity: 1;
    margin: 0 5% 0 5%;
}

#services {
    width: 100%;
    max-width: 940px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 0px;
    padding-top: 175px;
    height: 825px;
}

#myServices {
    margin-top: 50px;
    width: 81%;
    margin-left: auto;
    margin-right: auto;
}

#work {
    width: 100%;
    max-width: 940px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 0px;
    padding-top: 175px;
    height: 825px;
}

#contact {
    width: 100%;
    max-width: 940px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 0px;
    padding-top: 175px;
    height: 825px;
}

/* CLASSES */

.leftNav {
    float: left;
    width: 35%;
}

.rightnav {
    float: right;
    width: 35%;
}

.left {
    display: block;
    width: 30%;
    float: left;
    margin-left: 0%;
    text-align:left;
}

.right {
    display: block;
    width: 30%;
    float: right;
    margin-right: 0%;
    text-align:right;
}

.logo {
    display: inline-block;
    width: 121px;
    height: 121px;
    margin-top: 15px;
}

.displayText {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right:auto;
    text-align: center; 
}

.grey {
    color:#666;
}

.aboutText {
    font-family: 'TeXGyreAdventorRegular';
    color: #FFF;
    font-size:15px;
    line-height: 25px;
    margin-top: 50px;
    width: 81%;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.aboutHeading {
    font-family: 'TeXGyreAdventorBold';
    font-size: 82px;
    color: #FFF;
    line-height: 100px;
    text-shadow: 0px 2px 1px #000;
}

.servicesHeading {
    font-family: 'TeXGyreAdventorBold';
    font-size: 82px;
    color: #666;
    line-height: 100px;
    text-shadow: 0px 2px 1px #000;
}

.red { 
    color: #aa2c23;
}

.print {
    display:block;
    width: 10%;
    margin-left: 0%;
    font-family: 'TeXGyreAdventorRegular';
    font-size: 15px;
    color: #333;
    line-height: 25px;
    float:left;
}

.web {
    display: block;
    width: 10%;
    margin-left: 34%;
    font-family: 'TeXGyreAdventorRegular';
    font-size: 15px;
    color: #333;
    line-height: 25px;
    float:left;
}

.skills {
    display: block;
    width: 10%;
    margin-left: 34%;
    font-family: 'TeXGyreAdventorRegular';
    font-size: 15px;
    color: #333;
    line-height: 25px;
    float:left;
}

.listHeading {
    font-family: 'TeXGyreAdventorBold';
    font-size: 40px;
    color: #aa2c23;
    line-height: 100px;
    text-shadow: 0px 2px 1px #000;  
}

.workHeading {
    font-family: 'TeXGyreAdventorBold';
    font-size: 82px;
    color: #aa2c23;
    line-height: 100px;
    text-shadow: 0px 2px 1px #000;
}

.white {
    color: #FFF
}

.contactHeading {
    font-family: 'TeXGyreAdventorBold';
    font-size: 82px;
    color: #fff;
    line-height: 100px;
    text-shadow: 0px 2px 1px #fff;
}

2 个答案:

答案 0 :(得分：3)

问题在于你的这部分。删除z-index并且它可以正常工作

#container {
  width: 100%;
  max-width: 960px;
  margin-left:auto;
  margin-right:auto;
  position: relative;
  z-index: -1;
}

答案 1 :(得分：1)

您网站中的链接似乎正在显示错误的网址。喜欢yourdomain.com/www.facebook.com。尝试将绝对地址放在那里。与href属性中的http://www.facebook.com类似。

相关问题
最新问题