- 締切済み
ボタンの配置がうまくいきません
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の二重線の上の線に隣接させたい。 いろいろと試してみたのですが、今の所どちらもうまくいきません。 どうすればよいでしょうか？ アドバイス御願いします。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- font_color
- ベストアンサー率45% (24/53)
こんにちは。 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)の背景に二重線の画像を入れて位置を合わせる方法が一番早いかも知れませんが。
- fujillin
- ベストアンサー率61% (1594/2576)
CSSはたいして詳しくありませんが、 高さ指定が35pxと29pxがあるので、差の6px分だけ空きが出来ているのでは？（画像のサイズが違うのでしょうか？） 画像サイズ（高さ）をそろえておくのが一番簡単な気がするけど、そうできないのであれば、まず同じサイズの高さを確保しておいて、 height:35px; background-position:bottom; みたいにしてあげれば表示画像は下揃えになると思いますけど。 あるいは、小さい画像にはpadding-top:6pxを設けるとか、table利用でレイアウトするとか（vartical-alignを指定）
お礼
小さい画像はbackground-position:bottom; をつけたら下の線に接して並びました！！ あとは大きい画像を真ん中の太い線に接するようにしたいのですが、paddinng指定でもmargin指定でもうまくいきません...
補足
ちなみに画像サイズは大きい方が縦35px、横が65px 小さい方が縦29px、横57pxです。 画像が潰れてしまっているので、表示しているページをみてください。 http://ibaraki.heteml.jp/test.html
補足
なんか、画像がおかしいです・・・ 二重線を二つ重ねて、真ん中が太い三本線に見せているのですが、全然違う画像になってますね。 なぜでしょう？ アップロードしたらおかしくなりました。