我的页脚已连接到我的导航栏

时间:2014-03-31 01:12:04

标签: html css web

我正在上学的网站。我是CSS和HTML的新手,现在我的页脚停留在我的导航栏上。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <img align="top" src="satellite.jpg" alt="Logo" height="202" width="342">
    <div id="wrapper">
    <div id="headerwrap">
    <div id="header">
     <link rel="stylesheet" type="text/css" href="713210.css">
    <title>Odyssey Space Toy</title>
  </head>
        </div>
        </div>
<div id="leftcolumnwrap">
        <div id="leftcolumn">
<table width="165" cellpadding="0" cellspacing="0">
    <tr>
        <td width="165" style="border: none; padding: 0in">
            <p><a href="Toy%20Works.html">Specifications</a></p>
        </td>
    </tr>
    <tr>
        <td width="165" style="border: none; padding: 0in">
            <p><a href="Purchase.html">Purchase</a></p>
        </td>
    </tr>
    <tr>
        <td width="165" style="border: none; padding: 0in">
            <p><a href="Physics.html">Physics</a></p>
        </td>
    </tr>
    <tr>
        <td width="165" style="border: none; padding: 0in">
            <p><a href="Media.html">Media</a></p>
        </td>
    </tr>
    <tr>
        <td width="165" style="border: none; padding: 0in">
            <p><a href="Games.html">Games</a></p>
        </td>
    </tr>
    <tr>
        <td width="165" style="border: none; padding: 0in">
            <p><a href="Contact.html">Contact</a></p>
        </td>
    </tr>
    <tr>
        <td width="165" style="border: none; padding: 0in">
            <p><a href="Developement.html">In The Works</a></p>
        </td>
    </tr>
</table>
        </div>
        </div>
</body>
<div id="contentliquid"><div id="contentwrap">
        <div id="content">
  <h1>Rocket Toy</h1>
  <p>Is your child interested in space? Want to get your child more
interested in Science? Is your child naturally good with math, and
want to learn Physics? 
  <p style="margin-bottom: 0in" fontSize=150%>With the new Odyssey, your child can
explore space from the safety of you living room!</p>
  </div></div></p></div></ br></ br>
  <div id="footerwrap">
        <div id="footer">
  <hr>
<p style="margin-bottom: 0in"><a href="../Odyssey%20Webpage">About the Toy</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="../Odyssey%20Webpage">Buy Now!</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="../Odyssey%20Webpage">Contact</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="../Odyssey%20Webpage">Developement</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="../Odyssey%20Webpage">Physics</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="../Odyssey%20Webpage">Press</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="../Odyssey%20Webpage">Games</a>&nbsp;&nbsp;|&nbsp;&nbsp;
</p>
<hr>
 </div>
</div>
<p><font size="2" color="white" style="font-size: 10pt"><b>©2014<br><a href="Contact.html">
Bobst, Murphy Troy Co.</a><!-- More Graphics (shows toy, space, awards)Logo
Promotion
 ---></b></font></p>

</html>

CSS          / *由http://www.cssportal.com * /

生成
@import url("reset.css");

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-image:url('space-background.jpg');
}

p {
    padding: 10px;
}

#wrapper {
    margin: 0 auto;
    width: 1200px;
}
a:link {
    color: #56BAEC; 
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
    color: #FFEC94;
    text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
}
#headerwrap {
    width: 1200px;
    float: left;
    margin: 0 auto;
}

#header {
    margin: 5px;
}

#contentwrap {
    width: 1000px;
    float: left;
    margin: 0 auto;
}

#content {
    background: #4227AB;
    border-radius: 10px;
    border: 1px solid #2e1397;
    margin: 3px;
    min-height:250px
}

#leftcolumnwrap {
    width: 200px;
    float: left;
    margin: 0 auto;
    max-height:220px
}

#leftcolumn {
    background: #3A41A6;
    border-radius: 5px;
    border: 1px solid #262d92;
    margin: 5px;
}

#footerwrap {
    width: 1200px;
    float: left;
    margin: 0 auto;
    clear: both;
}

#footer {
    background: 5C33FF;
    border-radius: 10px;
    border: 1px solid #481feb;
    margin: 5px;
}

我想知道你是否可以帮忙解决它。我不熟悉CSS,我从网站上获取代码

1 个答案:

答案 0 :(得分:0)

这不是非常好的代码,因此我建议您加入开发人员。无论如何,只需在CSS中删除此行:

#leftcolumnwrap {
    max-height: 220px;
}