• 締切済み

cssで作成する多階層リスト

こんにちは。 cssで ・縦並びのリストに対して、マウスをもっていくと横にどんどん下位階層のリストが表示されるようする ・下位リストにマウスがいっても上位リストの選択の色はそのままにしたい 以上のように作成したいのですが、 そのcssの記述がわかりません。 色々サイトで探しましたが見つからず。。。 どなたか教えてください。 ◆HTML <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>多階層</title> </head> <body> <br> <div id="MainDiv"> <div id="gnav"> <ul> <li><a href="#">テスト(1)</a> <ul> <li><a href="#">てすと(1)-1</a> <ul> <li><a href="#">ＴＥＳＴ(1)-1-1</a> <ul> <li><a href="#">テスト(1)-1-1-1</a> <ul> <li><a href="#">TEST(1)-1-1-1-1</a></li> <li><a href="#">TEST(1)-1-1-1-2</a></li> <li><a href="#">TEST(1)-1-1-1-3</a></li> <li><a href="#">TEST(1)-1-1-1-4</a></li> <li><a href="#">TEST(1)-1-1-1-5</a></li> </ul> </li> <li><a href="#">テスト(1)-1-1-2</a> <ul> <li><a href="#">TEST(1)-1-1-2-1</a></li> <li><a href="#">TEST(1)-1-1-2-2</a></li> <li><a href="#">TEST(1)-1-1-2-3</a></li> <li><a href="#">TEST(1)-1-1-2-4</a></li> <li><a href="#">TEST(1)-1-1-2-5</a></li> </ul> </li> </ul> </li> <li><a href="#">ＴＥＳＴ(1)-1-2</a> <ul> <li><a href="#">テスト(1)-1-2-1</a> <ul> <li><a href="#">TEST(1)-1-2-1-1</a></li> <li><a href="#">TEST(1)-1-2-1-2</a></li> <li><a href="#">TEST(1)-1-2-1-3</a></li> <li><a href="#">TEST(1)-1-2-1-4</a></li> <li><a href="#">TEST(1)-1-2-1-5</a></li> </ul> </li> <li><a href="#">テスト(1)-1-2-2</a> <ul> <li><a href="#">TEST(1)-1-2-2-1</a></li> <li><a href="#">TEST(1)-1-2-2-2</a></li> <li><a href="#">TEST(1)-1-2-2-3</a></li> <li><a href="#">TEST(1)-1-2-2-4</a></li> <li><a href="#">TEST(1)-1-2-2-5</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">てすと(1)-2</a></li> <li><a href="#">てすと(1)-3</a></li> <li><a href="#">てすと(1)-4</a></li> </ul> </li> <li><a href="#">テスト(2)</a> </li> </ul> </div> </div> </body> </html> ◆CSS body { font-size: 13px; font-family: "Meiryo UI", "ＭＳ Ｐゴシック", "MS PGothic", "MS UI Gothic", "ＭＳ ゴシック", "ＭＳ 明朝"; } #MainDiv { overflow: hidden; width: 1000px; margin: 0; } /* 全角カタカナ階層 */ #gnav { float: left; width: 150px; height: 200px; } #gnav ul { margin: 0; padding: 0; border-top: 1px #FFFFFF solid; list-style-type: none; } #gnav ul li { width: 150px; height: 24px; text-align: center; background: #c8d6e8; border-bottom: 1px #FFFFFF solid; } #gnav ul li a { display: block; width: 150px; height: 24px; color: #000000; font-size: 100%; line-height: 1.6; background: #6495ed; text-decoration: none; } /* ※．子メニュー以下にマウスがあるときも親メニューの色は変わったにしたい */ #gnav ul li:hover > a { background: #ffa500; } /* 全角ひらがな階層 */ #gnav ul li ul { display: none; list-style-type: none; } #gnav ul li:hover ul { display: block; position: relative; top: -25px; left: 152px; width: 150px; height: 25px; }

  • HTML
  • 回答数4
  • ありがとう数1

みんなの回答

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

