Question

alt text http://img13.imageshack.us/img13/9776/dviswheretogo.png

蓝色是角落图像的位置

绿色是顶部x轴上的重复图像，是同一模板的所有部分！

橙色是在y轴上重复的simgle图像

为了澄清这里是我到目前为止所尝试的，我对此感到生气，因为当我使用相对位置时它会因为背景高于上而破裂！无论如何，我需要为每个项目定义高度和宽度！

    .sheet {position:relative;
    top:140px;
    width:1000px;}

    .tl {
    background:url(../images/sheet_top_left-trans.png) no-repeat;
    width:20px;
    height:20px;
    top:0px;
    left:0px;}

    .tm {
    background:url(../images/sheet_top-trans.png) repeat-x;
    width:960px;
    height:20px;}

    .tr {
    background:url(../images/sheet_top_right-trans.png) no-repeat;
    width:20px;
    height:20px;
    top:0px;
    right:0px;}

    .content {
    background:url(../images/sheet_middle.png) repeat-y;
    top:20px;
    width:1000px;
    height:400px;}/* Demonstration only, please remove later */

    .bl {
    background:url(../images/sheet_bottom_left-trans.png) no-repeat;
    width:20px;
    height:30px;}

    .bm {
    background:url(../images/sheet_bottom-trans.png) repeat-x;
    height:30px;
    width:960px;
    bottom:0px;
    left:20px;}

    .br {}

和html

        <div class="sheet"><!-- Glass Effect Starts here -->

        <div class="tl"></div>
        <div class="tm"></div>
        <div class="tr"></div>
          <div class="content">Here we go again</div>
        <div class="bl"></div>
        <div class="bm"></div>
        <div class="br"></div>

如果我使用绝对的帖子，我不能让底部图像坚持下去！它在顶部工作！

现在我发现我的方式是跨浏览器（即使IE6只是不像我一样使用透明的PNG），我们走了：

HTML：

    <div class="sheet">

      <div class="top_sheet">
        <div class="tl"></div>
        <div class="tm"></div>
        <div class="tr"></div>
      </div>

        <div class="middle">.</div>

      <div class="bottom_sheet">
        <div class="bl"></div>
        <div class="bm"></div>
        <div class="br"></div>
      </div>


    </div><!-- End of the sheet class -->

CSS：

.sheet {position:relative;
width:1000px;
top:10px;}

.top_sheet {width:1000px;
height:20px;}

.tl {float:left;
background:url(../images/sheet_top_left-trans.png) no-repeat;
height:20px;
width:20px;}

.tm {float:left;
background:url(../images/sheet_top-trans.png) repeat-x;
height:20px;
width:960px;}

.tr {float:right;
background:url(../images/sheet_top_right-trans.png) no-repeat;
height:20px;
width:20px;}

.middle {position:relative;
background: url(../images/sheet_middle.png) repeat-y;
width:1000px;
height:400px;}

bottom_sheet {width:1000px;
height:30px;}

.bl {float:left;
background:url(../images/sheet_bottom_left-trans.png) no-repeat;
width:20px;
height:30px;}

.bm {float:left;
background:url(../images/sheet_bottom-trans.png) repeat-x;
width:960px;
height:30px;}

.br {float:right;
background:url(../images/sheet_bottom_right-trans.png) no-repeat;
width:20px;
height:30px;}

Answer 1

尝试使用你已经拥有的相同的html，这里看起来效果很好。

将角落移动到一个包罗万象的顶部和底部栏中。然后左右浮动各个角落。

CSS：

.sheet {
    position:relative;
    width:1000px;
    top:140px;}
.tl {
    background:url(images/sheet_top_left-trans.png) no-repeat;
    float:left;
    width:20px;
    height:20px;
    margin-left:-20px;}
.tm {
    background:url(images/sheet_top-trans.png) repeat-x;
    height:20px;
    margin-left:20px;}
.tr {
    background:url(images/sheet_top_right-trans.png) no-repeat;
    float:right;
    width:20px;
    height:20px;}
.content {
    background:url(images/sheet_content.png) repeat-y;
    clear:both;
    height:200px;}/* Demonstration only, please remove later */
.bl {
    background:url(images/sheet_bottom_left-trans.png) no-repeat;
    float:left;
    width:20px;
    height:30px;}
.bm {
    background:url(images/sheet_bottom-trans.png) repeat-x;
    height:30px;}
.br {
    background:url(images/sheet_bottom_right-trans.png) no-repeat;
    float:right;
    width:20px;
    height:30px;}

HTML：

<div class="sheet"><!-- Glass Effect Starts here -->
    <div class="tm">
        <div class="tl"></div>
        <div class="tr"></div>
    </div>
    <div class="content">Here we go again</div>
    <div class="bm">
        <div class="bl"></div>
        <div class="br"></div>
    </div>
</div>

Answer 2

您是否尝试过一些跨浏览器的css框架，例如http://www.blueprintcss.org？这些框架通常允许您定义网格，并通过重置某些css属性帮助您克服特定于浏览器的怪癖......

