hタグの背景画像は長く、中のテキストは途中改行希望
CSSです。
よく、h1とかh2タグをページのローカルコンテンツエリアの一番上なんかに
配置させて、背景画像をつけて、その上にhタグのテキストを入れる表現手法がありますよね。
このとき、背景画像はローカルコンテンツ一杯のサイズで表示させるんですが、
テキストはパディングを効かせて背景画像の四方ギリギリまで表示されないようにしますよね。
例えば、背景画像がwidth:600px、height: 100pxとして、
paddingは、padding-rightだけを200pxとかにします。理由は背景画像の右スミに
グラフィックがあり、その上までテキストが来てしまうと読めなくなってしまうから、
そのグラフィックの上にテキストが載る直前あたりでテキストを改行をさせたいから
右側のパディングだけを広くとります。
しかしこのように表示してくれません。
いったいどうしてで、解決方法は何でしょうか？
実際のソースは以下です。
一番目のリセットスタイルのCSS
------------------------------------------------------------
* {
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
color: #000;
font-size: 100%;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,blockquote,table,th,td,strong {
margin: 0;
padding: 0;
}
------------------------------------------------------------
二番目の通常のCSS
------------------------------------------------------------
h2#title {
clear: both;
float: left;
height: 110px;
background: url (../img/cmn/bg_h3.jpg) no-repeat;
color: #fff;
font-size: 1.6em;
padding: 20px 200px 0 20px;
}
------------------------------------------------------------
display: inlineだと改行されませんよね。
なので、hタグにdisplayを未指定にしています。はデフォルトはblockなので。
宜しくお願いいたします。
