0

以下のコードを使用していますが、ブラウザのサイズを変更すると、メインページの div がメニューバーの div の下にラップするという問題が発生します。最小幅と最大幅を試しましたが、何も機能しませんでした。どんな助けでも大歓迎です。ブラウザを小さくしても、メインページの div がメニューバーの下に落ちず、横に並んでいることを望みます。

HTML:

<div id="menubar" style="width: 16%; height: 100px;" title="menu" align = "center"> <!-- This is the code for the menubar, to add a new option to the menubar-->
                                                                                    <!-- Add a new <li> tag below the bottom link, to delete a link, delete the desired
                                                                                    link element. -->
    <ul>
        <li style="align: center;"><img alt="logo" height="63" src="images/ClevelandLogo.gif" width="126" /></li>
        <li ><a href="index.html" style="height: 20px;" class="auto-style5">Home</a></li>
        <li><a href="rthyth.html">General</a></li>
        <li><a href="rhtrhrthrth">Site map</a></li>
        <li><a href="thrrthrthtr">Rules & Procdures</a></li>
        <li><a href="rth" style="height: 20px">Envirommental</a></li>
        <li><a href="rth">Energy</a></li>
        <li><a href="rhtrhrth">IT</a></li>
        <li><a href="rthtrhrt">SAP</a></li>
        <li><a href="rthtrhtrhtrhtrh.html" style="height: 20px; width: 180px;">rhtrhtrh</a></li>
        <li><a href="quality.html">Quality</a></li>
        <li><a href="safety.html">Safety</a></li>
        <li><a href="hr.html">Human resources</a></li>
        <li><a href="prod.html">Production</a></li>
        <li><a href="eng.html">Engineering</a></li>
        <li><a href="feedback.html">Feedback</a></li>
        <li><a href="tees.html">wrefwefwefwef</a></li>
        <li><a href="cmp.html">Company mobile phones</a></li>
        <li><a href="cms.html">Climate Survery Updates</a></li>
        <li><a href="training.html">Training</a></li>
        <li><a href="sports.html">Sports Dome</a></li>



    </ul>
</div>
<!--The mainpage div is where all the page's indivdual content is displayed.-->

<div id="mainpage" class="auto-style1" style="height: 486px;  float:left; color: #000000; font-size: 11pt;"> 
<p> -0je45iwgtjj4eg0prjegtgfjotrsjgse'[agpraeogjk-odetkgbokporgkspfkdgkpfdgkpdfkg</p>
</div>
<!-- The container1 div is used to create the bottom green line in the site -->

CSS:

#mainpage 
{
    border: thin solid #008852;
    width: 84%;
    float: left;
    background-color: #EDEFEE;
    height: auto;
    border-radius: 20px;
    height: 100%;
    position: fixed;
    color: #008852;
}

#mainpage a:link, #mainpage a:visited 
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: bold;
}

#menubar ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
}

#menubar a:link, #menubar a:visited
{

    border-top-width: 1px;
    display: block;
    font-weight: bold;
    color: #000000;
    background-color: #EFF1EB;
    width: 180px;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    border-style: solid;
    border-color: #638529;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px;
    position: fixed;

}
4

3 に答える 3

0

両方の div を固定幅の別の要素にラップします。次に、メニュー バーとメイン ページを左にフロートします。

div {
    width:50px;
    height:50px;
    border:1px solid black;
    float:left;
}
section {
    width:110px;
}

次のようなもの: http://jsfiddle.net/uBgg3/

于 2013-09-16T14:27:36.100 に答える
-1

2 つの div を html テーブル (2 列、1 行) に配置し、body 列の幅を特定の値またはパーセンテージに設定できます。

于 2013-09-16T14:10:57.417 に答える