Answer 3

Fluid width containers with rounded corners using valid CSS and XHTML

Answer 4

我经常看到的方法是将所有div嵌套到它们中，然后在每个div上设置background-repeat和background-position。基本示例：

<div class="tl">
<div class="tr">
    <div class="content">Here we go again</div>
</div>
</div>

使用CSS：

.tl, .tr {
    width: 100%;
    height: 100%;
}

.tl {
    background: url("tl.png") no-repeat 0 0;
}
.tr {
    background: url("tr.png") no-repeat 100% 0;
}

只需将其缩放即可使用所有单独的图像。你需要先将边（在'div nest'的外面）和角落最后（在内部，在内容div之前）。

这是“divitis”的经典案例，但在CSS3受到良好支持（你可以使用多个背景或只是边框图像）之前很难避免。您可能需要查看Sliding Doors，其中显示了一种减少所需元素/图像数量的技术。

Answer 5

的CSS： .sheet { 位置：相对; 顶：140px; 宽度：1000像素; }

    .tl {
    background:url(blue.bmp) no-repeat;
    width:20px;
    height:20px;
    top:0px;
    left:0px;
    }

    .tm {
    position: absolute;
    background:url(green.bmp) repeat-x;
    width:960px;
    height:20px;
    left: 20px;
    top: 0px;
    }

    .tr {
    position: absolute;
    background:url(blue.bmp) no-repeat;
    width:20px;
    height:20px;
    top:0px;
    right:0px;
    }

    .content {
    background:url(orange.bmp) repeat-y;
    top:20px;
    width:1000px;
    height:400px;}/* Demonstration only, please remove later */

    .bl {
    background:url(blue.bmp) no-repeat;
    width:20px;
    height:30px;}

    .bm {
    position: absolute;
    background:url(green.bmp) repeat-x;
    height:30px;
    width:960px;
    bottom:0px;
    left:20px;}

    .br {
        position: absolute;
        background:url(blue.bmp) no-repeat;
        width:20px;
        height:30px;
        top:420px;
        right:0px;
    }

  html:
<div class="sheet"><!-- Glass Effect Starts here -->

    <div class="tl"></div>
    <div class="tm"></div>
    <div class="tr"></div>
      <div class="content">Here we go again</div>
    <div class="bl"></div>
    <div class="bm"></div>
    <div class="br"></div>

我对每个div进行绝对定位，以便我们可以将它们并排放置。希望能帮助到你。顺便说一句，我改变了背景网址。：）

Answer 6

他说这话时眨眨眼，可能会后悔：

你知道，如果你使用了表......;＆gt; P！

（现在，等待表格与css人群展开！）

这看起来像是常规的花园式圆角'部分'。

这是一张没有图片的人：

http://www.html.it/articoli/nifty/index.html

以下是：

http://kalsey.com/2003/07/rounded_corners_in_css/

当您完成编码并且它看起来像您想要的时候，将其转换为代码段并保留它。

Answer 7

我并不是说聪明，但你几乎不需要7个div来实现你想要达到的目标。五个div足够了（在大多数情况下你甚至不需要它。我真的不知道如何解释，但你可以检查http://www.nil.com/english（快速链接或获取支持框）来源。

此外，还有一本名为"Bulletproof web design"

的好书

Answer 8

你很亲密。您必须position包含元素relative（以便所有absolute定位的子元素都相对于它）和position角落部分absolute。这是一个SSCCE：

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 1898479</title>
        <style>
        .sheet {
            position: relative;
            width: 200px;
        }

        .tl {
            position: absolute;
            width:20px;
            height:20px;
            top: 0;
            left: 0;
            background: blue;
        }

        .tm {
            position: absolute;
            height:20px;
            top: 0;
            left: 20px;
            right: 20px;
            background: green;
        }

        .tr {
            position: absolute;
            width: 20px;
            height: 20px;
            top: 0;
            right: 0;
            background: blue;
        }

        .content {
            background: orange;
            padding: 20px 0; /* Padding must be at least as much as the "borders" are thick. */
            height: 300px;
        }

        .bl {
            position: absolute;
            width: 20px;
            height: 20px;
            bottom: 0;
            left: 0;
            background: blue;
        }

        .bm {
            position: absolute;
            height: 20px;
            bottom: 0;
            left: 20px;
            right: 20px;
            background: green;
        }

        .br {
            position: absolute;
            width: 20px;
            height: 20px;
            bottom: 0;
            right: 0;
            background: blue;
        }
        </style>
    </head>
    <body>
        <div class="sheet">
            <div class="tl"></div>
            <div class="tm"></div>
            <div class="tr"></div>
            <div class="content">Here we go again</div>
            <div class="bl"></div>
            <div class="bm"></div>
            <div class="br"></div>
        </div>
    </body>
</html>

您只需要确保使用上面示例中使用的strict doctype，以便它也可以在IE中使用。

7分，如何让他们留在画面说的地方？

8 个答案: