• 締切済み

インラインフレームが消えてしまいました

行間を空けようと思い、body内に <span style="font-size:17px; line-height:20pt;"> を入れたとたん、インラインフレームが表示されなくなってしまいました。 ？？と思い<span style="font-size:17px; line-height:20pt;">を消してみてもインラインフレームが戻ってきません。他にやった操作はないはずなのですが・・・（<br>をいくつか削ったりはしました） インラインフレームのタグもいじっていません。 なにがいけないのか、さっぱり分かりません。inline.htmlもきちんと同じフォルダ内にあります。 私はＨＴＭＬもｃｓｓもとても初心者なので、凄く簡単なところで見落としがあるのかもしれません。 と思って小一時間ほどソースを見直してみたのですが、原因となるものが分からず、困っています。 「こういう状況下ではインラインは使えない」というものでもあるのでしょうか・・・？ 一応ソースを貼っておきます。******は単なる文字列だと思ってください。 <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta content="****" name="keywords"> <meta content="**************" name="description"> <meta name="description" content="******************" /> <meta name="keywords" content="*************************" /> <link rel="stylesheet" href="style.css" media="all" type="text/css"> <title>****************</title> </head> <body><body background="title.gif"> <span style="font-size:17px; line-height:20pt;"> <h1 id="HEADER"><img src="title.jpg" alt="タイトル画像"></h1> <br><br><br> <ul id="NAV"> <li><a href="index.html" title="ホームに戻ります"><img src="home.gif" border=0 alt="ホームに戻ります"></a></li><br><br> <li><a href="main.html" title="********"><img src="bosyu.gif" border=0 alt="********"></a></li><br><br> <li><a href="http://*********.com/" title="******"><img src="blog.gif" border=0 alt="管理人のブログです"></a></li><br><br> <li><a href="douga.html" title="********"><img src="douga.gif" border=0 alt="*****"></a></li><br><br> <li><a href="http://*********/" title="***********"><img src="bbs.gif" border=0 alt="掲示板"></a></li><br><br> <li><a href="link.html" title="お世話になっているサイト様です。ネチケットを守ってお伺いして下さい。"><img src="link.gif" border=0 alt="リンク"></a></li> <br><br> <li><a href="http://******" title="******"><img src="mail.gif" border=0 alt="メールフォーム"></li></a> </li> </ul> <div id="CONTENT"> <center><b> <font color=blue> <br> *****************<br> ****************<br> <font color="green><u>****</u><br> ***********<br> ***********</font><br><br> <iframe src="inline.html" width="50%" height="150" name="koushin">ここはインラインフレームです。表示されない場合はお使いのブラウザが対応しておりませんです。。。</iframe><br><br><br> <h1><font color=red>**********</h1><br> ********<br> ******** <br> <a href=*****.html target="_blank"><br><br> <font size=5>****</font><br></a> ******<br> ****** </font><br> *************<br> *************<br><br> <font color=#00008B><h1>*******</h1> *******************<br> *******************<br><br> *******************<br> *******************<br> *******************<br><br> ************</font> <br> <br> <br> <!-- FC2カウンター ここから --> <center><bottom> <script language="JavaScript" type="text/javascript" src="http://counter1.fc2.com/counter.php?id=3362754"></script><noscript><img src="http://counter1.fc2.com/counter_img.php?id=3362754"><br>undefined</noscript> <!-- FC2カウンター ここまで --> </div> </body></html> どこを見落としていますでしょうか・・・ とてもお手数なのですが、どうぞお力をお貸し下さい。

  • CSS
  • 回答数2
  • ありがとう数3

みんなの回答

  • abril
  • ベストアンサー率69% (388/560)
回答No.2

