- ベストアンサー
画像の横に1/2の高さの画像を2枚上下で並べて配置
HTML初心者です。 1枚の画像の横に、1/2の高さの画像を2枚上下で並べて配置する方法はありますか？ <!-- 画像を括るボックスのwidth値は画像サイズの単位である px を指定する --> <p style="width: 100px; padding: 10px;"><img width="100" height="100" src="./test.png></p> 他のサイトで上記がHITしたのですが。。 スタイルシート（？）ではなく、HTMLで出来るのであれば知りたいです。 すみませんが、ご確認よろしくお願いします。
- happines0915
- お礼率83% (5/6)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- play_with_you
- ベストアンサー率37% (112/301)
関連するQ&A
- XHTML+CSS 画像を中心（上下の）に配置したい
基本部分と思うのですが、下記の記述でどうしても中心にならず、躓いております。 「中心にしたい画像」を800pxの枠内の中央（上下）に置きたい為、 上下の余白を19pxとっているのですが、画像が下寄りになってしまいます。 動作確認はMac：safari3.0 Fire Fox2.0 です。 どなたか教えて下さい。よろしくお願い致します。 ------------------------- 【HTML】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>test</title> <style type="text/css" media="all"> <!-- @import url("test.css"); --> </style> </head> <body> <div id="navi"> <h2><img src="中心にしたい画像" width="200" height="12"></h2> <h2><img src="中心にしたい画像" width="200" height="12"></h2> <h2><img src="中心にしたい画像" width="200" height="12"></h2> </div> </body> </html> ------------------------- 【CSS】 body { margin: 0px; padding: 0px; } #navi { margin: 0px; padding: 0px; height: 50px; width: 800px; border: 3px dotted #333333; } #navi h2 { padding: 19px 30px 19px 0px; margin: 0px; float: left; }
- ベストアンサー
- HTML
- float: leftで横に並べたら、サファリだけ
float: leftで横に並べたら、サファリだけ隙間が空いてしまいます。 ＩＥやファイヤーフォックスではピッタリ表示できています。 問題の箇所は以下です。 <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-001.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト１</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-002.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト２</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-003.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト３</span> </p> </div> どうすればサファリの隙間を消せるでしょうか？
- ベストアンサー
- HTML
- floatで左右に分けて配置した2個の画像の中央にテキスト
floatで左右に分けて配置した2個の画像の中央にテキストを回り込ませた後にテキストの続きの内容の画像を配置するとIE6でレイアウトが崩れしまします。 （NN7、Opera9、Firefox2では表示されるのですが…。） 初心者ですので困っています。お力をお貸し下さい。 ↓このように表示したいです。 ■■■■ テキスト ■■■■ ■画像■ テキスト ■画像■ ■■■■ ■画像■ ■■■■ ■■■■ ■画像■ ■■■■ ↓IE6ではこのような表示になってしまいます。 ■■■■ テキスト ■■■■ ■画像■ テキスト ■画像■ ■■■■ ■■■■ ■■■■ ■■■■ ■画像■ ■画像■ タグは以下のとおりです。 ☆HTML☆ <div id="contents01"> <div id="contents01_left"> <img src="img/contents01_01.gif"> </div> <div id="contents01_right"> <img src="img/contents01_02.gif"> </div> <p>テキストテキスト</p> <p><img src="img/contents01_03.gif"></p> <p><img src="img/contents01_04.gif"></p> <p><img src="img/contents01_05.gif"></p> </div> ☆CSS☆ #contents01{ width:480px; height:140px; padding:10px; } #contents01_left{ float:left; width:150px; padding-right:10px; } #contents01_right{ float:right; width:150px; padding-left:10px; } どうぞよろしくお願い申し上げます。
- ベストアンサー
- HTML
- リストタグに画像を入れた場合
リストタグに画像<img>タグを入れたのですが、Firefoxでは隙間なく表示されますが、IE6で確認すると、画像の下に隙間ができてしまいます（3pxほど）。 何か修正点や、解決策があればお願い致します。 そもそも、リストタグに画像を入れることがおかしいのでしょうか？ 【HTML】 <ul id="navi"> <li><img src="../img/aaa.gif" width="200" height="50"></li> <li><img src="../img/bbb.gif" width="200" height="50"></li> <li><img src="../img/ccc.gif" width="200" height="50"></li> <li><img src="../img/ddd.gif" width="200" height="50"></li> </ul> 【CSS】 ul#navi{ margin: 0px; padding: 0px; } ul#navi li{ margin: 0px; padding: 0px; list-style-type: none; list-style-position: outside; display: block; width: 200px; height: 50px; }
- 締切済み
- HTML
- 画像のセンターリングについて
真ん中にはなるのですが、IEで見るとwidth900pxにしているのに940pxになったり、firefoxで見るとスクロールすると上下に背景ではなくて画像が動いてしまいます。どうやって治したらいいでしょうか？ html <div id="content"><img src="img/bacttrast.png" alt="aa" /></div> css #content{ padding: 40px; width: 900px; height:790px; margin: 0 auto; }
- ベストアンサー
- ホームページ作成ソフト
- フォントサイズでレイアウトがずれる？
cssでページレイアウトをしているのですが、 外部cssでサイト全体のフォントサイズを13pxにした場合 body { font-size: 13px; } 同じ画像なのに（四角のボタン）下部分の1pxの底辺が表示されるものとされないものが出てきました。 HTMLの記述内容は以下の通りです。 <div class="menu"> <p><img src="/img/**1.png" alt="" width="180" height="33"></p> <p><img src="/img/**2.png" alt="" width="180" height="33"></p> <p><img src="/img/**3.png" alt="" width="180" height="33"></p> <p><img src="/img/**4.png" alt="" width="180" height="33"></p> </div> <p>にmargin、paddingなどは設定していません。 この場合、画像、ｃｓｓ共に同じ条件であるはずなのに、3番目の画像だけ上記のような不具合がおこりました。 フォントサイズを14pxにした場合、問題なく表示されます。 firefoxで確認したところは13px,14px共に、きちんと表示されていました。 ちなみにブラウザはIE6です。 ブラウザのバグか何かでしょうか？？ 申し訳ありませんが、どなたかご教授お願い致します。
- ベストアンサー
- HTML
- HTML CSSを、教えてください。
お世話になります。 HTMLを始めたばかりで、 超初心者ですので、ご教授いただけたらと思います。 以下の図のような感じに並べたいです。 バックグラウンドには、青色。 赤と緑の部分は、画像配置、 また、右の緑の画像の上に, オレンジのボタン配置を行いたいのです。 ただ、オレンジのボタン配置の仕方が、 なかなか出来ずにいます。 以下のHTMLとCSSには、 オレンジのボタンを入れずに、まず配置をしてみましたが…。 ただ、やはり右の緑の画像が、崩れてしまう感じも…。 オレンジのボタンを入れていただいた形で、 お願いできないでしょうか？ （オレンジ画像 width＝100 height＝50 でお願いします。） 【 HTML 】 <div class="Red"><img src="img/Red.png" width="300" height="50" /> <div class="contents"> <div class="Color_Box"> <div class="Green01"><img src="img/Green01.png" width="200" height="100" /> </div> <div class="Green02"><img src="img/Green02.png" width="200" height="100" /> </div> </div> </div> </div> 【 CSS 】 div.Red{ background:url(img/Bule.png) 0 100% repeat-x; height:200px; margin-top:45px; text-align:center; } div.Color_box{ width:450px; height:100px; } div.Green01{ width:200px; padding-right:50px; float:left; } div.Green02{ width:200px; float:left; }
- 締切済み
- CSS
- 並べて配置した画像の脇に隙間ができてしまう
スライスした画像ABCDをwidth:660px、height:200pxのdivのボックスの 中へ隙間なく配置したいと考えています。 (配置図) AB CD といった具合。 FireFoxでは隙間なくキレイに配置されるのですが、 IE6だと配置図のAとCの左脇へおよそ3px程の隙間が空いてしまい、 それが原因でimgタグへfloat:leftをかけていても縦並びになって しまいます。 IEのバグだとは思うのですが、対処法はありませんでしょうか？ 因みにソースは以下のような感じです。 ----------------------------------------- ■HTML部分 <div class="test_a"> <img src="img/01.jpg" wihdth="330" height="143" alt=""> <img src="img/02.jpg" wihdth="330" height="143" alt=""> <img src="img/03.jpg" wihdth="330" height="57" alt=""> <img src="img/04.jpg" wihdth="330" height="57" alt=""> </div> ■CSS部分 .test_a { width: 660px; height: 200px; margin-top: 20px; } .test_a img { float: left; }
- ベストアンサー
- HTML
- 画像を右下から詰めて表示したい
画像を、テーブルを使わずに右下から詰めて表示したいのですが方法がわかりません。 少し歪ですが、下のようにしたいのです。中抜きの四角（□）の方向に随時増えていく予定です。 ←□■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■ ←ここからスタート htmlとcssは次のように書いてみたのですが、そうすると上から詰めているような かんじになってしまいました。あまり詳しくないのですが、そもそもリストで表示しようとするのが いけないのでしょうか…？どなたかよろしくお願いいたします。 <ul> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> </ul> ul{ list-style:none; text-align:center; } li{ width:21px; height:17px; float:right; }
- ベストアンサー
- HTML
- borderの範囲
cssコーディングに関しての質問です。 現在以下のようなスタイルとHTMLを組んでいます。 ==css============ #style1 { width:500px; padding: 15px 0 0 15px; border-left:1px solid #ccc; border-top: 1px solid #ccc; } #style1 p { margin:0; padding:0; } .style2 { float:right; clear:both; margin:0 0 20px 30px; } .style2 img{ margin:0; padding:0; } ==html============ <body> <div id="style1"> <div class="style2"><img src="sample.jpg" width="200" height="200"></div> <div class="style2"><img src="sample.jpg" width="200" height="200"></div> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> イメージをfloat:right;に指定し、 縦並びにしたいので、clear:both;を入れた所、 border-left:1px solid #ccc;のborderが文字までは表示されるのですが、 画像の延長上は無くなって表示されてしまいます。 右に画像を配置し borderを伸ばしたい時はどのようにすればよいのでしょうか？ よろしくお願いします！
- ベストアンサー
- HTML
お礼
無知でした。。 ありがとうございます。 まずは、CSSをゼロから勉強してみます。 ありがとうございました！