隐形超链接附在图像侧面,如何删除?

时间:2013-04-10 22:25:12

标签: html web hyperlink

在我的网页上,顶部的徽标设置在中心附近,其超链接返回主页,但是有一个小的条带是清晰的,部分超链接从左下角运行并运行到页面末尾。如何删除它?

守则如下: 主要Html

<!doctype html>

 html lang="en">
<head>
<meta charset="utf-8" />
<title>Spruce Films</title>
<link href="mainStyle.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
<a href="index.html"><img src="spruce.png"/></a>    

<div id="tabs">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="current.html">Current Projects</a>
<a href="finished.html">Finished Projects</a>
<a href="contacts.html">Contacts & Links</a>
<a href="store.html">Store  </a>

<div id="top_ad">
        <script type="text/javascript"><!--
        google_ad_client = "ca-pub-6336861109904863";
        /* Spruce Films Header */
        google_ad_slot = "1175620153";
        google_ad_width = 728;
        google_ad_height = 90;
        //-->
        </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
</div>

<footer id="the_footer">
        Designed and Coded by Austin Choncek Copyright &copy;            SpruceFilms.com All Rights Reserved.
</footer>
     </body>
     </html>

然后css页面如下:

    img{
border: 0;
    margin-left: 295px; 
margin-top: -8px;
width: 750px;
height: 110;

    }

    body {
background-image: url(background.png);
background-repeat: repeat-no;
    }

    #tabs{
    border-left: 2px red;
    border-right: 2px #450101;
    border-right-style: solid;
    border-left-style: solid;
    position: absolute;
    width: 746px;
    height: 25px;
    top: 110px;
    left: 308px;

    }   

    a{
font-family: Tahoma;
padding-right: 20px;
padding-left: 5px;
color: orange;
font-size: 20px;
TEXT-DECORATION: NONE;
    }

     a:visited{
    color: orange;
    text-decoration: none;
    }
    a:hover{
    color: red;
    text-decoration: none;
    }
     a:active{
    color: blue;
    text-decoration: none;
    }
    #top_ad{
margin: 5px 5px 10px 10px;
width: 728px;
height: 90px;
    }

    #the_footer{
    clear:both;
    text-align:center;
    padding:20px;
    border-top: 2px solid white;
    color: orange;
    }

1 个答案:

答案 0 :(得分:0)

HTML:

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Spruce Films</title>
        <link href="mainStyle.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="homepagelink">
            <a href="index.html"><img src="spruce.png"/></a>
        </div>

        <div id="tabs">
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="current.html">Current Projects</a>
            <a href="finished.html">Finished Projects</a>
            <a href="contacts.html">Contacts & Links</a>
            <a href="store.html">Store  </a>
        </div>

        <div id="top_ad">
            <script type="text/javascript"><!--
    google_ad_client = "ca-pub-6336861109904863";
    /* Spruce Films Header */
    google_ad_slot = "1175620153";
    google_ad_width = 728;
    google_ad_height = 90;
    //-->
            </script>
            <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
            </script>
        </div>

        <footer id="the_footer">
    Designed and Coded by Austin Choncek Copyright &copy;            SpruceFilms.com All Rights Reserved.
        </footer>
    </body>
</html>

CSS:

body {
    background-image: url(background.png);
    background-repeat: repeat-no;
}

#homepagelink *{
    width: 750px;
    height: 110px;
}

#homepagelink a{
    margin-left: 295px;
    margin-top: -8px;
    display: block;
}

#tabs{
    border-left: 2px red;
    border-right: 2px #450101;
    border-right-style: solid;
    border-left-style: solid;
    position: absolute;
    width: 746px;
    height: 25px;
    top: 110px;
    left: 308px;
}   

#tabs a{
    font-family: Tahoma;
    padding-right: 20px;
    padding-left: 5px;
    color: orange;
    font-size: 20px;
    TEXT-DECORATION: NONE;
}

a:visited{
    color: orange;
    text-decoration: none;
}

a:hover{
    color: red;
    text-decoration: none;
}

a:active{
    color: blue;
    text-decoration: none;
}

#top_ad{
    margin: 5px 5px 10px 10px;
    width: 728px;
    height: 90px;
}

#the_footer{
    clear: both;
    text-align: center;
    padding: 20px;
    border-top: 2px solid white;
    color: orange;
}

在Iron(Chrome分叉)上按预期工作。