> を消してみてもインラインフレームが戻ってきません。他にやった操作はないはずなのですが 何らかの修正を加える前の状態では問題なく表示されていたのであれば、修正箇所を全て元に戻せば再び表示される筈です。そうならないという事は、やはり以前のソースと完全に同じには復元できていないのだと思われます。 ※ただし、キャッシュをちゃんとクリアできておらず最新の更新が反映されていない状態が続いているのかも？という可能性もないわけではありません。一度キャッシュをクリアして再度起動しなおして見てもだめでしたか？ ただ…貼り付けたソースが現在の状態だとしたら、かなり問題のある状態です。 そもそも「行間を空けようと思い」追加された「<span style="font-size:17px; line-height:20pt;">」はどの様な要素に対して使用されていますか？ソースを見るとまずこれの閉じタグがどこにも存在していない様ですが、もしかして、<body>内の要素全体をこれで囲って適用させ様と思っていますか？spanタグは子要素インライン要素しか含められません。つまり、<span>～</span>の中にh1・ul・div・pといったブロック要素が入れ子になる事は(X)HTMLの文法では許されていません。 ソースの他の箇所にも同様の間違いが多発しています。 ■</li><br> ulの直接の子要素はliのみです。つまり、</li>の後ろや<li>の前に（親のul以外の）他のタグは存在し得ません。もし、li間の余白を空けたいのであれば、marginやpaddingで調整するのが適切です。 ■<h1><font color=red>**********</h1> fontタグが閉じていません。もし、</h1>以降で閉じているなら、入れ子状態が矛盾していますのでこれもまた文法ミスです。 ■<font color=#00008B><h1>*******</h1> fontタグはブロック要素を子要素に持てません。よって、h1を囲むことは出来ません。 ■<center><b> ■<center><bottom> 上記のcenterタグは2カ所共閉じていないようですが、これはコピペのミスでしょうか？ ■<meta name="description" content="******************" /> ■<meta name="keywords" content="*************************" /> この2カ所だけがXHTMLタイプで閉じられていますが、他のソース部分はそうなっていませんので、おそらく質問者様のDOCTYPEはXHTMLではなくHTMLだと思いますが、そうであればここの「閉じ」は不要です。DOCTYPEが不明ですが反対に、現在のDOCTYPE宣言がXHTMLであるならば、img・brタグ、他のmetaタグについても全て閉じなくてはなりません。 最後になりましたが、そもそものご希望、「行間を空けたい」のはどの部分ですか？もしコンテンツ全体なのであれば、line-heightはbodyに、<div id="CONTENT">内だけならそこに、<ul id="NAV">内だけならそこに、<h1 id="HEADER">内だけならそこに…という様に適切な箇所に指定をして下さい。

  • 15mm
  • ベストアンサー率65% (65/100)
回答No.1