＞こんなシンプルにcssを定義するだけだなんてビックリ＼(◎o◎)／！です。 ははは・・・ あたこちサイトめぐって、訳も判らずつまみ食いしてもできません。 要点は　たったこれだけ ul{list-style:none;}/* ブロックにして */ ul,li{margin:0;padding:0;width:9em;}/* margin,paddinを消して幅を指定 */ ul li{position:relative;}/* 子孫の位置やサイズの基準になる */ ul li ul{ position:absolute;/* 親要素liの位置を基準に */ left:9em;/* 位置を指定 */ top:0; } /* 2階層目*/ ul li ul{display:none;} ul li:hover ul{display:block;} /* 3階層目*/ ul li:hover ul li ul{display:none;} ul li:hover ul li:hover ul{display:block;} /* 4階層目 */ ul li:hover ul li:hover ul li ul{display:none;} ul li:hover ul li:hover ul li:hover ul{display:block;} /* 5階層目 */ ul li:hover ul li:hover ul li:hover ul li ul{display:none;} ul li:hover ul li:hover ul li:hover ul li:hover ul{display:block;} とっつき難いですが、とにかく仕様書には目を通しておきましょう。 そうしないと、こんな簡単なことで躓いてしまう。 じゃ横に並べたリストの下に子供メニューを広げる。その項目の右に孫メニューはどうする。 これより、ずっと複雑になります。

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

リセットされる位置がまずい。 カウンター部分書き換え div.header div.nav{ counter-reset: part chapter section subsection subsubsection; } div.header div.nav>ul>li{ counter-increment: part 1; counter-reset: chapter section subsection subsubsection; } div.header div.nav>ul>li>a:after{ content: "("counter(part)")"; } div.header div.nav>ul>li>ul>li{ counter-increment: chapter 1; } div.header div.nav>ul>li>ul>li>a:after{ content: "("counter(part)")-"counter(chapter); } div.header div.nav>ul>li>ul>li>ul>li{ counter-increment: section 1; counter-reset:subsection; } div.header div.nav>ul>li>ul>li>ul>li>a:after{ content: "("counter(part)")-"counter(chapter)"-"counter(section); } div.header div.nav>ul>li>ul>li>ul>li>ul>li{ counter-increment: subsection 1; counter-reset:subsubsection; } div.header div.nav>ul>li>ul>li>ul>li>ul>li>a:after{ content: "("counter(part)")-"counter(chapter)"-"counter(section)"-"counter(subsection); } div.header div.nav>ul>li>ul>li>ul>li>ul>li>ul>li{ counter-increment: subsubsection 1; } div.header div.nav>ul>li>ul>li>ul>li>ul>li>ul>li>a:after{ content: "("counter(part)")-"counter(chapter)"-"counter(section)"-"counter(subsection)"-"counter(subsubsection); }

akoacoako
質問者

お礼

ORUKA1951さん 分りやすい回答ありがとうございました。 こんなシンプルにcssを定義するだけだなんてビックリ＼(◎o◎)／！です。 いろんなサイトで調べましたが、どんどん頭がパニックになっていました。 本当にありがとうございましたm(__)m

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

