- 締切済み
センター寄せにするには
以下のようなhtmlなのですがulをdivのセンターに配置するにはどうすればできますか？ <div class="pager"> <ul> <li><a href="#">リンク1</a></li> <li><span>リンク2</span></li> <li><a href="#">リンク3</a></li> </div> これに以下のようなcssを設定しているのですが左よりになってしまいます。 .pager { width: 560px; text-align: center; } .pager ul { } .pager ul li { display: inline; float: left; } .pager ul li a, .pager ul li span { display: block; line-height: 20px; margin: 0 5px; width: 20px; height: 20px; text-decoration: none; border: solid 1px #ccc; }
- dcx147
- お礼率33% (214/636)
- HTML
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
みんなの回答
ul・li共に・・・ margin-left:auto;margin-right:auto; text-align:center; では？
#1です。失礼しました。 ulにwidthが指定されていませんでしたね。多分それで。
<div class="pager"> <ul> <li><a href="#">リンク1</a></li> <li>リンク2</li> <li><a href="#">リンク3</a></li> </div> .pager { width: 560px; } .pager ul { padding-left:XXpx; width:xxxpx; } .pager ul li { line-height: 20px; width: 20px; height: 20px; border: solid 1px #ccc; } .pager ul li a:link,.pager ul li a:visited, { line-height: 20px; width: 20px; height: 20px; text-decoration: none; color:#123456; } .pager ul li a:link:hover,.pager ul li a:visited:hover, { line-height: 20px; width: 20px; height: 20px; text-decoration: none; color:#456789; } のような感じでシンプルな方向に修正できませんか？ 実際に動かしていませんので・・ なお、<span>は、ブロック要素には適用できません。
text-align: center;はインライン要素に対する指定なので、 ブロック要素であるulに対しては無効です。 .pager ul { margin auto; } でセンタリングされます。 (左右のマージンを自動→同じ値→センタリングされる)
補足
お返事ありがとうございます。 ulに指定してみましたが変わらず左寄りです。。。
関連するQ&A
- 横並びのメニューにならない
初心者です。 dreamweaverで、メニューを横並びにしたいのですが、縦のままです。 <div id="#navi"> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="#">お支払・送料</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> という風に作って CSSが、 #navi { height: 30px; width: 750px; } #navi ul { list-style: none; } #navi li { display: inline; float: left; } #navi li a{ text-align: center; display:block; } としました。 どこが間違っているのでしょうか？ あるいは何か足りないのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- Firefox2.0における5ｐｘのずれ
下記の記述（原因部分のみ一部抜粋）において、Firefox2.0では#menu部分が5px上にずれ込む現象が起こるようなのですが、どこが原因なのかわからずに困っております。 対処方法ご存知の方がおられましたらご教授願います。 XHTML <div id="menu"> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu6</a></li> </ul> </div> CSS #header,#menu,#contents,#footer { width: 950px; margin: 0px 25px; clear: both; } #menu { height: 50px; } #menu ul li,#footer ul li { display: -moz-inline-box; /* firefox2.0以前対策 */ display: inline-block; /display: inline; /* ie6,7対策 */ /zoom: 1; /* ie6,7対策 */ } #menu ul li { width: 156px; height: 22px; text-align: center; margin: 0px; padding: 13px 0px; list-style: none; border: solid 1px #333333; } もしかしたら某サイトで発見した記述であるdisplay部分が問題かとも思うのですが、どうぞよろしくお願いいたします。
- 締切済み
- HTML
- リスト内での画像の下部揃え
下記のように、上部テキスト下部画像の組み合わせで、横並びでリストを作りました。 テキストの量に合わせて、画像が上下するので、見栄えが悪いです。それをテキストは そのままの位置で、画像は下部でそろえたいと思います。それが不可能な場合 せめてすべて下部で合わせたいです。 display: inline-block; vertical-align: bottom; を記入しましたが、全く効果ありません。 どうすればよろしいのでしょうか？ HTML <body id="news" class="s"> <div > <ul class="u1" > <li><span class="time">テキスト</span> <div class="news_img"> <img src="hoge.jpg"> </li> </ul> </div> </body> CSS #news.s ul { padding: 10px; width: 100%; } #news.s li { float: left; width: 170px; height: 240px; padding:0 10px 8px 0; font-size: 12px; list-style: none; display:block; vertical-align: bottom; } #news.s li img { display: inline-block; vertical-align: bottom; border: solid 1px silver; width: 140px; height: 140px; max-width: 140px; max-height: 140px; } .news_img { display: table-cell; height: 160px; text-align: center; width: 160px; margin-top: 10px; } div.news_img div { /* IE 7 */ display: inline; zoom: 1; }
- ベストアンサー
- CSS
- テキストの揃え方について
CSSの勉強を始めて間もないのですが、下記のようにホームページを作成し、左右に均等の間隔を指定して、テキストも中央揃えになっています。<div id="01">を5段、<div id="02">で1段、この後<div id="03">と<div id="04">で合わせて2段にしたいと考えています。そのうえで、<div id="03">以降は左右に均等の間隔になっている幅の中(<div id="01">や<div id="02">が配置されている400pxの位置)で、テキストを左揃えにして配置したいと考えています。text-align: left;をCSSのいろいろなところに書いているのですが、ウィンドウの左端に配置されてしまいます。どのようにCSSに書いたら実現できるのでしょうか。CSSレベル2までの書き方でお教えください。 【HTMLの<body>内】 <div id="01_05"> <div id="01"> <ul> <li><a href="link01.html">リンク01</a></li> <li><a href="link02.html">リンク02</a></li> <li><a href="link03.html">リンク03</a></li> <li><a href="link04.html">リンク04</a></li> <li><a href="link05.html">リンク05</a></li> </ul> </div> <div id="02"> <img src="gazou01.jpg" alt="画像01" width="400" height="300" border="0"> </div> <div id="03"> </div> <div id="04"> </div> </div> 【CSS】 body { margin: 0; padding: 0; width: 100%; text-align: center; overflow: hidden; } #01_05 { margin: 0 auto; padding: 0; width: 400px; } #01 { position: relative; margin: 0; width: 100%; } ul { position: relative; left: 50%; float: left; margin: 0; padding: 0; } li { position: relative; left: -50%; float: left; display: inline; margin: 0; padding: 0; } li a { float: left; width: 80px; display: block; margin: 15px 0; padding: 15px 0; } #02 { clear: left; width: 100%; } #03 { float: left; margin: 0; width: 200px; } #04 { float: left; margin: 0; width: 200px; }
- ベストアンサー
- CSS
- リストタグを用いた段組みメニューの不具合（IE6）
数日間大変悩んだのですが解決しなかったため、どなたかご回答頂けると嬉しいです。 リストタグを横に二列並べて段組みにするようなレイアウトを作っているのですが、 IE6で確認した際にdisplay:inlineを使用しているにも関わらずリストが縦に並んでしまいます。 他のブラウザで見る際には問題が無いので、どうしたものかなと途方にくれています。 以下がhtmlとcssです。 【html】 <div class="test"> <div class="test_left"> <h3>テスト1</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="test_right"> <h3>テスト2</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="search_clear"></div> <div class="test_left"> <h3>テスト1</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="test_right"> <h3>テスト2</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> </div> 【css】 div.test { width: 500px; height: 370px; margin: 15px 0 10px 0; } div.test h3 { width: 220px; font-size: 16px; margin: 10px 10px 0 20px; } div.test ul { width: 220px; margin: 0 10px 15px 10px; list-style:none; } div.test ul li { width: 220px; display:inline; } div.test ul li a { color: #666; } div.test ul li a:hover { color: #999; } .test_clear { clear:both; } .test_left { float: left; width: 240px; } .test_right { float: right; width: 240px; } 仮にこの部分に問題が無いとすると、この要素を囲む他のcssやhtmlに問題あるのかもしれませんが、 何卒宜しくお願い致します。
- ベストアンサー
- HTML
- 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; } このような記述を致しております。 色んなサイトを見ながら作りましたので不適切な箇所も多いとは思いますがどうか宜しくお願い致します。
- ベストアンサー
- レンタルサーバ・ASP
- トップページの横幅を画面いっぱいに表示させたい。
トップページの横幅を画面いっぱいに表示させたいのですが、イメージ画像を張り付けた上部は画面いっぱいに表示しますが、下のナビ部分のバックカラーが右に広く白場が出来てしまいます。flotを使っているためなのか…。 色々試してみたのですがどうしてもできません。 よろしくお願いします。 <body> <div class="back_color"> <div class="wrapper"> <p> <img src="images/ｘｘｘ.jpg" width="1200" height="510" ></p> </div><!-- / .wrapper --> </div><!-- / .back_color --> <div class="back_color2"> <div id="nav"> <ul> <li id="top"><a href="index.html"><span>top</span></a></li> <li id="profile"><a href="profile.html"><span>profile</span></a></li> <li id="audition"><a href="audition2.html"><span>audition</span></a></li> <li id="news"><a href="news.html"><span>news</span></a></li> <li id="contact"><a href="mail.html"><span>mail</span></a></li> <li id="link"><a href="link.html"><span>link</span></a></li> </ul> </div><!-- / #nav --> <p style="color:#FFFFFF; font-size:12px; text-align:center; margin-top:60px; ">00000000000000</p> </div><!-- / .back_color2 --> </body> .wrapper { padding: 0px; height: auto; width: 1200px; margin-left:auto; margin-right:auto; } .back_color { background-color: #231a5f; width: 100%; height: 510px; } .back_color2 { background-color: #000000; width: 100%; height:150px; padding-top: 35px; padding-bottom: 35px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; margin-left:auto; margin-right:auto; } #nav { width:730px; height:30px; background-color: #000000; margin-left:auto; margin-right:auto; } #nav ul { line-height: 0; } #nav ul li { float: left; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } #nav ul li a { display: block; text-decoration: none; width:90px; height:30px; margin-left:15px; margin-right:15px; } #nav ul li a span { position: absolute; width: 0; height: 0; overflow: hidden; }
- 締切済み
- CSS
- floatしたdivの高さを画面いっぱいにした際の質問です。
下記のTIPSを利用してfloatさせたdivを画面いっぱいの高さに表示したいのですが、 FireFoxだとうまく表示されますが、IEだとものすごく縦長のページとして認識されてしまいます。 (div#catsideが長く表示されてしまうようです） IEでもうまく表示させるにはどうすればいいでしょうか。 もしこのTIPSではなく別のTIPSで同じ表示が可能でしたらそちらを教えていただければ幸いです。 よろしくお願いいたします。 ※デザイン上添付の画像のようにレイヤー化する必要があるため、z-indexは必須です。ここが邪魔しているのかなとも思うのですが・・・ ＜HTML＞ <div id="catwrapper" class="cl"> <div id="catsidemenu" class="cl"> <div id="catSidePhotoBg"> <div id="catSidePhoto"> <span>サイドバー写真</span> </div> </div> <ul> <li><a href="menu01">menu01</a></li> <li><a href="menu02">menu02</a></li> <li><a href="menu03">menu03</a></li> <li><a href="menu04">menu04</a></li> <li><a href="menu05">menu05</a></li> </ul> </div> <div id="catbody"> 略 </div> </div> ＜CSS＞ div#catwrapper{ background:#e6e6e4; overflow: hidden !important; overflow: visible; min-height: 100%; height: auto !important; height: 100%; width:1004px; z-index:-100; } div#catwrapper div#catSidePhotoBg , div#catwrapper div#catsidemenu{ float:left; padding-bottom: 32767px !important; margin-bottom: -32767px !important; padding-bottom: 0; margin-bottom: 0; overflow:hidden; height: 100%; } div#catsidemenu{ height: 100%; width: 400px; } div#catsidemenu div#catSidePhoto{ display:block; width:217px; height:800px; overflow:hidden; } div#catsidemenu ul , div#catsidemenu ul li{ 略 } div#catSidePhotoBg{ background:url(images/sidebarbg.png) repeat-y; width:257px; display:block; position:relative; z-index:150; overflow:hidden; } div#catbody{ width:auto; padding:90px 0 0; margin:0 0 0 420px; height:100%; text-align:left; } .cl { display: inline-block; } .cl:after { content: ""; display: block; clear: both; }
- 締切済み
- HTML
- 困っています。教えてください!
ブラウザ表示すると、変な場所にリンクがつきます。 置き換えた画像にリンクがつきません。 ナビゲーションを画像にして横に並べたいです。 以下にコードあります。 どこが間違っていますか？ 教えてください。 お願いいたします! -----HTML----- <div id="navi"> <ul> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="price">Price</a></li> <li><a href="#" id="catalog">Catalog</a></li> <li><a href="#" id="access">Access</a></li> <li><a href="#" id="reserve">Reserve</a></li> </ul> </div> -----CSS----- #navi { width:950px; height:48px; } #navi ul { list-style:none; margin:0px; padding:0px; } #navi li { text-indent:-9999px; float:left; width:135px; margin:0px; padding:0px; } #navi li a { display:inline; } #navi ul li a#home { display:block; width:148px; height:48px; margin-left:100px; margin-top:30px; background:url(images/home.gif) no-repeat; } #navi ul li a#price { display:block; width:135px; height:48px; margin-left:116px; margin-top:30px; background:url(images/price.gif) no-repeat; } #navi ul li a#catalog { display:block; width:154px; height:48px; margin-left:120px; margin-top:30px; background:url(images/catalog.gif) no-repeat; } #navi ul li a#access { display:block; width:135px; height:48px; margin-left:140px; margin-top:30px; background:url(images/access.gif) no-repeat; } #navi ul li a#reserve { display:block; width:155px; height:48px; margin-left:150px; margin-top:30px; background:url(images/reserve.gif) no-repeat; }
- ベストアンサー
- CSS
- ドロップダウンメニューについて
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>
- 締切済み
- ホームページ作成ソフト
補足
お返事ありがとうございます。 以下のようにしましたがやはりセンターを基準にはならないです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TITLE</title> <style type="text/css"> .pager { width: 560px; text-align: center; } .pager ul { margin auto; padding-left: 80px; width: 460px; } .pager ul li { list-style: none; display: inline; float: left; line-height: 20px; width: 20px; height: 20px; border: solid 1px #ccc; } .pager ul li a { line-height: 20px; width: 20px; height: 20px; text-decoration: none; color: #123456; } .pager ul li a:hover { color: #456789; } .pager ul:after { content: "."; display: block; height: 0px; clear: both; line-height: 0; visibility: hidden; } </style> </head> <body> <div class="pager"> <ul> <li><a href="#">1</a></li> <li>2</li> <li><a href="#">3</a></li> </div> </body> </html> atタグでくくらずテキストのみであれば親要素にtext-align:center;を指定してやれば問題ないのですが・・・