CODEWITHSUNDEEP
html
Jammy Jaq
Jammy Jaq

Reputation: 3

My a href doesn't work in my ul html5

Please help I have spent so long on this and cannot find the answer. I have an a href in a ul and have tried to write everything in html5. I am using KomodoEdit to write the html and everything works fine in there - links and all. I have used the HTML5 validator and my code passes. Here is my html file - when I load it in Chrome, Safara and FF it all looks fine but the text links don't work - I have 3 image links at the minute and they both work fine its just the text links in the ul and the first paragraph. Someone please help me.

It is such simple code - I haven't had a chance to move on to anything more exciting cos I can't get past this!

    <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:[email protected]</p>
                    <p class="bottomfooter"> &#169; copyright <a href="http://www.harambee.biz">harambee.biz</a></p>

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

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


 </body>


</html>

And my 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;

}

Upvotes: 0

Views: 24468

Answers (1)

MikeSmithDev
MikeSmithDev

Reputation: 15797

Your problem is CSS, specifically #header

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

Your header div is overlaying your links, making them not-clickable. Changing the height to 400px should fix.

Upvotes: 2

Related Questions