いきなり、5階層ものメニューに取り組んでもうまく行きません。 　まず、二階層、三階層と作成していかないと身にはつきません。 ＞色々サイトで探しましたが見つからず。。。 　他の勉強(特に理系科目)と同じ、回答例をたとえ見つけたとしても応用することは不可能でしょう。 　仕様書をきちんと読んで身につけるほうが見につきますから、応用もできます。 1) HTMLは文書構造しか書かれていませんから、変更も自在にできる。 　『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ためのものです。 　ここでは、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )名とその用途に従っています。(将来HTML5に直しやすい) 2) 下の階層のulはstaticでない親liに対して絶対配置 3) せっかくのカスケーディングスタイルシート、カスケーディングを活用する。 　　すなわち詳細度の知識は必須です。 4) :hoverで展開する場合、展開される項目は印刷できませんから、media制限をかけておく 　印刷時には展開されて印刷される。 ★タブは＿に置換してあるので戻す。 <style type="text/css" media="screen"> <!-- /* 基本的なこと */ html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} div.header div.nav{margin:0 auto;width:45em} /* ここからメニュー展開・・たったこれだけ・・ */ div.header div.nav ul{list-style:none;line-height:2em;} div.header div.nav ul,div.header div.nav ul li{margin:0;padding:0;width:9em;} div.header div.nav ul li{text-align:center;position:relative;} div.header div.nav ul li ul{position:absolute;left:9em;top:0;display:none;} div.header div.nav ul li:hover ul{display:block;} div.header div.nav ul li:hover ul li ul{display:none;} div.header div.nav ul li:hover ul li:hover ul{display:block;} div.header div.nav ul li:hover ul li:hover ul li ul{display:none;} div.header div.nav ul li:hover ul li:hover ul li:hover ul{display:block;} div.header div.nav ul li:hover ul li:hover ul li:hover ul li ul{display:none;} div.header div.nav ul li:hover ul li:hover ul li:hover ul li:hover ul{display:block;} /* ここから選択済みメニュー着色 */ div.header div.nav ul li a{display:block;width:100%;height:100%;} div.header div.nav ul li a{background-color:aqua;} div.header div.nav ul li:hover a{background-color:orange;} div.header div.nav ul li:hover ul li a{background-color:aqua;} div.header div.nav ul li:hover ul li:hover a{background-color:orange;} div.header div.nav ul li:hover ul li:hover ul li a{background-color:aqua;} div.header div.nav ul li:hover ul li:hover ul li:hover a{background-color:orange;} div.header div.nav ul li:hover ul li:hover ul li:hover ul li a{background-color:aqua;} div.header div.nav ul li:hover ul li:hover ul li:hover ul li:hover a{background-color:orange;} div.header div.nav ul li:hover ul li:hover ul li:hover ul li:hover ul li a{background-color:aqua;} div.header div.nav ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover a{background-color:orange;} /* ここからカウンター */ div.header div.nav{counter-reset: part chapter section subsection subsubsection;} div.header div.nav ul li{ ＿counter-increment: part 1; ＿counter-reset: chapter section subsection subsubsection; } div.header div.nav ul li a:after{ ＿content: "("counter(part)")"; } div.header div.nav ul li ul li{ ＿counter-increment: chapter 1; } div.header div.nav ul li ul li a:after{ ＿content: "("counter(part)")-"counter(chapter); } div.header div.nav ul li ul li ul li{ ＿counter-increment: section 1; ＿counter-reset:subsection; } div.header div.nav ul li ul li ul li a:after{ ＿content: "("counter(part)")-"counter(chapter)"-"counter(section); } div.header div.nav ul li ul li ul li ul li{ ＿counter-increment: subsection 1; ＿counter-reset:subsubsection; } div.header div.nav ul li ul li ul li ul li a:after{ ＿content: "("counter(part)")-"counter(chapter)"-"counter(section)"-"counter(subsection); } div.header div.nav ul li ul li ul li ul li ul li{ ＿counter-increment: subsubsection 1; } div.header div.nav ul li ul li ul li ul li ul li a:after{ ＿content: "("counter(part)")-"counter(chapter)"-"counter(section)"-"counter(subsection)"-"counter(subsubsection); } div.header div.nav ul li:hover:after{content:"→";position:absolute;top:0;right:0;z-index:10;} div.header div.nav ul ul ul ul ul li:hover:after{content:none;} --> ＿</style>

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

