1

div 内に 2 セットのボタンがあります。1 つの div はブラウザの左側に、もう 1 つは右側にフロートする必要があります。絶対に動かないように固定する必要があります。私が抱えている唯一の問題は、ブラウザの右側に移動するための正しいものを取得することです。混乱しているようで、左側にとどまりたいと思っています。

HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <HTML>
    <HEAD>
    <TITLE>My Company</TITLE>
    <SCRIPT SRC="jscript/jquery/jquery-1.10.2.min.js"></SCRIPT>
    <? include("include/restocss.php"); ?>
</HEAD>
<BODY>
    <DIV ID="leftbuttons">
        <DIV CLASS="activitybutton">This is left</DIV><BR>
        <DIV CLASS="activitybutton"></DIV><BR>
        <DIV CLASS="activitybutton"></DIV><BR>
        <DIV CLASS="activitybutton"></DIV>
    </DIV>
    <CENTER>
    <DIV ID="wrapper">
        <DIV ID="header">
            <img src='css/images/logo.png' />
        </DIV><br>
        <DIV ID="navbar">NAVIGATION</DIV>
            <script type="text/javascript"> 
                $(function() {
                    moveScroller();
                });
            </script>
        <DIV ID="content">

        </DIV>
        <DIV ID="footer">

        </DIV>
    </DIV>
    </CENTER><
    <DIV ID="rightbuttons">
        <DIV CLASS="activitybutton">This is right</DIV><BR>
        <DIV CLASS="activitybutton"></DIV><BR>
        <DIV CLASS="activitybutton"></DIV><BR>
        <DIV CLASS="activitybutton"></DIV>
    </DIV>
</BODY>
</HTML>

CSS :

{ margin: 0; padding: 0; border: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background-color: #B99666;
 background-image: url('images/bg.jpg');
 background-size: 100%;
 background-repeat: no-repeat;
 background-attachment: fixed;
}

#wrapper { 
 margin: 0 auto;
 width: 800px;

}

#header {
 float:left;
 color: #333;
 width: 705px;
 padding: 10px;
 border: 0px solid #ccc;
 height: auto;
 margin: 5px 0px 5px 0px;
 background: #F2F2E6;
 /*margin-left: 95px;*/
}

.activitybutton{
 color: #333;
 width: 195px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 height: 60px;
 margin: 0px 0px 5px -11px;
 background: #F2F2E6;
 z-index: 2;
}

#navbar {
 width: 720px;
 border: 1px solid #ccc;
 background: #3A451C;
 margin: 5px 5px 5px 0px;
 margin-top: 0px;
 padding: 0px;
 /*margin-left: 95px;*/
 height: auto;
 float: left;
}

#leftbuttons { 
 color: #333;
 border: 0px solid #ccc;
 /*background: #E7DBD5;*/
 margin: 180px 0px 0px 0px;
 padding: 10px;
 height: auto;
 width: 125px;
 position: fixed;
 float: left;
 z-index: 2;
}

#content {
 float: left;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 5px 5px 0px;
 margin-top: 0px;
 padding: 10px;
 height: 800px;
 width: 705px;
 display: inline;
}

#rightbuttons { 
 color: #333;
 border: 0px solid #ccc;
 /*background: #E7DBD5;*/
 margin: 180px 0px 0px 0px;
 padding: 10px;
 height: auto;
 width: 125px;
 position: fixed;
 float: right;
 z-index: 2;
}

#footer { 
 float: left;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 5px 5px 0px;
 /*margin-left: 95px;*/
 margin-top: 0px;
 padding: 10px;
 height: 800;
 width: 705px;
 display: inline;
 position: relative;
}

.logfooter { position:relative; bottom: 0px; left: 0px; z-index: 5; display:inline-block; } 
.footerbranch { position:relative; bottom: 232px; left: 702px; z-index: 1; display:inline-block; } 
.navlogbottom { position:relative; bottom: 232px; left: 702px; z-index: 4; display:inline-block; }

問題のdivは「rightbuttons」divです

4

3 に答える 3