- 締切済み
CSSでのテキストの下に画像などを配置したい。
CSSでレイアウトしたページを作っています。 画面左のナビをテキストで作成しました。 （ヘッダーの下に、左のナビと右のメインエリアという構造） テキストの周囲をボーダーで囲んであります。 （TABLEは使っていません） テキストでの一覧のメニューの下に、画像のボタン等を配置したいのですが、メニューのテキストのテキストサイズを固定していないため、ブラウザの文字サイズを大きくしたりすると、メニューが縦に伸びたりします。 この時、メニューの下に配置する画像を、上のメニューの大きさ（縦幅）が変わってもそれに合わせて配置を上下させたいのですが、どうすればいいのでしょうか？ とりあえずposition:absoluteでは絶対位置で指定されてしまうので、うまくいかないってことは分かっているのですが・・・ CSS自体まともに使うのは初めてなので、本等で調べながらやっているのですが、この部分が解決できません。
- alien
- お礼率87% (21/24)
- その他([技術者向] コンピューター)
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
ご質問の文章を読んで、3フレームに分割した構成で左がナビ用のフレーム、右が本文フレームというよく見かける例なのかな、と想像しました。本文フレームをmainと名付けたとして <html><head> <title>leftframe</title> <style type="text/css"> <!-- .Navi{position:absolute; top:100px; left:20px;} --> </style></head> などとしておいてからBODYの中身を <DIV class="Navi"> ■fileAへ<BR> <A href="A.htm" target="_main"><IMG src="buttonP.gif"></A><BR> ■fileBへ<BR> <A href="B.htm" target="_main"><IMG src="buttonQ.gif"></A> </DIV> と言うように文字やリンクを貼ったgif画像などの要素一つ一つを <BR>で改行してつないでやれば如何でしょうか。自分で確認はしておりませんが これで上手く行くと思います。フォント部分は勿論CSSでデザイン指定されると 思います。フォントは文字数を出来るだけ少なくしてやらないと「大きいフォント」に設定している環境では左フレームにスクロールバーがついてしまうかも知れませんね。
関連するQ&A
- CSSを使った全体の配置
サイト全体の配置指定を外部スタイルシートを使い、 ホームページ作成をしております。 CSS初心者なので、変な質問になるかもしれませんが宜しくお願いします。 全体のぺージの構造は上にヘッダー、下にフッター 真中は3つに分け、3カラムの状態で配置しております。 今回、ヘッダー部分を2つに分けたいと思っております。 今のヘッダー部分は、最初にh1（テキスト）を左配置に表示し、その右側にテキストで「サイトマップ」のテキストリンクを配置。 その下に width="850" height="200" の大きめな画像を置き、 画像の下に右配置でh2（テキスト） 上記のような配置になっているので、外部スタイルシートコードは・・・ /* ヘッダーコンテンツ */ .header { text-align:left; padding-bottom:0.5em; width:830px; float:left;} .header h1{ font-size:12px; padding:0; float:left;} .header h2{ font-size:12px; float:right;} /* ヘッダーサイトマップ */ .headersite{ float:right;} ・・・としています。 HTMLタグの方は・・・ <!-- ヘッダー開始 --> <div class="header"> <h1>ｈ1題名</h1> <div class="headersite"><a href="sitemap.html">サイトマップ</a></div> <a href="index.html"><img src="%/logo.jpg" width="850" height="200" border="0"/></a> <h2>h2題名</h2></div> <!-- ヘッダー終了 --> 画像部分を真中から分け、左に画像を置き右はテキストにし回り込ませたいと思っておりますが、なかなか上手くいきません（汗） 画像を2つにわけるCSSコードを .header left .header right とするならば、 HTMLタグ部分は・・・ <!-- ヘッダー開始 --> <div class="header"> <h1>ｈ1題名テキスト</h1> <div class="headersite"><a href="sitemap.html">サイトマップ</a></div> <div class="header left"><a href="index.html"><img src="%/logo.jpg" width="300" height="200" border="0"/></a> <div class="header right">テキストテキストテキスト <h2>h2テキスト</h2></div> <!-- ヘッダー終了 --> にしたいのですが、CSSコードはどのように指定したら良いでしょうか？ 自分なりにCSSコードを筆記したのですが、 回り込みがうまくいかないのか、真ん中から分けた左画像の右にテキストが並んでくれなくて下に配置されてしまいます。 ちなみに全体横幅は850pxにしております。
- ベストアンサー
- その他（プログラミング・開発）
- CSSで左に画像、右にテキストを並べたい。
CSSで左に画像を置いて右にテキストを同じ列で並べたいのです。 （●=画像 ▲=テキスト） 現在の表示は ●▲ となっているのですが、これを ● ▲ と表示して画像は左端、テキストは右端にしたいのです。<td>で区切ればできると思うのですが、これをCSSだけで何とかできないでしょうか？ 色々試したのですが、どうしても下のように改行してしまいます。 ● ▲ ソースは以下です。 <table border="0" cellpadding="0" cellspacing="0" width="750" > <tr> <td colspan="2" id="head"><img src="img/777.gif" border="0">おはよう</td> </tr> </table> 外部CSS #head{background-color:#009900 width:750px; height:60px; margin-right:5px} どなたか宜しくお願い致します。
- ベストアンサー
- HTML
- CSSにおいて、画像とテキストの配置（回り込み）について
ＣＳＳ＋ＨＴＭＬによって、ＨＰを作成しております。 ＨＰ作成ソフトはDream Weaver8です。 画像をテキストの左に回りこませる技術。 （例） ■■■■ テキストテキスト ■画像■ テキストテキスト ■■■■ テキストテキスト はスタイルシートで、画像にスタイルシートの ボックスのfloat定義でleftをつけて <div class="header" id="pageName"> <div id = "left"></div> <span class="style3">テキスト</span><br/> </div> このように設定すればよいのかと思ったのですが （headerは外部スタイルシートで、読み込み） 十分に画像をおくスペースがないと、 画像に、テキストがかぶってしまう場合や、（レイヤーが働いてしまう。）うまく、回り込まないのですが、どの設定が足りないのでしょうか。 ちなみにたっぷりとスペースをとった、ｄｉｖですと、 回り込ませることができたりしましたが、メニューdivなど 小さいスペースや縦幅が足りないとだめなのでしょうか。 画像のレイヤーの解除指定などをした方がよろしいのでしょうか。 まだ、初心者ですが、もし、ヒントだけでも、教えていた だけますと幸いです。
- ベストアンサー
- HTML
- 画像の回り込みを解除して、画像の下にテキストを書き込みたい
DW8 CSSを使ってサイトを作っています。 画像の配置を左よせにして、その下にテキストを書き込みたいのですがどうしてもフロート左（画像）にしているせいなのか、テキストが画像の横にきてしまいます。 それを避けて画像の真下もしくは真上にテキストを配置したいです。 初歩的な質問で申し訳ないのですが、分かる方いらっしゃいましたら教えて下さい宜しくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- Tableレイアウトで寸分の狂い無くできていた配置をCSSレイアウトでおこなう術とは？
Tableレイアウトでは寸分の狂い無くできていた配置ですが、 久しぶりにHPを制作しようとしたら今はCSSレイアウトな世界になってきて いるので今回はそれでやろうとして手法を調べていますが、 Tableレイアウトと比べて画像の配置がブラウザによって狂ってどうにもなりません。 IE7ではOKでもFirefoxやIE6では配置がずれるなど。 やりたいのは、ヘッダーエリア(width:750px,height:100pxくらい)の配置なのですが、このヘッダーエリアの中に「お問い合わせ」や「サイトマップ」という画像での名称兼リンクボタンを配置させたいのですが、 ・「お問い合わせ」は左から536px、上から15px ・「サイトマップ」は左から639px、上から15px の位置に寸分の狂い無く配置を希望しています(その上でマウスオーバーで画像入れ替えも行う)。 position:absoluteを使用すると可能ですが、これですと他の全ての箇所もabsoluteにしなくてはならなくなり、非常に制作に手間がかかってしまいます。 abloluteでなくピシッと配置させる方法はないものでしょうか。
- ベストアンサー
- HTML
- CSSでdiv内を下揃え
CSSでdiv内を下揃えは出来ないものでしょうか? テーブルを使った時の以下の表現をCSSで表現したいです。 <TABLE border="0" height="200"> <TR> <TD>ここは上から●pxに画像配置</TD> </TR> <TR> <TD valign="bottom">ここを下揃えで画像表示</TD> </TR> </TABLE> テーブルならすぐできるのですが… 下揃えの方法があれば教えてください。
- ベストアンサー
- CSS
- テーブルの配置
お忙しいところすみません。たぶんＣＳＳでレイアウトした方がいいと思うのですが、よく分からないのでとりあえずテーブルでレイアウトしています。 テーブルの入れ子にせずにレイアウトをしたいのですが、ブラウザーで確認すると、文字サイズを小さくすると、真ん中の左右に並べたテーブルが上下のテーブルの位置からはみだしてしまいます。 何かタグを付け加えるとうまくいくのでしょうか？ ・まず、ページの上にタイトルやボタンを配置するテーブルを置き、 <table width="98%" border="0" align="left" cellpadding="0" cellspacing="0"> ・その下に左右にテーブルを配置し、内容を書き、 <table width="49%" border="0" align="left" cellpadding="0" cellspacing="0"> <table width="49%" border="0" align="right" cellpadding="0" cellspacing="0"> ・その下にまたテーブルを置いて、コピーライトを表示させる <table width="98%" border="0" align="left" cellpadding="0" cellspacing="0"> 省略してタグを書いていて、分かりにくければ申し訳ございません。教えていただけるとうれしいです。どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- div内のテキストと画像の配置について
お世話になります。 現在CSSを勉強中なのですが、参考サイトを見てテーブルを使わずにdivとC SSで同じようなレイアウトが可能と知り、試してみたのですが、div内に配 置したテキストや画像の表示が思い通りになりません。 ソースは以下のような形です。 【HTMLの内容】 <div class="main"> <div class="main-menu">一行目テキスト<br />二行目テキスト</div> <div class="main-content"><img src="xxx.jpg"></div> </div> 【CSSの内容】 div.main { width: 500px; } div.main-menu { float: left; width: 300px; } div.main-content { float: left; } 上記に、以下の指定を追加したいと考えています。 1)main-menu内の「二行目テキスト」だけを右寄せにする。 2)main-content内の画像が常に縦位置の中央に表示されるようにする。 （main-menu内のテキストが複数行になり、divの縦幅が大きくなった場合に 画像も縦幅に合わせ中央に表示したいです。） この場合、どのような方法があるでしょうか？ 勉強不足で大変恐縮ですが、よろしくお願いします。
- ベストアンサー
- HTML
- cssで画像を均等に配置する方法を教えてください。
cssで画像を均等に配置する方法を教えてください。 下図のようなレイアウトをcssで作りたいのですが方法を教えてください。 ・■は画像（一行あたりの個数は固定）。 ・罫線はブラウザの表示エリア（divのボックスです）。 ┏━━━━━━┓ ┃■■■■■■┃ ┃■■■■■■┃ ┃■■■■■■┃ ┃■■■■ ┃ ┗━━━━━━┛ ・ブラウザのサイズを変えても画像は均等に配置。 ┏━━━━━━━━━━━┓ ┃■ ■ ■ ■ ■ ■┃ ┃ ┃ ┃■ ■ ■ ■ ■ ■┃ ┃ ┃ ┃■ ■ ■ ■ ■ ■┃ ┃ ┃ ┃■ ■ ■ ■ ┃ ┗━━━━━━━━━━━┛ できればテーブルを使わずに実現したいのです。 どなたかよろしくお願いします。
- ベストアンサー
- HTML
- CSSで画像の配置（右下へ）
ＣＳＳ＋ＨＴＭＬで、ＨＰを作成しています。 以下のように、画像を常に右下に配置する事は可能でしょうか？ 「画像の下のラインがテキストの最終行と揃うように」という事なんですが。。。 テキストテキストテキストテ テキストテキストテキストテ テキストテキストテキストテ テキストテキスト ■■■■■ テキストテキスト ■画像■ テキストテキスト ■■■■■
- 締切済み
- HTML
お礼
ありがとうございます。お礼が遅れて申し訳ございません。 私が今しているのは、フレームを使わずにCSSでレイアウトする方法です。 本やネットで調べ、もう少しで解決できそうです。 せっかく丁寧にご指導いただいたのに申し訳ございません。 でも、今回だけでなく今後お答えのようなことがあると思いますので、ぜひ参考にさせていただきます。 ありがとうございました。