0

我正在尝试创建一个简单的页面（仅使用 HTML 和 CSS），但我在使用某些元素时遇到了困难。

main-nav 和内容位于页脚和 tilda 下方。与这个斗争了几个小时。

请帮忙 ！！！

html:

<div id="container">
    <div id="header">
        <div id="logo">
            <a class="logo-image" href="/Common/vwWelcomeForm">Home</a>  
        </div>
        <div id="version">
            Version: <label for="Product_Version">AUSQUAD 1.5 SQL 1.5</label>
        </div>
        <div id="top-nav">
            <label for="">24/10/2013 13:38:44</label>&nbsp;|
            <a href="/Common/vwWelcomeForm">Home</a>&nbsp;|
            <label for="Administrator">Administrator</label>&nbsp;|
            <a href="/">Log Out</a>
        </div>
        <div id="header-title">
            <h2>
                Welcome to {<label for="Ausquad">Ausquad</label>}
            </h2>
        </div>
    </div>
    <div id="main-nav">
        <div role="navigation" aria-label="Main menu">
            <ul class="nav">
                <li><a href="/Common/vwWelcomeForm">Security Management</a>
                    <ul>
                        <li><a href="/">Company Setup</a></li>
                        <li><a href="/">User List</a></li>
                        <li><a href="/">Change Password</a></li>
                        <li><a href="/">Module Permission</a></li>
                        <li><a href="/">List Master</a></li>
                        <li><a href="/">Master Groups</a></li>
                        <li><a href="/">User Groups</a></li>
                    </ul>
                </li>
                <li><a href="/Common/vwWelcomeForm">Message Administration</a>
                    <ul>
                        <li><a href="/">Message Type Master</a></li>
                        <li><a href="/">Enquiry Source Master</a></li>
                        <li><a href="/">Standard Message Master</a></li>
                        <li><a href="/">Message</a></li>
                        <li><a href="/">Message Log Management</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div id="main-content">                    
       test
    </div>
    <div id="tilda">
    </div>
    <div class="footer_left">
        Copyright © 2013 Private Limited.
    </div>
</div>

CSS是：

#container{
    width: 100%;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}

#header{
    position: relative;
}

#logo{
    padding: 0.625em 0 0 1.250em;
    float:left;
}
/* converted px to em */
#version{
    text-decoration: none;
    color: #000000;
    font-size: 0.750em;
    position: absolute;
    top: 4em;
    left: 17em;
}
#logo a {
    display:inline-block;
}
a.logo-image {
    background: url('../images/logo-dashboard.png') no-repeat top left;
    width: 147px;
    height:76px;
    text-indent: -9999px; /* hides the link text */   
}
a.advertiser-logo-image {
    background: url('../images/Evangelsoft_Logo_Orginal_1.jpg') no-repeat top left;
    display: block;
    width: 100px;
    height: 63px;
    text-indent: -9999px; /* hides the link text */   
}

#top-nav{
    position:absolute;
    right:0.5em; /* rtl-review */
    top:0.25em; 
    font-size:0.9em;
    z-index: 1000;
}

#top-nav a {
    text-decoration: none;
    color: #039;
    padding: 0.15em 0em 0.15em 0em;
}
#top-nav a:hover{
    color: #017cc2;
}
#header-title{
   width: 100%;
   position: absolute;
   top: 20px;
   margin: 0 auto;
   text-align:center;
}
#header-title h2{
   font-size: 1.1em;
   font-weight: 600;
   border-bottom: 1px solid #cecfce;
   color: #039;
   margin: 1em 0em 0.5em 0.25em;
   line-height: 1.2em;
}
#main-nav{
   float: left;
   margin-top: 1em;
   width: 100%;
}
#main-content{
   float: left;
   width: 100%;
   padding: 10px;
   padding-bottom: 60px;
   margin-top: 1em;
   clear: left;
}
#tilda {
   position: absolute;
   bottom: 24px;
   height: 36px;
   width: 100%;
   left: 0;
   right:0;
}
.footer_left {
   bottom: 0;
   height: 24px;
   margin: 2px 0 0;
   position: absolute;
   text-align: right;
   width: 100%;  
   padding: 10px 0px 5px 0px;
   color: #434343;
   border-top:1px solid #ddd;
   background: none repeat scroll 0 0 #E8E8E8;
}
4

0 回答 0