How to create an HTML page with dividers like this

偶尔善良 提交于 2020-01-15 21:18:39

问题


I'd like to create a webpage which looks like this: http://i.imgur.com/HVKRB.png

I can't use frames(I'll be using AJAX on the site so more reason to have everything in one page because content on one page influences others. What's the cleanest way to do something like this?

A website which does something similar would be Google Reader. I'm a total noob with HTML and I'm not sure how they accomplished that.

EDIT: the sections should take up the entire browser window (so there is no scrolling down on the page, just individual sections. Google Reader is a good example of this. Thanks :)


回答1:


Here is a very simple example: http://jsfiddle.net/C7eA8/. Note you will get problems using prozentual width and border on the same element. To get pixel perfect solution use width in px or draw the border to elements in the section divs.




回答2:


Here's one way to do it:

<?DOCTYPE html>
<html>
<head>
<style type="text/css">
    * {
        margin:0px;
        padding:0px;
    }
    .left {
        float:left;
        width:20%;
        height:500px; /* probably want to let content set height, though */

        background:#ccc;
    }
    .right {
        width:80%;
        float:right;
    }
    .right .top {
        height:200px; /* probably want to just let content set height, though... */

        background:#00f;
    }
    .right .bottom {
        height:300px;
    }
    .right .bottom .bottom-left {
        float:left;
        width:20%;
        height:100%;

        background:#ddd;
    }
    .right .bottom .bottom-right {
        float:right;
        width:80%;
        height:100%;

        background:#666;
    }   
</style>
</head>
<body>

<div class="left"></div>
<div class="right">
    <div class="top"></div>
    <div class="bottom">
        <div class="bottom-left"></div>
        <div class="bottom-right"></div>
    </div>
</div>

</body>
</html>



回答3:


Just make a layout like the page you want and set overflow-y:scroll; in the required div. That will work fine.




回答4:


This can be accomplished by using HTML's framset tag. The syntax looks like this:

<frameset cols="25%,*,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>

Read more about framesets here: http://www.w3schools.com/tags/tag_frameset.asp

EDIT: Oops, forgot you can't use frames. You should use tables to accomplish this, but I wouldn't recommend it. You'd use rowspan="2" to make that first cell span the entire height of the page, and a colspan="2" on that top right cell.




回答5:


Everybody always disrespects my old-school tables. However, it is crossbrowser and it doesn't mess up the layout when windows width gets manipulated. Live demo: http://jsfiddle.net/hobobne/CPvTw/

<html>
    <head>
        <title>4 section demo</title>
        <style>
            html, body {height: 100%;}

            #global_table {border-collapse:collapse; width: 100%; height: 100%;}

            #section_0,
            #section_1,
            #section_2,
            #section_3,
            #section_4 {border: 1px solid #000000; font-weight: bold; text-align: center;}

            #section_0 {padding: 20px 0px; height: 1%;}
            #section_1 {}
            #section_2 {}
            #section_3 {}
            #section_4 {}
        </style>
    </head>
    <body>
        <table cellpadding="0" cellspacing="0" border="0" id="global_table">
            <tr>
                <td colspan="3" id="section_0">section 0</td>
            </tr>
            <tr>
                <td rowspan="2" id="section_1">section 1</td>
                <td colspan="2" id="section_2">section 2<div id="dragbar"></div></td>
            </tr>
            <tr>
                <td id="section_4">section 4</td>
                <td id="section_3">section 3</td>
            </tr>
        </table>
    </body>
</html>


来源:https://stackoverflow.com/questions/6825774/how-to-create-an-html-page-with-dividers-like-this

标签