きちんと文書構造に従ってスタイル書けば良いです。 ・absoluteはstaticでにい直近の抱合ブロックの位置に従う 　10.1 "包含ブロック"の定義( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#containing-block-details ) ・詳細度をきちんと理解して・・ 　6.4.3 セレクタの詳細度を計算する( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html ) 　 ★簡単なサンプルです。 ★タブは＿に置換してあるので戻す。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　でチェック済み( hrefの内容がない以外はＯＫ) ★ナンバーは書かない。目次が増えるたびに全部書き直さなきゃならない 　contentプロパティとcounterを使いましょう。 ★連続投稿できないのでスタイルは明日にでも <!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"> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a> ＿＿＿＿＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿</li> ＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="#">テスト</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> </body> </html>

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

関連するQ&A

  • cssスプライト　positionが効かない

    現在サイトを制作中で、グローバルナビのcssスプライトでつまずいてしまいました。 background-positionがなぜか効きません、、、、。 htmlとcssのチェックをしていただけないでしょうか？？ どなたか親切なかた宜しくお願い致します！！ <div id="gnav"> <ul> <li class="gnav_1"><a href="#"><img src="images/gnav_home.png" width="164" height="60" alt="ホーム" /></a></li> <li class="gnav_2"><a href="#"><img src="images/gnav_intro.png" width="164" height="60" alt="初めての方へ" /></a></li> <li class="gnav_3"><a href="#"><img src="images/gnav_staff.png" width="164" height="60" alt="スタッフ紹介" /></a></li> <li class="gnav_4"><a href="#"><img src="images/gnav_price.png" width="164" height="60" alt="料金" /></a></li> <li class="gnav_5"><a href="#"><img src="images/gnav_access.png" width="164" height="60" alt="アクセス" /></a></li> <li class="gnav_6"><a href="#"><img src="images/gnav_q&a.png" width="164" height="60" alt="よくあるご質問" /></a></li> </ul> </div><!--gnav--> --------------------------------css------------------------------ #gnav { overflow: hidden; } #gnav ul { margin: 24px 0 0 7px ; } #gnav ul li { float: left; width: 164px; height:60px; background: url(images/gnav_on.png) 0 0 no-repeat; } #gnav ul li a { display:block; } .gnav_2 { background-position: -164px 0; } .gnav_3 { background-position: -328px 0; } .gnav_4 { background-position: -492px 0; } .gnav_5 { background-position: -656px 0; } .gnav_6 { background-position: -820px 0 ; } #gnav ul li a:hover img{ visibility:hidden; }

    • ベストアンサー
    • CSS
  • リストを全体的に右寄せにしたい。

    リストを横並びにしました。 これを大きいdivで囲んだ中の右寄せにするにはどうしたらよいのでしょうか。 #ex { width: 100%; background-color: #66CCFF; height: 28px; } #ex ul { list-style: none; } #ex li { margin: 0px; padding: 5px 0px 5px 30px; list-style: none; float: left; background: url(***.gif) no-repeat 10px 0.5em; } <div id="ex"> <ul> <li><a href="#">リスト</a></li> <li><a href="#">リスト</a></li> </ul> </div>

    • ベストアンサー
    • HTML
  • CSSでマウスオーバーを作成しています。

    CSSでマウスオーバーを作成しています。 /**CSS内**/ #test { margin: 0; padding: 0; list-style-type: none; } #test li { text-indent: -9999px; width: 200px; height: 400px; margin: 0; padding: 0; background: url(aaa_ov.bmp) no-repeat -200px 0; ----- マウスオーバー時 } #test a { text-decoration: none; display: block; width: 200px; height: 400px; margin: 0; background: url(aaa.bmp) no-repeat 0 0; ----- 最初 } #test a:hover { text-decoration: none; background-color: transparent; background-image: none; } /**HTML内**/ <link rel="stylesheet" href="style.css" type="text/css" /> </HEAD> <BODY> <div align="center"> <ul id="test"> <li><a href="***.html">Home</a></li> </ul> </div> </BODY> としているのですが最初の画像も出ずうまくいきません。 画像パスも間違っていませんでした。 どのようにすればいいんでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • XHTML+CSS　フッターのcopyが2重になってしまいます

    XHTML+CSSでのホームページ作成で、 IE6のみフッター部分の下に、 Copyright 2008 ///////// All Rights Reserved.の erved.の部分が2重に表示されてしまいます。 どなたかご教授お願い致します。 *HTML <div id="footer"> <div id="footernavi"> <ul> <li><a href="index.html">テスト</a>｜</li> <li><a href="index.html">テスト</a>｜</li> <li><a href="index.html">テスト</a>｜</li> <li><a href="index.html">テスト</a>｜</li> <li><a href="index.html">テスト</a>｜</li> <li><a href="index.html">テスト</a>｜</li> <li><a href="index.html">テスト</a>｜</li> </ul> </div> <p>Copyright 2008 ///////// All Rights Reserved.</p> </div> *CSS #footer { background: url(image/footer.gif) repeat; float: left; height: 70px; width: 710px; padding-top: 40px; padding-left: 40px; display: block; font-size: 12px; color: #333333; } #footernavi { height: 20px; width: 710px; float: none; line-height: 20px; } #footernavi ul { float: left; height: 20px; width: 710px; margin: 0px; padding: 0px; } #footernavi ul li { float: left; list-style-type: none; font-size: 12px; color: #333333; } #footernavi ul li a { list-style-type: none; font-size: 12px; color: #333333; text-decoration: none; }

    • ベストアンサー
    • HTML
  • 幅違うメニュー（リスト）、floatで横並びで背景画像でテキスト飛ばしたいが・・

    お世話になります。 メニュー（リスト）のテキストを、CSSで飛ばして、背景の画像を表示させるようにしたいのですが、何も表示されません。 マウスオーバーすると、画像がかわるようにしたいです。 どうか、何が問題なのか、教えてくださいませ。 ★メニューのwidthは、全てちがいます。 ★背景の画像は、「./images/gNavi/gNav.gif」という幅513px高さ14pxの画像。 　マウスオーバーの背景画像は、「./images/gNavi/gNav_ov.gif」という幅513px高さ14pxの画像。 ★リストは、横並びにしたい。 【HTML】 <div id="gNavi"> <ul> <li id="01"><a href="#">メニュー１</a></li> <li id="02"><a href="#">メニュ－２</a></li> <li id="03"><a href="#">メニュ－３</a></li> <li id="04"><a href="#">メニュ－４</a></li> <li id="05"><a href="#">メニュ－５</a></li> <li id="06"><a href="#">メニュ－６</a></li> </ul> </div> 【CSS】 #gNavi { width:513px; height:14px; } #gNavi ul{ list-style: none; margin: 0; padding: 0; height: 14px; overflow: hidden; } #gNavi li { float:left; margin:0; padding:0; } #gNavi li a{ display:block; height:100%; width: 100%; height: 0 !important; height /**/: 14px; background:url(../images/gNavi/gNav.gif) no-repeat; text-decoration:none; text-indent:-7777px; } #gNavi li a:hover{ background:url(../images/gNavi/gNav_ov.gif) no-repeat; } #gNavi li#01 a{ background-position: 0 0; width: 52px; } #gNavi li#02 a{ background-position: -52px 0; width: 71px;} #gNavi li#03 a{ background-position: -123px 0; width: 105px;} #gNavi li#04 a{ background-position: -228px 0; width: 93px;} #gNavi li#05 a{ background-position: -321px 0; width: 93px;} #gNavi li#06 a{ background-position: -414px 0; width: 99px;} #gNavi li#01 a:hover { background-position: 0 0;} #gNavi li#02 a:hover { background-position: -52px 0;} #gNavi li#03 a:hover { background-position: -123px 0;} #gNavi li#04 a:hover { background-position: -228px 0;} #gNavi li#05 a:hover { background-position: -321px 0;} #gNavi li#06 a:hover { background-position: -414px 0;} （何か、他に必要な情報があれば、言ってください！）

    • ベストアンサー
    • CSS
  • Dreamweaverでリストを作成するとボックスからずれてしまいます

    DreamweaverCS3を使用してサイトを作成している初心者です。 AP divで作ったボックスの中にリストを作成したのですが、 何故か文字の部分がボックスから大幅にずれてしまいます。 CSS記述↓ #apDiv1 { position:absolute; left:57px; top:82px; width:150px; height:143px; z-index:12; background-color: #FFFFFF; } #apDiv1 li { list-style-type: none; background-color: #CCCCCC; color: #333333; display: block; width: 135px; padding-bottom: 4px; padding-top: 4px; margin-bottom: 1px; margin-left: 0px; margin-top: 0px; padding-left: 15px; } #apDiv1 li a:hover { background-color:#999999 } <body>内です↓ <div id="apDiv1"> <ul> <li class="style4"><a href="http://oshiete.goo.ne.jp/">あああ</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">いいい</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">ううう</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">えええ</a></li> </ul> </div> どうしたらボックスにピッタリ合わせる事ができるのでしょうか。 どうぞ宜しくお願い致します。

  • css:縦方向中央揃えについて

    HP制作初心者です。 現在自分のHPを作成しようとしているのですが、メニュー部分テキストについて 縦方向中央揃えが上手くできません。。 以下ソースなんですが、アドバイスいただけないでしょうか？ 形としては、 blog　profile　portfolio　が横並びで並ぶメニューを想定しています。 ◆html <div id="header"> <h1><img src="ロゴ画像" width="95" height="25" /></h1> <div id="gNav"> <ul> <li><a id="first" href="#">BLOG</a></li> <li><a id="second" href="#">PORTOFOLIO</a></li> <li><a id="third" href="#">PROFILE</a></li> </ul> </div> </div> ◆CSS #header h1 { width: 95px; height: 25px; margin:auto; } #gNav { width: 570px; height: 38px; margin: 0 auto; padding: 0; background-image: url(gNav背景.png); background-repeat: no-repeat; } #gNav li { text-align: center; float: left; } li #first { width: 105px; height:38px; background-image:url(#first背景.png); background-repeat:no-repeat; } ※#second,#thirdも#firstと同様です。 #gNav li a { vertical-align: middle; } 以上です。vertical-alignが効けば問題無いと思うのですが、 動作しません。display table-celとかも試しましたが、、、駄目です。 何か凄く根本的なところで間違っていると思うのですが、、、ご指摘頂けると 助かります。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • CSS　 IEバグ　リストの後の隙間を消したい

    よろしくお願いします。 以下のメニューで、"sub_menu02" の下に隙間が出てしまいます。 IEのバグのようなのですが、回避方法ご教授願います。 *実際は、の部分はJAVASCRIPTによるプルダウンになってます。 --------------------------------------------------------------- <style> * { margin : 0; padding : 0; } body { margin : 0; padding : 0; background: #fafafa; } #slidemenu_sample { overflow:hidden; } #menu_1 { padding: 0; margin: 0 0 0 0; background-color: #e7f6ff; } div#contentsArea div#sNaviArea{ width: 175px; float: left; } div#contentsArea div#sNaviArea dd{ width: 163px; background: #ffffff; } div#contentsArea div#sNaviArea dd ul{ width: 163px; list-style: none; } div#contentsArea div#sNaviArea dd ul li{ width: 163px; border-top: 1px solid #dddddd; margin: 0; padding: 0; display: block; } div#contentsArea div#sNaviArea dd ul li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul li a{ display: block; padding: 5px 0 5px 17px; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li{ width: 153px; margin: 0 0 0 10px; display: block; background: #ffffff; } </style> <body> <div> <div id="contentsArea"> <div> <div id="sNaviArea"> <dl> <dd> <ul> <li><a href="">menu01</a></li ><li class="choice"><a href="">menu02</a><ul class="sNaviSmall"><li><a href="">sub_menu01</a></li><li id="slidemenu_sample"><a href="" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">sub_menu02</a><ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')"><li><a href="">aaaaa</a></li><li><a href="">bbbbb</a></li><li><a href="">cccccc</a></li></ul></li ><li><a href="">sub_menu03</a></li></ul> </ul> </dd> </dl> </div> </div> </div> </div>

  • IE9でのCSSスプライト

    *****html***** <div id="head"> <ul> <li id="scope1"><a href="index.html">トップ</a></li> </ul> </div> ************* *****css***** div#head ul { position:absolute; top:10px; left:10px; width:600px; height:30px; overflow:hidden; } div#head ul li { list-style-type:none; display:inline; } div#head ul li#scope1 a{ background: url('test.png') 0px 0px; width:100px; height:50px; text-indent:-9999px; display:block; position:absolute; top:0px; left:0px; } div#head ul li#scope1 a:hover { background:url('test.png') 0px -50px; } ************** 上記のような記述で、IE9で表示させたところ、もちろんうまく動作します。 ところが、「display」の部分を2ヶ所両方ともはずしても、なんら問題なく動作しています。 block属性にするのは、<a>で指定したリンクを文字部分だけでなくを画像部分全体に 適用するためだと思っていたのですが、指定しないとまずいものなのでしょうか？

    • ベストアンサー
    • CSS
  • cssでリストを横並びのセンタリング

    現在、サイトをHTMLからHTML5に移行中なのですが、リストを横並びにするところまではできたのですが、それをセンタリングするにはどうしたら良いでしょうか？ さまざまなサイトを巡ってやり方を拝見したのですが、目的とするものがありませんでした。 現在のHTML <!-- ヘッダ開始 --> <div id="header"> <h1>サイトタイトル</h1> <p class="catch"><strong>サイト説明</strong></p> <div class="opening"> <h2><img src=".jpg" alt="表示されなかった画像の説明的な" width="900" height="260"></h2> </div> <ul class="nl clearFix"> <li class="active"><a href="#">１</a></li> <li><a href="#">２</a></li> <li><a href="#">３</a></li> <li><a href="#">４</a></li> <li><a href="#">５</a></li> <li><a href="#">６</a></li> <li><a href="#">７</a></li> </ul> <hr class="none"> </div> <!-- ヘッダ終了 --> 現在のcss /* --- ヘッダメニュー --- */ #header ul.nl { width: 100%; /* IE 6のために幅の指定が必要 */ margin: 0 auto; padding: 0; background-color: #ffffff; /* ヘッダメニューの背景色 */ list-style-type: none; text-align: center; } /* メニュー項目 */ #header ul.nl li { width: 124px; /* 項目の幅 */ float: left; line-height: 100%; } /* 最初の項目と最後の項目 */ #header ul.nl li.first, #header ul.nl li.last { width: 125px; /* 項目の幅 */ } わかりにくいと思いますが、上のように配置したいのです。 まだイマイチ理解しきれていないのですが、回答していただければと思います。 ↓HPの現状。 http://dateme.web.fc2.com/top.html

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する