我的h href在我的ul html5中不起作用

时间:2014-02-06 14:40:25

标签: html5

请帮助我花了这么长时间才找到答案。我有一个ul的href,并试图在html5中写一切。我正在使用KomodoEdit编写html,一切正常 - 链接和所有。我使用了HTML5验证器并且我的代码通过了。这是我的html文件 - 当我在Chrome,Safara和FF中加载它时它看起来很好但是文本链接不起作用 - 我有3个图像链接,它们都工作正常它只是ul中的文本链接和第一段。有人请帮助我。

这是一个如此简单的代码 - 我没有机会继续进行任何更令人兴奋的事情因为我无法超越它!

    

    <head>

    <meta charset="UTF-8">    
    <title>The Willows Daycare</title>
    <link rel="stylesheet" href="willows.css">

    </head>

<body>

    <div id="container">


        <div id="header">

        </div> <!--/header-->

        <div id="border">

        </div> <!--border-->

            <div id="sidebar">


                <div id="navigation">

                <nav>
                    <ul>
                        <li class="active" ><a href="http://www.willowsdaycare.co.uk/index.html" title="Home">Home</a></li>
                        <li><a href="/aboutus.html" title="About Us">About Us</a></li>
                        <li><a href="http://www.willowsdaycare.co.uk/yourchildinourcare.html" title="Your Child in Our Care">Your Child in Our Care</a></li>
                        <li><a href="http://www.willowsdaycare.co.uk/workingwithparents.html" title="Working with Parents">Working with Parents</a></li>
                        <li><a href="http://www.willowsdaycare.co.uk/pricing.html" title="Pricing">Pricing</a></li>
                        <li><a href="http://www.willowsdaycare.co.uk/usefullinks.html" title="Useful Links">Useful Links</a></li>
                        <li><a href="http://www.willowsdaycare.co.uk/contactus.html" title="Contact Us">Contact Us</a></li>

                    </ul>
                </nav>

                </div> <!--/navigation-->

            <img src="artwork/childrenline.png" alt="Children in a Line">    

            <img src="images/newssection.png" alt="latestnews">

            <p><img src="images/applenews.jpg" alt="Item of News">This is a link to a piece of news</p>
            <p><img src="images/applenews.jpg" alt="Item of News">This is another link to news</p>
            <p><img src="images/applenews.jpg" alt="Item of News">Places available for Spring 2014 what happens if i just keep on going</p>
            <img src="artwork/childrenline.png" alt="Children in a Line">

            <p><a href="https://www.facebook.com/pages/The-Willows-Daycare/719118858113788?fref=ts"><img src="images/facebooklike.png" alt="Like Us on Facebook"></a></p>
            <img src="images/twitterfollow.png" alt="Follow Us on Twitter">


            </div> <!--/sidebar-->

        <div id="main">

            <h1>Welcome to The Willows Daycare</h1>

            <p>Thank you for your interest in The Willows Daycare and for taking the time to find out more about what we can offer your child.  <a href="aims.html">Our main aim</a> is to provide the highest quality childcare, from birth to 11 years, by employing experienced, qualified and caring staff.</p>
            <p>We expect children to receive the same care and concern for their happiness and well being in daycare, as they would at home.  We work hard to create a warm, nurturing environment in which the child feels safe and secure and is able to flourish and reach their full potential.</p>
            <p>Please ask us for a prospectus, which is designed to give you an overview of the daycare provision we can offer your child/children, however we strongly recommend you visit The Willows to see our fantastic facilities and observe the children happy and secure in the stimulating environment we provide.</p>
            <p>We hope you find our website useful but if you have any qestions at all, please do not hesitate to contact the daycare manager who will be very pleased to help</p>

            <h4>Here are some of the things OFSTED said:</h4>

            <p class="quotes">"All children.....make outstanding progress at this inclusive nursery because the manager and her staff provide very good care for them and host an extensive range of activities."</p>

            <p class="quotes">"The children are completely safe because all procedures are rigorous and all adults are extremely vigilant."</p>

            <p class="quotes">"Parents feel their children make outstanding progress, especially in skills such as learning numbers."</p>

            <p class="quotes">"The children behave extremely well....they play very well together....concentrate well....and they develop extremely good friendships with one another and with the staff."</p>

            <p><b>For more information visit www.ofsted.gov.uk and search for EY337463.</b></p>


        </div> <!--/main-->


            <div id="footer">

            </div>  <!--/footer-->                

                <div id="bottomfooter">

                    <p class="bottomfooter"><a href="https://www.facebook.com/pages/The-Willows-Daycare/719118858113788?fref=ts"><img src="images/facebooklogo.jpg" alt="Like Us on Facebook"></a>
                    <img src="images/twitterlogo.jpg" alt="Twitter Logo">
                    <img src="photos/ofstedoutstanding.jpg" alt="Ofsted_Outstanding" width="50" height="50">
                    <p class="bottomfooter">The Willows Daycare, Magdalene Close, Ipswich, IP2 9UX &#124; Telephone: 01473 601327 &#124; Email:willowsipswich@hotmail.co.uk</p>
                    <p class="bottomfooter"> &#169; copyright <a href="http://www.harambee.biz">harambee.biz</a></p>

                </div> <!--/bottomfooter-->  

        </div> <!--/container-->


 </body>


