アメブロのアイフレ設置で表示されない問題

このQ&Aのポイント
  • アメブロのルームに設置したアイフレがうまく表示されない問題について教えてください。
  • 質問者はアメブロのルームにアイフレ5つを設置したが、4番目と5番目が表示されないという問題が発生しています。
  • どこに間違いがあるのかわからず、質問者は誰か教えてもらいたいとしています。
回答を見る
  • ベストアンサー

アメブロ

アメブロのルームに アイフレ5つを設置したんですが どうしても4と5が表示されません・・・ TAGに間違いがあるのかもしれませんが どこが間違っているのかわかりません 私のアメブロのルームです http://profile.ameba.jp/yellow-1111/ どなたかどこが間違ってるのか 教えてください! <STYLE type="text/css">#aifure4{position:absolute;top:115px;right:3500px;width:165px;height:200px;overflow:auto;padding:文字と枠の間px;background-color:枠内の背景色カラーコード;z-index:300;border:高さpx solid ;}</STYLE><div id="aifure4">ここに好きな文字を</div> <STYLE type="text/css">#aifure5{position:absolute;top:350px;right:950px;width:1650px;height:200px;overflow:auto;padding:文字と枠の間px;background-color:枠内の背景色カラーコード;z-index:300;border:高さpx solid ;}</STYLE><div id="aifure5">ここに好きな文字等を</div>

質問者が選んだベストアンサー

  • ベストアンサー
  • DrFell
  • ベストアンサー率55% (305/551)
回答No.1

間違場所は、styleを各場所が違うし、書き方も違うし……。間違っている場所を聞いても対処できるのかな?そのソースをいじっても、治るようなものではないです。他の場所も触らないと。 それと、他のことも気にしたほうがいいです。一応、私から見えた画面をアップしますね。 初歩から学んだほうが結局は近道です。

その他の回答 (1)

回答No.2

とりあえず、「アイフレ」なんてものはない。 というかソース見たけど「文字と枠の間px」とかそのままはいってりゃそりゃ無理だわ。 HTMLとスタイルシートのごくごく初歩だけでいいからきちんと学んでください。じゃなきゃインラインフレーム5個なんて無理無理。

