发表新帖
发表新帖

HTML layout: adding sidebar column to existing site

前端 未结
关注
3 761
名媛妹妹
名媛妹妹 2021-02-07 13:44

I have a site with a body that looks like that:


  
...

  


        

                      

              相关标签:
3条回答
  • 死守一世寂寞
    2021-02-07 14:31

    I made a little jsfiddle to help you getting started. Also you might want to check if your div contents aren't messing up the whole CSS. Hope this helps.

    Edit : all colors and dimensions are dummy ones used for the example. It shoudk work with any dimension.

    html :

    <body>
  <div id="sidebar">...</div>
  <div id="header">
      <div id="testLeft"></div>
      <div id="testRight"></div>
      <div class="clearFix"></div>
  </div>
  <div id="content">...</div>
  <div id="footer">...</div>
</body>

    css : 

    .clearFix {
    clear: both;
}

#sidebar {
    width: 50px;
    height: 30px;
    background-color: green;
    float: left;
}

#header {
    width: 250px;
    background-color: red;
    margin-left: 55px;
}

#testLeft {
    width: 50px;
    height: 50px;
    float: left;
    background-color: pink;
}

#testRight {
    width: 50px;
    height: 50px;
    margin-left: 55px;
    background-color: purple;
}

#content {
    width: 250px;
    height: 20px;
    background-color: blue;
    margin-left: 55px;
}

#footer {
    width: 250px;
    height: 20px;
    background-color: orange;
    margin-left: 55px;
}
    0 讨论(0)
  • 深忆病人
    2021-02-07 14:36

    I'd use HTML5 elements to give the markup semantic meaning.

    <body>
  <aside><!-- Nav bar --></aside>
  <article>
    <header>...</header>
    <section>...</section>
    <footer>...</footer>
  </article>
</body>

    Then style aside and article with float: left.

    0 讨论(0)
  • 一向
    2021-02-07 14:37

    I like to use an absolutely positioned sidebar, then set the padding on the wrapper to the width of that element. Then I either set the margin-padding on the other elements, or I add it to the padding on the wrapper.

    http://jsfiddle.net/jAVQv/

    <div class="container">
    <div id="sidebar"></div>
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

    .container { position:relative; padding:0 0 0 55px; }
#sidebar {
    position:absolute;
    top:0; bottom:0; left:0;
    width:50px;
    background:#000;
}

#header { border:1px solid #000; width:100px; height:20px; 
    margin:0 0 5px 0;
}
#content { border:1px solid #000; width:100px; height:50px;
    margin:5px 0 5px 0;
}
#footer { border:1px solid #000; width:100px; height:20px;
    margin:5px 0 0 0;
}
    0 讨论(0)
 看不清?
提交回复
热议问题