47行目（付近）より <font color="green><u>****</u><br> ↓修正 <font color="green"><u>****</u><br> color=""の内容が、次に"が出てくるまで、と解釈されてしまいます。 （green><u>*～<iframe src=　までが） 直接の原因はこれですが、いろいろと修正すべきところが多いようです。 <body>が二つある <ul>直下に<br>不可。<br>は<li></li>内に入れる 終了タグの欠如・過剰が多い（ブラウザごとに解釈が変わる可能性もある） とりあえずこれくらいは直しておきましょう。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • ulの画像をcssのfloatで横並び、IEでの印刷が変（ソース記述のため長文です）

    ulを使い、スタイルで画像を横並びにしたのですが、個々の画像サイズで印刷が正しくされる場合とされない場合があります。 具体的ソースは下部に記述します。 印刷すると、最初のulの方は画像が１つ折り返されてしまいます。 FFやNNは大丈夫でしたが、IEだけが印刷プレビューの段階から折り返されました。 参考に、自分の環境も記載します。 なぜなのか気になっておりまして…。どこか書き方がおかしいのでしょうか？おわかりになりましたら、よろしくお願いします。 ※長文すみません。 ★システム XP　 professional Version 2002 service Pack 2 ブラウザ　IE6.0.29 以下がソースです------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html 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"> <title>タイトル</title> <style type="text/css" media="all"> <!-- ul.pageLink{ margin: 0; padding: 0px; list-style: none; } ul.pageLink li{ padding:0; margin: 0; float: left; } --> </style> </head> <body> <div style="width:765px"> ■折り返される <ul class="pageLink"> <li><a href="#a"><img src="img/a.gif" alt="" width="217" height="36" border="0"></a></li> <li><a href="#b"><img src="img/b.gif" alt="" width="139" height="36" border="0"></a></li> <li><a href="#c"><img src="img/c.gif" alt="" width="216" height="36" border="0"></a></li> <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> </ul> <br style="clear:both;"> <br> ■折り返されない <ul class="pageLink"> <li><a href="#a"><img src="img/a.gif" alt="" width="207" height="36" border="0"></a></li> <li><a href="#b"><img src="img/b.gif" alt="" width="159" height="36" border="0"></a></li> <li><a href="#c"><img src="img/c.gif" alt="" width="206" height="36" border="0"></a></li> <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> </ul> <br style="clear:both;"> </div> </body> </html>

  • wordpressで

    wordpressを使ってブログを作っています。しかしcssを読み込んでくれません。 index.phpの内容は <!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="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(': '); ?></title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please --> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?>（RSS 2.0）" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?>（Atom）" href="<?php bloginfo('atom_url'); ?>" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" /> </head> <body> <div id="rap"> <div id="header"> <div id="headerimg"> <h1><a href="<?php echo get_settings('home'); ?>/"><img src="img/title.gif" alt="芦澤治療院はやさしいマッサージで施術いたします。" /></a></h1> </div> <div id="headernavi"> <div id="navi"> <ul> <li><a href="#"><img src="img/link.gif" alt="" border="0" /></a></li> <li><a href="#"><img src="img/sitemap.gif" alt="" border="0" /></a></li> <li><a href="#"><img src="img/inquary.gif" alt="" border="0" /></a></li> </ul></div> <div id="size"> <img src="img/sizeword.gif" alt="" /> <a href="#"><img src="img/sizesmall.gif" alt="" border="0" /></a> <a href="#"><img src="img/sizemiddle.gif" alt="" border="0" /></a> <a href="#"><img src="img/sizebig.gif" alt="" border="0" /></a></div> </div> </div> <div id="navcontainer"> <ul> <li class="news"><a href="#">ニュース</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="work"><a href="#">施術の案内</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="stuff"><a href="#">スタッフ</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="qa"><a href="#">よくある質問</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="inq"><a href="#">お問い合わせ</a></li> </ul> </div> <!-- end header --> <div id="content"> <div id="main"> <?php if(have_posts()):while(have_posts()):the_post();?> <div class="post"> <h2><?php the_title();?></h2> <?php the_content();?> <p class="postmetadate"> <?php the_time('Y年m月d日 H:i')?>|<?php comments_popup_link ('コメント(1)','コメント(2)','コメント(%)');?> </p> </div> <?php comments_template();?> <?php endwhile;endif;?> </div> </div> </div> </body> </html> です。 ディレクトリ構造はindex.htmlとstyle.cssは同じフォルダにあります。

    • 締切済み
    • PHP
  • ヤフ－の検索にかからなくなりました。

    ヤフ－の検索にかからなくなりました。 以下そのページのソースですが、不都合があるでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html> <head> <titl>***************</title> <meta name="keywords" content="*****************************"> <meta name="description" content="*******************************"> <STYLE type="text/css"> <!-- BODY { background-color: #------; background-image : url("ind_back.gif"); background-repeat: repeat-x; background-position: bottom; background-attachment: fixed; } --> </STYLE> </head> <body bgcolor="*********************"> <br> <br> <!-- ロゴ --> <div Align="center"> <img src="a.gif" border="0" alt="ロゴ"> <br><br><br><br> <!-- 写真と説明文 --> <img src="main_photo2.jpg" border="0" alt="**********"><br> <span style="font-size: 13px;line-height:150%"> 　（***********************）　</span> <br><br><br> <span style="font-size: 16px;line-height:150%"><font color="#000099" face="MS UI Gothic"> <b>******</b>***************************<br> </font></span> <br><br> <A href="top/top.htm"><img src="1.gif" onmouseover="this.src='2.gif'" onmouseout="this.src='1.gif'" border="0" alt="入口"></a></div> </body> </html>

  • HTMLのフレームについて

    左側にメニューを置き、右側をメインにしようとしているのですが、左側のメニューをクリックしても、左側にしか表示されません。 どうすれば良いか教えてください 全体のHTMLが <html> <Html Lang="ja"> <Head> <Title>○</Title> </Head> <Frameset cols="155,*" Frameborder="yes" Scrolling="auto" Bordercolor="#ffcc99"> <Frame src="メニュー～"> <Frame src="メイン～" name="main"> <Noframes> <body> <Center> <p> ○ </p> </Center> </body> </Noframes> </Html> 左（メニュー）のフレームは <html> <Html Lang="ja"> <Head> <Meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <Title>○</Title> </Head> <Body> <BaseFont Size="2"> <Font Size="2"> <A Href="～"　target="main"></A><Img Src="ー" Border="0"></A><br> <br> <A Href="～"　target="main"><Img Src="ー" Border="0"></A><br> <br> <A Href="～"　target="main"><Img Src="ー" Border="0"></A><br> <br> <A Href="～"　target="main"><Img Src="ー" Border="0"></A><br> <br> <A Href="～"　target="main"><Img Src="ー" Border="0"></A><br> <br> <A Href="～"　target="main"><Img Src="ー" Border="0"></A><br> </Body> </Html> ですよろしくお願いします

  • インデックスページから各フレームページへジャンプさせたい

    (ローカルだと)内容ページは表示されるのですが、メニューの方が表示されません。 ?http://sakura-bewithyou.com/noutengusaindex.html? がインデックスページです。 これがインデックスページのソース(一部)です。 <td width="365" bgcolor="#ffffff"> <A HREF="?http://sakura-bewithyou.com/study.heml"target="hidari&quo...?低きところに流れる受験</CENTER> </a> </td> リンク先のソースは <HTML> <!-- 作成日 2006/1/20 4:23:20 PM --> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META NAME="GENERATOR" CONTENT="mi"> <TITLE>さくらの脳内天幕徒然草</TITLE> </HEAD> <frameset cols="20%,80%"> <frame src="studyindex.html" name="hidari"> <frame src="noutengusa-syouki.html" name="migi"> </frameset> </HTML> メニューのソースは <HTML> <!-- 作成日 2006/1/23 5:38:40 PM --> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META NAME="GENERATOR" CONTENT="mi"> <TITLE>低きところに流れる受験</TITLE> </HEAD> <BODY> <body bgcolor="#FFFF33" text="#444444" link="#808080" vlink="#808080" alink="#808080"> <CENTER> <BR> <BR> <IMG SRC = "usagi17.gif" ALT = ""> <BR> <BR> <B><font size="2" color="#666666"> <a href="noutengusa-syouki.html" target="migi">正気を取り戻そう</a><BR> <BR> <a href="noutengusa-shinnendo.html" target="migi">こんなんで新年度</a><BR> <BR> <a href="noutengusa-yorugata.html" target="migi">どうしても夜型</a><BR> <BR> <a href="noutengusa-fushigi.html" target="migi">さくらさんも不思議だわ～</a><BR> <BR> <a href="noutengusa-2hour.html" target="migi">根性で２時間、<BR> 強引に２時間、<BR> 意地で２時間、<BR> なんとか２時間</a><BR> <BR> <a href="noutengusa-ao.html" target="migi">青チャート、11センチの動揺。</a><BR> <BR> </font> </B> <BR> <A href="?http://sakura-bewithyou.com/noutengusa-top.html"><img? src="m38_5-03.gif" border="0" onMouseOver="this .src='m38_6-03.gif'"onMouseOut="this .src='m38_5-03.gif'"></A><BR> <BR> <A href="?http://sakura-bewithyou.com/noutengusa-top.html"><img? src="m38_5-06.gif" border="0" onMouseOver="this .src='m38_6-06.gif'"onMouseOut="this .src='m38_5-06.gif'"></A><BR> <BR> </CENTER> </BODY> </HTML> ローカルだとメニュー以外は表示されます。 どこが間違っているのか、まったくわかりません……。 大変申し訳ないのですが、お答え頂ければ幸いです。

  • アクセスカウンタのタグを貼り付ける？？

    　　　無料を謳っているのに、クレジットカードなどと心配な語句が有ります。 どのようなことを書いてあるのか教えてください。 　ちなみに、使用は止めて居ます。 <!--タグはここから--><table border="0" cellspacing="0" cellpadding="0"><tr><td align="center"><a href="http://www.rays-counter.com/"><img src="http://www.rays-counter.com/d144_f6_022/4f17b2e7e4b99/" alt="アクセスカウンター" border="0"></a></td></tr><tr><td align="center"><a href="http://goods-fun.net/"><img src="http://www.rays-counter.com/images/counter_01.gif" border="0" alt="GoodsFun-グッズファン"></a><a href="http://www.e-creditcard.info/"><img src="http://www.rays-counter.com/images/counter_02.gif" border="0" alt="クレジットカード比較"></a><a href="http://fx-ch.com/"><img src="http://www.rays-counter.com/images/counter_03.gif" border="0" alt="FX比較サイト"></a><img src="http://www.rays-counter.com/images/counter_04.gif" border="0"><a href="http://engagement-r.net/"><img src="http://www.rays-counter.com/images/counter_05.gif" border="0" alt="婚約指輪サーチ"></a></td></tr></table><!--ここまで-->

  • インラインフレーム、ｃｓｓの質問です。

    下記の3カラムのページを練習で作っているのですが、 右端のサイドバーをインラインフレームで表示させようとしたところ レイアウトが崩れてしまいます。 そもそもインラインフレーム以前のCSSの問題なのかもしれないのですが 色々調べてはみたのですが 直せなくて困っています。 どなたかお分かりになる方ご回答お願いします。 HTML,CSS,インラインフレームのHTMLの順で貼っています。 HTMLソース------------------------------ <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title></title> <link rel="stylesheet" href="C:/Documents and Settings/abc/デスクトップ/gear crafter/test2.css" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <a href=><img src="http://gearcrafter.web.fc2.com/image/testtop2.jpg" alt="" id="top" /></a></div> <div id="headermenue"> <ul class="topmenue"><a href=><li>cart</li></a><li><a href=>about us</a></li><li><a href=>Q & A</a></li> </ul> </div> <div id="side"> カテゴリ <ul type="square" compact="compact" class="sidecate"> <li><a href=>財布</a></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li> </ul> </div> <div id="main"><a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a></div> <div id="side2">sgad<iframe src="side2.html" width="80" scrolling="no" frameborder="0"></iframe> </div> <div id="footer"></div> </div> </body> </html> --------------------------------------------------------------- --CSS--------------------------------------------------------- @charset "shift-jis"; /*画像*/ img { border-style:none; } a img { border-style:none; } a:hover img{opacity:0.8;filter:alpha(opacity=80);-ms-filter: "alpha( opacity=80 )";} /*リンク*/ a:link{ text-decoration:none; color:#34494e;} a:visited{ color:#34494e;} a:hover{color:#245ba6;} a:active{color:#245ba6;} a { text-decoration: none; } /*レイアウト*/ ul.topmenue { margin-right:0px; margin-left:auto; width:29em; } ul.topmenue li { float: right; width: 8em; margin-left: 5px; padding: 2px; border: 1px #b3bc6f solid; background-color: #b3bc6f; text-align: center; } ul.sidecate { width: 2em; margin-left: 1px; margin-top: 0px; padding: 1px; border: 1px #b3bc6f solid; background-color: #d8ddb6; text-align: center; width:194px;} ul.sidecate li {text-align: left; width:194px; } #container { width : 980px; margin-left: auto; margin-right: auto; background-color :#222222;} } #header {width :960px; } #headermenue {width : 960px;} #side { float: left; margin-left: 5px; padding-top: 5px; width: 200px; background-color: #b3bc6f; text-align:center;} #main {margin: 0px 110px 0px 220px; width: 630px;} #side2 {background-color: #b3bc6f; float: right; width: 80px; margin-right: 5px;} #footer {clear: both; width: 960px; } --------------------------------------------------------------- --インラインフレーム---------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <?xml version="1.0" encoding="shift_jis"?> <style type="text/css"> <!-- body { background-color: #000000; width:80px; color:#ffffff; margin-top:0px; } --> </style> <html> <head> </head> <body> test text </body></html>

    • ベストアンサー
    • CSS
  • CSSのリストタグについて

    下記のソースのようにリストタグに画像を並べます。 ここまではいいのですが、firefoxなどブラウ上で文字サイズを大きくすると画像の上下に余白が出来てしまうのは何ででしょうか。。 <ul> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> </ul> あるサイトのソースを見るとliタグににfont-size:1px;を指定されていました。コレでも解決するのですがこのやり方は良いのでしょうかね。。 質問の内容がわかりにくい時は「わかりにくい！」と言ってください。。

    • ベストアンサー
    • HTML
  • リストを一行にせずに横並びにする方法

    リストタグを一行にすると横並びにはなりますが、ソースが見ずらいです…。 コメントを使わないで横並びにする方法はありますか？ ■html <ul><!-- --><li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li><!-- --><li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li><!-- --></ul> ■css li { display: inline; } ↓のように<!---->をとっても表示を一行にする方法があれば教えてください。 <li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li> <li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li>

  • よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたい

    よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたいと考えております。そこで以下のような記述をしたいと考えているのですがうまく行かず、また原因もわからずに困っておます。どなた様かご指導のほどよろしくお願いいたします。 まず以下の記述をしました。 ［html］ <div id="menu"> <ul> <li id="menu1"><a href="a/index.html" title="HOME" ><img src="img/1.gif" alt="HOME" onmouseover="this.src='img/11.gif' onmouseout="this.src='img/1.gif'" /></a></li> <li id="menu2"><a href="b/index.html" title="ホームページ製作"><img src="img/3.gif" alt="HOME" onmouseover="this.src='img/33.gif' onmouseout="this.src='img/3.gif'" /></a></li> <li id="menu3"><a href="c/index.html" title="ネットショツプ製作"><img src="img/4.gif" alt="HOME" onmouseover="this.src='img/44.gif' onmouseout="this.src='img/4.gif'" /></a></li> <li id="menu4"><a href="d/index.html" title="SNSサイト製作"><img src="img/6.gif" alt="HOME" onmouseover="this.src='img/66.gif' onmouseout="this.src='img/6.gif'" /></a></li> <li id="menu5"><a href="e/index.html" title="SEOプロモーション"><img src="img/7.gif" alt="HOME" onmouseover="this.src='img/77.gif' onmouseout="this.src='img/7.gif'" /></a></li> <li id="menu6"><a href="f/index.html" title="出版・印刷・その他"><img src="img/8.gif" alt="HOME" onmouseover="this.src='img/88.gif' onmouseout="this.src='img/8.gif'" /></a></li> <li id="menu7"><a href="g/index.html" title="お問合せ・御注文"><img src="img/5.gif" alt="HOME" onmouseover="this.src='img/55.gif' onmouseout="this.src='img/5.gif'" /></a></li> </ul></div> ［css］ #menu ul{ list-style-type:none; } #menu ul li{ display:inline; } http://desktop10.web.fc2.com/test.html 上記URLにアップしています。よろしければ見てみてください。 画像も、横並びにならず、マウスを合わせたときの画像も変化しません。また、ブラウザ上の左下に ページでエラーが発生しました。と出てしまいます。 お手数では御座いますがどなた様かご教示をお願いできませんでしょうか？ わたしとしては、以下のような感じにしたいと考えております。 http://desktop10.web.fc2.com/test1.html なお、一応記載させて頂きますが画像の中に「ホームページ製作」や「SNS」等と・・・ありますが、私は 現在cssの学習をしており、特別パソコン関係の商売をしているわけでもありません。ただ、今後の自分のために色々と出来ればよいと考えているところであります。 初心者では御座いますが、どなた様かご指導のほどよろしくお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する