divマージンを取得できません - 作業するトップ

ヘッダー、左の列、内容の領域、および右の列を持つ基本レイアウトを作成しようとしています。左メニューの余白部分（左の列）を設定しているときは、divを押していません。 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/

出典

2012-04-25 user1357084

こちらをご覧ください - http://matthewjamestaylor.com/blog/perfect-3-column.htm – Asif

チェックこの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>

出典

2012-04-26 02:39:44 Nalaka526

divマージンを取得できません - 作業するトップ

答えて

関連する問題