ジュウリョククウカンメモ

« 2025.01.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
»

2025'01.31.Fri

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

: ▲

2007'12.31.Mon

連続的なHTMLで終了箇所にのみ特殊な背景を表示させるサンプル。
テキストやリストに対してpadding-bottomを設定し、padding部分が背景となる。
その下に更にh2が続く場合は、h2の持っているmargin-top: -Xpx;によって殺される。

……あれ？一番上ってどうなってるの？

・html
<div id="RIGHT">
<h2>メニュー１</h2>
<div>
<ul>
<li>リスト１
<li>リスト２
<li>リスト３
<li>リスト４
</ul>
</div>

<h2>メニュー２</h2>
<div>
<ul>
<li>リスト１
<li>リスト２
<li>リスト３
<li>リスト４
</ul>
</div>

</div>

・css
div#RIGHT{
margin-top: 20px;}

div#RIGHT h2{
margin-top: -20px;}

div#RIGHT div{
background-image: url(image/right_bg.gif);
background-position: bottom;
background-repeat: no-repeat;}

あとはこれをベースに調整していけば、うまくできるはず、、、（まだ実行してない

＿＿＿＿＿＿＿＿＿

いや、ほんとごめんなさい。作業遅延出まくりデス。死にそう。
でもホントに辛い時は死にそう、なんて言えないよなあ。

つまりまだ加速できる、ぜー。

__________________

テスト用にHTML書いてみた。発想から10分でプロトタイプを作り上げるという早業！　operaでチェックして動いたから問題ないでしょう。
HTMLにstyleでCSSを埋め込んでるので読みにくいのはかんべんな。
幅を指定しているのはtestを改行するため。
h1とh2の間に20pxの空間を持たせるために、一番外側のdivのmarginは40pxにセットしています。h2のネガティブは20px。

<body id="CONTENT">
<h1>h2 Negative-margin test</h1>

<div style="width: 200px; margin-top: 40px;">
<h2 style="margin-top: -20px; background-color: #fff;">Major Headline [level2]</h2>
<div style="padding-bottom: 22px; background-color: #efefef;">test test test test test test test test test test test test test test test test test test test test test test test </div>

<h2 style="margin-top: -20px; background-color: #fff;">Major Headline [level2]</h2>
<div style="padding-bottom: 22px; background-color: #efefef;">test test test test test test test test test test test test test test test test test test test test test test test </div>

<h2 style="margin-top: -20px; background-color: #fff;">Major Headline [level2]</h2>
<div style="padding-bottom: 22px; background-color: #efefef;">test test test test test test test test test test test test test test test test test test test test test test test </div>
</div>
</body>

＿＿＿＿＿＿＿＿

あれ？　文字参照がうまくいってない？
ま、これ理解できる位の人なら文字参照の不具合なんて気にしないでしょう。気にしないで下さい。自分で置換とか使って直して下さい。

……なんて投げやり！

未選択: Trackback() Comment(1) ▲