- ベストアンサー
CSSリスト表示-追加質問-
http://oshiete1.goo.ne.jp/qa3414547.html で勢いあまって質問を締め切ってしまったあとに気がつきました（泣） widthを削除してしまうと、リンクの範囲がテキストの範囲だけになってしまうのです。 申し訳ないですが、180pxいっぱいにリンク範囲を指定したまま、背景が表示される方法をどなたか教えてください。 よろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- CSSで背景画像が表示されない
CSSレイアウトで通常のHTMLで作成しています。 背景画像が表示されないくて困っています。 他の方の質問で似た事例があったのと、 情報サイトを見てみたのですがどうしても上手くいきません。 この場合floatとclearはどう使えば背景が表示されるのでしょうか？ http://oshiete1.goo.ne.jp/qa3882745.html http://2nose.com/css/?ID=120 bodyには別背景を指定してあるのでbodyへの指定はできません。 何かアドバイスがあれば教えて頂けますでしょうか。(__) 確認はIE8です。 [ css ]----------------------------------------------------- #wrap{ width: 920px; height: 100%; margin-left: auto; margin-right: auto; background: url(../img/background.jpg) repeat-y; } #contents{ clear: both; } #sidemenu{ width: 275px; float: left; } #mainbox{ width: 570px; float:right; } [ html ]---------------------------------------------------- <div id="wrap"> <div id="contents"> <div id="sidemenu">サイドメニュー内容</div> <div id="mainbox">メインコンテンツ</div> </div> </div> 以上です、よろしくおねがいします！
- ベストアンサー
- HTML
- CSSのリスト 背景画像が表示されません
横並びのメニューを作成したいと思っています。 text-indent:-999pxを利用して、背景画像のみを表示させようとしているのですが、h1はうまくいくもののリスト(li)についてはまったく表示されません。 ちなみにtext-indentを使用しなければ背景画像は表示されますが、かなり画像が下にずれ込んでしまっています。 よろしくお願いします。 #header h1 { margin: 5px 0 0 20px; padding: 0; width: 248px; height: 143px; float: left; text-indent: -9999px; font-size: 130px; background: url(../images/logo.jpg) no-repeat #FFFFFF; background-position: center; } ul { margin: 0; padding: 0; width: 635px; height: 54px; } li{ float: left; list-style: none; margin: 0; padding: 5px; font-size: 50px; text-indent:-999px; } li#top { background: url(../images/menu/top.jpg) no-repeat; }
- ベストアンサー
- HTML
- CSSでリスト[li]の表示がズレる
HTMLの無料テンプレートを使おうとこちら http://simple.sub.jp/temp.htm からEタイプ（サイズ固定）をダウンロードしたのですが ローカルで見てみるとfirefoxでヘッダー下のリンク（liで記述）がずれます。 添付画像：firefoxでのスクリーンショット 修正しようと見てみましたがどこが悪いのか分かりません。 「.topnavi li」だと思うのですが、どこが悪いのでしょうか？ ご指摘お願いいたします。 HTMLの該当部分 <div id="banner"> <h1><a name="TopofPage">ここにサイトのタイトル</a></h1> </div> <div class="topnavi"> <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> </div> cssの該当部分 .topnavi{ float:left; width:100%; background:#99ccff; border-width:1px 0 1px 0; border-style:solid #999; height:20px; } .topnavi li{ display:block; float:left; width:125px; text-align:center; font-size:1.2em%; list-style-type:none; }
- ベストアンサー
- HTML
- CSSのリスト表示
リストの表示ですが、li a で上下と左にpaddingを入れたいです。 IEではOKなのですが、Firefoxでは右に背景色が飛び出てしまいます。 どこを直したら良いでしょうか。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> で組んでいます。 #category { width: 180px; float: left; } #categoryt ul { border-top: 1px solid #999999; } #category li { border-bottom: 1px solid #999999; } #category li a { display: block; width : 100%; padding: 5px; background-color: #F6F6F6; text-decoration:none; color: #000033; } #category a:hover { background-color: #DBE7EE; color: #003366; } --------------------- <div id="category"> <ul> <li><a href="#">AAA</a></li> <li><a href="#">BBB</a></li> </ul> </div>
- ベストアンサー
- HTML
- CSSによる左右の高さをそろえる
http://oshiete1.goo.ne.jp/qa4249087.html で質問してましたが、すこし内容が変わるので改めて質問させて頂きます。 現在のCSSは、 body { text-align:center;} /*メインのフレーム指定*/ #page { width:760px; margin:0 auto; text-align:left; padding-bottom: 32768px; margin-bottom: -32768px; } /*ヘッダー及び横項目指定*/ #header { width:100%; text-align:center; height:65px; } #header2 { width:750px; line-height:35px; background-color:#FF00FF; } /*中央左右設定及び余白指定*/ .pageyohaku { margin:0 10px; } .main {width:570px; float:right; background-color:#E0FFFF;padding-bottom: 32768px; margin-bottom: -32768px;} .submenu { width:170px; float:left; background-color:#FFC0CB;padding-bottom: 32768px; margin-bottom: -32768px;} .c-both { clear:both; } /*下記記載事項枠指定*/ .footer1 {width:100%; text-align:left;line-height:15px;background-color:#24CF00;clear:both;position:relative;} .footer2 {width:100%; text-align:center;line-height:15px;background-color:#DCDCDC;clear:both;position:relative;} /*リンク指定*/ .link {color:blue;} －－－－－－－－－－－－－－－－－－－ htmlは <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> <title>ホームページ</title> </head> <body> <div id=page> <div id=header> <p><img border="0" src="" width="730" height="65"></p> </div> <div id=header2> <p>このページはレーベル作成を指南します</p> </div> <div class=pageyohaku> </div><! pageyohakuの終わり指定> <div class=main> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> </div><! mainの終わり指定> <! サブメニュー一覧> <div class=submenu> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> </div><! submenuの終わり指定> <div class=c-both> </div><! c-bothの終わり指定> <div class=footer1> 最下層メニュー項目</p> </div><! footer1の終わり指定> <div class=footer2> <p>コピーライト</p> </div><! footer2の終わり指定> </div><! Pageの終わり指定> </body> </html> としてあります。 いろいろ参考にしてやりましたところ途中にコピーライトが ありその後ずっと下の方まで左右のびていて左が少し短くて 終わる感じになりますになります。 どうすればいいのでしょうか 過去の質問も参考にしましたがやったらこうなったというわけです。
- 締切済み
- CSS
- CSSでテキストインデントをマイナスにすると背景画像も消えてしまうのです
こんにちは、ログを探してみましたが似通ったものが見つからなかったので教えてください。 CSSを使ってのページデザインを勉強しています。ナビゲーションバーを、背景を使って画像にしようと思い、テキストインデントをマイナスにして消す方法を本で読みました。やってみたのですが、背景画像も一緒に消えてしまいました。 親ボックスで右寄せにすると、今度はテキストインデントは解除され、テキストと背景画像が重なって右寄せになってしまいます。 横幅700の親ボックスに600の子ボックスを右寄せにしたいので、以下のようなソースにしてみました。 HTML側 <div id="navi"> <ul id="navibar"> <li><a href="***" id="link1" title="リンク１">link1</a></li> <li><a href="***" id="link2" title="リンク２">link2</a></li> ---同様にリンクが続く--- </ul> </div> CSS側 #navi{ width:700px; text-align:right; } #navibar{ width:600px; list-style-type:none; background-color:transparent; } ul#navibar li{ width:120px; float:left; border:none; display:block; } #navibar #link1{ width:106px; height:20px; text-indent:-500em; background-image:url("images/link1bg.gif"); background-repeat:no-repeat; } #navibar #link2{ width:106px; height:20px; text-indent:-1000em; background-image:url("images/link2.gif"); background-repeat:no-repeat; } 以下同様に続く どのように修正すれば背景だけ表示できますでしょうか。アドバイスお待ちしています。
- ベストアンサー
- CSS
- CSSに関して教えてください。
CSSで左列がサイドバーで右列がメインコンテンツの二段組レイアウトについて質問します。 ●要点 サイドバーには背景色が指定してあり、サイド、メインとも高さが可変(指定なし)とします。メインコンテンツの高さの変動に応じてサイドバーの高さも変化してサイドバーの背景色とメインコンテンツの高さが同じになるように変化させたいのです。 ---------- CSSソース ---------- body { text-align: center } #wrapper { width: 720px; margin: 0 auto; text-align: left; } #content { width: 720px; background: url("../img/content.gif") repeat-y; } #main { float: right; width: 540px; } #sidebar{ float: left; width: 180px; background: blue; } ---------- HTML ---------- <body> <div id="wrapper"> <div id="content"> <div id="main"> ・・・・・・・・・ </div> <div id="sidebar"> ・・・・・・・・・ </div> </div> </div> </body> CSSでcontentに背景画像(サイドバーの幅が青色の画像)を指定してrepeat-yとするとIE6ではメインコンテンツの高さに合せてcontentに指定した画像が繰り返されサイドバーの色がメインコンテンツの高さと揃います。Firefoxでは、メインコンテンツがサイドバーより高くなると揃わなくなります。contentに指定された画像が表示されてないようです。 どのようなことでもいいのでお教えください。手がかりがなく困っています。
- ベストアンサー
- HTML
- CSS省略
a.menu:link { color: #99CC00; background-color: #FFFFFF; margin: 5px; padding: 3px; text-decoration: none; display: block; width: auto; } a.menu:visited { color: #99CC00; background-color: #FFFFFF; margin: 5px; padding: 3px; text-decoration: none; display: block; width: auto; } a.menu:hover { color: #99CC00; background-color: #F0FFC4; margin: 5px; padding: 3px; text-decoration: none; display: block; width: auto; color: magenta; } メニューの部分のリンクについてのスタイルシートです。 訳あってこれとは別に .menu_ss .menu_s として、 width のところを 45px 100px としたものを作ろうとしていますが、 そのままだと全体がずいぶん長くなってしまいます。（３組×３） width の設定以外がほとんどかぶってしまうのですが、 この場合省略して書く方法はあるのでしょうか？ 基礎的質問で申し訳ありませんが、よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- css 画像の一部分をリンクにしたいです
画像の一部分だけをリンクにしたいです。 margin と width と height で指定したエリアをマウスオーバーすると、指定した部分だけ画像が変わってリンクになるという動作をさせたいのですが、うまくいきません。 最悪、画像が変わらなくても指定した部分のリンクができれば良いのですが画像全体がリンクになっているため、全体画像の上でマウスを動かしていると、リンク時のマウスカーソルになったり通常時のマウスカーソルになったりを繰り返しています。 html と css は以下のような記述をしています。 <html> <head> <style type="text/css"> div#menu a:hover { display:block; background-image:url(img/headerimg02.jpg); background-repeat:no-repeat; margin: 50px 468px 250px 50px; width:200px; height:100px; text-align:center; text-indent: -2000px; overflow: hidden; } </style> </head> <body> <div id="menu"> <a href="hoge.html"><img src="img/headerimg01.jpg" width="718" height="400"></a> </div> </body> </html>
- ベストアンサー
- CSS
- リストが途中で切れていても背景色は表示されるようにしたい
どうしても分らないので、教えてください。 リスト<li>を横並びにして、項目リンクを作成しているのですが、後々増えることを想定しています。 <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> <li>Menu5</li> という状態で、Menu3部分で改行されたようにすると、背景色がMenu5のところで途切れてしまいます。 （※ベースのwidthを300px、liのwidthを100px、といった感じで改行させたように見せています） <li>Menu6</li>を記述しなくても、背景色が表示されるようにしたいのですが、 <div> <ul> <li></li> ... </ul> </div> 上記のように<div>で括り、背景色を指定しても、うまくできません。 括った<div>にheigthをピクセル指定すれば表示されますが、それだと、項目が増えるたびに変更しなければなりません。 また、<li>タグにはlist-style-imageも指定しているので、 <li></li> のような空タグを入れておくのもできません。 どなたか、良い方法がありましたら、教えていただけませんでしょうか？ よろしくお願いいたします。
- 締切済み
- HTML
お礼
適切なご回答をありがとうございました。 最終の手段でアンダースコアハックで対処しようと思っていました。 大変助かりました。