インラインフレーム、ｃｓｓの質問です。
- 下記の3カラムのページを練習で作っているのですが、右端のサイドバーをインラインフレームで表示させようとしたところレイアウトが崩れてしまいます。
- そもそもインラインフレーム以前の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>
- gogo0319
- お礼率33% (44/131)
- CSS
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
DOCTYPEはframesetではなく、transitinal(Loose DTD)です。 iframeを使うので、frameと思われたのでしょうが、仕様書の要素索引を見ればわかるはずです。 ただ、XHTML1.0の仕様書には要素索引が無いのでHTML4.01のものを見るほうが早いです。(XHTML1.0はHTML4.01と基本的に同じものですから) 要素索引 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/elements.html ) のiframeの右の欄に[L}と書かれているのは、DTDはtransitinalであるということです。 さて、HTMLやCSSはvalidatorを使えば、たちどころにエラーがわかるので詳細は書きません。 ★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) など。 たくさんエラーが見つかると思いますので、詳細は割愛します。 【こんな複雑なCSSやHTMLの前にHTML,CSSの基本を、しっかりと押さえることが肝要かと思います。そのほうが早い!!】 私は、現在HTML4.01strictがメインで、XHTMLからは手を引いています。(XHTMLの将来に暗雲が立ち込めている・・・)。ウェブ標準は、HTML5(およびサブセットのXHTML5)に移行しそうですから。そしてHTML5はHTML4.01strictの改良型ですから。 さて、この問題はインラインフレームの問題ではなく、単に３カラムの設定によるものです。 一言で言うと、floatを使ってレイアウトをするために、必然的に起こり得る問題です。すなわち、「はみ出せば回り込みが解除される。」という点です。 floatを使う限り、『文書の順番が本来の姿(順番)から逸脱してしまう。レイアウトに文書構造が引っ張られる』『様々な解像度、ウィンドウサイズに対応しきれない』『障害者のためのアクセスビリティが失われる』という問題は必ず発生します。それを承知の上で利用してください。 floatを使う場合は、必ずサイズの合計がコンテナブロックの内寸より小さくなるようにしなければなりません。 [参考] floatによる段組について - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7079628.html )
その他の回答 (1)
- outbrave
- ベストアンサー率60% (231/380)
#side #main #side2 の3つを縦に並べたいのですかね。 まず、横幅の計算間違い #container が 960px この中に #side 200px + 5px #main 630px + 110px + 220px #side2 80px + 5px 合計 1250px なので入る訳がありませんので考え直してください。 次に文法間違い まず、DOCTYPE 宣言ですが Frameset は使用しません。 css のカッコの対応にも間違いがあります。 インラインフレームの方は、１からやり直してください。 これらは検証サイトで確認してください。 レイアウトですが下記のような感じになると思いますので参考にしてください。 <?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"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <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" /> <title></title> <style type="text/css"> #container { width: 960px; margin: 0 auto; background-color: #222222; color: #cccccc; } #headermenue { background-color: #999999; } #side { float: left; margin-left: 5px; width: 200px; background-color: #993333; height:200px; } #main { float: left; width: 670px; background-color: #666666; height:200px; } #side2 { float: left; width: 80px; margin-right: 5px; background-color: #b3bc6f; height:200px; } #footer { clear: both; background-color: #339933; } </style> </head> <body> <div id="container"> <div id="headermenue"> headermenue </div> <div id="side"> sidecate </div> <div id="main"> main </div> <div id="side2"> sgad </div> <div id="footer"> footer </div> </div> </body> </html>
補足
>css のカッコの対応にも間違いがあります どのように違うのでしょうか？ 初歩的な質問ですみませんが、見当もつかないので 教えていただけたら助かります。
関連するQ&A
- 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
- CSSのみで作る横ドロップダウンメニュー
教えてください。白旗です。 クライアントの指示でCSS＋xhtmlのみでサイトを作成していますが、横並びのプルダウンメニューで行き詰りました。 IE6以外のブラウザでは正常な表示をされるのですが、IE６のみへんてこりんになってしまいます。 下記ソースで、メニューAにマウスを乗せてドロップダウンをさせると、メニューBが右に動きます。 これに2日間はまってます。 よろしくお願いします。 ---ソース--- 【html】 <div id="gnavi_container"> <div id="gnavi"> <ul> <li class="gmenu02_off" onmouseover="this.className='gmenu02_on'" onmouseout="this.className='gmenu02_off'"><a href="#"><img src="img/1.jpg" width="122" height="25" alt="" onmouseover='this.src="img/3.jpg"' onmouseout='this.src="img/1.jpg"' /></a> <ul class="gmenu_sub"> <li><a href="#"><img src="img/4.jpg" width="138" height="19" alt="" /></a></li> </ul> </li> <li class="gmenu03_off" onmouseover="this.className='gmenu03_on'" onmouseout="this.className='gmenu03_off'"><a href="#"><img src="img/2.jpg" width="81" height="25" alt="" onmouseover='this.src="img/2.jpg"' onmouseout='this.src="img/2.jpg"' /></a> </li> </ul> </div> </div> 【css】 img{ border:0; } div#gnavi_container{ position : relative; z-index:100; width:800px; height:25px; text-align:left; } div#gnavi ul { margin: 0; padding: 0; list-style: none; } div#gnavi li { float : left; margin : 0; padding : 0; } .gmenu_sub li{ overflow:visible: } .gmenu02_off{ height:25px; width:122px; overflow : hidden; } .gmenu02_on{ width:122px; overflow :visible; } .gmenu03_off{ height:25px; width:81px; overflow : hidden; } .gmenu03_on{ width:81px; overflow :visible; } div#gnavi ul.gmenu_sub{ margin : 0; padding : 0; } div#gnavi ul.gmenu_sub li{ margin : 0; padding : 0; float : none; clear : both; }
- 締切済み
- HTML
- CSSの左横に隙間ができてしまいます。
画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->
- ベストアンサー
- CSS
- CSS画像・文字混在縦メニュー
画像と文字使った縦メニューを作成しています。 レイアウトがズレたり隙間ができたりでどうしてもうまくいきません。 どうぞお知恵をお貸しください。 よろしくお願いいたします。 【CSS】 @charset "utf-8"; /* CSS Document */ /* ナビ設定 */ #navi1 { margin: 0px; padding: 0px; position: relative; right: 10px; width: 200px; float: right; } #navi1 li { margin: 0px; padding: 0px; position: relative; width: 200px; float: right; } #navi1 #navi1_title { width: 200px; position: relative; } .sub_menu { width: 190px; position: relative; float: right; left: 5px; } .sub_menu ul { list-style: none; border-top: 1px solid #CCCCCC; width: 190px; position: relative; } .sub_menu li { border-bottom: 1px dashed #CCCCCC; background: #F3F0EA url(img/xx.jpg) no-repeat left center; width: 190px; } .sub_menu a { display: block; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 180px; /*Window IE5用の値を指定 */ color: #666; text-decoration: none; font-size: 11px; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 10px; background-color: #F3F0EA; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; left: 3px; } .sub_menu a:hover { color: #666; width: 180px; background-color: #E4DECF; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; } 【HTML】 <div id="navi1"> <h2><img src="img/menu1_title.png" width="200" height="50" alt="qqq" /></h2> <ul> <li><img src="img/menu_y.png" width="200" height="32" alt="zzz" /></li> </ul> <ul class="sub_menu"> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> </ul> <ul> <li><a href="#"><img src="img/menu_a.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_b.jpg" width="200" height="32" alt=xxx" /></a></li> <li><a href="#"><img src="img/menu_c.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_d.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_e.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_f.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_g.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_h.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_i.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_j.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_k.jpg" width="200" height="32" alt="xxx" /></a></li> </ul> </div>
- ベストアンサー
- HTML
- ＣＳＳレイアウトの配置ずれについて
本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。 以下、htmlとcssです。 html↓ <body> <div id="newBook"> <div class="item"> <ul id="slideItems"> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--2ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--3ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> </ul> </div> <div class="leftBtn"> <a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div> <div class="rightBtn"> <a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div> </div> </body> css↓ #newBook { margin: 30px; position: relative; } .item { height: 115px; width: 500px; padding: 10px 0px; overflow: hidden; position: absolute; left: 40px; top: 0px; } .leftBtn,.rightBtn { text-align: left; width: 40px; position: absolute; top: 0px; } .leftBtn { text-align: left; left: 0px; } .rightBtn { text-align: right; left: 540px; } .item ul { width: 1500px; position: absolute; left: 0px; top: 0px; } .item li { background-color: #999999; height: 100px; width: 100px; list-style-type: none; padding: 10px 0px 5px; float: left; text-align: center; } #slideItems { position: absolute; left: 0px; top: 0px; }
- 締切済み
- その他([技術者向] コンピューター)
- IE7で表示すると画像に隙間があきます。
WEBサイトを作っているのですがIE７で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }
- ベストアンサー
- HTML
- 【CSS】右側エリアがずれ込む
CSS初心者で、会社のサイトの変更をしています。 現状メイン画像1枚のレイアウトだったところを 差換えでjavascriptで画像を切り替え、リンク先も変更できるようにしました。 はめ込んだところ、右側のボタンがずれ込みます。 何をどうしたら解決できるかわかりません。 どうしたら修正できますでしょうか。 よろしくお願い申し上げます。 ≪修正前のレイアウト≫ □□□□□□□□□ ■■■■■ □□メイン画像□□ ■ボタン■ □□□□□□□□□ ■■■■■ 【HTML】 <div id="keySpace"> <p> <a href="shopping/index.html"><img src="img/key.jpg" border="0" /></a></p> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS外部】 #keySpace { width: 860px; margin: 0px auto; padding: 0px 0px 7px; background: #FFF; } #keySpace p { width: 643px; margin: 0px 12px 0px 0px; float: left; display: inline; } #keySpace ul { width: 205px; float: right; } #keySpace ul li { margin: 0px 0px 3px; } ≪修正後のレイアウト≫ □□□□□□□□□ □□メイン画像□□ □□□□□□□□□ ■■■■■ ■ボタン■ ■■■■■ 【HTML】 <div id="keySpace"> <p> <div id="link1"> <a href="index.html"><img border="0" src="img/top_01.jpg" /></a></div> <div id="link2" class="banner"><a href="shopping/index.html"><img border="0" src="img/top_02.jpg" /></a></div> </p> <ul> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS】上記に追加 <style type="text/css"> .banner { display:none; } </style>
- ベストアンサー
- HTML
- 画像を挿入して横並びのメニューリストを作ったのです
が、margin-top,margin-bottom(margin-leftはききます）がききません。何が原因でしょうか？ 以下がソースです。 ～html～ <ul id="menu"> <ul> <li>a href="#"><img src="〇〇.jpg"alt="〇〇" width="167" height"59"/></a></li> <li><a href="#"><img src="△△.jpg"alt="△△" width="167" height"59"/></a></li> 省略 </ul> ～css～ ul#menu {margin-left: 45px} ul#menu li {list-style-type: none; float: left} ul#menu li a {display: block; width: 181px} ul#menuのところに記述しましたが、変化ありませんでした。
- ベストアンサー
- CSS
- CSSの継承について...
CSSの勉強をしつつ、HPビルダー17を使ってHPの制作しているですが、 前のulタグで使った背景画像がずっと継承されて困っております。 当方の内容です↓ 【CSS記述】 ----------------------- #manu-nanyo{ display: block; position: absolute; background-image: url(fu/area_nanyo.png); background-repeat: no-repeat; background-position: center top; color: black; width: 200px; height: 40px; } .job-menu ul{ display: block; list-style-type: none; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 10px; padding-bottom: 10px; border-right-width: 1px; border-right-style: solid; border-right-color: silver; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: silver; text-decoration: none; } .job-menu li{ margin: 0; padding: 0; background: url(img/migi_aka.png) left no-repeat; } .job-menu a{ display: block; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 14px; color: black; font-size: 15px; text-decoration: none; } .job-menu a:hover{ background-color: rgb(204, 204, 204); color: red; } #newshop_bunner{ frot: left; width: 200px; padding-top: 10px; text-align: left; background-position: top left; } .newshop-banner ul{ margin-top: 20px; margin-left: 0; padding-left: 0; } .newshop-banner li{ text-decoration : none; text-align : right; font-size: 12px; } .newshop-banner a{ margin-top: 0px; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; color: blue; font-size: 12px; text-decoration: none; text-align: right; } .newshop-banner a:hover{ background-color: white; color: lime; } ul.sample{ width:100%; margin-top:20px; font-size:10px; padding-left:0; margin-left:0; } ul.sample li{ list-style-position: outside; background-color: transparent; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; background-size: auto auto; background-origin: padding-box; background-clip: border-box; padding-top: 3px; padding-right: 10px; padding-bottom: 3px; padding-left: 10px; width: 120px; float: left; border-width: 2px; border-color: rgb(255, 238, 219); border-style: ridge; } .list-test1{ float: left; list-style-type: none; margin-top: 40px; padding-top: 40px; color: orange; } 【HTML記述】 ----------------------- <div id="manu-nanyo"> <div class="job-menu"> <ul> <li><a href="*">野球</a> <li><a href="*">サッカー</a> <li><a href="*">テニス</a> <li><a href="*">ゴルフ</a> <li><a href="*">バスケ</a> </ul> </div> <div id="newshop_bunner"><img src="img/newstore-img.png" alt="新店舗"> <ul class="newshop-banner"> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> </ul> <ul class="sample"> <li><a href="#">テスト1</a> <li><a href="#">テスト2</a> <li><a href="#">テスト3</a> <li><a href="#">テスト4</a> <li><a href="#">テスト5</a> </ul> <ul class="list-test1"> <li><a href="#">トップページ</a> <li><a href="#">テストページ1</a> <li><a href="#">テストページ2</a> </ul> </div> ----------------------- .job-menu li で使った背景画（矢印）・スタイルが、その後 li を使う度に継承されてしまいます。 クラス名やID名を付けてそれぞれの属性を指定すれば分居ができるのかと色々と試してみたのですが旨くいかず・・・ (ul属性・a属性で分けても継承されてしまいます） 試し過ぎて、もう意味が分からなくなってしまって自分では解決出来そうにないので、初歩的なことで申し訳ありませんが、質問をさせて頂きました。 ネット等で調べた感じでは、「クラスを分けて指定すればulの住み分けが出来る」と判断したのですが、そういうことではないのでしょうか？ それとも根本的な何かを履き違えしているのでしょうか？ 宜しくお願い致しますm(_ _)m
- 締切済み
- デザイナー・クリエイティブ職
- cssスプライト positionが効かない
現在サイトを制作中で、グローバルナビのcssスプライトでつまずいてしまいました。 background-positionがなぜか効きません、、、、。 htmlとcssのチェックをしていただけないでしょうか？？ どなたか親切なかた宜しくお願い致します！！ <div id="gnav"> <ul> <li class="gnav_1"><a href="#"><img src="images/gnav_home.png" width="164" height="60" alt="ホーム" /></a></li> <li class="gnav_2"><a href="#"><img src="images/gnav_intro.png" width="164" height="60" alt="初めての方へ" /></a></li> <li class="gnav_3"><a href="#"><img src="images/gnav_staff.png" width="164" height="60" alt="スタッフ紹介" /></a></li> <li class="gnav_4"><a href="#"><img src="images/gnav_price.png" width="164" height="60" alt="料金" /></a></li> <li class="gnav_5"><a href="#"><img src="images/gnav_access.png" width="164" height="60" alt="アクセス" /></a></li> <li class="gnav_6"><a href="#"><img src="images/gnav_q&a.png" width="164" height="60" alt="よくあるご質問" /></a></li> </ul> </div><!--gnav--> --------------------------------css------------------------------ #gnav { overflow: hidden; } #gnav ul { margin: 24px 0 0 7px ; } #gnav ul li { float: left; width: 164px; height:60px; background: url(images/gnav_on.png) 0 0 no-repeat; } #gnav ul li a { display:block; } .gnav_2 { background-position: -164px 0; } .gnav_3 { background-position: -328px 0; } .gnav_4 { background-position: -492px 0; } .gnav_5 { background-position: -656px 0; } .gnav_6 { background-position: -820px 0 ; } #gnav ul li a:hover img{ visibility:hidden; }
- ベストアンサー
- CSS
お礼
＞DOCTYPEはframesetではなく、transitinal(Loose DTD)です。 恥ずかしながら、大は小を兼ねる的なノリで使ってました。 そして沢山エラーが出ました！ 基礎から一個ずつ勉強していきます。 ご教授ありがとうございました。