0

ヘッダー、左の列、コンテンツ領域、および右の列がある基本的なレイアウトを作成しようとしています。leftmenu (左列) の margin-top を設定すると、div が押し下げられません。div をヘッダーの下に配置し、その周りに境界線を付けたい。

.leftmenu の maring-top が機能していません。ヘッダー div の下に境界線を表示したいです。

CSS

   body
   {
    position:absolute;
    top:0px;
    left:0px;
    margin:0px;
    background-color:yellow;
   }
   .header
   {
    background-color:#b0c4de;
    border: 0px solid black;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
   }
   .topmenu
   {
    margin-top:100px;
   }
   .topmenu ul
   {
            margin-left:280px;
            margin-bottom:2px;  
            width:800px;
   }
   .topmenu li
   {
     display:inline;
     width:120px;
     border:1px solid green;
     margin-left:8px;
     padding:4px;
     text-align:center;
   }

   .topmenu li a
   {
    border : 0px;
    text-decoration:none;
   }
   .leftmenu
   {
    height:100%;
    border:1px solid black;
    width:200px;
    padding-top:150px;
    margin-top:150px;
   }
   .leftmenu ul
   {
    list-style-type: none;
    margin:0px;
    margin-left:3px;
   }

HTML

 <body>
    <div class="header">
        <div class="topmenu">
            <ul>
                <li><a href="#">Some Link1</a></li>
                <li><a href="#">Some Link2</a></li>
                <li><a href="#">Some Link3</a></li>
                <li><a href="#">Some Link4</a></li>
                <li><a href="#">Some Link5</a></li>
                <li><a href="#">Some Link6</a></li>
            </ul>
        </div>
    </div>
    <div class="leftmenu">
            <ul>
                <li><a href="#">Some Link1</a></li>
                <li><a href="#">Some Link2</a></li>
                <li><a href="#">Some Link3</a></li>
            </ul>
    </div>
    <div class="content">
        &nbsp;
    </div>
    <div class="rightmenu">
                <ul>
                    <li><a href="#">Some Link1</a></li>
                    <li><a href="#">Some Link2</a></li>
                    <li><a href="#">Some Link3</a></li>
                </ul>
    </div>
 </body>

フィドルhttp://jsfiddle.net/XBxNs/を参照してください

4

1 に答える 1

0

これをチェックしてくださいhttp://jsfiddle.net/nalaka526/7Q3Jf/1/

<html>
<head>
    <style type="text/css">
   body
   {
    position:absolute;
    top:0px;
    left:0px;
    margin:0px;
    background-color:yellow;
   }
   .header
   {
    background-color:#b0c4de;
    border: 0px solid black;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
      height: 100px;
   }
   .topmenu
   {
    margin-top:100px;
   }
   .topmenu ul
   {
    margin-left:280px;
    margin-bottom:2px;  
    width:800px;
   }
   .topmenu li
   {
     display:inline;
     width:120px;
     border:1px solid green;
     margin-left:8px;
     padding:4px;
     text-align:center;
   }

   .topmenu li a
   {
    border : 0px;
    text-decoration:none;
   }
   .leftmenu
   {
    height:100%;
    border:1px solid black;
    width:200px;


      display:table-cell;
   }
   .leftmenu ul
   {
    list-style-type: none;
    margin:0px;
    margin-left:3px;
   }

       .content
   {
    display:table-cell;
      width:400px;
   }
         .rightmenu
   {
    display:table-cell;
      float: right;
   }

  </style>
</head>
<body>
    <div class="header">
        header
    </div>
    <div class="topmenu">
        topmenu
        <ul>
            <li><a href="#">Some Link1</a></li>
            <li><a href="#">Some Link2</a></li>
            <li><a href="#">Some Link3</a></li>
            <li><a href="#">Some Link4</a></li>
            <li><a href="#">Some Link5</a></li>
            <li><a href="#">Some Link6</a></li>
        </ul>
    </div>
    <div class="leftmenu">
        leftmenu
        <ul>
            <li><a href="#">Some Link1</a></li>
            <li><a href="#">Some Link2</a></li>
            <li><a href="#">Some Link3</a></li>
        </ul>
    </div>
    <div class="content">
        content&nbsp;
    </div>
    <div class="rightmenu">
        rightmenu
        <ul>
            <li><a href="#">Some Link1</a></li>
            <li><a href="#">Some Link2</a></li>
            <li><a href="#">Some Link3</a></li>
        </ul>
    </div>
</body>
</html>

</ p>

于 2012-04-26T02:39:44.230 に答える