- 締切済み
5カラムでの写真の文字の回りこみに付いて質問です。
- みんなの回答 （4）
- 専門家の回答
みんなの回答
これを試してうまくいけばANo2さんのものを試したらいいとおもう あと質問者の技術レベルがわからないのですが <>とか"とか抜けてないですよね？ <html> <head> <style> img,p{float:left;} </style> </head> <body> <div id="b"> <img src="画像１"> <p>テキスト</p> <img src="画像２"> <p>テキスト</p> </div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
普通にfloatで回り込むはずです。ただし、ブロックの配置などにfloatを使うなど変な事しているとだめですが・・・ いずれにしてもHTMLが、きちんと文書構造にしたがってマークアップされていれば、2カラムだろうが2カラムだろうが、5カラムだろうが好きに・・。【下のほうにある/* を削除すると左右２カラムの4カラムになります。】 HTMLをデザインのためにマークアップしてると融通利きません。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ サンプルのHTMLは、文書構造だけをきちんと示しているはずです。よってシンプル ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み。 CSSの内容については、難しいところはないので、説明しません。 ★タブは＿に置換してあります。元に戻してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿＿<title>サンプル</title> ＿＿<meta name="author" content="ORUKA1951"> ＿＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿＿<link rel="START" href="../index.html"> ＿＿<style type="text/css"> <!-- /* 共通 */ html,body{margin:0;padding:0;} p{text-indent:1em;margin:0 1.2em;} body{line-height:1.4em;} div.header,div.section,div.footer{ ＿＿width:100%;max-width:900px;min-width:450px; ＿＿margin:0 auto; ＿＿border:solid 1px gray; } div.section{ ＿＿position:relative; ＿＿min-height:400px; } div.section div{ ＿＿clear:left; } div.section div.nav, div.section div.aside{ ＿＿position:absolute; ＿＿width:20%; ＿＿height:100%; ＿＿top:0; } div.section div.aside{ ＿＿right:0; } div.section div.section, div.section h2{ ＿＿position:static; ＿＿width:56%; ＿＿padding:0; ＿＿min-height:0; ＿＿margin:0 22%; } div.section h2{ ＿＿margin-top:1ex; } div.section div.article{ ＿＿border:solid red 1px; } div.section div h2{ ＿＿width:100%; ＿＿margin: 1ex 1em; } div.section div.figure{ ＿＿padding:5px; ＿＿float:left; } /* わかりやすくするため背景色 */ div.section div.nav{background-color:fuchsia;} div.section div.aside{background-color:yellow;} div.header{background-color:aqua;} div.footer{background-color:white;} /* 4カラム 下のコメントマークを消す */ /* div.section div.annotation{ ＿＿position:absolute; ＿＿width:20%; ＿＿height:100%; ＿＿top:0; ＿＿left:0; } div.section div.annotation div.nav, div.section div.annotation div.aside{ ＿＿position:static; ＿＿width:100%; ＿＿height:auto; } div.section div.section, div.section h2{ ＿＿width:78%; ＿＿min-height:0; ＿＿margin-left:22%; } div.section div.annotation{ ＿＿background-color:silver; } div.section div.nav, div.section div.aside{ ＿＿background-color:inherit; } */ --> ＿＿</style> </head> <body> ＿＿<div class="header"> ＿＿＿＿<h1>サンプル</h1> ＿＿＿＿<p>画像を回り込ませる。</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿＿<h2>画像の周囲を回りこませる</h2> ＿＿＿＿<div class="section"> ＿＿＿＿＿＿<div class="figure"> ＿＿＿＿＿＿＿＿<img src="./images/sample1.jpg" width="240" height="169" alt="５カラムの中心ブロック内の画像を回り込む文章"> ＿＿＿＿＿＿</div> ＿＿＿＿＿＿<p> ＿＿＿＿＿＿＿＿ホームページ製作中ですが、トップ、ボトムの間にｂ１、ｂ、ｂ２のブロックを組んでいます。 ＿＿＿＿＿＿</p> ＿＿＿＿＿＿<p> ＿＿＿＿＿＿＿＿問題は真ん中のｂに写真を何枚か貼り付けて、テキストをその写真の横に、回りこませたいのですが、img { float: left; }では回り込みません、何方か知恵をお貸しいただけないでしょうか。 ＿＿＿＿＿＿</p> ＿＿＿＿＿＿<div class="article"> ＿＿＿＿＿＿＿＿<h2>説明</h2> ＿＿＿＿＿＿＿＿<p> ＿＿＿＿＿＿＿＿＿＿ごく普通にfloatでよいです。ただしimgは「置換インライン要素」ですから出来ればサンプルのようにブロックに入れるほうが良いでしょう。 ＿＿＿＿＿＿＿＿</p> ＿＿＿＿＿＿</div> ＿＿＿＿</div> ＿＿＿＿<div class="annotation"> ＿＿＿＿＿＿<div class="nav"> ＿＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿＿＿<li><a href="../index.html">Top</a></li> ＿＿＿＿＿＿＿＿＿＿<li><a href="../books">書籍</a></li> ＿＿＿＿＿＿＿＿＿＿<li><a href="../info">情報</a></li> ＿＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿</div> ＿＿＿＿＿＿<div class="aside"> ＿＿＿＿＿＿＿＿<h3>脚注</h3> ＿＿＿＿＿＿</div> ＿＿＿＿</div> ＿＿</div> ＿＿<div class="footer"> ＿＿＿＿<h2>文書情報</h2> ＿＿</div> </body> </html>
お礼
有り難うございます。 img { float: left; }は適用出来ました。原因は不明ですが。 ただ体裁が崩れるので他の質問をします。 チェックのホームページ役に立ちました。有り難うございました。
- yambejp
- ベストアンサー率51% (3827/7415)
状況がわかりませんが、テキストをdivで括ってみては？ <style> div#b img , div#b div{ float: left; } div#b2{ clear:both; } </style> <div id="top">top</div> <div id="b1">b1</div> <div id="b"> <img src="1.jpg"> <div>hogehoge</div> <img src="2.jpg"> <div>hogehoge</div> <img src="3.jpg"> <div>hogehoge</div> </div> <div id="b2">b2</div> <div id="bottom">bottom</div>
お礼
ありがとうございます。 img { float: left; }は適用出来ました、ただ体裁が崩れるので別の質問でします。
補足
早速の回答有り難うございます。 やってみたのですが、テキストのカラーがクリアされただけで他に変化はありませんでした。 それと、5カラムでなく、3カラムの間違いでした。
各写真の横にそれぞれのテキストですか？ テキストにもfloat:leftがいるんじゃないでしょうか？ 直接imgにfloatするより・・・ｄｌとかでくくったりするのでは？
お礼
有り難うございました。 img { float: left; }は適用出来ました、原因不明ですが。 ただ体裁が崩れるので、他の質問でします。
補足
早速の回答、有り難うございます。 すみません、もう少し詳しく書いてもらえると有り難いのですが。
関連するQ&A
- FC2ショッピングカート 写真の大きさを変える方法
FC2のショッピングカートでネットショップをしているのですが、表示される画像が小さいので大きくしたいのですが、どこをいじっていいのかわからなくて、困っています。 商品説明のページの写真（画面上で表示されている写真幅約2×3cm）を少し大きくしたいのですが。。。 使用しているテンプレートは custam です。 下のどこかをいじればよいのかな？とおもっておりますが、いかがでしょうか？ 大変申し訳ありませんが、素人ですのでわかりやすく教えていただけると、とっても嬉しいです。 いろいろ検索して調べましたが、わからなくて困っています（涙） どなたか、わかる方教えて頂けると助かります。 /*--盾妬亥風--*/ .sort{ width:460px; margin-top:10px; text-align:left; padding-left:20px; } .sort a{ margin:0px 10px; } .pagelinks{ width:460px; padding-left:20px; } .pagelinks .a{ width:460px; text-align:left; } .pagelinks .b{ width:460px; margin-top:3px; } .pagelinks .b .ahead{ width:20%; float:left; } .pagelinks .b .pageno{ width:60%; float:left; } .pagelinks .b .next{ width:20%; float:right; } .item_list{ float:left; width:33%; padding-left:0px; } .item{ width:150px; text-align:center; overflow:hidden; padding-left:20px; } .item a img{ border:solid #dcdcdc 1px; } .item .name{ text-align:left; margin:3px; } .item .comment{ text-align:left; margin:3px; } .item .other{ margin:3px; text-align:right; } /*--盾妬傷亨ヘ-*/ .item_detail{ text-align: center; font-size: 12px; width: 480px; } .item_detail .thumb{ float:left; margin-top:10px; width:33%; } .item_detail .thumb img{ border:solid #dcdcdc 1px; padding:0px; margin:0px; } .item_detail .thumb a img { background-color:none; display:block; } .item_detail .img-comment{ padding:3px; } .item_detail .comment{ padding:3px; text-align:left; } .item_detail .about{ text-align:right; } .item_detail .about .other{ padding:3px; } /*--チェック--*/ #subtitle{ margin:15px auto 5px; } .check{ margin:0; padding:0 0 30px; width:452px; } .pickupbase { font-size:10px; font-family:Osaka, Verdana, "ＭＳ Ｐゴシック"; margin-right:15px; padding-bottom:15px; width:130px; float:left; overflow:hidden; } .pickupbase a img{ border:solid #dcdcdc 1px; padding:0px; margin:0px; } .pickupname { font-weight:bold; text-align:center; padding-bottom:3px; overflow:hidden; } .pickupprice { text-align:center; padding-top:5px; overflow:hidden; }
- 締切済み
- CSS
- 画像リンクの下に文字を付けたいのですが
画像リンクを複数横に並べ、かつそれぞれの画像の下に文字を表示(それぞれの画像の横幅の範囲内に)させたいのですがどうすればよいでしょうか？ 画像と画像の間にスペースを入れることが出来たらなお良いです。 いろいろ調べてみて、 「<div style="float:left"><img src="1.gif"><br>caption 1</div> <div style="float:left"><img src="2.gif"><br>caption 2</div> <div style="float:left"><img src="3.gif"><br>caption 3</div> <div style="clear:both"></div>」 というタグを見つけましたが、これでは画像にリンクがつけられませんし、なぜか画像と画像の間に段が出来てしまいます。 どなたかよろしくお願いします。
- ベストアンサー
- HTML
- safariやFirefoxで右のカラムが下へ行ってしまう
CSSで A B C D という4つのカラムでレイアウトしたいので下記のようなCSSにしました。 ------------------------------------------------ #A{ width:700px; } #B{ float:left; padding-top: 15px; width: 150px; height: 100%; } #C{ float:right; text-align: left; width: 550px; padding: 15px 50px 30px; } #D{ position:relative; width:100%; height:50px; clear:both; text-align:center; } ------------------------------------------------ IEでは問題ないのですが、safariやFirefoxでは A B C D となってしまい、BとCが並んでくれません。 Cはテキストのみなので画像等のサイズオーバーでカラム落ちしているわけではなさそうです（長いURLなどもありません） Cのfloat:right;を消すと並んでくれるのですが、そうするとどういう訳かpaddingの指示が無視されてピッタリくっついてしまいます。 IEよりもsafariの方がCSSでは正しいそうなので何か間違っているのだと思うのですが、どなたかご教授ください。
- ベストアンサー
- CSS
- HTMLについて
現在HTMLを勉強しています そこで画像の配置についてわからないところがあるので教えてください 添付した画像のようにしたいのですが緑の画像がかなりしたになってしまいます どうすればいいでしょうか？ コードとCSSは HTML <body> ～～～省略～～～ <div class="menu_block"> <table class="menu_left"> <tr> <td class="photo"><img src="img/siri-zu.gif" style="margin-top:80px;"></td> </tr> <tr> <td class="photo"><img src="img/sekkenn.gif" style="margin-top:20px;"></td> </tr> <tr> <td class="photo"><img src="img/oiru.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/jeru.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/set.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/mini.gif"style="margin-top:10px;"></td> </tr> </table> <img src="img/3.gif" height="300" alt="3STEP" class="menu_right"> <img src="img/rank.jpg" style="margin-top: 80px ;" class="ranking"> <img src="img/test.jpg" width="600" height="200" style="margin-left: 200px;" class="rebyu"> </div> </div> </body> CSS @charset "UTF-8"; h1 { margin: 30px 0 30px 0; padding: 0 0 0 0; line-height: 0; text-align: center; } #wrapper { width: 1050px; margin: 0 auto 0 auto; } .menu_block { overflow: hidden; zoom: 1; } .menu_left { float: left; margin-right: 20px; } .menu_right { float: left; margin-top: 80px; margin-left: 20px; } .ranking { float: left; margin-left: 20px; } .rebyu { float: left; margin-top: 10px; } です 赤の真下に緑が来るというのが理想です
- ベストアンサー
- HTML
- CSSでの破線の表示方法
下記のような破線をボトムまで引きたいです。 http://designbeans.com/ div#sub{ width: 200px; margin-top: 30px; margin-left: 10px; border-right: 0.1em dotted #333333; float: left; } と記述したのですが、ボトムまで引いていません。どうすればボトムまで引けるのでしょうか？ 宜しくお願いします。
- ベストアンサー
- HTML
- CSS 文字と写真を横並びにして中央配置
お店のホームページを作っていて どうしてもできない箇所があるので質問させて頂きます。 レスポンシブの伸縮するフッターに、左に住所を文字で記載して 右に地図の画像を配置したものを、フッターの中央に配置したいと考えています。 <div style="float:left; margin-right:20px; width:220px;"> 東京都.......<BR> 03-.......<BR> </div> <div style="float:left; width:220px;"> <img src="../map.jpg" /> </div> こんな感じで、２つの要素を横並びにはできたのですが どうしても中央配置にできません。。。 さらに、ブラウザーの横サイズを小さくしていくと 要素が縦並び(上：住所 下：地図)になって中央配置にしたいと考えています。 とても簡単そうなのですが、まる２日間 いろいろ試して、どうしても解決できないので どなたかアドバイス頂けると幸いです。 よろしくお願いいたします。
- ベストアンサー
- CSS
- HTMLの質問です。画像を並べて名称を表記します。
ホームページビルダーで作成しました。 今回の例では画像を横4枚、縦2段に並べて画像下にテキストを表記します。 各画像にはリンクを貼っています。 ところが画像下のテキストの右端だけがダブって表記されます。 具体的にはタイトル4とタイトル8というテキストです。 問題点が分かる方はご教授願います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>ホームページのタイトル</title> <link rel="stylesheet" type="text/css" href="hpb9tm04_8.css" id="hpb9tm04_8" a:link { text-decoration:underline; color:#0000FF; } a:visited { text-decoration:underline; color:#9900CC; } a:active { text-decoration:underline; color:#00FF00; } a:hover { text-decoration:underline; color:#00FF00; position:relative;top:3px;left:3px; }</style> </head> <body style="color: #000000; background-color: #ffffff" background="壁紙画像"> <div> <table class="hpb-main" id="HPB_LAYOUTTABLE_05" cellspacing="0" cellpadding="0" width="760" border="0"> <tbody> <tr> <td class="hpb-cnt-cell1" id="HPB_LAYOUT_LMH0" valign="top" align="center" height="18"> <table class="hpb-hmenu1" id="HPB_LINK_MENU_TABLE_01" cellspacing="0" cellpadding="0" align="center" border="0"> </table> </td> </tr> <tr> <td class="hpb-cnt-cell3-x" valign="top" align="center"><div style="float:left"><img height="43" alt="ホームページのタイトル" width="232" border="0" src="ホームページのタイトル画像" /> <table class="hpb-lb-tb1" cellspacing="0" cellpadding="0" align="center" border="0"> <tbody> <tr> <td class="hpb-lb-tb1-cell3" id="HPB_LAYOUT_CONTENTS" valign="top" height="400"> <p><div style="float:left"><img height="37" alt="ホームページのサブタイトル" width="510" border="0" src="ホームページのサブタイトル画像" /></p> <p> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル1" width="140" border="0" src="画像" /><br />タイトル1</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル2" width="140" border="0" src="画像" /><br />タイトル2</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル3" width="140" border="0" src="画像" /><br />タイトル3</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル4" width="140" border="0" src="画像" /><br />タイトル4</div></a> <div style="clear:both"></div></p> <p> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル5" width="140" border="0" src="画像" /><br />タイトル5</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル6" width="140" border="0" src="画像" /><br />タイトル6</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル7" width="140" border="0" src="画像" /><br />タイトル7</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル8" width="140" border="0" src="画像" /><br />タイトル8</div></a> <div style="clear:both"></div></p> <p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </body> </html>
- ベストアンサー
- HTML
- ホームページ製作中ですが3カラムの体裁崩れに付いて
3カラムのホームページで画像を挿入して、img { float: left; }を使いテキストの回りこみをすると全体の体裁が崩れます。なにぶん初心者なので、解りやすくお願いします。 SCCは @charset "shift_jis"; body { background-image: url(gif/kabe.gif); margin-top: 25ot; margin-left: 50pt; font-family: Osaka, "ヒラノギ角ゴ Pro W3","小塚ゴシック Std B","MS P ゴシック",; } h1 { font-size: 32pt; color: #006600; text-align: center; } h2 { font-size: 24pt; color: #ff3300; text-align: center; } p { color: #0000cc; } img { float: left; } p.kesu { clear: both; } div.box_a { width: 700px; margin-left: auto; margin-right: auto; } div.box_b1 { width: 10%; height: 480px; float: left; } div.box_b { width: 70%; height: 480px; overflow: auto; float: left; } div.box_b2 { width : 20%; height: 480px; float: left; } div.box_c { width: 100%; text-align: center; clear: both; } これです。 HTMLは <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>ガラスの世界</title> <link rel="stylesheet" href="style1.css" type="text/css" /> </head> <body> <div class="box_a"> <img src="gif/tatoru.gif"> </div> <hr /> <div class="box_b1"> <a href="#saisiyo">最初</a><br /> <a href="#kansei">完成</a> </div> <div class="box_b"> <h1>ガラス細工製作です</h1><br /> <h2>簡単な物から</h2> <img src="siyasin/hajimenoitupo.jpg" width="250" height="250" /> <p><a id="saisiyo">熱帯魚は簡単なので、まずガラス玉を作ります。</a></p><p class="kesu"></p> <img src="siyasin/moyoumae.jpg" width="250" height="250" /> <p>黄色のガラスを縦に4本付けます。</p><p class="kesu"></p> <img src="siyasin/yojiru.jpg" width="250" height="250" /> <p>ねじるとこうなります。</p><p class="kesu"></p> <img src="siyasin/tubusu.jpg" width="250" height="250" /> <p>それを潰すとこうなります。</p><p class="kesu"></p> <img src="siyasin/ohire.jpg" width="250" height="250" /> <p>尾ひれを付けます。</p><p class="kesu"></p> <img src="siyasin/sebire.jpg" width="250" height="250" /> <p>背びれを付けます。</p><p class="kesu"></p> <img src="siyasin/kanseitemae1.jpg" width="250" height="250" /> <p>ムナビレを付けます。</p><p class="kesu"></p> <img src="siyasin/kansei1.jpg" width="250" height="250" /> <p>前のガラスを溶かし取って、目を付けて完成です。</p><p class="kesu"></p> <img src="siyasin/netutaigiyo.jpg" width="300" height="250" /> <p><a id="kansei">熱帯魚完成</a></p> </div> <div class="box_b2"> <a href="index.html">TOPページへ戻る</a><br /> <a href="kougu.html">工具</a><br /> <a href="sagiyou.html">作業</a><br /> </div> <div class="box_c"><hr /> (c) 2011 ガラスの世界</div> </body> </html> これです。 img { vertical-align: bottom; }は使えない文法のようです。 宜しくお願いします。
- ベストアンサー
- CSS
- IE以外のブラウザーで
はじめまして。 ホームページの作成をDW5.5で行っています。 以下のソース、cssにてアップしたところ、header menuの部分の画像が IEだとちゃんと横並びに表示されるのですが、Firefox、Safariなどでは menuが縦に並んでしまいます。 どのように修正すればいいのか、ご指導いただけませんでしょうか？ ＜＜ソース部＞＞ <body> <div id="header"></div> <div id="head_navi"> <ul> <li id="head_bu1"><a href="../index.html"></a></li> <li id="head_bu2"><a href="../about.html"></a></li> <li id="head_bu3"><a href="#"></a></li> <li id="head_bu4"><a href="#"></a></li> <li id="head_bu5"><a href="#"></a></li> <li id="head_bu6"><a href="../policy.html"></a></li> <li id="head_bu7"><a href="#"></a></li> <li id="head_bu8"><a href="#"></a></li> </ul></div> </body> ＜＜css部＞＞ *{ margin:0px; padding:0px; } img{ border:none; } li{ list-style-type:none; } body{ font-size:12px; line-height:1.4em; font-family:"ＭＳ Ｐゴシック", "MS PGothic", "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; background-color: #333333; margin:0px auto; } /* FireFox リンク選択時の点線を消す */ a{ overflow:hidden; outline:none; } /* FireFox flashの境界の点線を消す */ object{ outline:none; } /* ■ヘッダー */ #header{ width:1000px; height:320px; background-color: #000000; } #head_navi{ width:1000px; height: 40px; background-color: #666; } #head_navi ul{ overflow:hidden; float:left; padding-left: 21px; } #head_bu1 a{ display:block; width:112px; height:38px; float: left; background:url(../img/header_1_off.png) no-repeat left top; } #head_bu1 a:hover{ background:url(../img/header_1_on.png) no-repeat left top; } #head_bu2 a{ display:block; width:113px; height:38px; float: left; background:url(../img/header_2_off.png) no-repeat left top; } #head_bu2 a:hover{ background:url(../img/header_2_on.png) no-repeat left top; } #head_bu3 a{ display:block; width:117px; height:38px; float: left; background:url(../img/header_3_off.png) no-repeat left top; } #head_bu3 a:hover{ background:url(../img/header_3_on.png) no-repeat left top; } #head_bu4 a{ display:block; width:122px; height:38px; float: left; background:url(../img/header_4_off.png) no-repeat left top; } #head_bu4 a:hover{ background:url(../img/header_4_on.png) no-repeat left top; } #head_bu5 a{ display:block; width:101px; height:38px; float: left; background:url(../img/header_5_off.png) no-repeat left top; } #head_bu5 a:hover{ background:url(../img/header_5_on.png) no-repeat left top; } #head_bu6 a{ display:block; width:126px; height:38px; float: left; background:url(../img/header_6_off.png) no-repeat left top; } #head_bu6 a:hover{ background:url(../img/header_6_on.png) no-repeat left top; } #head_bu7 a{ display:block; width:134px; height:38px; float: left; background:url(../img/header_7_off.png) no-repeat left top; } #head_bu7 a:hover{ background:url(../img/header_7_on.png) no-repeat left top; } #head_bu8 a{ display:block; width:133px; height:38px; background:url(../img/header_8_off.png) no-repeat left top; } #head_bu8 a:hover{ background:url(../img/header_8_on.png) no-repeat left top; }
- ベストアンサー
- ホームページ作成ソフト
お礼
有り難うございます。 原因は不明ですが、img { float: left; }は適当出来ました。 ただ体裁が崩れるので、別の質問でします。