関連するQ&A

  • この部分の画像を入れるには・・??

    <!--* はじめ *--> <table><tbody><tr><td> <div style="border:1px solid #ff6699;width:400px"><div style="border-width:3px;border-style:solid;border-color:#fff #ffbbbb #ffbbbb #fff;background:#ffcccc;padding:4px"><div style="border:3px dotted #fff;padding:4px"><div style="border-width:3px;border-style:solid;border-color:#ffbbbb #fff #fff #ffbbbb"><div style="border:1px solid #ff6699;background:#fff;font-size:13px;color:#ff6699;padding:15px"> <img src="写真URL" width="幅(ピクセル)" height="高さ(ピクセル)" border="0" align="left" style="margin:0 7px 0 0"> <b>HN</b> ☆ プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <b>職業/学校</b> ☆ プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <b>住んでるとこ</b> ☆ プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <b>性別</b> ☆ プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <b>年齢</b> ☆ プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <!--* おわり *--> すいません。上記のタグは、HP用のプロフィールなんですが、写真を入れることのできるプロフィールなんです。。 が、上のほうに、写真URLというのが、あって、多分そこに写真を入れるんですが、写真URLって何ですか?マイピクチャーに入れてる写真を使うのですがURLなんかないです。。 どうしたらいいんでしょうか?

  • floatがうまくいきません。

    以下のスタイルシートに設定したのですが、 #content の幅をぴったしの値 width: 640px; にするとレイアウトが崩れてしまいます。 どこが間違っているのでしょうか。 また、参考になるページがあれば教えてください。 <body> <div id="wrapper"> <div id="header"> </div> <div id="pagebody"> <div id="navigation"> </div> <div id="content"> </div> </div> <div id="footer"> </div> </div> </body> body { margin: 0; padding: 0; } #wrapper { width: 760px; border-style: solid; border-color: red; border-width: 5px; } #header { width: 750px; height: 85px; border-style: solid; border-color: blue; border-width: 5px; } #pagebody { width: 750px; height: 500px; border-style: solid; border-color: orange; border-width: 5px; } #navigation{ width: 90px; height: 490px; border-style: solid; border-color: green; border-width: 5px; float: left; } #content{ width: 636px; height: 490px; border-style: solid; border-color: yellow; border-width: 5px; } #footer{ width: 750px; height: 30px; border-style: solid; border-color: bluck; border-width: 5px; }

    • 締切済み
    • CSS
  • モバイルサイト<3キャリア>:auでwidth指定が無効化される?

    モバイルサイト<3キャリア>:auでwidth指定が無効化される? 3キャリア共通仕様のHTMLサイトを作成しています。cssはインラインで使用しています。 あ行 あ い う え お か行 か き く け こ... のような「あいうえお表」を挿入したいのですが、タイトルのとおりauで表示が崩れます。 実現したい仕様は添付画像の【docomo,Softbank】のような形で、この2キャリアでは問題なく表示されています。 が、【au】で見ますとそれぞれの要素のwidth指定が無視され、100%表示されてしまっているようです。 該当部分のソースは、以下のとおりです。 <div style="background-color:#FFF; padding:5px; margin:0;"> <div style="background-color:#FFF; padding:5px; margin:0; width:10px; height:15px; display:inline;">あ行</div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><a href="list_a.html"><font color="#FF0066">あ</font></a></div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">い</font></div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">う</font></div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">え</font></div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">お</font></div> </div><!--a end--> 思いつくままにスタイルを追加したので、その中に両立しないものがあるのかなと思うのですが、なにぶんまだ不勉強で・・・ tableで組み直すことも考えたのですが、それぞれのboxをborderで囲みたいのと間隔を空けたいため、ソースが今以上に膨大になってしまう気がして踏ん切りがつきません。 ここを直せばいい、tableでも組める等、お知恵をお貸しください。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ブログを3カラム右右から左右両サイドにしたい。

    現在CSSは下記のようになっています。 どこをいじれば右右から左右両サイドにできるのか教えていただけたら嬉しいです。 宜しくお願い致します。 /** 03. Layout - レイアウトの設定 */ /* ----------------------------------------------- */ body { margin: 0; padding: 0; min-width: 960px; text-align: center; background-image: none; background-repeat: repeat; background-position: 50% top; } div#containerWrap { width: 960px; margin: 0 auto 5px; } div#container {} div#content { padding: 10px 0; border-width: 1px; border-style: solid; } div#main , div#sub , div#extra { overflow: hidden; } div#main { float: left; display: inline; width: 538px; } div#main div.column-inner { padding: 0 10px 10px; } div#sub { float: left; display: inline; width: 210px; } div#sub div.column-inner { padding: 5px 10px 0; overflow: hidden; border-width: 1px; border-style: none none none solid; } div#extra { float: left; display: inline; width: 210px; } div#extra div.column-inner { padding: 5px 10px 20px; overflow: hidden; border-width: 1px; border-style: none none none solid; }

    • ベストアンサー
    • HTML
  • 外部スタイルシートへの記入方法について

    外部スタイルシートへの記入方法について 下記ボックスを利用したいのですが 外部ファイルにまとめて記載できたらと思いましたがどうも上手くいきません。 どなたか詳しい方にご教授願えないでしょうか、 よろしくお願い致します。 <div class="box_01"> この中にタイトルを記載と 本文を記載する </div> <TABLE width="400"><TR><TD> <DIV style="width : 400px"> <DIV style="border-width : 1px;border-color : #333333 ;border-style : solid"> <DIV style="border-width : 1px;border-color : #FFFFFF #999999 #999999 #FFFFFF;border-style : solid;"> <DIV style="background-color : #D0D0D0;padding : 1px"> <DIV style="padding : 3 3 4 3px;text-align : center">- タイトル -</DIV> <DIV style="border-width : 1px;border-color : #999999 #FFFFFF #FFFFFF #999999;border-style : solid;"> <DIV style="border : 1px #333333 solid;background-color : #FFFFFF;padding : 10px;"> <br><hr> ↓<BR> ↓<BR> <center> ↓<BR> ↓<BR> </center> ↓<BR> ↓<BR> <hr> </DIV> </DIV> </DIV> </DIV> </DIV> </TD></TR></TABLE> くれくれで恐縮ですがどうぞよろしくお願い致します。

    • ベストアンサー
    • CSS
  • liタグのナビボタンがFirefoxで二重に表示。

    liタグでナビボタンを縦に3つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは2段めから2つずつ表示してしまい5つのナビボタンになってしまいます。どのように記述すれば良いのでしょう? <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }

    • ベストアンサー
    • CSS
  • 中枠の太さを1pxにしたい

    以下の HTML を書いたのですが、外枠の太さは1pxになっていますが、中枠が2pxになってしまいます。中枠も1pxで表示するにはどう修正すればいいでしょうか? ご教授よろしくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>test</title> </head> <body> <table border="0" width="100%" cellspacing="0" cellpadding="0" id="table2"> <tr> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Icon</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Name</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Effect</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 111111</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 444444</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 222222</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 555555</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 333333</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 666666</div></div></td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • タグの修正に力をかしてください

    ホットペッパーに出てくるお店のページのバナーのように、 「アクセス」「TEL」の文字を表示させたいのですがうまくいきません。 タグの修正にちからをかしていただけないでしょうか。 以下、タグです。よろしくおねがいします。 <table width="702" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="color3" colspan="3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> <tr> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> <div style="position:relative;"><img src="images/hotpot_bannar.gif" alt="バナー" width="700" height="151"></div> <div style="position:absolute; top:70px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">アクセス</div> <div style="position:absolute; top:50px; left:450px; color:#ffffff; font-size:10px;>JR環状線:「福島駅」・・・</div> <div style="position:absolute; top:70px; left:450px; color:#ffffff; font-size:10px;>JR東西線:「新福島駅」・・・</div> <div style="position:absolute; top:120px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">TEL</div> <div style="position:absolute; top:120px; left:450px; color:#ffffff; font-size:10px;>06-****-****</div> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> </table>

    • ベストアンサー
    • 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
  • float解除直後のborderつき文章の配置方法

    floatを使って複雑にボックスを配置し、その一番下にborderで囲った文章を配置したいのですが、 Coment4で設定したborderと文章が、borderはPhot1のすぐ下に表示され、 文章はphot4の下から表示されてしまいます。 phot1と同じ左隅からborderで囲まれた文章を配置するにはどうしたらいいのでしょうか? <style type="text/css"> #phot1{ width: 750px; height: 50px; /*ここからはgoo質問用(実際は入れない)*/ background-color: #48637e; color: #fff; } #left{ float: left; width: 450px; margin: 10px; /*↓goo質問用*/ border: 1px solid #39f; } #Coment1{ font-size: 16px; color: #fff; line-height: 110%; /*↓goo質問用*/ width: 400px; height: 60px; background-color: #8493bb ; } #Coment2{ font-size: 12px; color: #000; /*↓goo質問用*/ width: 300px; height: 60px; background-color: #777; } #phot2{ padding-left: 60px; background: url("sample.jpg") 0 0 no-repeat; float: left; margin: 0;/*バグ?余白を削除*/ /*↓goo質問用*/ background-color: #ff0; width: 140px; } #phot3{ float: left; overflow: hidden; /*↓goo質問用*/ border: 1px solid #e37615 ; width: 200px; } #right{ float: left; width: 270px; margin-top: 10px; overflow: hidden; /*↓goo質問用*/ border: 1px solid #7c4b15; } #Coment3{ float: left; font-size: 12px; width: 180px; /*↓goo質問用*/ border: 1px solid #000; height: 140px; } #phot4{ float: left; overflow: hidden; margin: 5px; width: 70px; /*↓goo質問用*/ border: 1px solid #ff3cb9; } #phot4 ul{ display: inline; text-align: center; line-height: 18px; } #Coment4{ /*ここからはgoo質問用(実際は入れない)*/ border: 10px solid #f00; width: 750px; height: 50px; } </style> ---------------------- <div id="phot1">画像1</div> <div id="kono_div_hituyoukana"> <div id="left"> <div id="Coment1">coment1coment1coment1</div> <div id="Coment2">coment2coment2</div> <div id="phot2">横50px背景画像</div> <div id="phot3">画像3</div> </div> <div id="right"> <div id="Coment3">coment3coment3coment3coment<wbr />  3coment3coment3coment3comen<wbr />  t3coment3coment3</div> <div id="phot4"><ul><li><img src="sample.jpg" width="65" height="80">画像4</li></ul></div> </div></div> <div id="Coment4">Coment4Coment4</div>

    • ベストアンサー
    • HTML