li要素のblockが角丸になる理由
- li要素のblockが角丸になっている理由が分かりません。画像やCSSファイルを確認しましたが、特に理由は見つかりませんでした。
- また、liの高さに関しても疑問が残ります。パディングの値を変えた際の挙動についても理解できません。
- 上記の疑問点について、詳しい解説をお願いします。
- ベストアンサー
なぜli要素のblockが角丸に
下のサイトなんですが、 http://www.i2i.jp/fx/currency_pair.php <div id="globel_navi">の中の<li>の上部が角丸矩形になっています。 なぜ角丸になるのでしょうか？ 画像を見ると普通の長方形ですし、CSSファイルを見ても分かりません。 #globel_navi li a { padding: 8px 0 0 0; display: block; color: #FFFFFF; width: 100px; height: 17px; background: url("http://www.i2i.jp/fx/n_img/g_off.gif") no-repeat; font-size: 11px; text-align: center; } またもう一つ疑問なのですが、 liの高さは25pxあります。試しにパディングの8pxを0にするとテキストが上にぴったりと着き、liの高さが17pxとなりました。 パディングはheight17pxにプラスする形になっているのですが、パディングとはボックスのheightの中に含まれるのではないのでしょうか？（ボックスの内壁と内容との間の距離なのでは？） 上記のことがどうしても分かりません。 お教えいただけますでしょうか。
- tackross
- お礼率96% (82/85)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
> 画像を見ると普通の長方形ですし いや、角丸 > liの高さは25pxあります。試しにパディングの8pxを0にするとテキストが上にぴったりと着き、liの高さが17pxとなりました。 > パディングはheight17pxにプラスする形になっているのですが、パディングとはボックスのheightの中に含まれるのではないのでしょうか？（ボックスの内壁と内容との間の距離なのでは？） 正しい知識を得たい人の爲のCSS2リファレンス ボックスの概要と寸法 http://hp.vector.co.jp/authors/VA022006/css/box.html#introduction-box
関連するQ&A
- float横並びにしたブロックの中のul/liを縦並びにさせたい
float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。 （html） <div class="base"> <div class="box1"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> （css） ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; display: inline; } .base { width: 618px; height: 100px; margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1 { width: 130px; height: 97px; margin: 0; padding: 0; float: left; outline: solid 2px black; } .base .box2 { width: 2px; height: 100px; margin: 0 5px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3 { margin-left: 157px; padding: 0; font-weight: bold; text-align: left; } .list-y{ clear: both; } CSSに疎いのでよろしくお願いいたします。
- ベストアンサー
- CSS
- IE6／ブロック要素のliで入れ子がある場合に改行のような余計なマージンが入る
タイトルの通りなのですが、 左側サイドにタブメニューを設置しようとしているのですが、 IE6のみ、余計な改行のようなマージンが入ってしまいます。 色々と調べたのですが、どうしても解決できなかったので、お知恵をお貸しいただければと思います。 HTMLは以下のように書いています。 ＝＝＝＝ <div id="menu"> <ul id="navi-block"> <li><a href="#" onmouseover="MM_showHideLayers('p0','','show')" onmouseout="MM_showHideLayers('p0','','hide')">メニュー名</a> <div id="p0" class="set"> <ul> <li><a href="#">メニュー名</a></li> <li><a href="#">メニュー名</a></li> </ul> </div> </li> <li><a href="#" onmouseover="MM_showHideLayers('p1','','show')" onmouseout="MM_showHideLayers('p1','','hide')">メニュー名</a> <div id="p1" class="set"> <ul> <li><a href="#">メニュー名</a></li> <li><a href="#">メニュー名</a></li> </ul> </div> </li> </div> ＝＝＝＝ CSSは以下のように書いています。 ＝＝＝＝ #menu { width:218px; position:relative; z-index:2;} ul#navi-block {list-style:none;} ul#navi-block li a {display:block;width:175px; height:30px;margin:0;padding:0.75em 25px 0 20px;background: url(../images/marker_square_gray_navi.gif) right center no-repeat;border-top:#CCCCCC 1px solid;} div#p0 {left:220px; top:0;} div#p1 {left:220px; top:0;} .set { width:220px; position: absolute; visibility: hidden; z-index:3;} ＝＝＝＝
- ベストアンサー
- CSS
- display blockのレイアウトが崩れます
IEでみると、左のメニューのボタン部分が 高さが圧縮され、表位置も左よりになってしまいます。 何故崩れるのか原因がわかりません。 よろしくお願いいたします。 ul#menu { float: left; width: 150px; height: 40px; list-style: none; color: #585262; background-color: #ffffff; } ul#menu li { display: block; margin: 0; padding: 0; font-size: small; line-height:0px; } ul#menu li span { display: block; font-size: x-small; } li#c01 a { background: url(../images/navi/c01.jpg) 7px 5px no-repeat; } li#c02 { background: url(../images/navi/c02.jpg) 7px 5px no-repeat; } li#c03 a { background: url(../images/navi/c03.jpg) 7px 5px no-repeat; } li#c04 a { background: url(../images/navi/c04.jpg) 7px 5px no-repeat; } li#c05 a { background: url(../images/navi/c05.jpg) 7px 5px no-repeat; } li#c06 a { background: url(../images/navi/c06.jpg) 7px 5px no-repeat; } li#c07 a { background: url(../images/navi/c07.jpg) 7px 5px no-repeat; } li#c08 a { background: url(../images/navi/c08.jpg) 7px 5px no-repeat; } li#c09 a { background: url(../images/navi/c09.jpg) 7px 5px no-repeat; } ul#menu li a { display: block; height: 40px; padding: 5px 7px 5px 66px; border-bottom: 1px dotted #ffffff; text-decoration: none; color: #aa8f78; border: solid 2.5px; border-color:#ebdbd7 pink pink #ebdbd7; background-color: #ffdce8; line-height:normal; } ul#menu li a:hover { color: #794c2c; background-color: #eee9e2; } ul#menu li#c02 { padding: 5px 7px 5px 66px; border-bottom: 1px dotted #ffffff; height: 40px; line-height:normal; } ul#menu li#c09 a { border-bottom: none; }
- ベストアンサー
- ホームページ作成ソフト
- 助けてください。。 CSSのレイアウトについて。
CSSのレイアウトについてのアドバイスをお願い出来ましたらと 思います。m(_ _)m 添付画像の様なレイアウトがしたく、いろいろやってみましたが、 何時間かかっても上手く行かなくて。。 A(画像）、（B ○の部分がテキストでリスト）、（C ○の部分が 画像を三段重ね）、D（画像）という様に、float: left;で配置して いき、 Bの○のテキストはリストで左頭揃えにしながら、 Bのブロックごとは右寄せで右にパディングで余白を取る。 Cの○の画像は左頭揃えにしながら三段重ね、 Cのブロックごとは左寄せでパディングはゼロにしたいと いう部分で上手く行かずに悩んでいます。。 元から書かれた物を直すという作業の上で、 戸惑っています。 自分では下記の様にやってみて途中やり直しを繰り返し して混乱して頭が止まってしまいました。。 よろしければ、アドバイスの方をお願い致します。m(_ _)m ☆ HTML <div id="header"> <!-- A--> <h1><img src="hogehoge.gif" alt="" width="175" height="64" /></h1> <!-- /A--> <p class="g_navi"><a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a><br> <a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a><br> <a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a> </p> <ul class="s_navi"> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> </ul> <!--D--> Dの部分は省略。 <!--/D--> </div> ☆CSS #header { margin: 0 10px 0; padding: 28px 0 0; width: 950px; height: 102px; position: relative; line-height: 1; } #header h1{ float: left; } #header .g_navi{ margin: 8px 0 0; padding: 0 32px 0 0; float: left; width: 270px; height: 70px; text-align: right; } #header .s_navi{ margin: 8px 0 0; padding: 0 0 0; float: left; width: 238px; height: 70px; line-height: 1; font-size: 1px; } #header .s_navi li{ margin: 0 0 10px; } ------- 以下D部分は略 －－－－－－－－－
- ベストアンサー
- CSS
- 【CSS】li要素をfloatした際のブラウザ表示
はじめまして。 現在CSSでwebサイトを作成しています。 ナビゲーションにli要素を使用し、CSSで横並びになるようfloatさせているのですが、firefox・Safariでの表示がずれてしまいます。 思いつく限り検索して、幅の調整やposition関連、DTD変更なども試してみたのですが全く原因がわからず、お手上げ状態です。 DTD変更はこちらのサイト(http://2xup.org/log/2007/07/27-2111)を参考に、HTML 4.01 Transitional→XHTML 1.0 Transitionalを試してみました。 お手数おかけしますが、どなたかご教授お願いします。 ■参考 【HTML】 <div id="wrapper"> <div id="header" class="clearfix"> <h1>タイトル</h1> <ul id="menu"> <li>TOP</li> <li><a href="#">NEWS</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">BBS</a></li> <li><a href="#">LINK</a></li> </ul> </div> </div> 【CSS】 #wrapper { margin:0 auto; padding:0; width:750px; } #header { background:url(image/bgtop01.gif) no-repeat; height:125px; } #header h1,li { float:left; text-align:center; } #header h1 { width:200px; margin:50px 25px 0 50px; background:#fc0; } #menu { width:425px; } ul#menu li { width:85px; margin-top:50px; background:#ffc; } .clearfix { min-height:1% } .clearfix:after { clear:both; display:block; visibility:hidden; height:0px; content: "."; } * HTML .clearfix { height:1% } 【サンプルサイト】 http://www.memorialhall.net/ky/index_sample.php どうぞよろしくお願いします。
- ベストアンサー
- CSS
- ブロック表示すると重なってしまいます！！
下記のｃｓｓとHTMLでWEBサイトを昔作りました 上部に■いねずみ色のブロックを並べて表示しその下に左に 縦にリスト形式でメニューが並び右にピンクのブロックで項目を並べる 形式にしたのですが、右のブロックの項目の下にテキストで文章を入れたり 何かブロックを足そうとするとブロックが重なってしまい、 上手くできませんでした。 どのようにすればうまく行きますか？教えて下さいよろしくお願いします。 /* mycss.css */ html { background-color: aqua; height: 100%; } body{ height: 100%; font-family: Verdana, Arial; font-size: 14px; } body > #container{ height: auto; } #container { min-height: 100%; height: 100%; width: 90%; margin: 0 auto; padding: 0 10px; background-color: #fff; box-shadow: 0 0 3px rgba(0,0,0,0.5); } #header { width: 100%; height: 80px; background: skyblue; border-radius: 20px; } #menu{ margin-bottom: 15px; overflow: hidden; } #main{ overflow: hidden; margin-bottom: 15px; } #contents{ float: left; width: 25%; font-size: 14px; } #contents ul { margin-bottom: 15px; padding: 10px; } #contents dl{ border-bottom: 10px; border-top: 2px solid #ccc; } #contents dd{ border-top: 2px solid #ccc; } #contents ul>li>a{ text-decoration: none; } #contents ul>li:hover { background: orange; } #sidebar { float: right; width: 70%; } #sidebar ul>li { float: left; width: 230px; height: 25px; font-size: 13px; text-align: center; padding: 4px; background: #ffd8ff; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } #sidebar ul>li:hover { background: #ddd; } #sidebar ul>li>a{ text-decoration: none; display: block; } #footer{ font-size: 12px; color: #ccc; text-align: center; border-top: 1px solid #ccc; padding: 10px 0 20px; } #menu ul>li { float: left; width: 120px; height: 25px; font-size: 13px; text-align: center; padding: 2px; background: #ccc; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } #menu ul>li:hover { background: #ddd; } #menu ul>li>a{ text-decoration: none; display: block; } ----------以下HTML------------------------------------------------------------------- <!DOCTYPE html> <html lang="ja"> <head> <meta chraset="shift-jis"> <title>ああああ</title> <link rel="stylesheet" href="mycss.css"> </head> <body> <div id="container"> <div id="header"> <h1>テストページ<A></h1> </div> <div id="menu"> <h2>便利リンク</h2> <ul> <li><a href="">Google</a></li> <li><a href="">Youtube</a></li> <li><a href="">【amazon】</a></li> </ul> </div> <div id="main"> <div id="contents"> <dl> <dt>検索エンジン・リアルタイム</dt> <dd> <ul> <li><a href="">CEEK.JP</a></li> <li><a href="">Google</a></li> <li><a href="">buzztter</a></li> </ul> </dd> </dl> <dl> <dt>SNS/検索エンジン/メール/質問サイト</dt> <dd> <ul> <li><a href="">Facebook</a></li> <li><a href=""">Excite</a></li> <li><a href="">Baidu</a></li> </ul> </dd> </dl> </div><!-- #contents --> <div id="sidebar"> <ul> <li><a href=""_blank">BOOK・OFF Online</a></li> <li><a href="" target="_blank">イーブックオフ</a></li> <li><a href="">infoseekニュース</a></li> </ul> </div><!-- #sidebar --> </div><!-- #main --> <div id="footer">Copyright 2018</div> </div><!-- #container --> </body></html>
- ベストアンサー
- CSS
- Firefoxで見るとli要素レイアウトが崩れます
http://thai-kosiki.net/のサイトです。 フッターメニュー（リンク集～お問い合わせ）の部分がIEやchromeでは思ったように表示されるのですが、FirefoxやiPhoneで見ると、li要素の一番最後の文字（リンク集だと集）が下に落ちてしまいます。 ブラウザーの倍率はどちらも100％でみています。li要素やul要素の文字の大きさを小さく設定してみたり、li要素の間隔を開けてみたり試してみたのですが、うまくいきません。 フッター部分に設定したCSSです。 div#footer { width: 100%; height: 105px; background-repeat: repeat; background-position: left top; background-color: #FFF; border-top-width: thin; border-top-style: solid; border-top-color: #DFDBDC; clear: both; font-size: 75%; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; } div#footer-inner { width: 1000px; height: 105px; text-align: left; position: relative; margin-right: auto; margin-left: auto; } .footer-nav { position: absolute; left: 308px; top: 30px; width: 508px; } .footer-nav li { float: left; list-style-position: inside; list-style-image: url(../img/common/arrow.png); } .copyright { position: absolute; display: inline-block; width: 177px; left: 823px; top: 30px; } absoluteを使っているのが問題なのでしょうか？ FirefoxやiPhoneで見てもレイアウトが崩れないようにするにはどうしたらいいのでしょうか？ 間違っている点や追加した方がいい点などがありましたら教えてください。 どうぞよろしくお願いします。
- ベストアンサー
- CSS
- CSS+HTMLだけで画像を使わず、角丸タブメニューを作りたい
職場でネットショップのWEB管理をしているものですが、サイト上のヘッダーに画像を使わずCSS+HTMLだけで角丸タブメニューっぽいものを作りたいのですが、なんせCSS初心のためどこをどう指定すれば画像なしの角丸タブメニューっぽくなるのかわかりません。できたら各メニューの下段にもサブメニューリンクを追加したいのですが・・・ どうか良きアドバイスよろしくお願いします。 感じとしてはここのサイトっぽいタブメニューができればと・・・ CSS <style type="text/css"> <!-- #demo-container{padding:2px 2px 0 60px;margin:0 0 15px 0;background:#67A897;width:870px;} ul#simple-menu{list-style- type:none;width:100%;position:relative;height:27px;font- family:"inpact",Arial,sans-serif;font-size:13px;font- weight:bold;margin:0;padding:11px 0 0 0;} ul#simple-menu li{display:block;float:left;margin:0 0 0 9px;height:27px;} ul#simple-menu li.left{margin:0;} ul#simple-menu li a{display:block;float:left;color:#fff; background:#4A6867;line-height:27px;text-decoration:none; padding:0 17px 0 18px;height:27px;} ul#simple-menu li a.right{padding-right:19px;} ul#simple-menu li a:hover{color:#;background:#708090;} ul#simple-menu li a.current{color:#708090;background:#fff;} ul#simple-menu li a.current:hover{color:#9370DB;background:#fff;} --> </style> HTML <div id="demo-container"> <ul id="simple-menu"> <li><a href="#" title="MENU1" class="current">MENU1</a></li> <li><a href="#" title="MENU2">MENU2</a></li> <li><a href="#" title="MENU3">MENU3</a></li> <li><a href="#" title="MENU4">NENU4</a></li> <li><a href="#" title="NENU5">NENU5</a></li> <li><a href="#" title="NENU6">NENU6</a></li> </ul> </div>
- ベストアンサー
- HTML
- 【至急】ボックスの高さ指定
base（３つのボックスを包囲する）のボックスに背景画像をつけています。baseの中にboxを３つ横に並べてます。 ■box左は画像（背景黒でパディングで画像に黒枠をつけているようにみせている※アウトラインでやったらIEだと表示されなかったので） ■box真ん中は仕切り線（背景はなし） ■box右はテキスト（背景グレー）にしてます。 質問内容： box右【テキストの高さ】に合わせて、baseの【背景画像】とbox真ん中の【仕切り線】を延長させるにはどうすればいいのでしょうか？ （html） <div class="base"> <div class="box1_img"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2_line"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3_text"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> （css） ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; } .base { width: 618px; height: 100%;（←分からない？？） margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1_img { width: 130px; height: 97px; margin: 0; padding: 2px; float: left; background: black; } .base .box2_line { width: 2px; height: 100%;（←分からない？？） margin: 0 10px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3_text { width: 450px; margin: 0; padding: 5px; float: left; text-align: left; background: #eee; } ul .list-y{ font-weight: bold; text-align: left; } とっても切羽詰まってます！！ すぐに回答いただけると、とっても助かります。 よろしくお願いいたします。
- ベストアンサー
- CSS
- 背景と画像の間にスペースが
画像3つで角丸ボックスを作り、真ん中の部分はテキストに応じて縦に伸びるように背景にしたいのですが、IEで見ると背景と底の部分の角丸画像の間にスペースができてしまいます。Firefoxでは問題ありません。 どうすれば解決できるかお教えいただければと思います。 ［CSS］ .back{ height:auto; background: url(../images/area.gif) repeat-y ; } .txt{ width:218px; margin:0px; padding:0px; list-style:none; } .txt li{ margin:0px; padding:5px 10px 0px 13px; } img{ margin:0px; padding:0px; border:0px; vertical-align:bottom; } ［html］ <img src="images/head.gif" width="218" height="7" alt=""> <ul class="txt back"> <li>2008.03.01<br>Webサイトがオープンしました。</li> <li>2008.03.01<br>Webサイトがオープンしました。</li> </ul> <img src="images/foot.gif" width="218" height="7" alt="">
- ベストアンサー
- HTML
お礼
回答ありがとうございます。 ＞いや、角丸 うっ、あわててもう一度画像URLをブラウザのアドレスバーに入れて見てみましたが、やはり長方形に見える。 画像を保存してから画像編集ソフトで拡大して見てみると、 「か、角丸」・・・orz 失礼いたしました、角丸でした(^^; ＞正しい知識を得たい人の爲のCSS2リファレンス ボックスの概要と寸法 うぅ、どこかで思い違いしておりました。 tableのセルと同じですよね。 すっきりしました。 まことにありがとうございました。