-4

これらの div の配置を正しくしようとしているのですが、バナーの div がページの半分でページの右側にあるようにして、コンテナーと同じ水平方向のスペースをカバーし、メニューバーを表示するようにしたいと思います。 div 左揃え。

HTML: 

 <html>
    <head>
    <meta content="en-gb" http-equiv="Content-Language">
    <title>hhhh</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    </style>
    </head>
    <body>

    <div id="bannerdiv" title="Banner" align="center">

        <img alt="logo" height="63" src="images/Logo.gif" width="126"></div>


    <div id="container">
    <h2 class="auto-style2">tgfdgfdgfghgfhgfh</h2>

        </div>

    <div id="menubar" title="menu" style="width: 13%">
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>
    </div>
    <div id="mainpage" class="auto-style1" style="height: 96px; width: 82%">


    </div>


    </body>
    </html>

CSS:

#container {
    background-color: #008852;
    font-family: Arial;
    color: #FFFFFF;
    text-align: center;
    margin-top: 10px;
}

#menubar

ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
a:link, a:visited {
    display:block;
    font-weight:bold;
    color:#000000;
    background-color:#EFF1EB;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    border-style: solid;
    border-color: #638529;
    font-family: Arial, Helvetica, sans-serif;
    border-top-width: 1px;
}
a:hover, a:active {
    background-color:#7A991A;
}
#mainpage {
    width:50%;
    float:left;
    background-color: #EDEFEE;
}
#menubar {
    font-size: xx-small;
    width:50%;
    float:left;
}
4

2 に答える 2