请帮助我花了这么长时间才找到答案。我有一个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 | Telephone: 01473 601327 | Email:willowsipswich@hotmail.co.uk</p>
<p class="bottomfooter"> © 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;
}
答案 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
应该会修复。