- 締切済み
HTMLのことで・・・・・・・・。
さきほども質問したのですが、少々説明不足だったので、もう一度質問したいと、思います。。。;;; この下は、今の私のソースです; ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <Html> <Head> <Title>~</Title> </Head> <Body> </div> このバナー <!-- content end --> <!-- topleft --> <div id="left"> <a href="#"><img src="ban_seitokai.jpg" width="200" height="60" alt="生徒会の一存"></a> <br> <a href="#"><img src="bn_key.gif" width="200" height="60" alt="key"></a> <a href="#"><img src="" width="" height="" alt=""></a> <a href="#"><img src="" width="" height="" alt=""></a> </div> <div id="right"> <div align="center"><h1>タイトル</h1></div> <p>文章</p> </div> </div> <!-- topleft end --> </div> <!-- maincontent end --> </Body> </Html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー この画像の上の図が↑のソースです。 下の図は、『こうしたい』という図です。 画像の隣に文章を表示させたいのですが、どうすればなりますか? できれば、わかりやすく、例や見本を書いてくれますと助かります;
- みんなの回答 (3)
- 専門家の回答
みんなの回答
1で既に正回答が出てるので補足として・・・ 質問者のソースでbody直下にイキナリ閉じdivと云うのは、HTMLの基本すら理解して無いと見られても何等不思議には思いません。 レイアウトやデザイン以前に再度HTMLの仕組みを理解するのが最優先と考えます。
- neko-ten
- ベストアンサー率55% (1287/2335)
ちょいとわからない部分としては・・・ タイトル・本文は画像の横に配置するがセンタリングしたいのか・・・ それとも左寄せなのか・・・ また、divにID割り振ってますが、CSSで何か指定してますかね。 基本的にdivはblock要素なので、そのままdiv複数にするとただ下に書かれます。 方法としては各divにサイズを指定してやって、float:leftとかを使うかんじに。 おおざっぱな例 ------------------------------------------------ <html> <head> <style> .leftBanner{ width:200px; float:left; } .ValueWrapper{ width:500px; float:left; padding:0px; margin:0px; } .Title{ width:500px; padding:0px; margin:0px; } .Values{ width:500px; padding:0px; margin:0px; } </style> </head> <body> <div class="leftBanner"> <a href="#"><img src="ban_seitokai.jpg" width="200" height="60" alt="生徒会の一存"></a> <a href="#"><img src="bn_key.gif" width="200" height="60" alt="key"></a> <!-- バナー付け足していく --> </div> <div class="ValueWrapper"> <div class="Title"> <h1>タイトル</h1> </div> <div class="Values"> 文章 </div> </div> </body> </html>
- PXU10652
- ベストアンサー率38% (777/1993)
1.画像に対し、文字の回り込みを許可する。 <IMG SRC="ban_seitokai.jpg" align="left" WIDTH="600" HEIGHT="20" HSPACE="10" VSPACE="10"><BR> 文章文章文章文章文章文章文章文章文章文章文章文章 2.枠線のないテーブルを作り、画像の横に文章が来るようにする。 <table><TR><TD><IMG SRC="ban_seitokai.jpg" WIDTH="600" HEIGHT="20"><TD>タイトル1 <TR><TD><img src="bn_key.gif" width="200" height="60"><TD>タイトル2 </table>