</html>

我的CSS

@font-face {
        font-family: child;
        src:    url('fonts/child-webfont.ttf'),
                url('fonts/child-webfont.eot');
        }

@font-face {
        font-family: futura;
        src     url('fonts/futubk-webfont.ttf'),
                url('fonts/futubk-webfont.eot');
}

body {
        width: 1280px;
        }

#container {

        margin: 0 auto -400px;
        border-right: 2px solid #d6d6d6;
        border-top: 2px solid #d6d6d6;
        border-left: 2px solid #d6d6d6;
        border-bottom: 2px solid #d6d6d6;
        margin-left: 162px;
        width: 955px;
        box-shadow: 0 0 12px #777777;
}       

h1  {
        font-family: 'child';
        text-align: left;
        color: #C00000;
        font-size: 30px;
}

h2  {   font-family: 'child';
        text-align: left;
        color: #C00000;
        font-size: 20px;
}

h3 {    font-family: 'child';
        text-align: left;
        color: #33CC33;
        font-size: 25px;
}

h4 {    font-family: 'child';
        text-align: left;
        color: #220494;
        font-size: 20px;
        }

p   {
        font-family: 'futura';
        font-size: 14px;
        text-align: left;
        color: #585858;
}

#header {
        position: absolute;
        width: 955px;
        height: 100%;
        background:     url("artwork/header1.png") no-repeat 100% 0px;

}

#border {
        width: 100%;
        height: 130px;
        background:     url("artwork/handbanner.png") no-repeat 100%;
        margin-top: 400px;                }

#sidebar {
        float: right;
        width: 250px;
        height: auto;
        padding-bottom: 0px;
        background:     url("artwork/sidebar.png") repeat-y  200px;
}



#sidebar h2 {
        font-family: 'child';
        text-align: left;
        color: #C00000;
        font-size: 25px;

}

#sidebar p {
        margin-left: 0px;
        margin-right: 50px;

}

#main {
        clear: left;
        overflow: auto;
        height: auto;
        width: 636px;
        padding-bottom: 0px;
        padding-left: 20px;
        padding-right: 20px;
        border-right: solid 1px #d6d6d6;

        }

#main ul {
        font-family: 'futura';
        font-size: 14px;
        text-align: left;
        color: #585858;
}

#main a {
        font-family: 'futura';
        font-size: 14px;
        text-align: left;
        color: #220494;
        text-decoration: none;
}

#main a:hover {
        color: #C00000;
}

#tweets {
        float: right;
        height: 350px;
        width:  200px;
        border-right: 1px solid;
        border-left: 1px solid;
        padding-left: 3px;
        padding-right: 3px;

}

p.center {
        width:  600px;
        margin: 0 auto;
}

p.policy {
        margin-left: 225px;
}

#footer {
        position: relative;
        margin-top: 0px;
        clear: both;
        height: 400px;
        background:     url("images/footer1.png") no-repeat 100% 0px;
        }

#navigation ul {
        padding: 0px;
        margin-right: 20px;
        list-style-type: none;

}

#navigation li {
        padding-bottom: 10px;

}

#navigation ul a {
        color: #169942;
        font-family: 'child';
        font-size: 18px;
        text-decoration: none;

}


#navigation ul li a.active {
        color: #84c124;
}

#navigation a:hover {
        color: #220494;
}

#bottomfooter {
        position: absolute;
        height: 150px;
        width: 955px;
        padding-top: 20px;

        }

p.bottomfooter {
        text-align: center;
}

p.quotes {
        text-align: center;
        font-style: italic;
        color: #9966FF;
        padding-bottom: 3px;
        padding-top: 3px;

}

1 个答案:

答案 0 :(得分:1)

您的问题是CSS,特别是#header

#header {
    position: absolute; //this and the height are your problem
    width: 955px;
    height: 100%;
    background:     url("artwork/header1.png") no-repeat 100% 0px;                                                
}

您的header div覆盖了您的链接,使其无法点击。将高度更改为400px应该会修复。