• 締切済み

ボタンの配置がうまくいきません

CSSでサイトのデザインをしているのですがうまくいかないので、教えて下さい。 ボタンをfloatで並べているのですが、現在いるページのボタンはでかく、いないページは小さく表示をしたく、思い通りのサイズの画像を作って並べているのですが、思い通りに配置されません。 -------------以下ソース------------------ 【CSS】 * {margin:0; padding:0;} body {font-size:14px;} a {color: #0077B0; text-decoration:none;} a:hover {text-decoration:underline;} #menu {overflow:auto !important; overflow /**/:hidden; width:100%; border-bottom:double #009933;} #menu li {float:left; width:59px; line-height:2.3em; list-style:none; height:29px;} #menu li a {display:block; width:100%; height:29px;} #menu li.Navi01 {background:url(../img/btn1.gif) no-repeat;} #menu li.Navi01 a:hover {background:url(../img/btn.gif) no-repeat} #menu li.Navi01_v {background:url(../img/btn_v.gif) no-repeat; width:67px; height:35px;} #menu li.Navi02 {background:url(../img/btn1.gif) no-repeat;} #menu li.Navi02 a:hover {background:url(../img/btn.gif) no-repeat} #menu li.Navi02_v {background:url(../img/btn_v.gif) no-repeat;} #menu li.Navi03 {background:url(../img/btn1.gif) no-repeat;} #menu li.Navi03 a:hover {background:url(../img/btn.gif) no-repeat;} #menu li.Navi03_v {background:url(../img/btn_v.gif) no-repeat;} #body {width:100%; clear:left; border-top:#009933 double medium; margin-top:auto;} 【HTML】 <body> <ul id="menu"> <li class="Navi01_v"><a href="hoge1.html"></a></li> <li class="Navi02"><a href="hoge2.html"></a></li> <li class="Navi03"><a href="hoge3.html"></a></li> </ul> <div id="body">aaaa</div> -------------ここまで------------------ 配置したい場所 1.#menu li.Navi01_vのボタン画像を#menuで指定しているborder-bottomの二重線の下の線に隣接させたい。 2.Navi02とNavi03は#menuで指定しているborder-bottomの二重線の上の線に隣接させたい。 いろいろと試してみたのですが、今の所どちらもうまくいきません。 どうすればよいでしょうか？ アドバイス御願いします。

この投稿のマルチメディアは削除されているためご覧いただけません。
  • Z2000
  • お礼率30% (42/138)
  • HTML
  • 回答数2
  • ありがとう数1

みんなの回答

回答No.2

こんにちは。 CSSを見る限り二重線が2箇所（#menu,#body)あるようなので、画像の画像のようなレイアウトにはなりませんが・・。 【html】 <p class="line"></p>←※追加 <ul id="menu"> <li class="Navi01_v"><a href="hoge1.html"></a></li> <li class="Navi02"><a href="hoge2.html"></a></li> <li class="Navi03"><a href="hoge3.html"></a></li> </ul> 【css】 p.line{←※追加 width:100%; display:block; margin:0; padding:0; position:absolute;left:0px;top:0px; border-bottom:1px solid #009933;←※上のライン height:29px; z-index:-1; } #menu { overflow:auto !important; overflow /**/:hidden; width:100%; （border-bottom:double #009933;）←※削除 } #body { width:100%; clear:left; border-top:1px solid #009933;←※変更（下のライン） margin-top:auto; } としてみてはどうでしょうか？ 今回の場合、無理にboderに揃えるのではなく、ul(#menu)の背景に二重線の画像を入れて位置を合わせる方法が一番早いかも知れませんが。

Z2000
質問者

補足

なんか、画像がおかしいです・・・ 二重線を二つ重ねて、真ん中が太い三本線に見せているのですが、全然違う画像になってますね。 なぜでしょう？ アップロードしたらおかしくなりました。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

CSSはたいして詳しくありませんが、 高さ指定が35pxと29pxがあるので、差の6px分だけ空きが出来ているのでは？（画像のサイズが違うのでしょうか？） 画像サイズ（高さ）をそろえておくのが一番簡単な気がするけど、そうできないのであれば、まず同じサイズの高さを確保しておいて、 　height:35px; 　background-position:bottom; みたいにしてあげれば表示画像は下揃えになると思いますけど。 あるいは、小さい画像にはpadding-top:6pxを設けるとか、table利用でレイアウトするとか（vartical-alignを指定）

Z2000
質問者

お礼

小さい画像はbackground-position:bottom; をつけたら下の線に接して並びました！！ あとは大きい画像を真ん中の太い線に接するようにしたいのですが、paddinng指定でもmargin指定でもうまくいきません...

Z2000
質問者

補足

ちなみに画像サイズは大きい方が縦35px、横が65px 小さい方が縦29px、横57pxです。 画像が潰れてしまっているので、表示しているページをみてください。 http://ibaraki.heteml.jp/test.html

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

関連するQ&A

  • リストタグでのナビゲーションボタンで、背景画像が表示されません。

    winIE6では正常に表示されるのですが、 safariだとまったくcssが無視され、横並びにもならない始末です(^_^;) どなたかご教授お願いいたします。 ■html <div id="header"> <ul id="headerMenu"> <li id="home"><a href="index.html">ホーム</a></li> <li id="sitemap"><a href="sitemap.html">サイトマップ</a></li> <li id="recruit"><a href="recruit.html">リクルート</a></li> <li id="contact"><a href="contact.html">お問合せ</a></li> </ul> </div> ■css #header { width:100%; height:107px; margin:0px; padding:0px; position: relative; font-size:12px; background:url("img/top.gif") no-repeat; } #headerMenu{ 　　list-style-type:none;　　 padding:0px; margin:6px 0px 0px 532px; } #headerMenu li { 　　display:inline; padding:0; 　　margin:0px; 　　float:left;　　 } #headerMenu a { 　　display:block;　　 　　text-decoration:none; 　　text-indent:-5000px;　　 　　height:25px; } #home { 　　display:block;　　 　　background-image: url("img/topmenu_01.gif");　　 　　background-repeat: no-repeat;　　 　　width:63px;　　 　　background-position:0px 0px;　　 } #home a:hover {　　 　　background-image: url("img/topmenu_01.gif");　　 　　background-repeat: no-repeat;　　 　　background-position:0px -25px;　 } #sitemap { 　　background-image: url("img/topmenu_02.gif");　　 　　background-repeat: no-repeat;　　 　　width:90px;　　 　　background-position:0px 0px;　　 } #sitemap a:hover {　　 　　background-image: url("img/topmenu_02.gif");　　 　　background-repeat: no-repeat;　　 　　background-position:0px -25px;　　 } #recruit { 　　background-image: url("img/topmenu_04.gif");　　 　　background-repeat: no-repeat;　　 　　width:82px;　　 　　background-position:0px 0px;　　 } #recruit a:hover {　　 　　background-image: url("img/topmenu_04.gif");　　 　　background-repeat: no-repeat;　　 　　background-position:0px -25px;　　 } #contact { 　　background-image: url("img/topmenu_05.gif");　　 　　background-repeat: no-repeat;　　 　　width:82px;　　 　　background-position:0px 0px;　　 } #contact a:hover {　 　　background-image: url("img/topmenu_05.gif");　 　　background-repeat: no-repeat;　　 　　background-position:0px -25px;　　 }

    • 締切済み
    • CSS
  • １枚画像で作るCSSのナビゲーション・ロールオーバーが上手く動作しません。

    はじめまして。初歩的な質問で非常に申し訳ないのですが 今日１日自力で頑張ってみたのですがどうしても解決できないので、ご教授いただけないかと思い書き込ませていただきました・・・・。 ナビゲーションメニューを作っているのですが、 １枚画像でロールオーバーという方法でやっています。 [やりたいこと] 「横978px 縦40pxの画像を使って ６つのメニューに分けて、ロールオーバーをしているようにみせる」 [うまくいかない事] ・横並びにしたいのに、なぜか画像が縦に６つ並んでしまっている状態。 ・最初の「home」以外が全くロールオーバーしてくれない・・・ どこかおかしなところがあれば教えてください・・ よろしくお願いいたします。 【HTML】 <div id="navigation"> <ul> <li id="bttop"><a href="#" title="Home">Home</a></li> <li id="btdai"><a href="#" title="menu1">menu1</a></li> <li id="btsyo"><a href="#" title="menu2">menu2</a></li> <li id="btweb"><a href="#" title="menu3">menu3</a></li> <li id="btmap"><a href="#" title="menu4">menu4</a></li> <li id="bttel"><a href="#" title="menu5">menu5</a></li> </ul> </div> 【CSS】 #navigation { position: absolute; width: 978px; } #navigation ul { width: 978px; height:40px; margin: 0; padding: 0; list-style: none; } #navigation li { margin: 0; padding: 0; width: 978px; height: 40px; text-indent: -9999px; } #navigation li a { width: 163px; height: 40px; text-decoration: none; display: block; float:left; } #navigation li#bttop { background: url(img/navi_bar.jpg) no-repeat 0px 0px; } #navigation li#btdai { background: url(img/navi_bar.jpg) no-repeat 163px 0px; } #navigation li#btsyo { background: url(img/navi_bar.jpg) no-repeat 326px 0px; } #navigation li#btweb { background: url(img/navi_bar.jpg) no-repeat 489px 0px; } #navigation li#btmap { background: url(img/navi_bar.jpg) no-repeat 652px 0px; } #navigation li#bttel { background: url(img/navi_bar.jpg) no-repeat 815px 0px; } /* マウスオーバー時の指定 ---------------------------------------------------- */ #navigation li#bttop a:hover { background: url(img/navi_bar.jpg) no-repeat 0px -40px; } #navigation li#btdai a:hover { background: url(img/navi_bar.jpg) no-repeat 163px -40px; } #navigation li#btsyo a:hover { background: url(img/navi_bar.jpg) no-repeat 326px -40px; } #navigation li#btweb a:hover { background: url(img/navi_bar.jpg) no-repeat 489px -40px; } #navigation li#btmap a:hover { background: url(img/navi_bar.jpg) no-repeat 652px -40px; } #navigation li#bttel a:hover { background: url(img/navi_bar.jpg) no-repeat 815px -40px; }

  • CSSでの画像メニューの設定について

    現在CSSの勉強中です。 外部CSSで画像を使用してリンクメニューを作ったのですが、 やり方があっているか確認をお願いしたいのですが。 off時の画像（白）、ページのin時の画像（赤）、hover（青）の画像を用意しています。 CSS部分▼ .navi01 a{ width:102px; height:43px; background-image:url(common/img/navi_top_off.gif); background-repeat:no-repeat; } .navi01_on a{ width:102px; height:43px; background-image:url(common/img/navi_top_on.gif); background-repeat:no-repeat; } .navi01 a:hover{ width:102px; height:43px; background-image:url(common/img/navi_top_hover.gif); background-repeat:no-repeat; } .navi01_on a:hover{ width:102px; height:43px; background-image:url(common/img/navi_top_hover.gif); background-repeat:no-repeat; } HTML部分▼ <li class="navi01_on"><a href="index.html" title="トップページ"><span class="none">トップページ</span></a></li> <li class="navi02"><a href="work.html" title="仕事内容"><span class="none">仕事内容</span></a></li> CSSの講座のページなどを見ると、設定がもうすこし少なくても うまく動いていたりして、無駄な部分があるのではと思っています。 今の私の知識ではどこが悪いのか分からないので、 教えて頂けると幸いです。 （もし良い講座のページ、本がありましたら教えて頂ければと思います。） 宜しくお願い致します。

    • ベストアンサー
    • CSS
  • IE6とXHTML+CSS

    外部スタイルシート＋XHTMLでサイトを作成したのですがその際メニュー項目のロールオーバーのオーバー時がIE7だと正常に見えるのですがIE6だとオーバー時の画像が消えてしまいます。その部分の外部スタイルシートとXHTMLをそれぞれ記述するので詳しい方アドバイスお願いします！ちなみにメニューボタンの高さは一緒で幅はそれぞれ違います。 <XHTML> <div id="sabNavi"> <ul> <li class="smenu01"><a href="#">サイトマップ</a></li> <li class="smenu02"><a href="#">プライバシーポリシー</a></li> <li class="smenu03"><a href="#">お問合せ</a></li> </ul> </div> <外部スタイルシート> #sabNavi{ width:300px; } #sabNavi a{ height:20px; display:block; text-indent:-9999px; } #sabNavi a:hover{ background-position:0 -20px; } .smenu01 a{ background:url(images/btn_sitemap.gif) no-repeat 0 0; width:71px; } .smenu02 a{ background:url(images/btn_privacy.gif) no-repeat 0 0; width:108px; } .smenu03 a{ background:url(images/btn_information.gif) no-repeat 0 0; width:55px; } .smenu01:hover{ background:url(images/btn_over_sitemap.gif) no-repeat 0 0; } .smenu02:hover{ background:url(images/btn_over_privacy.gif) no-repeat 0 0; } .smenu03:hover{ background:url(images/btn_over_information.gif) no-repeat 0 0; }

  • CSSで組んだメニューのセンターへの設置が出来ません

    初めてトピックを立てさせていただきます。宜しくお願いします。 CSSを使い、横型でオーバーフローするメニューを作っています。 ベースとなるバー画像の上に各コンテツへのリンクメニュー画像を バー画像の中心に置きたいのですが、「中心に置く」これが うまく行きません。丁度この教えて！gooのメニューバーと同じ様に したいのです。各コンテツンツ画像の幅を一定にした場合の設置、 バー幅一杯にメニューを配置した場合の方法は検索するとヒット するのですが、今回の様な場合の例となるサイトが無かったので この場をお借りしました。 JSという手もあるとは思うのですが、今回はCSSでの設置を したいと思っていますのでご協力お願いします。 動作環境 Mac OS 10.4.11 Safari 3.2.1 Firefox 2 ■ボディー部■ <ul id="menu"> <li><a href="./about.html" class="m_01">01</a></li> <li><a href="./about.html" class="m_02">02/a></li> <li><a href="./about.html" class="m_03">03/a></li> </ul> ■CSS部■ ul#menu{ background:url(img/m_off.gif) no-repeat; list-style:none; width:800px; height:30px; } ul#menu li{ list-style:none; float:left; } ul#menu a{ display:block; height:30px; text-indent:-100px; overflow:hidden; } /**//*/ overflow:auto; /**/ /*------off*/ a.m_01 { background:url(img/m_01.gif) no-repeat; width:101px;} a.m_02{ background:url(img/m_02.gif) no-repeat; width:108px;} a.m_03{ background:url(img/m_03.gif) no-repeat; width:80px;} /*------hover*/ a:hover.m_01{ background:url(img/m_01.gif) no-repeat 0px -30px;} a:hover.m_02{ background:url(img/m_02.gif) no-repeat 0px -30px;} a:hover.m_03{ background:url(img/m_03.gif) no-repeat -0px -30px;}

    • ベストアンサー
    • HTML
  • ブラウザ崩れが起こりました。CSSを書き直したいのですが、よく分かりません。

    ブラウザ崩れが起こりました。CSSを書き直したいのですが、よく分かりません。 http://www.asahi-home.info/test/asahi-home/index2.html でページ上部「ホーム」「会社情報」「住宅情報」などがあるメニューの部分です。 これが、ブラウザによっては青い画像の下に隠れてしまうようです。 当方PCでIE６、IE7、FireFox２．０、Safari（バージョン不明）で確認したところ問題なく表示されます。 クライアント様からこの部分の表示崩れがおきているとのクレームがありました。（クライアント様のブラウザ不明） その部分のCSSは以下のようになっています。 アドバイス宜しくお願いいたします。 /* ナビ*/ #navi { text-align: left; } #navi li { float: left; } #navi li a{ display: block; text-indent: -9999px; } #navi li#menu01 a{ background: url("../image/navi01.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu02 a{ background: url("../image/navi02.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu03 a{ background: url("../image/navi03.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu04 a{ background: url("../image/navi04.gif") no-repeat; width: 119px; height: 40px; } #navi li#menu05 a{ background: url("../image/navi05.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu06 a{ background: url("../image/navi06.gif") no-repeat; width: 103px; height: 40px; } #navi ul li.active a { background-position: 0 -40px absolute !important; } #navi ul li a:hover { background-position: 0 -40px absolute !important; text-decoration: none; } /* メインイメージ（青の画像部分）*/ #bgmainImage { clear: both; margin: 0 auto; height: 200px; background: url("../image/main_image_bg.gif") no-repeat center bottom; } .mainImage { margin: 0 auto; width: 800px; } /* メイン コンテンツ部分*/ #bgmain { margin: 0 auto; background-color: #fff; } #main { margin: 0 auto; width: 800px; padding: 8px 0 0 0; } #main h3 { clear: both; margin: 15px 0 0 0; }

  • idの入れ子なのでしょうか？

    最近ＨＰ作成の勉強をはじめたものです 初歩的な質問かもしれませんがお願いします 現在使っている参考書のソースにｃｓｓの下記の記述があるのですが これはどういった意味なのでしょうか？ #navi li#policy a { height: 20px; width: 53px; background: url(../images/policy.gif) no-repeat; } #navi li#policy a:hover { height: 20px; width: 53px; background: url(../images/policy_o.gif) no-repeat; これは#naviのlｉの中にある#policy のa要素のプロパティをさすのでしょうか？ お願いします

    • ベストアンサー
    • HTML
  • サイドナビの配置が上手くいきません。

    初心者なので指導宜しくおねがいします。 サイドナビエリアの中でタイトル画像、ボタン画像をセンターにしたいのですがfirefox、IEで確認すると別々の配置になります何か良い解決策を教えて下さい。 私が書いたタグ、cssで変だなと言う点がありましたら指摘宜しくお願いします。 <!--サイドナビエリア--> <div id="sidenavi"> <ul> <li id="sidetop">back namber</li> 　　　<li><a href="work2010.html" title="2010" id="w10">2010</a></li> <li><a href="work2009.html" title="2009" id="w09">2009</a></li> <li><a href="work2008.html" title="2008" id="w08">2008</a></li> <li><a href="work2007.html" title="2007" id="w07">2007</a></li> </ul> </div> <!--ここまでサイドナビエリア--> /*---------------------------------------------- サイドナビエリア ----------------------------------------------*/ #sidenavi { float:left; height:auto; width: 300px; margin: 30px auto 0; } #sidenavi ul{ height: 30px; width: 60px; list-style: none; padding: 0 ; margin: 0 ; } #sidenavi ul li { text-align:center; } #sidenavi ul li a { background: #FFFFFF; text-indent: -9999px; display: block; height: 30px; width:60px; overflow: hidden; } #sidenavi #sidetop{ height: 30px; width: 150px; text-indent: -9999px; margin: 0 auto 0; background:url(../images_banner/sidemenu/back_namber.jpg) no-repeat; } #sidenavi #w10 { width:60px; background:url(../images_banner/sidemenu/2010.jpg) no-repeat; } #sidenavi #w10:hover { width:60px; background:url(../images_banner/sidemenu/2010over.jpg) no-repeat; } #sidenavi #w09 { width:60px; background:url(../images_banner/sidemenu/2009.jpg) no-repeat; } #sidenavi #w09:hover { width:60px; background:url(../images_banner/sidemenu/2009over.jpg) no-repeat; } #sidenavi #w08 { width:60px; background:url(../images_banner/sidemenu/2008.jpg) no-repeat; } #sidenavi #w08:hover { width:60px; background:url(../images_banner/sidemenu/2008over.jpg) no-repeat; } #sidenavi #w07 { width:60px; background:url(../images_banner/sidemenu/2007.jpg) no-repeat; } #sidenavi #w07:hover { width:60px; background:url(../images_banner/sidemenu/2007over.jpg) no-repeat; }

    • ベストアンサー
    • 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
  • cssを使ったロールオーバについて　どちらの記述が良いでしょうか？

    cssを使ったロールオーバについて　どちらの記述が良いでしょうか？ cssでのロールオーバを使いたく、以下のようなタグに辿りつきました。 ---------------------------------------------------------------------- ul.menu { margin:0px 0px 25px 0px; padding:0px; clear:both; float:left; width:200px;} ul.menu li {float:left; width:100px; display:inline; text-indent:-9999px; overflow:hidden; ist-style:none;} ul.menu li a {display:block; width:100px; height:50px;} li.menu1 a {background:url(image/menu.gif) 0 0 no-repeat;} li.menu1 a:hover {background:url(image/menu.gif) 0 -50px no-repeat;} li.menu2 a {background:url(image/menu.gif) -100px 0 no-repeat;} li.menu2 a:hover {background:url(image/menu.gif) -100px -50px no-repeat;} <ul class="menu"> <li class="menu1"><a href="a.html" title="a">a</a></li> <li class="menu2"><a href="b.html" title="b">b</a></li> </ul> ---------------------------------------------------------------------- 表示はそれで上手く行ったのですが、overflow:hidden;を使うとIE7でスクロールバーが出ないんじゃないか？と言われ、下記のように書き直しました。 ---------------------------------------------------------------------- #menu { width:200px; height:50px; margin : 0px 0px 25px 0px ; } #menu h2 {width:100px; height:50px; margin:0; float:left;} #menu h2 a {display:block; width:100px; height:50px; background-image:url(image/menu.gif) ;} a.menu1 { background-position: 0 0 ;} a:hover.menu1 { background-position: 0 -50px ;} a.menu2 { background-position: -100px 0 ;} a:hover.menu2 { background-position: -100px -50px;} <div id="navi"> <h2><a href="a.html" class="menu1" title="a"></a></h2> <h2><a href="b.html" class="menu2" title="b"></a></h2> </div> -------------------------------------------------------- こちらでも表示は出来たのですが、後からIE7で確認した所初めのタグでもスクロールバーは表示出来ました。 とはいえやはり不安ですし後者で行こうかと思ったのですが、後者の場合も<a></a>の間に何もないことが気にかかり決めかねています。詳しい方がいらっしゃいましたら、どっちの方がいいかのアドバイス等頂けないでしょうか。よろしくお願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する