XOOPSカスタムブロックにHTMLを配列する方法
- XOOPSのカスタムブロックにHTMLを表示する方法についての質問です。左側にアイコンとテキストを配置し、右側にイメージ画像のアフィリエイトを配置したいとのことですが、表示がうまくいかないようです。
- 現在のソースコードを添付されており、左側にアイコンとテキスト、右側にAdSenseの広告を表示する方法を探しています。
- 質問者はHTMLの知識がなく、どうすれば実現できるか教えてほしいとお願いしています。ご指導をお願いします。
- ベストアンサー
XOOPS カスタムブロックに htmlを配列
始めまして！ 初めて投稿させて頂きます。 XOOPSのカスタムブロックにhtmlで表示したいのですが、イメージ通り表示出来ないでおります。 htmlの知識も無い無謀者ですが、どうかご指導の程宜しくお願い致します。 【やりたい事】 ブロックの左側にアイコンに続きtxtを挿入、右側にイメージ画像のアフリエイトを配置したいのですが、表示がイメージ通り出来ません。 添付ファイル画像（１） ・配置したいイメージ 添付ファイル画像（２） ・現状 ・現状のソース <P><Div Align="left"><IMG src="file:///C:/Users/xxx/Desktop/folder858.png" width="24" height="24" border="0">test01<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/Desktop/folder858.png" width="24" height="24" border="0">test02<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx/folder858.png" width="24" height="24" border="0">test03<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx/folder858.png" width="24" height="24" border="0">test04<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx/folder858.png" width="24" height="24" border="0">test05<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx/folder858.png" width="24" height="24" border="0">test06<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx/folder858.png" width="24" height="24" border="0">test07<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx//folder858.png" width="24" height="24" border="0">test08<BR></Div> <Div Align="right"><script type="text/javascript"><!-- google_ad_client = "pub-ｘｘｘｘｘｘｘｘｘ"; /* 200x200, 作成済み 09/06/15 */ google_ad_slot = "ｘｘｘｘｘｘ"; google_ad_width = 200; google_ad_height = 200; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></Div> ご指導宜しくお願い致します。
- eng_bonbon
- お礼率100% (7/7)
- その他([技術者向] コンピューター)
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
これってHTMLのファイルからコピペしたものですか？ そうだとしたらこれでCSSがきくわけ無いです まずCSSの指定は<head></head>内または別ファイルに入れて読み込む か、<p style=○>というような感じで直接入れる3パターンがあります が、あなたの書き方はどれにもはまらない、ルール違反です 次に指定の仕方自体も間違いっていうか何がしたいのかわからない。 こちらもルールとはかけ離れたことをしているので、仮に↑に 述べたことを遵守しても反映しません （ブラウザがこの命令では何を表現していいのか判断出来ない） 本当に申し訳ないのですが、一からお勉強して下さい 今回のソースを例えば私やほかの人がキレイに書いたところで 次の壁に当たったときに自分で対応出来ないなら作る意味ないです 掲示板自体の禁止事項に丸投げ禁止、という言葉があるように ある程度勉強はして、それでもわからない時にこういうケースは どうしたらいい？っていう質問を行う場であって、努力もせずに これ作って、なら業者に依頼しろよってコトになるんです なので、もう少しHTMLやCSSの基礎を学んでみて、それでもどうしても 出来ない、アドバイスがほしいってなった時に質問した方がいいですよ 最後にエスパー回答で、CSSの指定とHTMLの書き方のまとめ 上左にスペースをあけるなら marginかpaddingを使います 以下参照↓（簡略化しますので非推奨の書き方があるかもです） <style> div.rist{ /* ココにCSSの指定（ルールに沿った書き方で） */ } div.googl{ /* ココにCSSの指定（ルールに沿った書き方で） */ } </style> <body> <div class="rist"> <div> <ul type="square"> <li>test01</li> <li>test02</li> <li>test03</li> <li>test04</li> <li>test05</li> <li>test06</li> </ul> </div> <div class="googl"> <script type="text/javascript"><!-- google_ad_client = "pub-ｘｘｘｘｘｘｘｘｘ"; /* 200x200, 作成済み 09/06/15 */ google_ad_slot = "ｘｘｘｘｘｘ"; google_ad_width = 200; google_ad_height = 200; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> </div> </body> あとはCSSの勉強だけやればとりあえずそれなりにはなるはず。 頑張って下さい。（回答はラストにしますね）
その他の回答 (2)
- koke29
- ベストアンサー率58% (114/196)
前回で最後と書きましたが、随分進歩されたようで感心したので再レスです グーグルの部分、div使わないならgooglクラスはいらないので削除してもOK 参考画像のように、枠で囲みたいなら最初のアドバイス通り大きい箱を 用意して、そこにメニューとスクリプトを入れる方法か、メニューの右以外 とスクリプトの左以外にボーダーを入れて、中身はくっつきすぎないように paddingやmarginで調整ってことでもいいかと思います 私が参考に書いたコード、ulをdivに入れてますが、ulもブロック要素 なのでul自体にristクラスを指定してもレイアウトは崩れないと思います むしろulの利用がここだけってことなら、ul自体のスタイルとして 適用させるでも構わないかも HTMLもCSSも色んな書き方が出来るのでこれが正解！っていうのは あまり無いと思います 主要ブラウザでの描画チェックで問題なければおおむねOKかなと ↑はIE Firefox Opera googleクロム サファリ 辺りでしょうか スレイプニール、ルナスコープも最近多いみたいです HTML構文については構文チェックのサイトもありますので、参考URL のサイトあたりでチェックしてみて減点があったら直すといいですよ CSSの構文チェックも確かあるはずなので、探すといいかもですね 後はもう、好みの見た目になるように試行錯誤をするだけですね 思い通りのデザインになるように頑張ってみて下さいね！
お礼
koke29さん こんばんわ！ 再レスありがとうございます。 落とされた崖からはい上がって来た感じです。（笑） おかげ様で、CSS,HTMLの勉強も出来たおかげで、達成感が有ります。 最後までお付き合いして頂きありがとうございました。 残りのチェック等は地道にデザインの微調を繰り返しながらやって行こうと思います。 改めて今回のご指導ありがとうございました。 本当に助かりました。 また御縁がありましたら宜しくお願い致します。 ＞グーグルの部分、div使わないならgooglクラスはいらないので削除してもOK コピペする時に欠落してました。 ＞参考画像のように、枠で囲みたいなら・・・ XOOPSのテンプレートで自動でブロック枠が出来るので、ほぼイメージ通りの仕上がりになってます。 ＞私が参考に書いたコード、ulをdivに入れてますが・・・ 参考にさせて頂きます。
- koke29
- ベストアンサー率58% (114/196)
うーん… とりあえずHTML勉強しましょーよって感じのコードですねぇ せっかく参考にしたいサイトがあるんだから、そのサイト（YAHOO?)の この部分のソースを「とりあえず」パクって作ってみたらいいですよ ○考え方 まず、大きい箱を用意します この中に小さい箱を2つ用意します 左の箱にはテキストを入れます（listタグ使うといいです） 右の箱にはgoogleのスクリプトを入れます これをうまいこと配置出来れば完成 ↓ <div> <div> <ul><li></li></ul> </div> <div> <script></script> </div> </div> 骨組みはこんな感じ。で、これらが思い通りの場所におけるように CSSで配置や装飾をしていければいいと思います あと、タグは小文字で書きましょー
お礼
koke29さん、こんばんわ ご指導ありがとうございます。 ＞とりあえずHTML勉強しましょーよって感じのコードですねぇ 恥ずかしいかぎりです。 コードを考える時の考え方は、なるほど理解できました。 日々努力していきます。 以下本題 参考にさせて頂き、した記載のコードを作成してみましたが、動いていないみたいです。・・・（悲） まずは僕なりに複雑になるのをさけて、イメージアイコンを無くしました。 まっこの辺までは出来たのですが、どうもcssが動いて無いようです。 googlの広告は左側のtxtの下に張り付いている状態で広告イメージ上に div.googl{ top:5px; right:330px; } がtxtとして表示されます。 下記載コードの不具合等ご指導願えませんでしょうか。 宜しくお願い致します。 <style type="text/css"> div.rist{ top:3px; left:5px; } </style> <body> <div class="rist"> <div> <ul type="square"> <li>test01</li> <li>test02</li> <li>test03</li> <li>test04</li> <li>test05</li> <li>test06</li> </ul> </div> div.googl{ top:5px; right:330px; } <div class="googl"> <script type="text/javascript"><!-- google_ad_client = "pub-ｘｘｘｘｘｘｘｘｘ"; /* 200x200, 作成済み 09/06/15 */ google_ad_slot = "ｘｘｘｘｘｘ"; google_ad_width = 200; google_ad_height = 200; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> </div> </body>
関連するQ&A
- ドロップダウンメニューの方法を教えてください
■ドロップダウンメニューでサブメニューが横並びで出るようにしたいと思っています。 HTMLは下記のように記述しています。どのようにJavascriptを記述すると良いのか教えてください。よろしくお願いします。 【html】 <div id="menuber"> <a href="#"><IMG src="test/m1.gif" width="101" height="20" border="0" align="left"></a> <div class="hiddenmenus"> <span id="sub"> <a href="#"><IMG src="test/sub1.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub2.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub3.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub4.gif" width="101" height="20" border="0" align="left"></a> </span> </div> </div> 【CSS】 .hiddenmenus {position:absolute; top: 20px; left: 0px;} #sub1 { visibility: hidden; }
- ベストアンサー
- JavaScript
- HTMLタグ
画像にもありますが、取り扱い商品・液晶モニタ・パソコンパーツなどの横に横2列縦3列のテーブル、その横に縦５列横1列のテーブルを付けたいのですが、どうしてもわかりません。 わかる方居ましたらお願いします。 現在こんな感じです <p><font color="#f70006"> <strong>他には無いアイテムがここにはあります</strong> </font> <br> <img style="WIDTH: 983px; HEIGHT: 102px" border="0" alt="" src="素材/top.png" width="1000" height="118"><br> <img border="0" alt="" src="素材/home.png" width="200" height="73"><img border="0" alt="" src="素材/商品一覧.png" width="200" height="73"><img border="0" alt="" src="素材/輸入.png" width="200" height="73"><img border="0" alt="" src="素材/買付.png" width="200" height="73"><img style="WIDTH: 169px; HEIGHT: 73px" border="0" alt="" src="素材/問合.png" width="170" height="73"><br> <br> <br> <br><img border="0" alt="" src="素材/取り扱い.png" width="164" height="49"><br> <img border="0" alt="" src="素材/液晶.png" width="164" height="49"><br> <img border="0" alt="" src="素材/ａｐａｒｅｒｕ.png" width="164" height="49"><br> <img border="0" alt="" src="素材/pasokon.png" width="164" height="49"><br> <img border="0" alt="" src="素材/周辺機器.png" width="164" height="49"><br> <img border="0" alt="" src="素材/マルチメディア.png" width="164" height="49"><br> <img border="0" alt="" src="素材/自動車.png" width="164" height="49"><br> <br> <br> <br> <img border="0" alt="" src="素材/サポート.png" width="166" height="63"><br> <img border="0" alt="" src="素材/輸入について.png" width="166" height="63"><br> <img border="0" alt="" src="素材/お問い合わせ.png" width="166" height="63"><br> <img border="0" alt="" src="素材/会社概要.png" width="166" height="63"> </p> 他にいい作り方など、オススメ等ありましたら何でもお願いします
- ベストアンサー
- その他（インターネット・Webサービス）
- 初歩的かもしれませんが回り込みが上手くできません
初歩的かもしれませんが回り込みが上手くできません イメージ的には、図のようなdivを４つ横に並べて改行、同じように繰り返したいです。 ■■■■ ■■■■ しかし、下記の様にすれば ■■■ ■ ■■■ ■ に、なってしまいます。 こういう場合、どうすればいいのでしょうか？？ <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave1</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave2</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave3</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave4</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave5</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave6</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave7</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave8</a></div>
- ベストアンサー
- CSS
- センタリングのＨＴＭＬの挿入場所
お世話になっております。 前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。 以下のＨＴＭＬは横並びに写真を載せたもの（数行あります）です。（上部に文章を載せるための式がありますが、カットしています。）このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。 よろしくお願いします。 </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="Ｂａｃｋ"></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>
- ベストアンサー
- ホームページ作成ソフト
- html5でブロックとブロックの間に隙間ができる
下記のホームページを作りました。 しかし、ボタン部分とスライドショー部分に少し隙間ができてしまいます。 いろいろ試しましたが、隙間が目られません。 原因を教えていただけると幸いです。 [html5] <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>TEST</title> <link href="style/main.css" rel="stylesheet" type="text/css"> <meta name="author" content="HTMQ"> <meta name="robots" content="all"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> </head> <body> <header> <section> <h1>格安ホームページ制作会社 - hompa（ホムペ） -</h1> </section> <!-- container --> <div id="container"> <!-- header --> <div id="header"> <nav> <ul> <li><a href="index.html"><img src="img/btn/btn0.png" width="120" height="86" alt="TEST"></a></li> <li><a href=""><img src="img/btn/btn1.png" width="120" height="86" alt="TEST2"></a></li> <li><a href=""><img src="img/btn/btn2.png" width="120" height="86" alt="TEST3"></a></li> <li><a href=""><img src="img/btn/btn3.png" width="120" height="86" alt="TEST4"></a></li> <li><a href=""><img src="img/btn/btn4.png" width="120" height="86" alt="TEST5"></a></li> <li><a href=""><img src="img/btn/btn5.png" width="120" height="86" alt="TEST6"></a></li> <li><a href=""><img src="img/btn/btn6.png" width="120" height="86" alt="TEST7"></a></li> </ul> </nav> </div> <!-- header --> <div class="clearfix"></div> <!-- slidmain --> <div id="slidemain"> <p id="slideshow"> <img src="img/index/photo1.jpg" width="980" height="450" alt="スライドショー1" class="active"> <img src="img/index/photo2.jpg" width="980" height="450" alt="スライドショー2"> <img src="img/index/photo3.jpg" width="980" height="450" alt="スライドショー3"> </p> </div> <!-- slidmain --> </div> <!-- container --> </header> </body> </html> [CSS] @charset "UTF-8"; /* CSS Document */ * { margin:0; padding:0; } body { } div#container { text-align:left; width:980px; margin: 0 auto; } div#header { width:840px; text-align:left; margin: 0 auto; padding-top:20px; } h1 { text-indent: -9999px; display: none; } ul { list-style:none; } li { float:left; } .clearfix:after { content:" "; display:block; clear:both; } #slidemain { width:980px; height:450px; } #slideshow { position: relative; width: 980px; height: 450px; } #slideshow img { position: absolute; top: 0; left:0; z-index: 8; opacity: 0.0; } #slideshow img.active { z-index: 10; opacity: 1.0; } #slideshow img.last-active { z-index: 9; }
- ベストアンサー
- HTML
- 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>
- ベストアンサー
- ブログ
- 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
- <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
- ＣＳＳで指定してます。プラザーによっては文字の位置
よろしくお願いします。 文字の大きさ、行間を指定しているのですが プラウザーによっては文字の位置が一行ほどずれてしまいます。 何か対策はないのでしょうか？ ＩＥは文字半角分左に、Chromeは一行上に、Operaは半角分右によってます。 ＣＳＳを自力で書き込むのは初めてで、サンプルブックを見ながらしてます。 書き方を間違えているのでしょうか。 ------------------------------------------- 【スタイルシート】 *{ margin:0; padding:0; } #boxA{ background : none 0% 0% / auto auto repeat scroll padding-box border-box #ffffff; } #boxB{ background:#ffffff; } #boxE{ background : none 0% 0% / auto auto repeat scroll padding-box border-box #ffffff; } body{ text-align:center; } #container{ width:892px; margin-left:auto; margin-right:auto; text-align:left; } h1{ font-size : 11.5px; color:#333333; font-weight : 500; text-indent:0px; letter-spacing : -0.1em; } .text1{ font-size : 11.5px; letter-spacing : -0.1em; } .text2{ font-size : 70%; } .text3{ font-size : 85%; line-height : 1.3em; } #boxA{ width : 892px; } #boxA2{ width : 708px; margin-top : 10px; margin-left : 90px; background-image : url(../img/top_img.jpg); height : 328px; } #boxA3{ width : 708px; margin-top : 10px; background-image : url(../img/porishi.jpg); background-repeat : no-repeat; background-position : 50% 50%; margin-left : 90px; height : 130px; } #boxE{ width:100%; clear:left; } #boxB{ width : 892px; float : none; } #boxB2{ margin-top : 10px; margin-left : 100px; width : 708px; } ------------------------------------------- 【webページ】 </head> <body background="img/bgcolor.png"> <div id="container"> <div id="boxA"> <br /> <div id="boxA2" class="text1"> <br /> <br /> <br /> <br /> <a href="http://www.wakayama2015.jp/" target="_blank"><img src="img/top_kokutai.png" width="106" height="276" border="0" align="left" alt="2015年紀の国わかやま国体 わかやま大会" /></a><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <h1> 暮らしに欠かせない食・住・遊に関する事業を展開する丸長グループ。 </h1> 日々の生活が安心・快適で、そして豊かであってほしい…<br /> その想いがグループ企業の分野を超えたノウハウの共有につながり、<br /> さらなるサービスの向上へと結びついているのです。<br /> これからも郷土和歌山県を拠点に県内外に事業フィールドの拡大に<br /> 邁進してまいります。<br /> </div> <div id="boxB" style="text-align : center;" align="center"> <div id="boxB2"> <img src="img/top_mainimg.png" width="703" height="815" border="0" /> </div> </div> <div id="boxE" style="text-align : center;" align="center"> <p style="text-align : center;" align="center" class="text2"><br /> <font color="#000000">Copyright (C) 2000 MARUCHO GROUP Corporation. All Rights Reserved.</font></p> </div> </div> </div> </body> </html> 【webテスト】 http://www.dream-web.jp/test/maru/ サンプルブック見れば見るほど解らなくなってしまって困ってます。 助力よろしくお願いします。
- 締切済み
- CSS
- スタイルシートでフレーム枠を隙間なくピタリとつける。
よろしくおねがいします。 http://www.sonzai.net/test/test.html 参考URL↑ 中央に<iframe>を置き、それを囲むようにフレームを設置したいのですが、 下辺だけ微妙に離れてしまいます。 【HTML】 <div id="subnavibar"> <p><img src="images/top/event.png" width="220" height="50" /></p> <img src="images/top/event.png" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="images/top/event.png" width="10" height="300" /> <p><img src="images/top/event.png" width="220" height="20" /></p> </div> 【css】 #subnavibar { width: 240px; float: left; background-color: #ffffff; height: 100%; } 原因としては、何があるでしょうか？
- ベストアンサー
- HTML
お礼
koke29さん おはようございます。 ご指導ありがとうございます。 どうにかイメージ通りの配置が出来ました。 取りあえず下記載のコードで行こうかと思います。 プロさん達から見たら・・・へんてこコードかもしれないけど！ しかし難しいもんですね。 ここまで徹夜してwebで勉強しましたが、まだまだ至らぬ点が有るかと思います。 改善したほうが良いと思われる点がありましたら、ご指導願います。 ------------------------------------------------------------- <head> <style> .rist{ float:left; margin:0; margin-bottom:10px; font-size: 100%; } .googl{ width:auto; margin:0; margin-left:320px; margin-bottom:10px; } </style> </head><body> <div class="rist"> <ul type="square"> <li>test01</li> <li>test02</li> <li>test03</li> <li>test04</li> <li>test05</li> </ul> </div> <script type="text/javascript"><!-- google_ad_client = "pub-ｘｘｘｘｘｘｘｘｘ"; /* 200x200, 作成済み 09/06/15 */ google_ad_slot = "ｘｘｘｘｘｘ"; google_ad_width = 200; google_ad_height = 200; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">&a... </script> </div> </body>