中间扩大的图像

发布于 2025-01-07 08:42:32 字数 2103 浏览 0 评论 0原文

我希望在页面中间有一条 1 或 2 像素的小线，以将导航文本与内容分开。我希望线条在线条的顶部和底部淡入背景颜色（好吧，只是淡出透明），但我希望线条的中间纯黑色部分随着内容 div 的大小而扩展正确的。

读起来很混乱，需要我详细说明吗？

编辑：我现在已经用桌子完成了所有事情，我认为这会更容易。现在我的问题是让该行的中间部分与另一个名为“content”的表格单元格一起扩展。除了 sep_mid 单元格之外，一切都正常，因为我不想为单元格设置固定高度，我希望它根据“内容”单元格调整大小。

这是我的代码：

HTML：

<body>
    <div id="wrapper">
        <table align="center">
            <tr>
                <td class="nav" rowspan="3"><p>test</p></td>
                <td class="sep_top" rowspan="1"></td>
                <td class="content" rowspan="3"><p>Content here!</p></td>
            </tr>
            <tr> <td class="sep_mid" rowspan="1"></td> </tr>
            <tr> <td class="sep_bot" rowspan="1"></td> </tr>
        </table>
    </div>
</body>

CSS：

body {
    background-color: #bbc2c7;
    background-image: url('/images/bg.png');
    background-repeat: repeat-x;
}

body p {
    font-family: Delicious;
}

@font-face {
    font-family: "Delicious";
    src: url('/fonts/delicious.ttf');
}

@font-face {
    font-family: "Delicious";
    src: url('/fonts/delicious_bold.ttf');
    font-weight: bold;
}

#wrapper {
    margin: 0 auto;
    width: 1000px;
}

#wrapper p {
    font-weight: bold;
    font-size: 16px;
    font-family: Delicious;
}

.nav {
    text-align: right;
    padding-right: 20px;
}

.sep_top {
    background-image: url('/images/sep_top.png');
    background-repeat: no-repeat;
    float: left;
    padding: 0px;
    margin: 0px;
    width: 1px;
    height: 15px;
}

.sep_mid {
    background-color: #000;
    float: left;
    padding: 0px;
    margin: 0px;
    width: 1px;
}

.sep_bot {
    background-image: url('/images/sep_bot.png');
    background-repeat: no-repeat;
    padding: 0px;
    margin: 0px;
    width: 1px;
    height: 15px;
}

.content {
    padding-left: 20px;
}

table {
    border-collapse: collapse;
}

table td {
    border-collapse: collapse;
}

原文

I want to have a small, either 1 or 2 pixel line down part of the middle of my page to seperate navigation text from content. I want the line to fade to the background color (okay, just fade transparent) at the top and bottom of the line, but I want the middle, solid black part of the line, to expand with the size of the content div on the right.

Is that confusing to read, do I need to elaborate?

EDIT: I've done everything with a table now, I figure that'll be easier. Now my problem is getting the middle part of the line to expand with the other table cell named "content". Everything works with the exception of the sep_mid cell, because I don't want to set a fixed height for the cell, I want it to size based on the "content" cell.

Here's my code:

HTML:

<body>
    <div id="wrapper">
        <table align="center">
            <tr>
                <td class="nav" rowspan="3"><p>test</p></td>
                <td class="sep_top" rowspan="1"></td>
                <td class="content" rowspan="3"><p>Content here!</p></td>
            </tr>
            <tr> <td class="sep_mid" rowspan="1"></td> </tr>
            <tr> <td class="sep_bot" rowspan="1"></td> </tr>
        </table>
    </div>
</body>

CSS:

body {
    background-color: #bbc2c7;
    background-image: url('/images/bg.png');
    background-repeat: repeat-x;
}

body p {
    font-family: Delicious;
}

@font-face {
    font-family: "Delicious";
    src: url('/fonts/delicious.ttf');
}

@font-face {
    font-family: "Delicious";
    src: url('/fonts/delicious_bold.ttf');
    font-weight: bold;
}

#wrapper {
    margin: 0 auto;
    width: 1000px;
}

#wrapper p {
    font-weight: bold;
    font-size: 16px;
    font-family: Delicious;
}

.nav {
    text-align: right;
    padding-right: 20px;
}

.sep_top {
    background-image: url('/images/sep_top.png');
    background-repeat: no-repeat;
    float: left;
    padding: 0px;
    margin: 0px;
    width: 1px;
    height: 15px;
}

.sep_mid {
    background-color: #000;
    float: left;
    padding: 0px;
    margin: 0px;
    width: 1px;
}

.sep_bot {
    background-image: url('/images/sep_bot.png');
    background-repeat: no-repeat;
    padding: 0px;
    margin: 0px;
    width: 1px;
    height: 15px;
}

.content {
    padding-left: 20px;
}

table {
    border-collapse: collapse;
}

table td {
    border-collapse: collapse;
}

分享到QQ

分享到微博