ホームページ作成でのぐろーばるなびのバグ対策について
- html+cssで作成したホームページにぐろーばるなびを組み込んでいます。バグ対策は大丈夫でしょうか？
- ぐろーばるなびを使用したホームページには、IE6などでバグが発生する可能性があります。慣れている方に確認してもらいたいです。
- ホームページにぐろーばるなびを導入しましたが、問題がある場合は追加・変更タグを教えてください。
- ベストアンサー
ホームページの質問。
ホームページの質問。 (x)html+cssでぐろーばるなびを作りました。 ぐろーばるなびにはバグもあると聞いてますが、以下の書き方で大丈夫でしょうか？ IE6等で起きるバグとかもあるらしいんですが、慣れてる方にみてほしいです。 <!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" /> <title>時間割</title> <style type="text/css"> <!-- ul { display: inline; line-height: 2em; font-size: 1.5em; } ul li { background-color: #F00; float: left; width: 150px; height: 50px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: #990; border-right-color: #990; border-bottom-color: #990; border-left-color: #990; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 1em; list-style-type: none; text-align: center; margin: 0px; padding: 0px; } a { display: block; height: 50px; width: 150px; } --> </style> </head> <body> <ul> <li><a href="Untitled-1.html">国語</a></li> <li><a href="Untitled-1.html">図工</a></li> <li><a href="Untitled-1.html">算数</a></li> <li><a href="Untitled-1.html">社会</a></li> <li><a href="Untitled-1.html">理科</a></li> </ul> </body> </html> 問題があれば、追加・変更タグを添えて回答願います。
- risa_gal
- お礼率52% (83/159)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
参考までに ・xhtmlではcssはコメントアウトしない方がいいです ・親子要素で全く同じwidth、heightの値を指定するのは極力避ける方が無難です ・ul要素のmarginとpaddingをリセットしました(li要素はもともと0なので削りました) ・borderの指定を短くしました ・ul要素にwidthとheightを指定しました <!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" /> <title>時間割</title> <style type="text/css"> ul { width:755px; height:52px; margin:0; padding:0; line-height: 2em; font-size: 1.5em; } ul li { background-color: #F00; float: left; width: 150px; border: 1px dotted #990; border-right: 0; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; list-style-type: none; text-align: center; } a { display: block; height: 50px; } </style> </head> <body> <ul> <li><a href="Untitled-1.html">国語</a></li> <li><a href="Untitled-1.html">図工</a></li> <li><a href="Untitled-1.html">算数</a></li> <li><a href="Untitled-1.html">社会</a></li> <li><a href="Untitled-1.html">理科</a></li> </ul> </body> </html>
その他の回答 (1)
- kuzumiHK
- ベストアンサー率72% (132/183)
この段階では問題なさそうに見えますが、 下にコンテンツが追加されるとulの高さのブラウザごとの差異が余白の違いを生みそうな気がします。 ulはブロック要素のままliタグに合わせてfloatをかけておいたほうが安定しそうです。 ul { float: left; width: 750px; height: 50px; line-height: 2em; font-size: 1.5em; } 全般的にはきちんとしている内容だと思います。
関連するQ&A
- 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
- IEとFirefoxの見え方のずれにおけるCSSの解決法（liタグ）
こんにちは、質問させて下さい。 現在 li タグを使って、メニュー（画像）を作っていたのですが、 IEでは表示されるのですが、firefoxだとどうしても左に余白が出てしまいます。 マーカーボックスの指定が消えていないのかな、と素人ながらに思うのですが、それが正しいのか、正しくとも正しくなくとも、ではどう直せばいいのか分かりません。 どうぞご回答お願いいたします。 以下は、そのliに関連するCSSと、ソースです。 ■CSS #div{ width: 458px; float: left; text-align: center; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #333333; border-bottom-color: #333333; padding-top: 10px; padding-bottom: 10px; margin-bottom: 15px; margin-right: auto; margin-left: auto; padding-left: 10px; } #div ul{ list-style-type:none; display: block; width: 432px; text-align: center; margin: 0px; } #div li { float: left; height: 200px; width: 140px; margin-right: 4px; margin-bottom: 10px; margin-top: 0px; margin-left: 0px; } #div li img{ border:none; ■html <div> <ul> <li><a href="1.html"><img src="image/menu1.jpg" alt="品"></a></li> <li><a href="2.html"><img src="image/menu2.jpg" alt="品"></a></li> <li><a href="3.html"><img src="image/menu3.jpg" alt="品"></a></li> <li><a href="4.html"><img src="image/menu4.jpg" alt="品" /></a></li> <li><a href="5.html"><img src="image/menu5.jpg" alt="品"></a></li> <li><a href="6.html"><img src="image/menu6.jpg" alt="商"></a></li> </ul> </div> 宜しくお願いいたします。
- ベストアンサー
- HTML
- liタグのナビボタンがFirefoxで二重に表示。
liタグでナビボタンを縦に３つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは２段めから２つずつ表示してしまい５つのナビボタンになってしまいます。どのように記述すれば良いのでしょう？ <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }
- ベストアンサー
- CSS
- ホームページの質問です。
ホームページの質問です。 50音表を作りたいのですが、こんな感じのタグで大丈夫でしょうか？ ちょっと自信ありません。 <!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" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #iti { height: 25px; width: 300px; background-color: #FCF; float: left; clear: both; } #iti p { margin: 0px; } .ni { background-color: #9CF; height: 300px; width: 300px; float: left; clear: both; } ul { padding: 0px; margin: 0px; } ul li { width: 80px; float: left; height: 30px; background-color: #090; } --> </style> </head> <body> <div id="iti"> <p>あ行</p> </div> <div class="ni"> <ul> <li>あ</li> <li>い</li> <li>う</li> </ul> </div> <div id="iti">か行 </div> <div class="ni"> <ul> <li>か</li> <li>き</li> <li>く</li> </ul> </div> </body> </html> 問題点等ありましたら、指摘願います。また、修正点があれば教えてください。
- ベストアンサー
- HTML
- レイアウト、フッターが崩れてしまいます。
横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またｓａｆａｒｉ、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 ＊html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="＃”></div> </div> <span id="menu"><ul><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src＝”＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li></ul></span> <h2><img src="＃" alt="＃" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ～～ ～～ </div> <div id="footer"> <span align="center">©＃</span> </div> </div> </body> </html> ＊css body { font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:３0px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }
- 締切済み
- その他([技術者向] コンピューター)
- タブ式グローバルナビのブラウザ崩れの件で
はじめまして、タブ形式のグローバルナビを作成しており、以下スタイルシートを適用しております。 IE7.6だとタブを触った時にcurrent_page_item aの該当ページが背景色緑なのですが、その下に1ピクセルの隙間が生じてしまいます。 添付ご参照ください。 FireFOXだと大丈夫なのです。 ブラウザの崩れなので、どの様に修正すればよいか不明です。 どなたか教えてください。 宜しくお願い致します。 ----html------- <ul id="nav"> <li><a href="#">TOP</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">WORKS</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">ACCESS</a></li> </ul> ----------- ---------css----------- #nav { background-color: #ffffff; margin: 0; padding: 0; list-style-type: none; height: 2em; width: 800px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #00645C; } #nav li { text-align: center; float: left; line-height: 2em; } #nav li a { display: block; width: 100px; text-decoration: none; color: #333333; } #nav li a:hover { display: block; width: 100px; color: #00645C; border-top-width: 1px; border-right-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #00645C; border-right-color: #00645C; border-left-color: #00645C; } #nav .current_page_item a { color: #FFFFFF; background-color: #00645C; }
- ベストアンサー
- HTML
- スタイルシート・・・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
- 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
- インラインフレーム、ｃｓｓの質問です。
下記の3カラムのページを練習で作っているのですが、 右端のサイドバーをインラインフレームで表示させようとしたところ レイアウトが崩れてしまいます。 そもそもインラインフレーム以前のCSSの問題なのかもしれないのですが 色々調べてはみたのですが 直せなくて困っています。 どなたかお分かりになる方ご回答お願いします。 HTML,CSS,インラインフレームのHTMLの順で貼っています。 HTMLソース------------------------------ <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title></title> <link rel="stylesheet" href="C:/Documents and Settings/abc/デスクトップ/gear crafter/test2.css" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <a href=><img src="http://gearcrafter.web.fc2.com/image/testtop2.jpg" alt="" id="top" /></a></div> <div id="headermenue"> <ul class="topmenue"><a href=><li>cart</li></a><li><a href=>about us</a></li><li><a href=>Q & A</a></li> </ul> </div> <div id="side"> カテゴリ <ul type="square" compact="compact" class="sidecate"> <li><a href=>財布</a></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li> </ul> </div> <div id="main"><a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a></div> <div id="side2">sgad<iframe src="side2.html" width="80" scrolling="no" frameborder="0"></iframe> </div> <div id="footer"></div> </div> </body> </html> --------------------------------------------------------------- --CSS--------------------------------------------------------- @charset "shift-jis"; /*画像*/ img { border-style:none; } a img { border-style:none; } a:hover img{opacity:0.8;filter:alpha(opacity=80);-ms-filter: "alpha( opacity=80 )";} /*リンク*/ a:link{ text-decoration:none; color:#34494e;} a:visited{ color:#34494e;} a:hover{color:#245ba6;} a:active{color:#245ba6;} a { text-decoration: none; } /*レイアウト*/ ul.topmenue { margin-right:0px; margin-left:auto; width:29em; } ul.topmenue li { float: right; width: 8em; margin-left: 5px; padding: 2px; border: 1px #b3bc6f solid; background-color: #b3bc6f; text-align: center; } ul.sidecate { width: 2em; margin-left: 1px; margin-top: 0px; padding: 1px; border: 1px #b3bc6f solid; background-color: #d8ddb6; text-align: center; width:194px;} ul.sidecate li {text-align: left; width:194px; } #container { width : 980px; margin-left: auto; margin-right: auto; background-color :#222222;} } #header {width :960px; } #headermenue {width : 960px;} #side { float: left; margin-left: 5px; padding-top: 5px; width: 200px; background-color: #b3bc6f; text-align:center;} #main {margin: 0px 110px 0px 220px; width: 630px;} #side2 {background-color: #b3bc6f; float: right; width: 80px; margin-right: 5px;} #footer {clear: both; width: 960px; } --------------------------------------------------------------- --インラインフレーム---------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <?xml version="1.0" encoding="shift_jis"?> <style type="text/css"> <!-- body { background-color: #000000; width:80px; color:#ffffff; margin-top:0px; } --> </style> <html> <head> </head> <body> test text </body></html>
- ベストアンサー
- CSS
- ホームページ作成
ナビゲーションを作成中なのですが、教えてください。 CSSで作ってみたんですが一番右と左の白の線の１ｐｘを消したいんですが なにかいい方法ありますか？ CSSは #navi { list-style-type:none; width:750px; margin: 0; padding: 0; border-left-width: 1px; border-left-style: solid; border-left-color: #FFF; } ul#navi li { float:left; width:150px; font-family: "A-OTF 新ゴ Pr5 EL"; font-size: 14px; } ul#navi li a { display:block; padding-top:5px; padding-bottom:5px; text-align:center; text-decoration:none; color:#FFF; width:149px; border-right-width: 1px; border-right-style: solid; border-right-color: #FFF; background-image: url(../images/templete/navi2.gif); です。 よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
お礼
コメントアウトとはcssは別ページ（.css）にしたほうがいいということでしょうか？ 色々勉強になりました。 ありがとう。