• 締切済み

HP製作でオーバーマウスがうまくいきません。

現在、Webサイトを製作中なのですが CSSでのオーバーマウスの動作がうまくいきません。 コードは以下の通りなのですが イメージとしては、添付画像の様にA,Bのような画像で作ったボタンがあり そこのボタンにカーソルを合わせると Aのようにボタンの色が変化し 尚且つ、説明欄にAの説明が表示されるようにというイメージなのです。 しかし、実際のところは動作をせず・・・という状態です。 コードで説明しますとはセレクト、ブログ、コンタクトと何項目かあるんですが その場合は一番下のコンタクトしか動作しない状態なのです。 他はリンクタグすら正常に動きません。 思考錯誤をしていたところ　 各所にある<ul class="menu">を削除したところ レイアウトは崩れるのですが　動作はしてくれました。 その部分をどのように修正すればいいのか もしくは、もっと根本的な部分から修正が必要なのか お手上げ状態です、ご助言をお願い致します。 contact.png　＞これがメニュー側で contact_un.png　＞これが説明側に表示されるべき画像です。 <html> <head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>タイトル</title> <style type="text/css"> BODY { background-image:url(min.png); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; } img { border-style:none; } .menu { padding-top:200px; /*--重ならない程度に押し下げています。--*/ } .menu a span { /*--オンマウスで表れる場所---*/ display:none; /*--最初は隠す。これがキモ。 検索エンジンに嫌われる理由でもある---*/ padding:5px; } .menu a:link{ /*--文字色　マウスを乗せたくなる色を---*/ } .menu a:visited{color:#000;} .menu a:hover, .menu a:visited{ /*--ここから下、%使う時はIEに注意---*/ display:block; text-decoration:none; } .menu a:hover .setumei_s { /*--オンマウスで表れる場所の指定---*/ display:block; position:absolute; /*--絶対位置・相対位置それぞれ長短あり。---*/ top:350px; left:110px; width:680px; font-weight:bold; line-height:1.5; } .menu a:hover .setumei_b { /*--オンマウスで表れる場所の指定---*/ display:block; position:absolute; /*--絶対位置・相対位置それぞれ長短あり。---*/ top:310px; left:110px; width:680px; font-weight:bold; line-height:1.5; } .menu a:hover .setumei_c { /*--オンマウスで表れる場所の指定---*/ display:block; position:absolute; /*--絶対位置・相対位置それぞれ長短あり。---*/ top:270px; left:100px; width:680px; font-weight:bold; line-height:1.5; } .menu a:hover .second { /*--オンマウスで表れる場所の指定---*/ top:600px; left:5px; width:23px; }summary_un #image a{ display:block; background:url() no-repeat; text-decoration:none;} #image a:hover{ color:orange; background:url(info_on.png) no-repeat; } </style> </head> <body style="background-color: rgb(0, 0, 0); margin-top: 0px; height: 27px; background-image: url(back.jpg);"> <!---セレクト--> <div style="position: absolute; top: -10px; left: -20px; width: 600px; height: 87px;" id="image"> <ul class="menu"> <a href="リンク"><img src="Mission.png"> <span class="setumei_m"><img src="Mission_un.png"></span></a> </ul> </div> <!---セレクト--> <!---ブログ--> <div style="position: absolute; top: 31px; left: -20px; width: 600px; height: 87px;" id="image"> <ul class="menu"> <a href="リンク/"><img src="blog.png"> <span class="setumei_b"><img src="blog_un.png"></span></a> </ul> </div> <!---ブログ--> <!---コンタクト--> <div style="position: absolute; top: 70px; left: -20px; width: 600px; height: 87px;" id="image"> <ul class="menu"> <a href="リンク"><img src="contact.png"> <span class="setumei_c"><img src="contact_un.png"></span></a> </ul> </div> <!---コンタクト--> </body> </html>

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

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

ごく簡単なサンプル書いてみました。 　ただし、本来は画像になっている説明文などは、きちんと記述しておくべきです。次善の策として画像のaltに書いておいても良いでしょう。 [誤] <li> 　　<a href="./Summary"><img src="summary.png" width="180" height="32" alt="Summary"></a> 　　<p> 　　　　<img src="summary_un.png" width="332" height="70" alt="ここにテキストでリンク先の詳しい説明をかいておく。"> 　　</p> </li> [正] <li> 　　<a href="./Summary">Summary</a><span>For an overview of the event Noted some Rough content It's about "king Fish" Please confirm participants.</span> </li> とか・・・ 　いずれにしても、 ・スタイルシートを読まないPC以外のブラウザ 　　スマホでない携帯電話とか、読み上げソフト、点字端末・・ ・検索エンジン ・プリンター で利用できなきゃHTMLで作成する意味がない。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より →テキストを画像に置き換えて表現する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )は、強く非推奨なのです。 ★サンプルは、スマホには対応はしていますから小さなウィンドウでも問題なく利用できるでしょうが、その他のユーザーエージェント(プリンター、携帯電話、読み上げソフト、点字端末、検索エンジンには未対応です。 ★ボタン画像は無駄な余白を切り捨てて、下記のサイズに切り抜いています。必ず下記サイズに切り抜いてテストしてください。 ★HTMLも極めて簡単できちんと文書構造だけを示していることを確認すること。 ★スタイルシートが、文書構造を基に書かれていて簡単でわかりやすいこと。 　先でどのようにもデザインを変えられること ★オリジナルと異なりスタイルシートなしで表示しても利用できること ・・・などを確認してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;} body{ ＿background:url(min.jpg) black top left no-repeat; ＿background-size:100%;/* CSS3 */ } div.header h1{margin:100px auto 50px 40px;;width:390px;text-align:right;} div.header h1 img{display:block;width:100%;height:auto;} div.section{height:100%;} div.section h2{display:none;} div.section ul.nav, div.section ul.nav li{ ＿display:block;list-style-type:none; ＿text-align:right; } div.section ul{width:390px;position:relative;} div.section ul.nav li p{display:none;} div.section ul.nav li:hover p{display:block;position:absolute;top:100%;right:0;} div.footer{ ＿height:60px; ＿position:absolute; ＿bottom:0; ＿color:white; } div.footer h2{display:none;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1><img src="tile.png" width="391" height="51" alt="OPERATION KINGFISH"></h1> ＿</div> ＿<div class="section"> ＿＿<h2>サイトマップ</h2> ＿＿<ul class="nav"> ＿＿＿<li> ＿＿＿＿<a href="./Misson"><img src="summary.png" width="180" height="32" alt="Summary"></a> ＿＿＿＿<p> ＿＿＿＿＿<img src="summary_un.png" width="332" height="70" alt="ここにテキストでリンク先の詳しい説明をかいておく。"> ＿＿＿＿</p> ＿＿＿</li> ＿＿＿<li> ＿＿＿＿<a href="./info.html"><img src="info2.png" width="248" height="32" alt="Infomation"></a> ＿＿＿＿<p> ＿＿＿＿＿<img src="info_un.png" width="370" height="104" alt="ここにテキストでリンク先の詳しい説明をかいておく。"> ＿＿＿＿</p> ＿＿＿</li> ＿＿＿<li> ＿＿＿＿<a href="./Misson"><img src="mission.png" width="320" height="32" alt="Misson"></a> ＿＿＿＿<p> ＿＿＿＿＿<img src="mission_un.png" width="370" height="104" alt="ここにテキストでリンク先の詳しい説明をかいておく。"> ＿＿＿＿</p> ＿＿＿</li> ＿＿＿<li> ＿＿＿＿<a href="./blog"><img src="blog.png" width="100" height="32" alt="Blog"></a> ＿＿＿＿<p> ＿＿＿＿＿<img src="blog_un.png" width="370" height="102" alt="ここにテキストでリンク先の詳しい説明をかいておく。"> ＿＿＿＿</p> ＿＿＿</li> ＿＿＿<li> ＿＿＿＿<a href="./contactUs.html"><img src="contact.png" width="240" height="32" alt="Contact Us"></a> ＿＿＿＿<p> ＿＿＿＿＿<img src="contact_un.png" width="370" height="104" alt="ここにテキストでリンク先の詳しい説明をかいておく。"> ＿＿＿＿</p> ＿＿＿</li> ＿＿</ul> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<address>&copy; ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

No.2です。追加情報をお願いします。 ・リンクボタンのサイズ、画像を使うならそのサイズ ・リンク先の説明の画像サイズ ・それぞれの表示位置

gerugugu2
質問者

補足

お世話になります、質問者です。 アドバイスありがとうございます。 リンクのボタンのサイズなのですが477*39になります。 また、2点目の説明画像のサイズは何パターンかあり それぞれがサイズが異なるのですが380ｘ100程度のものです。 位置ですが、どのように表記すればよいのかわからないので サイトのURLを添付いたします。 こちらがそのサイトです。 http://urx.nu/1z0X

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

＞もっと根本的な部分から修正が必要なのか だと思います。 1) まず、HTMLを復習しましょう。 　同じidはページ内に一箇所しか存在できません。id="image"が何度も登場している!! 2) それぞれの要素にはどんな要素を含むか決められています。 　 ul要素にはli以外含むことはできません。 　<ul> 　　<li><a href=""></a></li> 　★<!ELEMENT UL - - (LI)+ -- unordered list --> ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL ) 　　要素ULにはli要素をひとつ以上含むと書かれています。 　　これを<ul><a>のように記述するとブラウザは文書構造を理解できないため適当に補完しますがその解釈はブラウザによって異なるためスタイルシートが思い通りに適用されません。 3) HTMLは文書構造だけを記述するものです。用意されたタグで足りないときはclassやidを使って文書構造を補完します。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より 　素のHTMLを記述したら、ネット上のValidatorで文法チェックを必ず行ってから次に進みます。 　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ・The W3C Markup Validation Service ( http://validator.w3.org/ ) ・Another HTML-lint gateway ( http://cetus.sakura.ne.jp/htmllint/htmllint.html ) 4) スタイルシートはその文書構造を元にセレクタでデザインしたい要素を特定してデザインします。 5) CSS(カスケーディングスタイルシート)にはカスケーディングという重要な仕組みがあります。それがCSSの命です。それを知っておかなきゃ使えません。 　#(一意セレクタ)での指定は詳細度b=1ですが、HTML要素のstyle属性で指定すると、詳細度がa=1となり上書きできなくなります。 　重要→6.4.3 Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity ) 　　これはCSS2.1で変更されたため、CSS2.1のものをあげておきます。 添付画像がないのでシカとはわかりませんが、HTMLは次のようなものになると思います。 　これなら誰でも書けるし、後でメンテナンスも容易。へんなコメントも不要(classはそのために書くのですから) 　また、文書構造しか書いてないので、HTMLを変更しなくても、どのようにもデザインできます。 ★Another HTML-lint gateway ( http://cetus.sakura.ne.jp/htmllint/htmllint.html ) ★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) にて検証済みのウェブ標準(HTML4.01strict) (注) class名は文書構造を補完する目的でつけてある。HTML5の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )名とその用途を参考にしてある。 (注) 画像を読み込まない状態で見て置くこと--googleが見ている姿-- (注) タブは＿に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- --> ＿</style> </head> <body> ＿<div class="header" id="TOP"> ＿＿<h1>タイトル</h1> ＿</div> ＿<div class="section"> ＿＿<ul class="nav" id="SITE_MAP"> ＿＿＿<li> ＿＿＿＿<a href="./Misson"><img src="Mission.png" width="80" height="40" alt="Misson"></a> ＿＿＿＿<p> ＿＿＿＿＿<a href="./Misson"><img src="Mission_un.png" width="480" height="360" alt="ここにテキストでリンク先の詳しい説明をかいておく。"></a> ＿＿＿＿</p> ＿＿＿＿<!-- a要素にpは含むことができないので別途aで括る --> ＿＿＿＿<!-- 画像には必ずwidthとheight、およびaltを記述すること【必須】 --> ＿＿＿</li> ＿＿＿<li> ＿＿＿＿<a href="./blog"><img src="blog.png" width="80" height="40" alt="Blog"></a> ＿＿＿＿<p> ＿＿＿＿＿<a href="./blog"><img src="blog_un.png" width="480" height="360" alt="ここにテキストでリンク先の詳しい説明をかいておく。"></a> ＿＿＿＿</p> ＿＿＿</li> ＿＿＿<li> ＿＿＿＿<a href="./links.html"><img src="contact.png" width="80" height="40" alt="Contact Us"></a> ＿＿＿＿<p> ＿＿＿＿＿<a href="./links.html"><img src="contact_un.png" width="480" height="360" alt="ここにテキストでリンク先の詳しい説明をかいておく。"></a> ＿＿＿＿</p> ＿＿</ul> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2005-06-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2005-06-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>&copy; ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

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

関連するQ&A

  • IEの時に空白ができてしまします。

    CSSを使ってホームページ制作をしはじめたのですが、まだまだ勉強不足の為修正の仕方がわかりません。申し訳ございませんがどなたか詳しいかた教えて頂けないでしょうか。 内容はと言いますとリモートロールオーバーを設定している際にＩＥで#Content01 ul li#menu01～03 aの背景画像の下に空白ができてしまうのです。FireFoxでは思い通り表示できているのですが。。。 ---ＨＴＭＬ--- <div id="Content01"> <!- コンテンツ01 -!> <ul> <li id="menu01"><a href="#"><span>あああああ</span></a></li> <li id="menu02"><a href="#"><span>いいいいい</span></a></li> <li id="menu03"><a href="#"><span>ううううう</span></a></li> </ul> </div> ---ＣＳＳ--- /* コンテンツ01 */ #Content01{ position:relative; background:url(../.jpg) no-repeat right top; width:800px; height:300px; } #Content01 ul li#menu01 a{ display:block; width:200px; height:100px; background:url(../.jpg) no-repeat left top; } #Content01 ul li#menu02 a{ display:block; width:200px; height:100px; background:url(../.jpg) no-repeat left top; } #Content01 ul li#menu03 a{ display:block; width:200px; height:100px; background:url(../.jpg) no-repeat left top; } #Content01 ul li{ position:relative; margin:0px; right:40px; top:0px; } #Content01 ul li a span{ display:none; } #Content01 li{ list-style:none; } #Content01 ul li#menu01 a:hover span{ position:absolute; top:0px; right:-40px; display:block; width:600px; height:300px; text-indent:-9999px; } #Content01 ul li#menu02 a:hover span{ position:absolute; top:-100px; right:-40px; display:block; width:600px; height:300px; text-indent:-999px; } #Content01 ul li#menu03 a:hover span{ position:absolute; top:-200px; right:-40px; display:block; width:600px; height:300px; text-indent:-999px; } #Content01 ul li#menu01 a:hover span{ background:url(../.jpg) no-repeat; } #Content01 ul li#menu02 a:hover span{ background:url(../.jpg) no-repeat; } #Content01 ul li#menu03 a:hover span{ background:url(../.jpg) no-repeat; } #Content01 a:hover{ border:none; } このような記述を致しております。 色んなサイトを見ながら作りましたので不適切な箇所も多いとは思いますがどうか宜しくお願い致します。

  • CSSでのマウスオーバーの画像切り替えについて

    現在横型のメニューをCSSで作成しています。 配置はうまく出来たのですが、ロールオーバーがうまくいきません。 マウスオーバーしても画像が切り替わりません。 CSSの記述をどのようにすればいいでしょうか？ 以下ソース ◇HTML <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <ul id="hnavi"> <li id="hnavili1"><a href="#"><img src="img/top-menu-1.gif" width="149" height="60"></a></li> <li id="hnavili2"><img src="img/top-menu-2.gif" width="150" height="60"></li> <li id="hnavili3"><img src="img/top-menu-3.gif" width="151" height="60"></li> <li id="hnavili4"><img src="img/top-menu-4.gif" width="149" height="60"></li> <li id="hnavili5"><img src="img/top-menu-5.gif" width="150" height="60"></li> <li id="hnavili6"><img src="img/top-menu-6.gif" width="151" height="60"></li> </ul> </div> </div><!-- /header --> <div class = "topwrap"> topimg </div><!-- /topwrap --> <div id = "inner"> <div = "mainwrap"> mainwrap </div><!-- /mainwrap --> <div = "sidewrap"> sidewrap </div><!-- /sidewrap --> <div class = "clear"><hr /></div> </div><!-- /inner --> <div id = "footer"> footer </div><!-- /footer --> </div><!-- /wrap --> </body> ◇CSS body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } #hnavi { margin: 0; padding: 0; } #hnavili1 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili1 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili2 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili2 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili3 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili3 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili4 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili4 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili5 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili5 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili6 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili6 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } 宜しくお願いします。

  • IE６だと動かない　マウスオーバーで画像の入れ替え

    以下のように書いてみました。 IE6以外では期待した動作が得られます。 ※imgファイルは適当です。実際に動かす場合は、適当に直して下さい。 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; } #itmImg{ width: 240px; float: left; position: relative; } #itmImg img{ display:block; } #itmImg a span{ display: none; } #itmImg a:hover span{ display:block; position:absolute; top:0; left:0; } #itmImg ul { margin: 0; padding: 0; } #itmImg li{ float:left; list-style:none; } </style> </head> <body> <div id="itmImg"> <img src="hoge1.jpg" width="240" height="240" alt=""> <ul> <li> <a href="javascript:void(0);"> <img src="hoge2.jpg" width="80" height="80" alt=""> <span><img src="hoge2.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge3.jpg" width="80" height="80" alt=""> <span><img src="hoge3.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge4.jpg" width="80" height="80" alt=""> <span><img src="hoge4.jpg" width="240" height="240" alt=""></span> </a> </li> </ul> </div> </body> </html> IE6でも動くようにするにはどうしたら良いでしょうか？ ご指導の程、宜しくお願いいたします。

    • 締切済み
    • CSS
  • IE以外のブラウザーで

    はじめまして。 ホームページの作成をDW5.5で行っています。 以下のソース、cssにてアップしたところ、header menuの部分の画像が IEだとちゃんと横並びに表示されるのですが、Firefox、Safariなどでは menuが縦に並んでしまいます。 どのように修正すればいいのか、ご指導いただけませんでしょうか？ ＜＜ソース部＞＞ <body> <div id="header"></div> <div id="head_navi"> <ul> <li id="head_bu1"><a href="../index.html"></a></li> <li id="head_bu2"><a href="../about.html"></a></li> <li id="head_bu3"><a href="#"></a></li> <li id="head_bu4"><a href="#"></a></li> <li id="head_bu5"><a href="#"></a></li> <li id="head_bu6"><a href="../policy.html"></a></li> <li id="head_bu7"><a href="#"></a></li> <li id="head_bu8"><a href="#"></a></li> </ul></div> </body> ＜＜css部＞＞ *{ margin:0px; padding:0px; } img{ border:none; } li{ list-style-type:none; } body{ font-size:12px; line-height:1.4em; font-family:"ＭＳ Ｐゴシック", "MS PGothic", "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; background-color: #333333; margin:0px auto; } /* FireFox リンク選択時の点線を消す */ a{ overflow:hidden; outline:none; } /* FireFox flashの境界の点線を消す */ object{ outline:none; } /* ■ヘッダー */ #header{ width:1000px; height:320px; background-color: #000000; } #head_navi{ width:1000px; height: 40px; background-color: #666; } #head_navi ul{ overflow:hidden; float:left; padding-left: 21px; } #head_bu1 a{ display:block; width:112px; height:38px; float: left; background:url(../img/header_1_off.png) no-repeat left top; } #head_bu1 a:hover{ background:url(../img/header_1_on.png) no-repeat left top; } #head_bu2 a{ display:block; width:113px; height:38px; float: left; background:url(../img/header_2_off.png) no-repeat left top; } #head_bu2 a:hover{ background:url(../img/header_2_on.png) no-repeat left top; } #head_bu3 a{ display:block; width:117px; height:38px; float: left; background:url(../img/header_3_off.png) no-repeat left top; } #head_bu3 a:hover{ background:url(../img/header_3_on.png) no-repeat left top; } #head_bu4 a{ display:block; width:122px; height:38px; float: left; background:url(../img/header_4_off.png) no-repeat left top; } #head_bu4 a:hover{ background:url(../img/header_4_on.png) no-repeat left top; } #head_bu5 a{ display:block; width:101px; height:38px; float: left; background:url(../img/header_5_off.png) no-repeat left top; } #head_bu5 a:hover{ background:url(../img/header_5_on.png) no-repeat left top; } #head_bu6 a{ display:block; width:126px; height:38px; float: left; background:url(../img/header_6_off.png) no-repeat left top; } #head_bu6 a:hover{ background:url(../img/header_6_on.png) no-repeat left top; } #head_bu7 a{ display:block; width:134px; height:38px; float: left; background:url(../img/header_7_off.png) no-repeat left top; } #head_bu7 a:hover{ background:url(../img/header_7_on.png) no-repeat left top; } #head_bu8 a{ display:block; width:133px; height:38px; background:url(../img/header_8_off.png) no-repeat left top; } #head_bu8 a:hover{ background:url(../img/header_8_on.png) no-repeat left top; }

  • ドロップダウンメニューについて

    apycomでhttp://apycom.com/menus/1-yellow-green.htmlの ドロップダウンメニューをダウンロードして設定しているのですが、サブメニューのリンク文字の変更方法が分からなくて困っています。 サブメニューの背景を変更したのでリンクの文字をもっとハッキリ見える色に変更したいです。 マウスが乗った時の文字の色も変更できません。 昨日から色々やってるのですがどうしても解決できないのでお聞きしました。 よろしくお願いします。 /** ********************************************* * Prototype of styles for horizontal CSS-menu * @data 30.06.2009 ********************************************* * (X)HTML-scheme: * <div id="menu"> * <ul class="menu"> * <li><a href="#" class="parent"><span>level 1</span></a> * <ul> * <li><a href="#" class="parent"><span>level 2</span></a> * <ul><li><a href="#"><span>level 3</span></a></li></ul> * </li> * </ul> * </li> * <li class="last"><a href="#"><span>level 1</span></a></li> * </ul> * </div> ********************************************* */ /* menu::base */ div#menu { height:41px; background : transparent url(main-bg.png) repeat-x scroll 0% 0%; } div#menu ul { margin: 0; padding: 0; list-style: none; float: left; } div#menu ul.menu { padding-left: 30px; } div#menu li { position: relative; z-index: 9; margin: 0; padding: 0 5px 0 0; display: block; float: left; } div#menu li:hover >ul { left: -2px; } div#menu a { position: relative; z-index: 10; height: 41px; display: block; float: left; line-height: 41px; text-decoration: none; font: normal 12px Trebuchet MS; } div#menu a:hover, div#menu a:hover span { color: #fff; } div#menu li.current a {} div#menu span { display: block; cursor: pointer; background-repeat: no-repeat; background-position: 95% 0; } div#menu ul ul a.parent span { background-position:95% 8px; background-image : url(item-pointer.gif); } div#menu ul ul a:hover.parent span { background-image : url(item-pointer-mover.gif); } /* menu::level1 */ div#menu a { padding: 0 10px 0 10px; line-height: 30px; color : rgb(56, 56, 56); } div#menu span { margin-top: 5px; }/**@replace#1*/ div#menu li { background : transparent url(main-delimiter.png) no-repeat scroll 98% 4px; } div#menu li.last { background: none; } /* menu::level2 */ div#menu ul ul li { background: none; } div#menu ul ul { position: absolute; top: 38px; left: -999em; width: 163px; padding: 5px 0 0 0; background : rgb(179, 221, 81) none repeat scroll 0% 0%; margin-top:1px; } div#menu ul ul a { padding: 0 0 0 15px; height: auto; float: none; display: block; line-height: 24px; color : rgb(56, 56, 56); } div#menu ul ul span { margin-top: 0; padding-right: 15px; _padding-right: 20px; color : rgb(56, 56, 56); } div#menu ul ul a:hover span { color: #fff; } div#menu ul ul li.last { background: none; } div#menu ul ul li { width: 100%; } /* menu::level3 */ div#menu ul ul ul { padding: 0; margin: -38px 0 0 163px !important; margin-left:172px; color: #FFFFFF; } /* colors */ div#menu ul ul ul { background: rgb(41,41,41); } div#menu ul ul ul ul { background: rgb(38,38,38); } div#menu ul ul ul ul { background: rgb(35,35,35); } /* lava lamp */ div#menu li.back { background : transparent url(lava.png) no-repeat scroll right -44px !important; background-image : url(lava.gif); width: 13px; height: 44px; z-index: 8; position: absolute; margin: -1px 0 0 -5px; } div#menu li.back .left { background : transparent url(lava.png) no-repeat scroll left top !important; background-image : url(lava.gif); height: 44px; margin-right: 8px; } 【html】 <div id="menu"> <ul class="menu"> <li><a href="#"><span>Home</span></a> <li><a href="#" class="parent"><span>商品紹介</span></a> <ul> <li><a href="#"><span>コンクリート</span></a> <li><a href="#"><span>木材</span></a> <li><a href="#"><span>アクセサリー</span></a> <li><a href="#"><span>砂</span></a> <li><a href="#"><span>フード</span></a>

  • プルダウンメニューがうまくいかない

    スタイルシート・スタンダード・デザインガイドと言う本を参考にプルダウンメニューを作っていますがうまくいきません。 サブメニューをメインメニューの真横にだすにはどうすればいいでしょう。 ■HTML■ <a href="index.html"><img src="images/home.gif" width="13" height="14">トップページ</a> <span>|</span> <a href="instruction.html"><img src="images/instruction.gif" width="14" height="13">注意事項</a> <span>|</span> <div id="menu1" onMouseOver="MenuOn(1)" onMouseOut="MenuOff(1)"> <a href="event/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">お知らせお知らせ</a> <div class="submenu" id="submenu1"> <a href="event/index.html"><img src="images/submenu.gif" width="8" height="12">イベント１</a> <span>|</span> <a href="event/2.html"><img src="images/submenu.gif" width="8" height="12">イベント２</a> <span>|</span> <a href="event/3.html"><img src="images/submenu.gif" width="8" height="12">イベント３</a> </div> </div> <span>|</span> <a href="aaaaaaaa.html"><img src="images/menu.gif" width="8" height="12">ああああああああ</a> <span>|</span> <div id="menu2" onMouseOver="MenuOn(2)" onMouseOut="MenuOff(2)"> <a href="mainmenu1/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">メインメニュ１</a> <div class="submenu" id="submenu2"> <a href="mainmenu1/index.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ１</a> <span>|</span> <a href="mainmenu1/submenu2.html"><img src="images/submenu.gif" width="8" height="12">さぶめにゅ２</a> <span>|</span> <a href="mainmenu1/submenu3.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ3</a> </div> </div> 省略 </div> ■スタイルシート■ .menu { font-size:0.75em; margin-left:0; margin-right:0; margin-bottom:50px; margin-top:0; height:2em; width:140px; border-top:solid 1px #33cc99; position:absolute; text-align:left; left:0; top:95px; padding-left:10px } .menu a { color:#33cc99; border-bottom:solid 1px #33cc99; text-decoration:none; display:block; width:100%; line-height:2em; text-align:left; } .menu a:hover { background-color:#ffffcc; } .menu span { color:#000000; display:none; } .menu img { margin-right:10px; margin-left:5px; border:0 } .submenu a{ background-color:#33cc99; border-bottom:solid 1px #ffffff; color:#ffffff; width:100%; } .submenu { visibility:hidden; position:absolute; left:0; width:140px; padding-left:10px; } .submenu a:hover { background-color:#0099cc; width:140px; } #submenu1 { position:absolute; left:0; } #submenu2 { position:absolute; left:0 } #submenu3 { position:absolute; left:0 } #submenu4 { position:absolute; left:0 } #submenu5 { position:absolute; left:0 } #submenu6 { position:absolute; left:0 } ■Javascript■ function MenuOn(x){ obj=document.getElementById("submenu"+x).style.visibility="visible"; } function MenuOff(x){ obj=document.getElementById("submenu"+x).style.visibility="hidden"; }

  • 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
  • ドロップダウンの残像

    どなたか教えていただけないでしょうか。 ドロップダウンメニューを設置した所、一部のメニューで残像が残ります。 【css】 ul.menu { width: 960px; position: relative; list-style:none; float:left; margin:0; padding:0; text-align: left; } ul.menu * { margin:0; padding:0; } ul.menu a { display:block; color:#fff; text-decoration:none; font-weight: bold; } ul.menu li.a { position: relative; float:left; } ul.menu ul { position:absolute; top:50px; left: 4px; background: url(../images/navi/bg.png) repeat; display:none; opacity:0; list-style:none; border: 1px solid #ccc; } ul.menu ul li { position:relative; border-top:none; width:150px; margin:0; border-top: 1px solid #bad7dd; } ul.menu ul li a { display:block; padding:3px 7px 5px; background: url(../images/navi/bg.png) repeat; } ul.menu ul li a:hover { background-color:#c5c5c5; } ul.menu ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } ul.menu ul ul { left:160px; top:-1px; } ul.menu .menulink { width:160px; } ul.menu .topline { border-top:1px solid #aaa; } 【html】 <ul class="menu" id="menu"> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a></li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a></li> </ul> png画像を使って背景透過をしています。 htmlとかcssは勉強中です…宜しくお願いします。

    • ベストアンサー
    • HTML
  • ulのマージンについて

    ulにマージンを入れたのですが、数値通りのマージンが入りません。 --------html------------ <div id="wrapper"> <div id="logo"></div> <ul id="top-menu"> <li id="top-menu-home"><a href="#">Home</a></li> <li id="top-menu-syokai"><a href="#">園の紹介</a></li> <li id="top-menu-nagare"><a href="#">一日のながれ</a></li> <li id="top-menu-gyoji"><a href="#">年間行事</a></li> <li id="top-menu-contact"><a href="#">所在地・問合せ</a></li> </ul> </div> --------css--------- #logo { float:left; width:119px; height:130px; margin:0 0 0 2px; background:url(../img/common/logo.gif) no-repeat;} ul#top-menu { width:500px; overflow:hidden; margin-top:20px; margin-left:179px;} ul#top-menu li {float:left; display:block;} ul#top-menu li a {display:block; overflow:hidden; height:0px; padding-top:100px; width:100px; background-repeat:no-repeat;} #top-menu-home a {background:url(../img/common/top-menu/home.gif) 0 0;} #top-menu-syokai a { background:url(../img/common/top-menu/syokai.gif) 0 -100px;} #top-menu-syokai a:hover { background-position:0 0;} #top-menu-nagare a {background:url(../img/common/top-menu/nagare.gif) 0 -100px;} #top-menu-nagare a:hover {background-position:0 0;} #top-menu-gyoji a {background:url(../img/common/top-menu/gyoji.gif) 0 -100px;} #top-menu-gyoji a:hover {background-position:0 0;} #top-menu-contact a {background:url(../img/common/top-menu/contact.gif) 0 -100px;} #top-menu-contact a:hover {background-position:0 0;} ---------------------------- ul#top-menuのmargin-leftです。 どうしてか分からず、困っています。 ご存じの方がいらっしゃいましたら、よろしくお願いします。

    • ベストアンサー
    • HTML
  • 変な隙間ができてしまいます

    tableで全体を構成している中に、横に並べたメニューバーの段を作っています。高さを30にしたいのですが、メニュー自体は30のようですが全体の高さがおかしくなり、メニューバーの下部に隙間ができてしまいます。 色々試してみていますが、どうしても直せません。 どうしたら30ぴったりのメニューにできるでしょうか？ 教えてください。よろしくお願いします。 メニューはonmouseで背景の色が変わるのと、下に説明書きが出るようにしてます。 【メニューバーの内容】 <td width="10" height="30" background="side.gif"></td>（サイドの部分） <td width="110" ><a href="info_01.html" id ="menu">INFO<SPAN class=setumei>情報</SPAN></a></div></td> <td width="110"><a href="info_02.html" id ="menu">NEWS<SPAN class=setumei>お知らせ</SPAN></a></div></td> ・・・ <td width="10" height="30" background="side.gif"></td> 【CSSの内容】 a.menu{/*・・・・メニューバー ロールオーバー・・・*/ background:url(manubar_back1.gif) no-repeat; color:#424242; display:block; font-weight:bold; font-size: 12px; height:30px; letter-spacing:0px; text-decoration:none; text-align:center;} a:hover.menu{ color:#666666; background:url(manubar_back2.gif) no-repeat;} .setumei {/*・・・・メニューバー popup・・・*/ display: none; position: absolute; top: 30px; left: 0px;} a:hover .setumei { display: block; background-color: #F3F3F3; color:#666666; width:110px; font-size: 11px; padding-top:2px; padding-bottom:3px; text-align:center;}

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する