CSS・IEでボーダーを表示したい
- CSSとIEを使用して、ボーダーを表示する方法についての質問です。
- IEでナビゲーションリストのボーダーが表示されない原因を教えてください。
- 実際のソースコードを提供しました。お手数ですが、変更すべき点を教えてください。
- ベストアンサー
CSS・IEでボーダーを表示したい
お世話になります。 ホームページ構築(CSS)に関する質問です。 よろしくお願いします。 フリーのCSSサンプルサイトより、ソースをいただいて、 ページを作ってみたのですが。 ナビゲーションリストの部分で、 FireFoxでは、各メニューの右側に、仕切りの部分の「線」が、 表示されているのですが、なぜかIEでは表示されません。 まだ理解が足らないのですが、 「#navigation li a」の 「border-right: 1px double#fff;」あたりかなと思い、 線種を変えてみたりと、いろいろしているのですが 変化がありません。 変更すべき点をどうかご教授ください。 以下は実際のソースです。 「index.html」 --------------------------------------------------------------------------------------------------------------------------- <!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" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="common.css" type="text/css" /> <title>テストサイト</title> </head> <body> <div id="container"> <div id="header"> <h1>タイトル「テストサイト」 </h1> </div> <div id="navigation"> <ul> <li><a href="index.html">トップページ</a></li> <li><a href="menu2.html">メニュー２</a></li> <li><a href="menu3.html">メニュー３</a></li> <li><a href="menu4.html">メニュー４</a></li> </ul> </div> <div id="content"> <p>テストののページです。</p> <p>上記メニューよりご利用ください。</p> </div> <div id="footer"> Copyright テスト著作権, 2012 </div> </div> </body> </html> --------------------------------------------------------------------------------------------------------------------------- common.css --------------------------------------------------------------------------------------------------------------------------- @charset "UTF-8"; #container { margin: 0 auto; width: 600px; background:#fff; } #header { background:#ccc; padding: 20px; } #header h1 { margin: 0; font-size: 120%;} #navigation { float: left; width: 600px; background:#333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color:#fff; text-decoration: none; border-right: 1px double#fff; } #navigation li a:hover { background:#383; } #content { clear: left; padding: 20px; } #content h2 { color:#000; font-size: 160%; margin: 0 0 .5em; } #content h3 { font-size: 110%; } #footer { background:#ccc; text-align: right; padding: 20px; height: 1%; } -------------------------------------------------------------------------- 以上が内容になります。 どうかよろしくお願いします。
- goomod2
- お礼率66% (34/51)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
border-right: 1px double #fff; でいかが？ （double と #fff の間にスペース挿入）
関連するQ&A
- スタイルシート・・・borderが適用されない
横並びのメニューを作っていますがなぜかborderが適用されません。 多分余計な記述があるためだと思いますが分からなくなってしまいました。どなたか助けて下さい。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>テスト</title> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="header-menu"> <ul class="sample"> <li><A href="#">メニュー１</A></li> <li><A href="#">メニュー２</A></li> <li><A href="#">メニュー３</A></li> <li><A href="#">メニュー４</A></li> </ul> </div> </body> </html> .header-menu { width: 400px; overflow: hidden; } ul.sample{ margin-top:20px; font-size:12px; padding-left:0; margin-left:0; } ul.sample li{ display: inline; } ul.sample li a{ width:85px; text-decoration:none; color: #fff; background-color: #FF7F50; padding:3px 0 3px 0; margin-right:7px; width:85px; float:left; border-width:1px; border-color:#CCCCCC; text-align: center; } ul.sample li a :hover { background:none; }
- ベストアンサー
- HTML
- CSSで横並びのロールオーバーの表示がおかしいです
知人に頼まれて、ホームページを作成中なのですが、一枚の組み合わせた画像を使い、横に5つの内容を表示してbackground-positionで表示を指定して、ロールオーバーの横並びのナビを作っています。 当方はあまり知識がないなりに、様々なサイト様を参考にしたのですが、うまく表示されませんのでご助力をお願いいたします。 症状としては、画像が横並びに5つ表示はされるものの、position: 0 0; の値の画像が5つ並んで表示されます。 オンマウスも効いていません。 使用ソフトは、HeTeMULU Creator 確認ブラウザは、FireFox5 表示したい画像は、width 190px height 60pxを5つ横に繋げた950pxの画像とそれの色違いをもう一つ用意して、加工して上下に繋げた、950px 120pxの画像です。 以下ソースです。 /*---HTML*/ <?xml version="1.0" encoding="shift_jis "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <title>###</title> </head> <body> <div id="main"> <div id="menu"> <ul> <li class="menu1"><a href="#">sample</a></li> <li class="menu2"><a href="#">sample</a></li> <li class="menu3"><a href="#">sample</a></li> <li class="menu4"><a href="#">sample</a></li> <li class="menu5"><a href="#">sample</a></li> </ul> </div> </div> </body> </html> /*---CSS*/ #menu{ width: 950px; height: 60px; margin-top: 20px; margin-bottom: 20px; padding: 0px; } #menu ul{ margin: 0px; padding: 0px; } #menu li{ width: 190px; margin: 0px; padding: 0px; float: left; text-indent: -9999px; } #menu a{ display: block; width: 100%; height: 60px; background-image: url(../img/menu001.png); background-repeat: no-repeat; .menu1 a{ background-position: 0px 0px;} .menu2 a{ background-position: -190px 0px;} .menu3 a{ background-position: -380px 0px;} .menu4 a{ background-position: -570px 0px;} .menu5 a{ background-position: -760px 0px;} #menu a:hover{ background-image: url(../img/menu001.png); background-repeat: no-repeat; .menu1 a:hover{ background-position: 0px -60px;} .menu2 a:hover{ background-position: -190px -60px;} .menu3 a:hover{ background-position: -380px -60px;} .menu4 a:hover{ background-position: -570px -60px;} .menu5 a:hover{ background-position: -760px -60px;} ご指摘を宜しくお願いいたします。
- ベストアンサー
- ブログ
- 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
- CSSで画像１枚によるロールオーバー
CSSの勉強をしているのですが、Fire Fox2.0ではうまく表示されるのに対し、IE6,7では何も表示されず困っています。どこが間違っているのか教えて頂けませんでしょうか？よろしくお願い致します。 作っている物は以下の通りです。（すべて同じ階層にあります） --------------------------------------------------------------- navi.gif(100*30のメニューが横3縦2で300*30の１枚の画像) --------------------------------------------------------------- list.html（とりあえずメニュー１つだけです） <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>リストお勉強</title> <link href="list1.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="globalnavi"> <ul> <li id="btn01"><a href="#">リスト１</a></li> </ul> </div> </body> </html> --------------------------------------------------------------- list.css /* CSS Document */ .globalnavi { width:300px; height:30px; margin:0px; padding:0px; text-align:left; } .globalnavi ul { margin:0px; padding:0px; } .globalnavi li { display:block; list-style-type:none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li a { display:block; list-style-type::none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li#btn01{ width:100px; background-position:0 0; } .globalnavi li#btn01 a{ width:100px; } .globalnavi li#btn01 a:hover{ width:100px; background-position: 0 -30px; }
- ベストアンサー
- HTML
- xhtmlでページを作ったらcssのhoverの部分がFirefoxで
xhtmlでページを作ったらcssのhoverの部分がFirefoxでは動くのにIEでは上手く動きません。 どうしたらいいのでしょうか？ --xhtml-- <div class="menu"> <ul> <li><a href="#"target="content">link1</a><br/></li> <li><a href="#"target="content">link2</a><br/></li> <li><a href="#"target="content">link3</a><br/></li> </ul> </div> --css-- .menu{ width:100%; position:absolute; bottom:25%; font-weight:bolder; filter: alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; } .menu ul{ margin:0; padding:0; } .menu li{ margin-bottom:1px; list-style-type:none; float:none; font-size:1.3em; line-height:0; } .menu li a{ display:block; width:100%; line-height:25px; background-color:#ba2029; color:#ffffff; text-align:center; text-decoration:none; border-left:solid 10px #880000; } .menu li a:hover{ background-color:#95195a; }
- ベストアンサー
- HTML
- 画像の貼り方教えてほしいです
CSSの画像の貼り方がわかりません body{ background-color: #f2f2f2; padding: 0; margin: 0; } div#container { width: 700px; padding: 0; margin-left: 150px; background-color: white} div#header { background-color: blue; badkground-image: url(画像.jpg); width: 640px; height: 233px ｝ 画像の部分のCSSはこんな感じです。 htmlは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="roll.css" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="menu"> <ul> <li><a href="#">web</a></li> <li><a href="#">title1</a></li> <li><a href="#">title2</a></li> <li><a href="#">css</a></li> <li><a href="#">seo</a></li> </ul> </div> <div style="clear:both; "></div> </div> </body> </html> こうなってます。 ここまで何が間違っているかわかりません。 初心者ですがどなたかわかる方よろしくお願いします。
- 締切済み
- HTML
- IE6でli間に出来る隙間を無くす方法について
下記のソースをIE6で閲覧すると「リンクあり２」と「リンクあり３」の間に隙間ができてしまい、この隙間を除きたいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 なお、Firefox等では隙間は出来ませんでした。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { margin: 0; padding: 0; } ul, li { margin:0; padding:0; } li { list-style: none; } #mainlinkbox { width:100px; } #mainlinkbox li.nolink, #mainlinkbox li.link a { width:97px; border-bottom: 1px dotted blue; padding-bottom: 3px; padding-left: 3px; padding-top: 4px; background-color:red; } #mainlinkbox li.link { position:relative; } #mainlinkbox li.link a { display:block; } #mainlinkbox li.link a:hover { background-color: #c2f4a3; } #mainlinkbox li.link .submainlinkbox { left: 100px; position: absolute; width: 100px; background: yellow; } --> </style> </head> <body> <ul id="mainlinkbox"> <li class="link"><a href="#">リンクあり１</a></li> <li class="nolink">リンクなし</li> <li class="link"><a href="#">リンクあり２</a><div class="submainlinkbox">サブ項目</div></li> <li class="link"><a href="#">リンクあり３</a></li> </ul> </body> </html>
- ベストアンサー
- CSS
- ナビゲーション表示のCSSについて質問させて下さい。
ナビゲーション表示のCSSについて質問させて下さい。 本を参考に以下のようなソースを試しているのですが、各メニューの幅を統一するためにはどうしたらいいのでしょうか？ 試しにと、width: 200px;として、li内に設定したりしていますが、変わる気配がありません。 /*css*/ ul{ list-style: none; text-align: center; margin: 30px 0px; color: #fff; } li{ display: inline; white-space: nowrap; } li a{ text-decoration: none; padding: 10px 10px; color: #fff; background: transparent; background: #f60; } li a:hover { color: #fff; background: #fc0; } ～html～ <ul> <li><a href="A.html">項目Ａ</a></li> <li><a href="B.html">項目Ｂ</a></li> <li><a href="C.html">項目Ｃ</a></li> <li><a href="D.html">項目Ｄ</a></li> <li><a href="E.html">項目Ｅ</a></li> </ul> お恥ずかしい質問かと思いますが、アドバイスのほど頂戴できたら幸いです。 お忙しいなか恐縮ですが宜しくお願い申し上げます。
- ベストアンサー
- HTML
- HTML・CSSタグの書き方教えてください！
画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。 このHOMEの左側のボーダーを消したい（又は見えなくする）タグを教えてください。 最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、 変わらず…。 どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか？ よろしくお願いいたします。 ＜HTML＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv= "content-style-type" content= "text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="css/style.css"rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div><!-- header終わり --> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div><!-- menu終わり --> <div id="main"> <div id="contents"> ***コンテンツ*** </div><!-- contents終わり --> <div id="leftsidebar"> ***左サイドバー*** </div><!-- sidebar終わり --> </div><!-- main終わり --> <div id="rightsidebar"> ***右サイドバー*** </div><!-- sidebar終わり --> <div id="footer"> ***フッター*** </div><!-- footer終わり --> </div><!-- wrapper終わり --> </body> </html> ＜CSS＞ <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅（#wrapper）を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅（#content）を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅（#content）を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }
- ベストアンサー
- HTML
- CSS IEバグ リストの後の隙間を消したい
よろしくお願いします。 以下のメニューで、"sub_menu02" の下に隙間が出てしまいます。 IEのバグのようなのですが、回避方法ご教授願います。 *実際は、の部分はJAVASCRIPTによるプルダウンになってます。 --------------------------------------------------------------- <style> * { margin : 0; padding : 0; } body { margin : 0; padding : 0; background: #fafafa; } #slidemenu_sample { overflow:hidden; } #menu_1 { padding: 0; margin: 0 0 0 0; background-color: #e7f6ff; } div#contentsArea div#sNaviArea{ width: 175px; float: left; } div#contentsArea div#sNaviArea dd{ width: 163px; background: #ffffff; } div#contentsArea div#sNaviArea dd ul{ width: 163px; list-style: none; } div#contentsArea div#sNaviArea dd ul li{ width: 163px; border-top: 1px solid #dddddd; margin: 0; padding: 0; display: block; } div#contentsArea div#sNaviArea dd ul li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul li a{ display: block; padding: 5px 0 5px 17px; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li{ width: 153px; margin: 0 0 0 10px; display: block; background: #ffffff; } </style> <body> <div> <div id="contentsArea"> <div> <div id="sNaviArea"> <dl> <dd> <ul> <li><a href="">menu01</a></li ><li class="choice"><a href="">menu02</a><ul class="sNaviSmall"><li><a href="">sub_menu01</a></li><li id="slidemenu_sample"><a href="" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">sub_menu02</a><ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')"><li><a href="">aaaaa</a></li><li><a href="">bbbbb</a></li><li><a href="">cccccc</a></li></ul></li ><li><a href="">sub_menu03</a></li></ul> </ul> </dd> </dl> </div> </div> </div> </div>
- 締切済み
- HTML
お礼
ご回答ありがとうございました。 まさにそのとおりでした、初歩的なところでお恥ずかしい・・・ 大変助かりました。本当にありがとうございます。