与边界图像的Div [英] Div with Border Images

问题描述

建立一个包含它的边界图像的单个容器div（在我的情况下只在左侧，底部和右侧）有什么好方法？我把它放在页面顶部，重叠其他所有东西（就像OSX风格的下拉对话框一样）。

这里是基本的布局：

alt text http：// www。 nickawilliams.com/images/misc/layout.jpg

以下是我目前为止的内容（可以避免内容的静态宽度/高度？）：
$ b HTML：

 < div class =contentbox> 
< div class =contentbox-wrapperstyle =width：400px> 
< div class =contentbox-midstyle =height：200px> 
< div class =contentbox-w>< / div> 
< div class =contentbox-content> 
 Content Box Test 
< / div> 
< div class =contentbox-e>< / div> 
< / div> 
< div class =contentbox-bottom> 
< div class =contentbox-sw>< / div> 
< div class =contentbox-s>< / div> 
< div class =contentbox-se>< / div> 
< / div> 
< / div> 
< / div> 
  

CSS：

  .contentbox {
 width：100％; 
位置：固定; 
 z-index：2; 
} 
 
 .contentbox-wrapper {
 width：300px; 
 margin-left：auto; 
 margin-right：auto; 
} 
 
 .contentbox-mid {
 height：100px; 
} 
 
 .contentbox-w {
 width：30px; 
身高：100％; 
 background：透明网址（../../ images / contentbox_w.png）; 
 float：left; 
} 
 
 .contentbox-content {
 width：auto; 
身高：100％; 
背景：＃e8e8e8; 
 float：left; 
} 
 
 .contentbox-e {
 width：30px; 
身高：100％; 
背景：透明网址（../../ images / contentbox_e.png）; 
 float：left; 
} 
 
 .contentbox-bottom {
 width：300px; 
 height：30px; 
} 
 
 .contentbox-sw {
 width：30px; 
 height：30px; 
背景：透明网址（../../ images / contentbox_sw.png）; 
 float：left; 
} 
 
 .contentbox-s {
 height：30px; 
 background：透明网址（../../ images / contentbox_s.png）; 
 margin-left：30px; 
 margin-right：30px; 
} 
 
 .contentbox-se {
 width：30px; 
 height：30px; 
背景：透明网址（../../ images / contentbox_se.png）; 
 float：right; 
职位：亲属; 
 bottom：30px; 
} 
  

解决方案

（混合标记和设计），它通常不是获取最终词汇的集成者。但是，您仍然应该尽可能保持一切尽可能干净。

您的结构几乎是您可以用于结束的唯一结构，但如果您的宽度是静态的（300px？），我建议您拥有你的div背景作为一个更大的图像垂直重复。

然后，您会在div中添加一种页脚，您可以将两个底角和底部图片放在一个图像中。一个里面没有5个div，你只能有一个。请注意，在更大的环境中，这也意味着用户可以同时下载2个图像（单个主机最多4个图像），从而使页面的整体下载速度更快。

如果你的宽度是相对于父母的，或者可以以任何方式改变，这显然不起作用。

---

编辑：正如它发生的那样，你指定的宽度是可变的，我不认为有一个更清晰的HTML方式明智的做法。

然而，如果你仍然想最大限度地提高图像的下载速度，考虑使用精灵：东部和西部的图像可以放在同一个较大的图像：你修改的唯一的东西是背景位置：

  background-position：32px 0px; / *这应该将背景移到右侧* / 
  

优点是您只需要一张图片，更少的连接需要下载他们的客户端（更快），它需要尽可能多的地方。

希望这可以帮助。

What is a good way to set up a single container div with some border images surrounding it (in my case only on the left, bottom, and right sides)? I have it centered at the top of the page, overlapping everything else (so like that OSX-style slide-down dialog).

Here's the basic layout:

alt text http://www.nickawilliams.com/images/misc/layout.jpg

Here's what I've got so far (can I avoid a static width/height for the content?):

HTML:

<div class="contentbox">
    <div class="contentbox-wrapper" style="width: 400px">
        <div class="contentbox-mid" style="height: 200px">
            <div class="contentbox-w"></div>
            <div class="contentbox-content">
                Content Box Test
            </div>
            <div class="contentbox-e"></div>
        </div>
        <div class="contentbox-bottom">
            <div class="contentbox-sw"></div>
            <div class="contentbox-s"></div>
            <div class="contentbox-se"></div>
        </div>
    </div>
</div>

CSS:

.contentbox {
    width: 100%;
    position: fixed;
    z-index: 2;
}

.contentbox-wrapper {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.contentbox-mid {
    height: 100px;
}

.contentbox-w {
    width: 30px;
    height: 100%;
    background: transparent url("../../images/contentbox_w.png");
    float: left;
}

.contentbox-content {
    width: auto;
    height: 100%;
    background: #e8e8e8;
    float: left;
}

.contentbox-e {
    width: 30px;
    height: 100%;
    background: transparent url("../../images/contentbox_e.png");
    float: left;
}

.contentbox-bottom {
    width: 300px;
    height: 30px;
}

.contentbox-sw {
    width: 30px;
    height: 30px;
    background: transparent url("../../images/contentbox_sw.png");
    float: left;
}

.contentbox-s {
    height: 30px;
    background: transparent url("../../images/contentbox_s.png");
    margin-left: 30px;
    margin-right: 30px;
}

.contentbox-se {
    width: 30px;
    height: 30px;
    background: transparent url("../../images/contentbox_se.png");
    float: right;
    position: relative;
    bottom: 30px;
}

解决方案

While none of this is recommendable (mixing markup and design), it's often not the integrator who gets the final word. However, you should still attempt to keep everything as clean as possible.

Your structure is pretty much the only kind of structure you can use to your ends, although if your width is static (300px?), I'd advise you to have your div background as one larger image repeated vertically.

You'd then have a kind of footer within your div, where you could put the two bottom corners and the bottom picture all in one single image. Instead of having 5 divs inside one, you'd only have one. Note that in bigger environment, this also means the user can download 2 more images in parallel (4 max from a single host), making the overall download of the page faster.

This obviously doesn't work if your width is relative to the parent or can change in any manner though.

---

EDIT: as it happens you specified the width is variable, I don't think there's a cleaner light way to do it HTML-wise.

However, if you still want to maximize the speed of download for the images, consider using sprites: the east and west side images can be put inside the same bigger image: the only thing you modify is the background position:

background-position: 32px 0px; /* this should move the background to the right */

The advantage is you only need one picture, less connections are needed to download them for the client (faster) and it takes as much place.

Hope this helps.

这篇关于与边界图像的Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！