Question

我正在处理我正在处理的任务中的一些问题。

非常感谢一些帮助，如果它是我想念的小东西，或者我完全偏离我的代码。

我遇到的问题是，我似乎无法让我的导航栏在我的横幅和页脚部分之间拉伸。我似乎也无法将我的内容div和其中的图像表对齐到导航栏的左侧。

到目前为止我的代码是：https://pastebin.com/cFVMRCaM

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Bazaar Ceramics</title>

<style>

body {
    margin: 0px;
    padding: 0px;
}

.mainwrapper {
    width: 100%;
    margin: 0 auto;
    height: 100%;
}

.pagebanner {
    height: 250px;
    margin: 0;
}

.pagebanner img {
    width: 100%;
    height: 100%;
}

.main {
    margin: 0;
}

.navbar {
    background-color: brown;
    height: 100%;
    width: 20%;
    float: left;
    margin-bottom: 
}

.navbar li {
    list-style: none;
    margin-bottom: 15px;
}



.headers {
    width: 80%;
    float: left;
    padding: 0;
    height: 100%;
}

.header {
    background-color: #000;
    text-align: center;
}

.header h1 {
    color: #fff;
    margin: 0;
}

.subheading {
    background-color: #f8d631;
    text-align: center;
}

.subheading h2 {
    background-color: #f8d631;
    margin: 0;
}

.content {
    position: relative;
    align: left;

}

.table {

    padding-left:500px
    border: 20px;
    }
.footer {
    background-color: darkgreen;
    height:20px;
    margin-bottom: inherit;

}   
</style>

</head>

<body>

    <div class="mainwrapper">
        <div class="pagebanner">
          <img src="../images/banner.jpg"="PageBanner">
        </div><!--PageBanner-->
    <div class="main">
        <div class="navbar">
            <ul>
                <li>
                    <a href="#">Information</a>
                </li>
                <li>
                    <a href="#">Home</a>
                </li>
            </ul>
        </div><!--Navbar-->

    <div class="headers">
    <div class="header">
            <h1>The Club Site</h1>
    </div><!--Main page heading section-->

    <div class="subheading">
            <h2>Members Prices</h2>
    </div><!--Sub heading section-->
    </div>

    </div>
    <div class="content">
      <div class="table">   
            <table>
            <th>Discount Prices</th>
            <tr><td><img src="../images/smaller/bcpot002_smaller.jpg"</td>
                 <td><img src="../images/smaller/bcpot002_smaller.jpg"</td>
                 <td><img 
               src="../images/smaller/bcpot010_smaller.jpg"</td></tr>
                <tr><td><img src="HTML Pract 
               A/images/smaller/bcpot002_smaller.jpg"</td><td><img src="HTML 
               Pract A/images/smaller/bcpot006_smaller.jpg"</td><td><img 
               src="HTML Pract A/images/smaller/bcpot013_smaller.jpg"</td>
              </tr>
            </table>
        </div><!--Table Section-->  

      </div><!--Content section-->

    <div class="footer">
      <footer>wsrgferg</footer>
    </div><!--Footer section-->
    </div><!--Endwrapper-->

</body>

</html>

在横幅和页脚之间进行垂直导航

0 个答案: