0
コンテンツからナビゲーションテキストを分離するために、ページの中央部分に1または2ピクセルのラインを小さくしたいと考えています。私は、行の上と下に背景色（大丈夫、ちょうど透明になる）に消えるようにしたいのですが、真ん中の真っ黒な部分を、その行の内容divのサイズで拡大したい右。画像を中央に拡大する
これは読みにくいですか、詳しく教えてください。
編集：私は今、テーブルですべてをやったことがあります。今私の問題は、 "コンテンツ"という名前の他のテーブルセルで展開する行の中間部分を取得しています。 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;
}
http://jsfiddle.netを使って実際の例を考えてみましょうか？ –
ここにjsfiddle.netの例があります： http://jsfiddle.net/8s8p8/ – taylorthurlow