- ベストアンサー
画像がうまく取込めない（HTMLに関する質問）
- 掲示板をPHPで作成中ですが、コメントと同時に動物のイメージを添付する際にうまく表示されず、ファイルがpngだとHTMLに取り込めないのかどうか悩んでいます。
- CSSの書き方や書く場所を変えても動作しないため、何が原因なのか分からず困っています。
- 投稿アップする際に、コメントの上に「1段横３列」で動物のイメージを配置したいのですが、正常に表示されません。
- westwest_2007
- お礼率37% (74/200)
- PHP
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- kmee
- ベストアンサー率55% (1857/3366)
- kmee
- ベストアンサー率55% (1857/3366)
CSSのチェックをしましょう。 http://jigsaw.w3.org/css-validator/ で検証した結果 エラー: 以下のエラーが見つかりました。 (3) URI : TextArea 1 div.imgbox プロパティ potision は存在しません : abusolute 2 div.imgbox 次のプロパティが正しくありません : top 値が多すぎるか、もしくは値が解析できません : 30 px 3 div.imgbox 次のプロパティが正しくありません : left 値が多すぎるか、もしくは値が解析できません : 300 px 1は、単純なスペルミスです。 2,3は、単純な入力ミスか、あなたの理解不足です。CSSでの「長さ」の表現をよく確認してください。 また、開発ツールを使って、どんなCSSが適用されているかを確認するのもよいでしょう。 (FirefoxのFireBug等)
お礼
kmeeさん、回答有難うございました。 何とか画像はうまく配置できるようになったのですが、次のDIVの内容のHTMLが全く表示されません。 同じ名前のDIVの中に書こうとして、二個目のDIVを外しても全 く反映されません。 Webからみると１個目のDIVはきちんと作成されているのに原因がわかりません。 同じ書式で書いているのてすが。 ============================================================= <?php session_start(); ?> <HTML> <HEAD> <META HTTP-EQUIV='Content-Type' CONTENT='text/html;charset=UTF-8'> <TITLE>投稿アップ</TITLE> <STYLE type="text/css"> <!-- #img_box{ width : 750 px ; height : 200 px ; border-width : 5 px ; border-color : red ; background-color: lightgreen ; padding-left : 450 px ; padding-top : 25 px ; } #te_box{ potision : abusolute ; MARGIN-TOP : 150 ; width : 750 ; height : 500 px ; background-color: red ; border-width : 15 px ; border-color : blue ; } --> </STYLE> </HEAD> <BODY> <div id='img_box'> <table> <TR> <TH><IMG src='hippo1.png' width='30' height='30'></TH> <TH><IMG src='hippo2.png' width='30' height='30'></TH> <TH><IMG src='hippo3.png' width='30' height='30'></TH> </TR> </table> </div> <?php if (isset($_SESSION['user']) && $_SESSION['user'] != null ) { $_SESSION['time'] = time(); ?> <div id='te_box'> <STYLE="color:pink;font-size:300%">掲示板 <P>投稿よろしく</P> <P FORM ENCTYPE = "multipart/form-data" ACTION = "toukou_up.php" METHOD = "post"> 名前<BR> <INPUT TYPE = "text" NAME = "myname" VALUE = "<?php print $_SESSION['user'];?>"><BR> メッセージ<BR> <TEXTAREA NAME = "mymessage" ROWS = "10" COLS = "70"></TEXTAREA><BR> <INPUT TYPE = "file" NAME = "myfile"> <INPUT TYPE = "submit" VALUE = "送信"><BR> <A HREF = ggg.php>一覧へ</A> </FORM> </P> </div> <?php } else { session_destroy(); print "<P><BR> <A HREF='toukou_logon.php'>ログオン</A></P>"; } ?> </BODY> </HTML>
- kmee
- ベストアンサー率55% (1857/3366)
trは、tableの内側(のtbody等の内側)で有効なタグですが、このPHPが出力するHTMLに、tableタグが無いように見えます。 もし、本当に無いなら、CSS以前にHTMLとして間違いがあります。 出力されるHTMLをチェッカーで文法チェックしてはどうですか? http://validator.w3.org/ http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
お礼
kmeeさん、回答ありがとうございます。 何とかうまく画像が取り込めましたが、考えている位置に移動しません。 一番上の左側に入っていますが、CSSの値をかえても全く位置が変化しません。 一体どこが悪いのでしょうか、宜しくお願いします。 phpのtextとの関係で動かないのでしょうか。 それが原因なら、phpのコードもUPしますが、宜しくお願いします。 =============================================== <?php ・ ・ ?> <HTML> <HEAD> <META HTTP-EQUIV='Content-Type' CONTENT='text/html;charset=UTF-8'> <TITLE>投稿アップ</TITLE> <STYLE type="text/css"> <!-- div.imgbox{potision : abusolute ; top : 30 px ; left : 50 px ; border-color : red ; } --> </STYLE> </HEAD> <BODY STYLE='background-color:lightgreen'> <div class='imgbox'> <table> <TR> <TH><IMG src='hippo1.png' width='30' height='30'></TH> <TH><IMG src='hippo2.png' width='30' height='30'></TH> <TH><IMG src='hipoo3.png' width='30' height='30'></TH> </TR> </table> </div> </HEAD> <BODY STYLE='background-color:lightgreen'> <div img class="imgbox"> <TR><TH><src="hippo1.png" width="50" height="50"></TH> <TH><src="hippo2.png" width="50" height="50"></TH> <TH><src="hippo3.png" width="50" height="50"></TH></TR></div> <?php ・ ・ ?> <P STYLE="color:pink;font-size:30px">掲示板</P> ・ ・ </FORM> <?php ・ ・ ?> </BODY> </HTML> ==================================================
関連するQ&A
- HTML コード配置 中央揃え
こんにちは。質問させていただきます。 添付ファイルにあるコードでブラウザを開いたときに文字、チャート表(中の文字も)をそれぞれ画面の中央に配置したいです(IE、FireFox、Google chrome) どのようにコードを組めばいいのでしょうか？ 以下のようなコードを組みました。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <link href="css/bootstrap.css" rel="stylesheet"> <style type="text/css"> <div id="des"> <img src="http://i.imgur.com/waQOdzt.png" style="height:28px;width:900px;" > <div id="content" style="padding-left:100px;font-family:serif;font-size:28px;line-height: 30px;texy-align:center;"> <br /> <CENTER><font face="Times New Roman"><b>THUNDER FORCE GOLD PACK 2 SAT Sega Saturn JPN Import</b></font> <br /><br /> <div style="padding-left:70px;"> <table border="4" > <tr> <th style="background-color:#87CEFA;">Condition new or used? hotmint</th> <th style="background-color:#FF69B4;">Used</th> </tr> <tr> <th style="background-color:#87CEFA;">Platform</th> <th style="background-color:#FF69B4;">Sega Saturn</th> </tr> <tr> <th style="background-color:#87CEFA;">Genre</th> <th style="background-color:#FF69B4;">Action/Adventure</th> </tr> <tr> <th style="background-color:#87CEFA;">G</th> <th style="background-color:#FF69B4;">Action/Adventure</th> </tr> </table> </CENTER> </div> <br /><br /> <br /> </div> </div> </body> </html> ※左よりになってしまいます(画像参照) HTMLの知識が非常に乏しいので、解説していただけると助かります。 よろしくお願いいたします。
- ベストアンサー
- Windows 7
- 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
- 画像のセンターリングについて
真ん中にはなるのですが、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; }
- ベストアンサー
- ホームページ作成ソフト
- センタリングのＨＴＭＬの挿入場所
お世話になっております。 前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。 以下のＨＴＭＬは横並びに写真を載せたもの（数行あります）です。（上部に文章を載せるための式がありますが、カットしています。）このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。 よろしくお願いします。 </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>
- ベストアンサー
- ホームページ作成ソフト
- 擬似フレームを中央に表示したい。
ただいまＨＰ作成に奮闘中の者です。 いつもはネットでちくちくと検索をしながらhtml等について学びながら作成しているのですが、今回検索エンジンでも上手くヒットしなく、しばらく行き詰まってしまったので質問させてください。 現在擬似フレームを使ってHPのTOP画面が6割ほどできたのですが全てが左に寄っています。 それを中央に表示させたいのですが、どうすればよいのでしょうか？ ■■■□□ ■■■□□ これを↓ ■■■□□ ■■■□□ □■■■□ □■■■□ この様にしたい □■■■□ □■■■□ 以下タグです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>タイトル</title> <!-- ------ FLASH ACTIVATION SCRIPT--------> <script src="flash_activate.js" type="text/javascript"></script> <!-- ------ FLASH ACTIVATION SCRIPT--------> <script src="flash_activate.js" type="text/javascript"></script> <style type="text/css"> <!-- body { margin:0px; padding:0px; } #top { width:450px; height:120px; float:left; background-color:#3399ff; } #tops { width:300px; height:120px; float:left; background-color:#ffcc33; } #topss { width:750px; height:280px; crear:both; background-color:pink; } #left { width:250px; height:100px; float:left; background-color:white; } #menu1 { width:250px; height:100px; clear: both; } #menu2 { width:250px; height:100px; clear: both; } #menu3 { width:250px; height:100px; clear: both; } #menu4 { width:250px; height:100px; clear: both; } #menu5 { width:250px; height:100px; clear: both; } #menu6 { width:250px; height:100px; clear: both; } #middle { width:300px; height:600px; float:left; background-color:white; } #right { width:200px; height:600px; float:left; } #under { width:750px; height:10px; clear: both; background-color:#cc66cc; } --> </style> </head> <body> <div id="top">ここにHPロゴ</div> <div id="tops">ここに説明やテーブル</div> <br style="clear:both" /> <div id="topss"></div> <div id="left"> <div id="menu1"><A Href="http://www.yahoo.co.jp/"><Img Src="about_us.png"></A></div> <div id="menu2"><A Href="URL"><Img Src="member.png"></A></div> <div id="menu3"><A Href="URL"><Img Src="movie.png"></A></div> <div id="menu4"><A Href="URL"><Img Src="blog.png"></A></div> <div id="menu5"><A Href="URL"><Img Src="link.png"></A></div> <div id="menu6"><A Href="URL"><Img Src=""></A></div> </div> <div id="middle">更新履歴など</div> <div id="right"> </div> <div id="under"></div> </body> </html> ご回答頂けたら幸いです。 よろしくお願いしますm(_ _)m
- ベストアンサー
- 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>
- ベストアンサー
- ブログ
- tableの分割画像 隙間について
いつもお世話になります。 助かります。 さてテーブル内画像分割についてお尋ねいたします。 画像分割をいたしたく、４分割にphotoshopでスライスいたしました。 確認画面では奇麗に表示されますが作業のサイトに収めるとcenterに 縦に１ピクセルのぐらいのラインの隙間が入ります。 サイト内の記述は.... 例えばこんな感じにしています。 <!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" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <linkrel="stylesheet"type="text/css"href="css/xx.css" /> <link rel="stylesheet" type="text/css" href="css/xxx.css"> <link rel="stylesheet" type="text/css" href="css/xxx.css"> <link rel="stylesheet" type="text/css" href="css/sxxx.css"> <link rel="stylesheet" type="text/css" href="css/xxxxx.css" > <link rel="stylesheet" type="text/css"href="css/xxxxxxx.css" > <SCRIPT LANGUAGE="JavaScript"> <!-- function subwin1(){ window.open("shop01.html", "01"," width=600px,height=700px,scrollbars=yes"); scrollbars=yes} function subwin2(){ window.open("shop02.html", "01"," width=600px,height=700px,scrollbars=yes"); scrollbars=yes} --> </SCRIPT> <style type="text/css"> <!-- * { font-family: Verdana, Helvetica; font-size: 10pt; margin:0; padding:0; } h2.s{ margin:0; padding:0; font-size:13px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-weight:100; line-height: normal; color: #999999; } .style6 {font-size: 10px} .style7 {font-size: xx-small} .style8 {color: #376BA0} table { width:100%; height:auto; padding:0; margin:0; } --> </style> </hade> <body>....................]........... ........省略......... <div id="photo"> <table border=0 cellspacing=0 cellpadding=0 > <tr> <td><img src="../13.jpg" width="263" height="114" alt""></td> <td><img src="../10.jpg" width="292" height="114"/></td> </tr> <tr> <td><img src="../11.jpg" width="263" height="91"/></td> <td><img src="../12.jpg" width="292" height="91"/></td> </tr> </table> </div> <!----- photo ead-----> です。 他のものと競合するのでしょうか？ どうしてこうなるのでしょうか？ 隙間をとり前に進みたいのですが教えて頂けませんか？ お願いいたします。 表現 伝え方に誤りがありますればご容赦くださいね。
- 締切済み
- その他([技術者向] コンピューター)
- javascriptを使い、サムネイル表示
サンプルＨＰ⇒http://cartown.jp/detail_dt.php?car_id=1990056 のような、サムネイル画像と拡大画像を表示させる記述方法を 教えてください。 下記のような回答文を確認したのですが、img要素を列挙する記述やonclickイベントを結びつける記述すらわかりません。こんな超初心者ですが、よろしくお願い致します。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> function showImg(){ document.getElementById("image").src=this.src; } function setup(){ var thumbnails=document.getElementsByName("thumbnail");//name="thumbnail"とついているimg要素を列挙 for(var i=0;i<thumbnails.length;i++)thumbnails[i].onclick=showImg;//↑で列挙したものにonclickイベントを結びつける } window.onload=setup; </script> <style type="text/css"> .main td{ width:300px; height:300px; } </style> </head> <body> <table border class="main"> <tr> <td><img id="image" width="300" height="300"></td> <td> 文章 </td> </tr> </table> <!--ここから下の画像はサムネイル用ではなく、上に表示する予定の画像と同じもので width属性とheight属性を指定して大きさを変えています。(ここでは全部300x300の画像とします。)--> <table border> <tr> <td><img name="thumbnail" src="img1.png" width="48" height="48"></td> <td><img name="thumbnail" src="img2.png" width="48" height="48"></td> <td><img name="thumbnail" src="img3.png" width="48" height="48"></td> <td><img name="thumbnail" src="img4.png" width="48" height="48"></td> <td><img name="thumbnail" src="img5.png" width="48" height="48"></td> </tr> <tr> <td><img name="thumbnail" src="img6.png" width="48" height="48"></td> <td><img name="thumbnail" src="img7.png" width="48" height="48"></td> <td><img name="thumbnail" src="img8.png" width="48" height="48"></td> <td><img name="thumbnail" src="img9.png" width="48" height="48"></td> <td><img name="thumbnail" src="img10.png" width="48" height="48"></td> </tr> </table> サムネイルクリックで拡大します。 </body> </html>
- 締切済み
- JavaScript
- HTML、ＣＳＳ が、なかなかうまくいきません。
お世話になります。 HTMLを始めたばかりですので、 ご教授いただけたら幸いです。 以下の図のような感じに並べたいのですが、 なかなかうまい具合にいきません。 黄色は、全てボタンになります。 赤は、ボタンについた吹き出し部分となります。 上段の２つのボタンは、やや大きい感じのボタン。 下段の３つのボタンは、上段に比べて、少し小さい感じのボタンになります。 ボタンは、上段(A)と下段(B)で、 HTML と CSS は、分けようかと考えています。 【HTML】 <div class="Button"> <div class="contents"> <div class="Button_boxA clearfix"> <div class="Yellow_Btn_01"><img src="img/Yellow_Btn_01.png" width="200" height="75" /> </div> <div class="Yellow_Btn_02"><img src="img/Yellow_Btn_02.png" width="200" height="80" /> </div> </div> <div class="btn_boxB clearfix"> <div class="Yellow_Btn_03"><img src="img/Yellow_Btn_03.png" width="100" height="60" /> </div> <div class="Yellow_Btn_04"><img src="img/Yellow_Btn_04.png" width="100" height="65" /> </div> <div class="Yellow_Btn_05"><img src="img/Yellow_Btn_05.png" width="100" height="60" /> </div> </div> </div> </div> 【 CSS 】 div.Button{ width:600px; margin-top:20px; margin-right:auto; margin-left:auto; padding-right:25px; } div.btn_boxA{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_01{ width:200px; height:75px; margin-left:auto; margin-right:auto; margin-bottom:10px; float:left; } div.low_btn_02{ width:200px; height:80px; margin-left:auto; margin-right:auto; padding-left:25px; margin-bottom:10px; float:left; } div.btn_boxB{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_03{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } div.low_btn_04{ width:100px; height:65px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; ] div.low_btn_05{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } 長ったらしくなってしまいましたが、 ご教授いただけたら、幸いです。 宜しくお願いします。
- 締切済み
- 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
お礼
kmeeさん、回答有難うございます。 ご指摘のありました、エラーは自分の理解出来る範囲で色々と参考書などをみて修正しましたが、 やはり、結果は同じです。 サイトでのエラーチェックも試めしましたが、はっきり言ってエラーの意味を理解できるスキルが ありません。 PHPも他の参考書を見ながら理解できるところは自分でアレンジしながら書いているのが本当のところです。 今回の箇所も、今まで普通に動いていたものが、ページにDIVを作くり、上下に二分割して画像を取り込ん だだけで、ある部分だけがスッポリと抜け落ちたように何故表示されないのかが不思議です。 （文法的にも私のスキルでは致命的な間違を見つけることが出来ません、ただただ、ある部分を足しただけで 何故他の部分にまで影響しているのかが、全く理解できませんん。） 上下のDIVを入れ替えても現象は同じです。 画像のDIVもボーダーも色も表示されませんし、表示されないDIVの中でも最後の方の文字列は表示されて います。 これ以上は原因がわかりません、やはりプログラムのミスでしょうか。 ======================================================================== <?php session_start(); ?> <HTML> <HEAD> <META HTTP-EQUIV='Content-Type' CONTENT='text/html;charset=UTF-8'> <TITLE>投稿アップ</TITLE> <STYLE type="text/css"> <!-- #img_box{ position : absolute ; width : 900px ; height : 150px ; MARGIN-TOP : 400px ; border-width : 10px ; border-color : red ; background-color: lightgreen ; padding-left : 450px ; padding-top : 25px ; } #te_box{ position : absolute ; MARGIN-TOP : 50px ; width : 750px ; height : 200px ; background-color: red ; border-width : 5px ; border-color : blue ; } --> </STYLE> </HEAD> <BODY> <div id='img_box'> <table> <TR> <TH><IMG src='hippo.png' width='30' height='30'></TH> <TH><IMG src='hippo2.png' width='30' height='30'></TH> <TH><IMG src='hippo3.png' width='30' height='30'></TH> </TR> </table> <P STYLE="color:deeppink;font-size:300%">掲示板</P> <P STYLE="color:pink;font-size=35px">掲示板</P> <P STYLE="font-size:25;color:blue">chy</P> </div> <P STYLE="font-size:25;color:blue">chy</P> <?php if (isset($_SESSION['user']) && $_SESSION['user'] != null ) { $_SESSION['time'] = time(); ?> <div id='te_box'> <P STYLE="color:pink;font-size=15px">掲示板</P> <P>投稿よろしく</P> <P><FORM ENCTYPE="multipart/form-data" ACTION="toukou_up.php" METHOD="post"> 名前<BR> <INPUT TYPE="text" NAME="myname" VALUE="<?php print $_SESSION['user'];?>"><BR> メッセージ<BR> <TEXTAREA NAME="mymessage" ROWS="10" COLS="70"></TEXTAREA><BR> <INPUT TYPE="file" NAME="myfile"> <INPUT TYPE="submit" VALUE = "送信"><BR> <A HREF = ggg.php>一覧へ</A> </FORM> </P> <?php } else { session_destroy(); print "<P><BR> <A HREF='toukou_logon.php'>ログオン</A></P>"; } ?> XYZchy</P> </div> </BODY> </HTML>