Изображение с расширяющейся серединой - PullRequest
Новая
       31

Изображение с расширяющейся серединой

0 голосов
/ 20 февраля 2012

Я хочу, чтобы небольшая, 1 или 2 пикселя, линия в середине моей страницы отделяла текст навигации от контента.Я хочу, чтобы линия постепенно исчезла до цвета фона (хорошо, просто исчезнуть прозрачным) в верхней и нижней части линии, но я хочу, чтобы средняя сплошная черная часть линии расширялась с размером содержимого div наХорошо.

Это сбивает с толку читать, мне нужно уточнить?

РЕДАКТИРОВАТЬ: я все сделал с таблицей сейчас, я думаю, это будет проще.Теперь моя проблема - заставить среднюю часть строки расширяться с помощью другой ячейки таблицы с именем «content».Все работает, за исключением ячейки sep_mid, потому что я не хочу устанавливать фиксированную высоту для ячейки, я хочу, чтобы ее размер определялся на основе ячейки «content».

Вот мой код:

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;
}

1 Ответ

0 голосов
/ 02 мая 2012

Я думаю, что пустые ячейки таблицы должны содержать хотя бы некоторое содержимое, даже если оно просто &nbsp;

...