HTMLの画像並べて名称表記問題
- ホームページビルダーで作成したHTMLの画像を並べて名称を表記する際に、一部のテキストが重複して表示される問題が発生しています。
- 具体的には、タイトル4とタイトル8というテキストが重複して表示されています。
- この問題の原因と解決方法を教えてください。
- ベストアンサー
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>
- iwamura0001
- お礼率100% (3/3)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
まず修正から。 結構間違いが多いので勉強をしましょう。 HTMLにCSSを書くなら /*--CSS--*/ <style type="text/css"> <!-- ここにCSSを書く --> </style> と書きましょう。 で、HTMLは まず↓の修正 <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"> 「"」がちゃんと閉じられていません。 リンクにタイトルを付けるなら <a target="_blank" rel="nofollow" title="リンク先URL"> です。 それとdivで囲う必要はありません。 なので、書くとしたら <a target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル1" width="140" border="0" src="画像" /><br />タイトル1</a> こんな感じでしょうか。 あ・・・aタグはhrefを書きましょう。 せっかくスタイルを指定しているのにちゃんと動いてませんよ? <a href="#">タイトル</a> 次に、上から見ていって最初に見つかるtrタグで囲ってあるところは何か入っているのでしょうか? 何もないようでしたら削除をしたほうが良いです。 次に 下から見て一番最初に見つかるpタグはいらないです。 最後に <div style="float:left"><img height="43" alt="ホームページのタイトル" width="232" border="0" src="ホームページのタイトル画像" /> のdivの閉じタグがありません。 <p><div style="float:left"><img height="37" alt="ホームページのサブタイトル" width="510" border="0" src="ホームページのサブタイトル画像" /></p> も同じです。 自分ならこう書きます。 ちなみにタイトル1~4、タイトル5~8のスタイルは違います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>ホームページのタイトル</title> <style type="text/css"> <!-- 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; } .wrap{ width:580px; border:solid 1px; } .hp_title{ text-align:center; margin:10px; } .title_sub{ text-align:center; margin:10px; } --> </style> </head> <body style="color: #000000; background-color: #ffffff" background="壁紙画像"> <div class="wrap"> <div class="hp_title"> <img height="43" alt="ホームページのタイトル" width="232" border="0" src="ホームページのタイトル画像" /> </div> <div class="title_sub"> <img height="37" alt="ホームページのサブタイトル" width="510" border="0" src="ホームページのサブタイトル画像" /> </div> <table> <tr> <td><a href="#" target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル1" width="140" border="0" src="画像" /></a></td> <td><a href="#" target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル2" width="140" border="0" src="画像" /></a></td> <td><a href="#" target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル3" width="140" border="0" src="画像" /></a></td> <td><a href="#" target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル4" width="140" border="0" src="画像" /></a></td> </tr> <tr> <td>タイトル1</td> <td>タイトル2</td> <td>タイトル3</td> <td>タイトル4</td> </tr> <tr> <td><a href="#" target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル5" width="140" border="0" src="画像" /><br />タイトル5</a></td> <td><a href="#" target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル6" width="140" border="0" src="画像" /><br />タイトル6</a></td> <td><a href="#" target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル7" width="140" border="0" src="画像" /><br />タイトル7</a></td> <td><a href="#" target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル8" width="140" border="0" src="画像" /><br />タイトル8</a></td> </tr> </table> </div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
う~ん。 HTMLが完成したら、必ず The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) でチェックして,その後でCSSを作りましょう。 ホームページビルダーなどオーサリングツールを使う場合は、HTMLの知識は絶対に必要です。そうでないと、とんでもないHTMLを作成してしまいます。 基本中の基本ですが、まずデザインにTABLEは使いません。 ほかにもたくさん重要なミスがあります。 作成したいのは、画像のリストですから、基本はリストを作成します。画像とその説明のリストですから定義リストを使うのが良いですが、今回は説明文にもリンクをかけるので「順不同リスト」を用いてマークアップします。 ・・・ここまでは、ビルダーっても良いでしょう。・・・・ 注意事項) ・文書内容に直接関係のないタイトルロゴは書かず、実際のタイトル名だけを入れておく ・文書の構造上のheaderはdivで囲んでおく。 ・それ以外は、文書の構造にしたがってHTMLを作成する。デザインはここでは考えない。 ★スタイルシートは手で書く。 残念ながら、DreamWeberを含めて、CSSをきちんと書けるオーサリングツールはありません。カスケーディングと言う最も重要なCSSをCSSたらしめている特性をまったく利用できません。 そのため、デザインのためにHTMLに余分な要素や属性やIDを加えてしまうし、セレクタのグループ化や詳細度は使えません。 W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )でチェックする。 ★サンプルは、上記Validatorでテストしてありますが、HTMLを見てもCSSを見ても何が書かれているかわかると思います。当然、検索エンジンも理解できますし、スタイルシートをscreenのみに適用させれば、携帯電話でも閲覧可能です。 このサンプルを表示させるとわかりますが、ウィンド幅にもまったく依存しません。 ★ポイントはビルダーを使って文書構造にしたがってシンプルなHTMLを書くこと、その上でスタイルシートは手で書きましょう。短いしわかりやすいから、後からいくらでも修正できます。どのようなデザインにも変更できます。そのためにはHTMLをきちんと書くこと。そのためにビルダーを使ってもよいです。 なお、ソース中の_は、タブに変換してテストしてください。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> _<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> _<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"> <!-- div.header h1, div.header h2, div.imageList{ _width:70%;max-width:760px; _padding:0; _margin:0 auto; _text-align:center; } div.header h1 span, div.header h2 span{display:none;} div.header h1{ _height:43px;width:232px; _background-image:url(./title.jpg); } div.header h2{ _height:37px;width:510px; _background-image:url(./title2.jpg); } div.imageList{ _background-color:silver; _padding:5px; _border:solid 1px black; } div.imageList ul li{ _list-style:none;display:block; _width:150px;height:270px;margin:5px; _float:left; _border:solid 1px 3px 3px 1px gray; } div.imageList ul li img{border:solid 4px white;} div.imageList ul li span{ _display:block;margin:0.2em 0.5em; _text-indent:1em;text-align:left;text-decoration:none; } hr{ _clear:both;height:1px;visibility:hidden; } --> _</style> </head> <body> _<div class="header"> __<h1><span>ホームページのタイトル</span></h1> __<h2><span>ホームページのサブタイトル</span></h2> _</div> _<div class="imageList"> __<ul> ___<li><a href="./images/photo/a.jpg"><img src="./images/photo/ab.jpg" height="210" width="140" alt="タイトル1" /> ____<span>説明1がここに入ります。</span></a> ___</li> ___<li><a href="./images/photo/a.jpg"><img src="./images/photo/ab.jpg" height="210" width="140" alt="タイトル2" /> ____<span>説明2</span></a> ___</li> ___<li><a href="./images/photo/a.jpg"><img src="./images/photo/ab.jpg" height="210" width="140" alt="タイトル3" /> ____<span>説明3</span></a> ___</li> ___<li><a href="./images/photo/a.jpg"><img src="./images/photo/ab.jpg" height="210" width="140" alt="タイトル4" /> ____<span>説明4</span></a> ___</li> ___<li><a href="./images/photo/a.jpg"><img src="./images/photo/ab.jpg" height="210" width="140" alt="タイトル5" /> ____<span>説明5</span></a> ___</li> ___<li><a href="./images/photo/a.jpg"><img src="./images/photo/ab.jpg" height="210" width="140" alt="タイトル6" /> ____<span>説明6</span></a> ___</li> ___<li><a href="./images/photo/a.jpg"><img src="./images/photo/ab.jpg" height="210" width="140" alt="タイトル7" /> ____<span>説明7</span></a> ___</li> ___<li><a href="./images/photo/a.jpg"><img src="./images/photo/ab.jpg" height="210" width="140" alt="タイトル8" /> ____<span>説明8</span></a> ___</li> __</ul> __<hr /> _</div> </body> </html>
お礼
ご指導ありがとうございます。
- kentkun
- ベストアンサー率35% (1107/3093)
ごちゃごちゃして見にくいので同様のページを作りました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head><title></title> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta content="MSHTML 6.00.6000.17097" name="GENERATOR"></head> <body> <p> <table cellspacing="0" cellpadding="0" width="75%" align="center" border="1"> <tbody> <tr> <td colspan="4"> <p align="center">第一段目のタイトル</p></td> </tr> <tr> <td> <p align="center">画像</p></td> <td> <p align="center">画像</p></td> <td> <p align="center">画像</p></td> <td> <p align="center">画像</p></td> </tr> <tr> <td> <p align="center">タイトル1</p></td> <td> <p align="center">タイトル2</p></td> <td> <p align="center">タイトル3</p></td> <td> <p align="center">タイトル4</p></td> </tr> <tr> <td colspan="4"> <p align="center">第二段目のタイトル</p></td> </tr> <tr> <td> <p align="center">画像 </p></td> <td> <p align="center">画像 </p></td> <td> <p align="center">画像 </p></td> <td> <p align="center">画像 </p></td> </tr> <tr> <td> <p align="center">タイトル5</p></td> <td> <p align="center">タイトル6</p></td> <td> <p align="center">タイトル7</p></td> <td> <p align="center">タイトル8</p></td></tr></tbody></table></p></body></html>
お礼
ご丁寧にありがとうございます。
関連するQ&A
- センタリングのHTMLの挿入場所
お世話になっております。 前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。 以下のHTMLは横並びに写真を載せたもの(数行あります)です。(上部に文章を載せるための式がありますが、カットしています。)このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。 よろしくお願いします。 </DIV> <DIV style="top : 1313px; </DIV> <DIV style="top : 1473px;left : 327px; position : absolute; z-index : 3; " id="Layer8"><IMG src="button2.gif" width="81" height="35" border="0" alt="Back"></DIV> <DIV style="top : 1060px;left : 21px; position : absolute; z-index : 8; width : 698px; height : 123px; " id="Layer6"> <IMG src="DSC_19711.jpg" border="0" width="160" height="106"> <IMG src="DSC_20401.jpg" border="0" width="160" height="106"> <IMG src="DSC_20541.jpg" border="0" width="160" height="106"> <IMG src="DSC_21231.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 883px;left : 15px; position : absolute; z-index : 7; width : 649px; height : 165px; " id="Layer5"> <IMG src="DSC_19311.jpg" border="0" width="160" height="106"> <IMG src="DSC_19381.jpg" border="0" width="160" height="106"> <IMG src="DSC_19411.jpg" border="0" width="99" height="149"> <IMG src="DSC_19631.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 572px;left : -3px; position : absolute; z-index : 5; " id="Layer3"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_17481.jpg" border="0" width="160" height="106"> <IMG src="DSC_18051.jpg" border="0" width="160" height="106"> <IMG src="DSC_18151.jpg" border="0" width="160" height="106"> <IMG src="DSC_18351.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 729px;left : 12px; position : absolute; z-index : 6; " id="Layer4"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_18421.jpg" border="0" width="160" height="106"> <IMG src="DSC_18641.jpg" border="0" width="160" height="106"> <IMG src="DSC_18941.jpg" border="0" width="160" height="106"> <IMG src="DSC_19201.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY>
- ベストアンサー
- ホームページ作成ソフト
- HTML。携帯での画像配置
皆さんお世話になります。 今、携帯用のホームページを作っているのですが、 携帯で見たときに画像が真ん中にくるようにしたいのですが、 どこをどう直せばいいのかが解らないのです・・・ よろしくお願いします。 <BODY> <DIV style="top : -3px;left : -2px; position : absolute; z-index : 1; visibility : visible; " id="Layer1"> <DIV> <TABLE border="1" cellspacing="0" cellpadding="2" id="_HPB_TABLE_1_A_070408180231" height="570" class="hpb-cnt-tb1"> <TBODY> <TR valign="middle" align="center"> <TH align="center" height="343" width="200" valign="top" class="hpb-cnt-tb-th1"><IMG src="i-g-2.gif" width="200" height="61" border="0" align="middle"><BR> <P align="center">〒100-000<BR> 東京都千代田区<BR> 5-7-16布引ビル1F<BR> <BR> Tel (03)***-***</P> <IMG src="i-g-3.gif" width="200" height="230" border="0"><IMG src="i-g-4.gif" width="200" height="164" border="0"></TH> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY> </HTML>
- ベストアンサー
- ブログ
- CSSでfloat指定した画像に隙間
floatの指定をすると並べた画像に隙間ができます。 div aで外を囲み、幅を400px固定し、 その中にli(幅200px)を放り込んでいます。 (幅400pxの入れ物に200pxの小箱を2列に並べていく) 画像をfloatさせなければ隙間は出ないのですが、下記cssのようにfloatさせると幅400pxにIEだけ収まりません。 WinXP・irefox1.0やOpera7.5では意図通り表示されます。。 どなたか解決策お持ちの方よろしくおねがいします。 <html> <head> <title></title> <style type="text/css"> <!-- #a{ width:400px; margin: 0 auto; padding:0; } li{ width:200px; padding:0; list-style:none; float:right; display: inline; } img{ border:none; margin:0; padding:0; vertical-align:top; float:left; ←これの有無で不具合 } --> </style> </head> <body> <div id="a"> <dl> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="100" /><img src="xxx.jpg" width="50" height="100" /></li> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="200" /></li> </dl> </body> </html>
- ベストアンサー
- HTML
- webページの画像の配置(CSS/HTML)
webページ作成をしていて、ヘッダーに画像と動画を計4つ配置したいと思っています。 画像右/画像左/画像上/動画を 画 画像上 画 像 動 像 左 画 右 のような配置をすべく、 ・HTML <div id="top"> <div id="header"> <ul> <li><img border="0" src="left.jpeg" width="190" height="415" alt=""/></li> <li><img border="0" src="top.jpeg" width="560" height="100" alt=""/><iframe width="560" height="315" align="left" src="//www.youtube.com/....(略)..." frameborder="0" allowfullscreen></iframe></li> <li><img border="0" src="right.jpeg" width="190" height="415" alt=""/></li> </ul> </div> (略)</div> ・CSS div#top { width:960px; margin:0 auto; } div#header { position:relative; width:960px; } div#header ul{ margin:0; padding:0; float:left; } div#header li{ margin:0; padding:0; float:left; } 幅の調節など、色々試してみましたが、どうしてもうまくいかず、 画像左 画像上 動画 画像右 のようになってしまいます。 何が原因でどのように改善すればいいのか、アイデアおよび知識があれば教えて頂きたいと思います。 よろしくお願いします! ※初投稿なので、御無礼・不明瞭な点などありましたら、ご指摘頂けると幸いです。 また、不足した情報なども、あれば教えてくださいませ。
- 締切済み
- CSS
- <div>この余白は・・・
<div>で作ったボックスの中に、さらに<div>のボックスを二つ(box、box2)並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか? また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out"> <div class="title"> <img src="img/title.jpg" width="700" height="75" border="0"> </div> <div class="main"> <img src="img/main.jpg" width="700" height="375" border="0"> </div> <div class="menu"> <img src="img/home_a.jpg" width="100" height="35" border="0"> <img src="img/first.jpg" width="100" height="35" border="0"> <img src="img/info.jpg" width="100" height="35" border="0"> <img src="img/order.jpg" width="100" height="35" border="0"> <img src="img/support.jpg" width="100" height="35" border="0"> <img src="img/link.jpg" width="100" height="35" border="0"> <img src="img/question.jpg" width="100" height="35" border="0"> </div> <div class="area"> <div class="box"> <h5>AAAAAAAAA</h5> <img src="img/kari.gif" width="250" height="100" border="0"> </div> <div class="box2"> <h5>BBBBBBBBB</h5> <img src="img/kari2.gif" width="250" height="100" border="0"> </div> </div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; } どなたか知恵をお貸しください。よろしくお願いいたします。
- ベストアンサー
- HTML
- スタイルシートに関しての質問です。margin0 padding0と指定し居るのに、変なスペースが入ってしまいます。。。
スタイルシートで、 *{ padding:0; margin:0; } img{ padding:0; margin:0; } と指定しているのですが、なぜか画像でへんなスペースが入ってしまいます。どうしてでしょうか? ソースは下記の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <head> <META http-equiv=Content-Type content="text/html; charset=Shift_JIS"> <META content="新築マンション,賃貸,敷金ゼロ,礼金ゼロ,ペット可,内覧可能,水商売可,風俗可,東京,都内,マンション,アパート,一戸建, name=keywords> <title>株式会社</title> <link href="css/mainstyle.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wapper"> <div id="head"><img src="img/forward_rogo.gif" width="250" height="56" border="0" ></div> <div id="sidememu"> <table width="150" border="0" cellpadding="0" cellspacing="0" > <tr> <td><a href="#"><img src="img/menu1.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu13_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu5_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu4.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu11_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu10_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu3.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu9_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu6_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu8_h.gif" width="150" height="40" border="0"></a></td> </tr> </table> </div> <div id="main"> <div id="flash-a"> <img src="img/dammy.gif" width="650" height="150" border="0"> </div> <div id="main-1"> <img src="img/top_1.gif" width="650" height="40" border="0"> </div> </div> </div> </body> </html> cssは、 /* CSS Document */ *{ padding:0; margin:0; } img{ padding:0; margin:0; } body{ margin-left:auto; margin-right:auto; text-align:center; } #wapper{ width:820; } #head{ margin-top:20px; text-align:left; border-bottom:2px #000099 solid; } #sidememu{ margin-top:20px; background-color:#F00; float:left; } #main{ margin-left:10px; margin-top:20px; float:right; } です。すみません。教えてください!
- ベストアンサー
- その他([技術者向] コンピューター)
- お世話になっております。fc2でblogを運営しているものです。
お世話になっております。fc2でblogを運営しているものです。 テンプレートをいじってロールオーバーボタンを作ってみたいのですがどうしてもできません。 以下ソースになります。 HTML: <!--navi--> <div id="navi"> <div class="navi01"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン トップ" border="0" width="120" height="30" /></a> </div> <div class="navi02"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン イラスト" border="0" width="120" height="30" /></a> </div> <div class="navi03"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン マンガ" border="0" width="120" height="30" /></a> </div> <div class="navi04"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン その他" border="0" width="120" height="30" /></a> </div> <div class="navi05"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン 掲示板" border="0" width="120" height="30" /></a> </div> <div class="navi06"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン メール" border="0" width="120" height="30" /></a> </div> </div> <!--navi--> CSS: #navi { margin : 0 auto; margin-top : 5px; width : 800px; } .navi01 { float : left; margin-left: 15px; } .navi02 { float : left; margin-left: 10px; } .navi03 { float : left; margin-left: 10px; } .navi04 { float : left; margin-left: 10px; } .navi05 { float : left; margin-left: 10px; } .navi06 { float : left; margin-left: 10px; } です。navi01~navi06までがボタン。それをnaviでグループ化しているイメージです。 ○○○○○○には当然ソースが書いてあります。各ボタンのロールオーバー用ボタンは用意してあります。 どのようなHTML、CSSを書けばよろしいでしょうか。よろしくお願いいたします。
- ベストアンサー
- ブログ
- 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
- 【HTML】画像と画像の間に「_」が入ってしまう
画像のように勝手に画像と画像の間「_(アンダーライン)」が入ってしまいます。どのようにすればこのアンダーラインを消せますか? ■HTML■ <div id="imglink"> <a href="hogehoge1"> <img src="hogehoge1" width="88" height="31" alt="okwave"> </a> <a href="hogehoge2"> <img src="hogehoge2" width="88" height="31" alt="okwave"> </a> <a href="hogehoge3"> <img src="hogehoge4" width="88" height="31" alt="okwave"> </a> </div>
- ベストアンサー
- HTML
- 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> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー この画像の上の図が↑のソースです。 下の図は、『こうしたい』という図です。 画像の隣に文章を表示させたいのですが、どうすればなりますか? できれば、わかりやすく、例や見本を書いてくれますと助かります;
- 締切済み
- その他([技術者向] コンピューター)
お礼
私の求めていた物そのものです。 ご指摘のとおり単純ミスも多く、勉強しなければならないことがたくさんあります。 ありがとうございました。