HTML・CSSに関して質問です。
添付したデザインをHTMLとCSSで作りたいです。
画像は「左にあるチラシ画像」と「出演者の右隣の顔画像」「出演者の下の画像と吹きだし画像」の3種類だけ使用します。それ以外、画像は使用しません。
背景の「紫色」「クリーム色」はCSSで色づけを行います。
この条件で添付画像のようなデザインを作りたいのですが、つまづきました。
つまづいた箇所は「チラシ画像」の部分です。
どうしても「背景色が紫色とクリーム色の狭間にチラシ画像を置く」ということができませんでした。
環境としては、PCで幅広く見せたいので「HTML5・CSS3は使用しない」、「IE6,7には対応しなくてもいい」となっています。
ご存知の方いらっしゃいましたら、ご教示お願いします。
No.1
4974
2154
100pt
こんな感じでしょうか？
http://jsfiddle.net/a_kuma3/qnQnm/
チラシに当たる画像の記述を先頭に持ってきて、float: left を指定してます。
チラシの画像の位置や、文字との間隔は、margin の指定でやってます。
No.2
596352
100pt
HTMLは次のような構造になります。
<div class="event-news"><h4>第82回 ライプツィヒ・ゲヴァントハウス管弦楽団 定期演奏会</h4> <div class="event-summary"><img src="images/poster-20120317.jpg" alt="XXX" class="event-poster"> <div class="outline">◆ 開催情報 開演日：2012年03月17日（土） 開場時間：17:30 開演時間：18:00<br /> ◆ 公演場所 大阪府 ザ・シンフォニーホール<br /> ◆ 出演者 <br /> 出演者コメント文章コメント文章コメント文章</div></div> </div>
・スタイルシート
37
37
.event-news {
clear:both;
position:relative;
background-color:#ffc;
border:3px solid purple;
width:72%;
}
.event-news h4 { background-color:purple; color:#fff; font-size:90%; padding:10px; text-align:center; }
img.event-poster { position: relative; top: -22px; left:15px; }
.outline { float:right; font-weight:bold; font-size:78%; margin: 10px 45px 10px 5px; line-height:1.5em; }
※問題があるのはチラシ画像の位置表示という事ですので、出演者画像・コメント表示等は除いています。
基準となるボックス(.event-news)に「position:relative;」を指定し、チラシ画像にも「position: relative;」を指定して、topおよびleftで配置します。
開催情報等は別のボックスにまとめて入れて、「float:right;」および「margin」で位置調整して表示します。
http://www.mdn.co.jp/di/articles/517/?page=13
1
1
1
2
コメント（0件)