- ベストアンサー
アクティブコンテンツ許可で背景のみ残る
初めてＨＰ作成してます。 FFFTPを使用、プロバイダはぷららです。 ファイルをアップロードし、アドレスを打ち込むと…自分で作成した背景のみ表記されます。 試しに自分の作成ファイルから直接開くと、情報バーが出てきて、アクティブコンテンツを許可するとやはり背景のみになります。 同様の質問を見つけ、htmlの記述に問題があるのではと思いましたが私自身には結局見つけられなかったので、以下に作成したhtmlテキスト（一部改変）もあわせて記しておきますので、お気づきの点があればご指摘お願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift JIS"> <style type="text/css"> body { background: url(▲▲▲.gif); color: black; margin-left: 15em; margin-right: 15em; } h1 { font-style: italic; } ul { margin-left: 10em; margin-right: 10em; } p { font-size: 10pt; } h3 { font-style: italic; font-size: 15pt; } a{cursor:hand;} </style> <title>◎◎◎</title> </head> <body> <script language="Javascript"> document.write('<a href="http■■■"></a>');</script><noscript> <a href=http■■■><img src="http■■■" alt="カウンター" border="0"></a> <h1><img src="▲▲▲.gif" alt="◎◎◎"></h1> <p>◎◎◎<br></p> <p><a href="■■■html"><img src="▲▲▲.gif" alt="◎◎◎"></a> <a href="■■■html"><img src="▲▲▲.gif" alt="◎◎◎"></a></p> <p><font size="4">◎◎◎</font></p> <p><a href="mailto:◎◎◎">CONTACT</a></p> </body> </html> ※■■■および▲▲▲には半角英数を用いてます。 何かまずいのでしょうか…？ 長くなってしまい申し訳ありませんがお気づきの点ありましたらよろしくお願いします。
- tnsax
- お礼率100% (2/2)
- ブラウザ
- 回答数2
- ありがとう数9
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<noscript>が閉じられていないようです。 Htmlではタグを閉じないとそのタグの効果がページの終了まで及びます。 ですので、<noscript>より後の記述が全て<noscript>の効果で JavaScriptの対応している環境では無視されるのだと思います。 JavaScriptの有無でカウンターを換えたいのかな？ そうであれば↓のように変更するといいかもしれません。 <img src="http■■■" alt="カウンター" border="0"></a></noscript>
その他の回答 (1)
document.write('<a href="http■■■"></a>');</script><noscript> の、「<a href="http■■■">」と「</a>」の間が空です。何か入れてください。 後、私の持っているホームページ辞典によると、「<noscript>」は「</noscript>」とセットです。 「</noscript>」を適切な場所に加えてください。
お礼
ありがとうございます、仰る通り「</noscript>」の入力ミスが原因でした！ 単純なミスが大きく影響するんですね…気を付けます。 とりあえず嬉しいです、本当にありがとうございました！
関連するQ&A
- HTMLとCSSの記述で表示がうまくされません
現在HTMLとCSSを使ってウェブのページを作っているのですが どうしても思ったように表示が出来ません。 HTMLの他にCSSの記述を記載致しました。 なにが出来ないかと申しますと 下記の <p class="section"> <h2>解決できる方法</h2> <img src="mark.gif" alt="*" width="14" height="18"><font color="#FF0000">再短時間と最小の労力で職場や学校のマルマルが解決できる方法!!</font> 心理学の知識がない人でも簡単にできた<br> あまりにも効果的な<font color="#FF0000">『門外不出』</font>の<font color="#FF0000">aaaaa</font>対処法とは？ </p> 記述部分を枠の中に入れたいのですが、どうしても外に出て表示されてしまいます。 どなたか解決方法をご存知の方はお教え頂けないでしょうか？ HTMLの記述がこちらになっております。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <meta http-equiv="Content-Type"content="text/html;charset=shift_jis"/> <head> <title>aaaa</title> <meta http-equiv="description"content="bbbb"> <meta http-equiv="keywords"content=""> <link rel="stylesheet" type="text/css" href="index.css" media="all"> </head> <body> <p class="head"><span lang="en"></span></p> <h1></h1> <div class="img"><img src="header.gif" alt="" width="800" height="165"></div> <div class="menu"> <a href="index.html"><img src="navi_top.gif" width="195" height="35" alt="top"></a> <a href="02.html"><img src="navi_ijime.gif" width="195" height="35" alt=""></a> <a href="03.html"><img src="navi_shokuba.gif" width="195" height="35" alt=""></a> <a href="04.html"><img src="navi_plofile.gif" width="195" height="35" alt=""></a> </div> <p class="section"> <h2>解決できる方法</h2> <img src="mark.gif" alt="*" width="14" height="18"><font color="#FF0000">再短時間と最小の労力で職場や学校のマルマルが解決できる方法!!</font> 心理学の知識がない人でも簡単にできた<br> あまりにも効果的な<font color="#FF0000">『門外不出』</font>の<font color="#FF0000">aaaaa</font>対処法とは？ </p> <p class="text_bg"> <div class="text">text</div> </p> </body> </html> CSSの記述がこちらになっております。 body{ text-align:center; width:800px; } p{ text-align:center; font-size:0.85em; color:#333333; } p.head { font-size:0.6em; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight:bold; color:#666666; text-align:left; margin-bottom:0px; } .img{ margin-top:0; margin-bottom:0; } .menu { padding-left:1px; margin-bottom:0; margin-top:0; } h1{ font-size:0.5em; display:none; } h2{ font-size:0.5em; display:none; } h2 img{ vertical-align:middle; } .mark{ margin-right:10px; } .section{ font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; margin-bottom:0px; margin-top:0px; background-image:url(back_01.gif); background-repeat:no-repeat; width:800px; height:165px; color:#666666; font-size:1em; } p.01{ text-align:center; font-size:1.05em; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } p.text_bg{ background-image:url(back_02.jpg); background-repeat:no-repeat; margin-top:10px; width:800px; height:365px; } .text{ margin-top:10px; text-align:center; }
- ベストアンサー
- HTML
- HTMLについて
javascriptの勉強をしております。 そこでわからないことがあり、質問させていただきます。 コードは <article id="main"> <section id="photogaray"> <a href="#" id="prev"><img src="prev-arrow.png" alt="左矢印" /></a> <a href="#" id="next"><img src="next-arrow.png" alt="右矢印" /></a> <div id="photocontents"> <h2 id="phototitle">題名</h2> <p id="photodate">日付を入力する箇所</p> <p id="sw">画像が入る部分</p> <p id="more"><a href="#" id="morelink">more</p> </div> <section id="thumbnailbox"> <ul id="thumbnail"> <li><a href="no1_big.png"><img src="no1.png" alt="2009-07-01" /></a></li> <li><a href="no2_big.png"><img src="no2.png" alt="2009-07-02" /></a></li> <li><a href="no3_big.png"><img src="no3.png" alt="2009-07-03" /></a></li> <li><a href="no4_big.png"><img src="no4.png" alt="2009-07-04" /></a></li> <li><a href="no5_big.png"><img src="no5.png" alt="2009-07-05" /></a></li> <li><a href="no6_big.png"><img src="no6.png" alt="2009-07-06" /></a></li> <li><a href="no7_big.png"><img src="no7.png" alt="2009-07-07" /></a></li> </ul> </section> </section> </article> </body> で cssは @charset "utf-8"; /* CSS Document */ h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,object { margin: 0; padding: 0; } html,body { margin: 0; padding: 0; height: 100%; } body { font-size: 16px; } * html body {font-size: 100%;} *:first-child+html body {font-size: 100%;} /* block elements */ h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; } li { list-style-type: none; } hr { display: none; } address { font-style: normal; } /* table */ table { border: 0; border-collapse: collapse; border-spacing: 0; } th,td { padding: 0; font-weight: normal; text-align: left; vertical-align: top; } /* form */ textarea { font-size: 100%; } /* inline-elements*/ img { border: 0; vertical-align: bottom; } object { vertical-align: bottom; } em { font-style: normal; } a:link, a:visited {} a:hover, a:focus, a:active {} #header { height:80px; background-color:#000000; } #header h1{ font-size:300%; color:#FFF; text-align:center; padding:10px; } section#photogaray{ width:800px; margin:0 auto; } a#prev{ float:left; margin:200px 0 0 20px; } a#next{ float:right; margin:200px 20px 0 0 } div#photocontents{ width:585px; float:left; } h2#title{ font-size:300%; font-weight:bold; } #photodate { float:right; } p#date{ float:right; } #sw { text-align:center; margin:20px; } #photogray{ clear:both; margin: 10px 0; text-align: center; width:585px; } section#thumbnailbox{ clear:both; width:800px; margin:0 auto; margin-top 10px; } ul#thumbnail{ display:block; text-align:center; } ul#thumbnail li{ float:left; margin-left:10px; } ul#thumbnail li a.on { display:block; border: 2px solid #000000; } #title_ul{ clear:both; } です。 これで何がわからないかというと Firebugというデバックツールで確認しながらやってるのですが、 <ul id="thumbnail">の中に<li><a id="morelink" href="#">more </a></li> が二つ入っています。 javascriptのせいかもと思い、javascriptを全部消して実行してみたところ やはり<ul id="thumbnail">の中に<li><a id="morelink" href="#">more </a></li> がはいっていました。 ブラウザはfirefox9.0.1 HTML5で書いたつもりです。 どなたかなぜ上記のような現象がおこるのか教えていただけますでしょうか。
- ベストアンサー
- HTML
- プルダウンメニューの表示
+のgifをクリックすると-のgifと詳しい表示が出る様にHTMLを書いたのですが、 表示された後で閉じると、その+のgifが再表示されません。 何が足りなくてそうなってしまうのでしょうか？ また、親メニューの+が-になっている時、gifの-を表示させる方法を教えてやって下さい…。 よろしくお願いします。 <body bgcolor="#000000" text="#ffffff" link="#000000" alink="#808080" vlink="#ff0000"> <div id='div1' style="position:absolute; left:10; top:100; width:250;"> <a id="menu1" href="#" onClick="onmenu(this,'menu11');return false" style="text-decoration:none;"> <img src="p.gif" alt="+" border="0"></a><font size="+2">BBS</font> <div id="menu11" style="position:absolute; left:-2; top:16; visibility:hidden;"> ├<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"></a> aBBS<br> ├<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"> </a> bBBS<br> └<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"></a> cBBS </div></div></div> </body>
- ベストアンサー
- HTML
- 色のついた外枠を部分的に付けたいのですが、どうすればいいでしょうか？
色のついた外枠を部分的に付けたいのですが、どうすればいいでしょうか？ <tr> <td width="864" class="style49"> <p align="center"><a href="link/ryoukin.html" class="style49"><br /> <img src="image/web_004.gif" alt="格安引越が出来る理由" width="200" height="50" border="0"/></a><strong><a href="link/ryoukin.html" class="style49"><span class="style51"><img src="image/web_003.gif" alt="重要事項説明" width="200" height="50" border="0"/></span></a><a href="link/ryoukin.html" class="style49"><img src="image/web_005.gif" alt="料金計算書・オプション価格" width="200" height="50" border="0"/></a><br /> </strong></p> <p align="center"><strong><br /> <br /> <img src="image/web_010.gif" alt="引越プラン" width="130" height="35" /><br /> <br /> <a href="link/link1.html" class="style49"><span class="style58"><img src="image/web_007.gif" alt="フローチャート式お見積作成" width="200" height="95" border="0"/></span></a> <span class="style58"><a href="link/link0.html" class="style49"><img src="image/web_008.gif" alt="お荷物記載による個別お見積作成" border="0"/></a></span> <a href="http://*****.**.****.**/postmail/postmail2.html" class="style49" ><img src="image/web_009_03.gif" alt="各種お問合せ" border="0"/></a><br /> </strong></p> <p></p> ちなみに引越プランからフローチャート式お見積作成、お荷物記載による個別お見積作成、各種お問合せまで全部を一枠で部分的に外枠で囲みたいのですが、どのようなやり方があるでしょうか？ 部分的に囲めなくてすごく困っています。どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- css classとidの使い方
あの、<p></p>内の文をclassを使ってitalicに、<span>内をidを使ってbold,色は赤にしたいのですが。変わりません。どこを直したら良いでしょうか？よろしくお願いします。 <HTML> <HEAD> <LINK href="global.css" rel="stylesheet" type="text/css"> <TITLE>About Me</TITLE> </HEAD> <BODY> <H1>About Me</H1> <IMG src="MyPic.png" alt="MyPic" height="150" width="100"> <DIV class="profile"> <p>My name is blahblah.<br> I am a <SPAN id="attention">Good</SPAN> Student.<br> </p> </DIV> </BODY> </html> global.cssの内容 .profile{font-style: italic} #attention { font-weight: bold; font-style: italic; color: red }
- ベストアンサー
- HTML
- 背景色を入れたいのですがよろしくお願いいたします。
<!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"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="author" content="xxxxxxxx" /> <meta name="keywords" content="xxxxxxxx" /> <title>xxxxxxxx </title> <link ref="stylesheet" type="text/css" href="cut.css" /> <style type="text/css"> body {margin: 0px 5em; } #container { width:800px; margin-left:auto; margin-right:auto; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999; border-color:#000000; } #header {background-color:#ffffff;}←ここの色を黒に変えたいのですが変わりません。 どうすればいいのでしょうか？ h1 { margin-left:20px; color:#ffffff; font-size:1.25em; padding-top:30px;} ul {list-style-type:none; margin-left:100px; padding-left:0px;} li {display:inline; padding-right:20px; font-size:1.0em;} li a {text-decoration:none; line-height:2.2 } a { color:#000000} a:hover {color:#990000; } address a:hover {color:#990000;} p { font-size:1.25em; margin-left:50px; color:#ffffff;} .isu {text-align:right; margin-right:2px; } .moji {font-size:2em; line-height:200%; } .name { color:#ffff99; text-align:right; margin-right:50px; margin-bottom:50px; text-align:bottom;} .champ {text-indent:1em; font-size:2em;} .midasi { color:#ffff99; text-align:bottom; margin-left:100px; } .coment { color:#000000; text-align:left; margin-left:150px; line-height:2em; width:600px;} .http {font-size:0.9em; color:#000000; text-align:right; margin-right:0px; line-height:2em; padding-right:30px;} .denwa {color:#000000; text-align:right; line-height:2em; padding-right:30px;} hr {background-color:#000000; height:2px; width:250px; align-right;} .addless {text-align:right; color:#000000; padding-right:30px;} </style> </herd> <body> <div id="container"> <div id="header">←ここから <h1>xxxxxxxx </h1> <p class="isu"><img src="isuA.jpg" alt="xxxxxxxx" align="right" width="400px" height="250px" /> <br /> <p class="moji" >xxxxxxxx</p> <p class="champ">xxxxxxxx</p> <p class="midasi">xxxxxxxx</p> <p class="name">xxxxxxxx</p> <br /clear="all"></p> <br /> </div>←ここまでの背景色を黒に変えたいのですが変わりません。 どうすればいいのでしょうか？ <br /> <br /> <p class="http">xxxxxxxx</p> <p class="addless">xxxxxxxx</p> <hr width="250" size="10" align="right"> <p class="denwa"> (黒電話) xxxxxxxx</p> <ul> <li><a href="top.html">トップページ</a></li> <li><a href="profile.html">プロフィール</a></li> <li><a href="staff.html">スタッフ</a></li> <li><a href="ryoukin.html">メニュー・マップ</a></li> <li><a href="mail.html">お客様メール</a></li> </ul> <br /> <br /> <p class="coment">xxxxxxxxxxxxxxxxxxxxxxxx</p> <br /> <br /> <br /> <address>Copyright(C)<a href="mailto:saitou@gmail.com">Hair Salon Saitou</address> </div> </body> </html>
- ベストアンサー
- Windows XP
- キーエンス社のトップコンテンツのような動的なコンテンツのスクリプト
javaScript初心者です。どうぞよろしくお願いします。 http://www.keyence.co.jp/ このサイトのトップの様なコンテンツを作りたいです。 1：一つ一つの中身はflashで 2:時間が立てば次の項目に自動スクロール 最低限上記を必要としたいです。 javaScriptをしっかり扱えるようになりたいので 解説等もいれていただけたら幸いです。 図々しくて恐縮ですがどなたかよろしくお願い致します。 html----------------------------------------------- <body> <div id="rollover"> <p><img src="rollover/01.jpg" id="rollover_view" alt="image1" width="415" height="295"></a></p> <ul id="thumb"> <li><a href="#"><img src="rollover/01_thumb.jpg" alt="thumb1" width="150" height="45"></li> <li><a href="#"><img src="rollover/02_thumb.jpg" alt="thumb2" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/03_thumb.jpg" alt="thumb3" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/04_thumb.jpg" alt="thumb4" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/05_thumb.jpg" alt="thumb5" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/06_thumb.jpg" alt="thumb6" width="150" height="45"></a></li> </ul> </div> </body> </html> css--------------------------------------------- <style type="text/css"> /* ロールオーバー */ ul,li{ padding:0;margin:0; } div#rollover { height:295px; width:580px; } div#rollover p { float:left; margin:0; } div#rollover ul { float:right; width:150px; list-style:none; } div#rollover li { height:50px; } div#rollover a img { border:0; } </style> javaScript------------------------------------------ <script type="text/javascript"> //<![CDATA[ window.onload =function(){ var myImg = document.getElementById("thumb").getElementsByTagName("img"); var regrep = "_thumb"; var newimg = new Array(); for (var i = 0; i <myImg.length; i++) { newimg[i] = new Image(); newimg[i].src = myImg[i].src; myImg[i].onmouseover =function() { var href = this.src.replace(regrep,""); document.getElementById('rollover_view').src=href; } } } //]]> これは拾ったフリーのもののソースなのですが これを改造したほうがやりやすいようでしたら その旨をご教授いただきたいです。 どうぞよろしくお願い致します。
- 締切済み
- JavaScript
- コンテンツとコンテンツの詰まり
Windows XP あるいは8 HTML 4.01 コピー ～ TOP.html copyTOP.css あああああ と いいいいいの間隔はあいているのに いいいいい と うううううの間隔はなぜか詰ってしまっています。 間隔を空けるにはどうしたらいいでしょうか？ コードは以下の通りです。 [ HTML 側 ] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Transitional.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="～"> <title>aaaaaaaaaa</title> <link rel="stylesheet" href="copyTOP.css" type="text/css"> </head> <body> <div id="zentai"> <div id="part"> <p class="title">あああああ</p> <div id="partnerwaku"> <div id="partnerimage"> <a href="" alt="のロゴ" class=""></a> <a href="" alt="のロゴ" class=""></a> <a href=""><img src=".gif" alt="のロゴ" class=""></a> <a href=""><img src=".jpg" alt="のロゴ" class="A"></a> <a href=""><img src=".jpg" alt="のロゴ" class=""></a> </div> </div> </div> <div id="PR"> <PR> <br> <div id="PRsection"> <br> <a href=""> <img src="" alt="" class="PRimage01"></a> </div> </div> <div id="PR2"> <br> <PR> <br> <div id="PRsection2"> <br> <a href=""> <img src="" alt="" class="PRimage02"></a> </div> </div> <div id="columnwaku"> <div id="columnbun"> <p class="title">いいいいい</p> <div id="columncontents"> <p><a href=""><img src =".jpg" class="columnarticle01"></a></p> </div> </div> </div> <br> <br> <br> <br> <div id="PR3"> <br> <PR> <br> <div id="PRsection3"> <br> <a href=""><img src="" alt="" class="PRimage03"></a> </div> </div> <br> <br> <br> <br> <br> <div id="questionnairesection"> <div id="questionnaire"> <p class="title">ううううう</p> <div id="questionnairecontents">えええええ</div> </div> </div> <div id="PR4"> <br> <ddd> <br> <div id="PRsection4"> <br> <a href=""> <img src="" alt="" class="PRimage04"></a> </div> </div> <div id="pagetop"> <br> <br> <a href="#logoimage">ページの先頭へ▲</a> </div> <hr class="beforefooter"> <div id="aboutus"> <div id="aboutussection"> <p class="aboutustitle">管理会社</p> <p><a href="Aboutus.html"><img src ="Aboutus.jpg" class="aboutusimage"></a></p> </div> </div> <br> <br> <hr class="beforefooter"> </div> <!--全体のdiv--> </body> </html> [ css側] @charset "Shift_Jis"; body { overflow-y:auto overflow-x:auto text-align:center; cursor:url("images/.png"); } #allitem{ cursor:url("images/.png"); } #zentai{ width:1000px; margin-left:auto; margin-right:auto; } .title{ margin-top:0px; margin-bottom:0px; font-size : 20px; border-style:solid; width:592px; background-color:#FFFF99; padding:3px; } #part{ clear:left; float:left; height:180px; width:642px; padding-right:147px; font-size : 20px; } #partnerwaku{ height:140px; width:600px; border-style:solid; border-color: #000099; } #PR{ float:left; width:180px; height:120px; } #PRsection{ border-style:solid; border-color: #000099; } #PR2{ float:left; width:185px; height:150px; } #PRsection2{ border-style:solid; border-color: #000099; } .PRimage01{ width:170px; height:80px; } .PRimage02{ width:165px; height:100px; } #kuhaku{ clear:left; height:20px; } #columnwaku{ float:left; clear:left; height:130px; width:790px; } #columnbun{ height:120px; width:600px; } #columncontents{ height:140px; width:600px; border-style:solid; border-color: #000099; } .columnarticle01{ height:70px; width:400px; background-color:#CC99CC; } #PR3{ float:left; width:185px; height:150px; } #PRsection3{ border-style:solid; border-color: #000099; } .PRimage03{ width:165px; height:100px; } #questionnairesection{ clear:left; float:left; height:130px; width:1050px; } #questionnaire{ width:600px; border-radius: 20px; } #questionnairecontents{ height:140px; width:600px; border-style:solid; border-color: #000099; } #PR4{ float:left; width:185px; height:150px; } #PRsection4{ border-style:solid; border-color: #000099; } .PRimage04{ width:165px; height:100px; } 文字制限のため省略
- ベストアンサー
- HTML
- ＣＳＳレイアウトの配置ずれについて
本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。 以下、htmlとcssです。 html↓ <body> <div id="newBook"> <div class="item"> <ul id="slideItems"> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--2ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--3ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> </ul> </div> <div class="leftBtn"> <a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div> <div class="rightBtn"> <a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div> </div> </body> css↓ #newBook { margin: 30px; position: relative; } .item { height: 115px; width: 500px; padding: 10px 0px; overflow: hidden; position: absolute; left: 40px; top: 0px; } .leftBtn,.rightBtn { text-align: left; width: 40px; position: absolute; top: 0px; } .leftBtn { text-align: left; left: 0px; } .rightBtn { text-align: right; left: 540px; } .item ul { width: 1500px; position: absolute; left: 0px; top: 0px; } .item li { background-color: #999999; height: 100px; width: 100px; list-style-type: none; padding: 10px 0px 5px; float: left; text-align: center; } #slideItems { position: absolute; left: 0px; top: 0px; }
- 締切済み
- その他([技術者向] コンピューター)
- css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（
css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。） 現在、Kompozerをつかってホームページを作成しています。 添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。 現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。 あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。 ご指導いただければうれしいです。 よろしくお願いします。 ＊ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url ＊＊.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="＊＊.gif" border="0"><br> <br><p style="text-align: center;"> <a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="＊＊.jpg"><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><br></p> </div> </body></html>
- ベストアンサー
- HTML
お礼
ああああぁぁぁぁぁ～～～～！！！ すっきりしました！有難うございます！ 仰る通り<noscript>が閉じられていないことが原因だったみたいです。 無事にすべて表示されました！本当にありがとうございました！