尝试谷歌字体 - 现在链接不起作用

时间:2013-09-16 09:50:52

标签: css fonts hyperlink

我今天早些时候开始在这个网站上工作。我对css不太满意,但我学得很快。我试图使用谷歌字体,但是一旦我将代码放入索引页的头部,就会发生一件非常奇怪的事情。

我的链接停止了工作。我拿出了代码,并将其从样式表中删除,但由于某种原因链接仍然无法点击。我试过玩了好几个小时,谷歌没有给我任何可靠的答案。

我非常感谢我能得到的任何帮助。该网站可在http:goinggf.com/justin/index.html

查看

这是我的HTML:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DeShepper Designs</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body >

<div id="header">
    <div class="wrap">
        <div class="logo">
            <a href="index.html"><img src="images/headerlogo.jpg"></a>
        </div>
        <div class="menu">
            <p><a href="gallery.html">Gallery</a> | <a href="graphicdesign.html">Graphic Design</a> | <a href="contact.html">Contact</a></p>
        </div>

    </div>
</div>

<div id="dividerimg"><center><img src="images/seperatorline.png"></center></div>

<div class="contentcontainer">
    <div id="content">
        <h1>Welcome to DeSchepper Designs</h1>
        <p>Original artwork and graphic design images by Lindsey DeSchepper.&nbsp; 
        The majority of the paintings I do are created with acrylic medium on 
        canvas with various sizes and styles.&nbsp; The graphic design work was 
        created using Photoshop, Illustrator and Picture It.</p>
        <p>I'm very passionate about art and enjoy the creative outlet.&nbsp; I 
        hope you like what you see and thanks for stopping by.</p>
        <p align="right"><img src="images/signature.png"></p>


    </div>
    <div class="#content.prettyladypicture">
        <p align="right"><img src="images/me-painting.jpg" height="338" width="284"></p></div>

</div>
<div id="redfootertop"></div>

<div id="footerred">
    <div class="wrap">
            © 2013 - DeSchepper Design    </div>
</div>
<div id="footergray">
    <div class="wrap">
            COPYRIGHT CONTACT WHATEVER</div>
</div>
</body></html>

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DeShepper Designs</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body >

<div id="header">
    <div class="wrap">
        <div class="logo">
            <a href="index.html"><img src="images/headerlogo.jpg"></a>
        </div>
        <div class="menu">
            <p><a href="gallery.html">Gallery</a> | <a href="graphicdesign.html">Graphic Design</a> | <a href="contact.html">Contact</a></p>
        </div>

    </div>
</div>

<div id="dividerimg"><center><img src="images/seperatorline.png"></center></div>

<div class="contentcontainer">
    <div id="content">
        <h1>Welcome to DeSchepper Designs</h1>
        <p>Original artwork and graphic design images by Lindsey DeSchepper.&nbsp; 
        The majority of the paintings I do are created with acrylic medium on 
        canvas with various sizes and styles.&nbsp; The graphic design work was 
        created using Photoshop, Illustrator and Picture It.</p>
        <p>I'm very passionate about art and enjoy the creative outlet.&nbsp; I 
        hope you like what you see and thanks for stopping by.</p>
        <p align="right"><img src="images/signature.png"></p>


    </div>
    <div class="#content.prettyladypicture">
        <p align="right"><img src="images/me-painting.jpg" height="338" width="284"></p></div>

</div>
<div id="redfootertop"></div>

<div id="footerred">
    <div class="wrap">
            © 2013 - DeSchepper Design    </div>
</div>
<div id="footergray">
    <div class="wrap">
            COPYRIGHT CONTACT WHATEVER</div>
</div>
</body></html>

我的样式表CSS:

/*This is my first real style sheet.*/
/*Reset Old Stuff*/

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

strong {
    font-weight:bold;color:#333333;
}

em {
    font-style:oblique;
}

p {
    margin:15px 0;
}

.aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}

h1 {font-size:180%;}
h2 {font-size:150%;}
h3 {font-size:125%;}
h4 {font-size:100%;}
h5 {font-size:90%;}
h6 {font-size:80%;}

a:link {color:#333333;}
a:hover {color:#333333;}

/*Reset - Now Full Width*/
    body {
        background:#f5f5ed;
        color:#333333;
        font:13px Helvetica,  Arial,  sans-serif
    }

    .wrap {
        margin:0 auto;
        width:900px;
    }

    .contentcontainer {
        margin:0 auto;
        width:750px;
    }


    #header, #footer {
        float:left;
        padding:15px 0;
        min-width:100%;
    }

    #header {
        background:#f5f5ed;
    }

    #header .logo {
        float:left;
        min-height:auto;
    }

    #header .menu{
        float:left;
        margin-top:10px;
        margin-left:33%;
        min-height:auto;


}   
    #content {
        clear:left;
        float:left;
        text-align:left;
        margin-left:50px;
        width:300px;
        clear:both;
    }
    #content .prettyladypicture{
        clear:both;
        margin-right:auto;
        float: right; 
        width: auto;
}
    #dividerimg {
        position:relative;
        min-width:50%;
}

    #redfootertop {
        float:none;
        margin:0 auto 0 auto;
        min-height:50px;
        max-width:900px;
        background-image:url('images/redfootertop.png');
        background-repeat:no-repeat;

}

    #footerred {
        clear:both;         
        background:#e64135;
        text-align:center;
        position:float;
    }
    #footergray {
        background:#333333;
        color:#FFFFFF;
        text-align:center;
        min-height:75px;
        position:float;
        bottom:0;
}

    #footer a {
        color:black;
    }

2 个答案:

答案 0 :(得分:1)

以下div是“阻止”你的标题。

<div id="dividerimg"><center><img src="images/seperatorline.png"></center></div>

我尝试删除它并且链接有效。所以谷歌字体不会在这里引起问题。

答案 1 :(得分:1)

这是因为您的#dividerimg在标题上重叠。

尝试将此添加到#dividerimg的CSS:

z-index : -1

这应该可以解决你的问题。

此外,<center>标记现已弃用。您应该使用CSS来调整内容。