- ベストアンサー
ブラウザによってナビのデザインが変わる問題について
- ブラウザによってナビのデザインが変わる問題について説明します。
- ナビ部分のデザインがブラウザによって異なる現象が発生しています。
- ナビのCSSとソースコードについて詳細な説明をします。
- みんなの回答 (8)
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- お世話になっております。fc2でblogを運営しているものです。
お世話になっております。fc2でblogを運営しているものです。 テンプレートをいじってロールオーバーボタンを作ってみたいのですがどうしてもできません。 以下ソースになります。 HTML: <!--navi--> <div id="navi"> <div class="navi01"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン トップ" border="0" width="120" height="30" /></a> </div> <div class="navi02"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン イラスト" border="0" width="120" height="30" /></a> </div> <div class="navi03"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン マンガ" border="0" width="120" height="30" /></a> </div> <div class="navi04"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン その他" border="0" width="120" height="30" /></a> </div> <div class="navi05"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン 掲示板" border="0" width="120" height="30" /></a> </div> <div class="navi06"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン メール" border="0" width="120" height="30" /></a> </div> </div> <!--navi--> CSS: #navi { margin : 0 auto; margin-top : 5px; width : 800px; } .navi01 { float : left; margin-left: 15px; } .navi02 { float : left; margin-left: 10px; } .navi03 { float : left; margin-left: 10px; } .navi04 { float : left; margin-left: 10px; } .navi05 { float : left; margin-left: 10px; } .navi06 { float : left; margin-left: 10px; } です。navi01~navi06までがボタン。それをnaviでグループ化しているイメージです。 ○○○○○○には当然ソースが書いてあります。各ボタンのロールオーバー用ボタンは用意してあります。 どのようなHTML、CSSを書けばよろしいでしょうか。よろしくお願いいたします。
- ベストアンサー
- ブログ
- [CSS] 入れ子DIVの、親・子 両方でFloatする方法
ベテランの皆様で、もしこの問題の解決策をお持ちの方がいらっしゃったらぜひよろしくお願いいたします。 入れ子になっているDIVを、CSSで配置しようとしています。 <DIV> <Div>左上のロゴ画像(Float: Left)</Div> <Div>右側のメニュー(Float: Left)2段にする <div>1段目 text-align: right</div> <div>2段目 この中にも入れ子でFloat leftのDIVと画像を並べる</div> </Div> </DIV> という構造を作りたいのですが、 <div>2段目 この中にも入れ子でFloat leftのDIVと画像を並べる</div> ↑の中、及び <Div>右側のメニュー(Float: Left)2段にする の部分が、IE6、Opera6でうまくfloatされません。 文章で書くとわかりづらいため、図にしたものをアップしてみました。 http://sakuratan.ddo.jp/imgboard/img-box/img20071027012919.gif ソースコードを以下にコピペしますので、それぞれ 「test.html」「testcss.css」 といった名前をつけて同階層に保存していただけると、現象見えると思います。 この問題でずっと頑張っているのですが・・何か解決策お持ちの方、どうぞよろしくお願いいたします。 以下、ソースコード -------------------------test.html-------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=EUC-JP" /> <meta name="robots" content="index,follow" /> <title>トップページ</title> <link href="./testcss.css" media="all" rel="stylesheet" type="text/css" /> </head> <body> <form name="fmMain" id="fmMain" method="POST" action="" enctype="multipart/form-data"> <div id="wrap"> <div id="header"> <div id="navi"> <div class="logo" style="border:0;"> <a href="./"><img src="./img/index/navi_home.jpg" alt="ホーム" border="0" /></a></div> <div class="left"> <div id="navi_favor"> このページをお気に入りに登録できます <input type="submit" name="brSrch" value="登録" /> </div> <div id="navi_items" style="padding-left:20px;"> <div class="navi_item_tsushin"> <a href="#"><img src="./img/index/navi1.jpg" alt="" border="0" /></a></div> <div class="navi_item_campain"> <a href="#"><img src="./img/index/navi2.jpg" alt="" border="0" /></a></div> <div class="navi_item_shop"> <a href="#"><img src="./img/index/navi3.jpg" alt="" border="0" /></a></div> <div class="navi_item_link" style="border: 0;"> <a href="#"><img src="./img/index/navi4.jpg" alt="オススメリンク" border="0" /></a> </div><br clear="left" /> </div> </div> </div> </div> </div> </form> </body> </html> -------------------------testcss.css------CSS部------------------ @charset "euc-jp"; * { margin: 0px; padding: 0px; } body { background-color: #FFFFFF; font-size:10px; line-height: 12px; font-family: "MS P ゴシック", Osaka; } #wrap { width: 610px; } #header { width: 610px; } #navi { clear: left; } #navi_favor { padding:10px 3px 20px; text-align: right; color: #436921; } #navi_items { pading-left: 30px; width: 450px; } #navi .navi_item_tsushin{ float: left; border-right: 2px solid #335914; width: 99px; } #navi .navi_item_campain{ float: left; border-right: 2px solid #335914; width: 132px; } #navi .navi_item_shop{ float: left; border-right: 2px solid #335914; width: 90px; } #navi .navi_item_link{ float: left; border-right: 2px solid #335914; width: 116px; } .logo { /* position:relative; */ float: left; width: 136px; margin-right: 3px; } .left { /* position:relative; */ float: left; width: 470px; }
- 締切済み
- HTML
- CSSで表示が、、、
写真を並べているページなのですが、 firefox と IE での縦のスペースの空き具合が異なってしまいます。 IEで見ると、firefoxよりも大きく立て幅が空いてしまい 揃ってくれません。 回避策をググって色々試してみたのですが 上手くいきませんorz ひょっとしたらコード的にどこかおかしいのかも しれないのですが、、、どなたか助言をお願いしますm(_ _)m -- html-- <div class="navi" > <div class="pic2"><a href="01.html"><img src="pic/1mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="02.html"><img src="pic/2mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="03.html"><img src="pic/3mini.jpg" width="200" height="147" border="0" /></a></div> <div class="pic2"><a href="04.html"><img src="pic/4mini.jpg" width="200" height="151" border="0" /></a></div> </div><!--navi--> -- 外部CSS -- .pic2 { float: left; margin-left:30px; margin-top:20px; } .navi { clear:both; margin-top:40px; }
- ベストアンサー
- CSS
- 【CSSについて】リストをフロートするとfirefoxでボーダーが消える
お世話になっております。 今回は、CSSの質問です。 IE6.0とFF3.0の違いなのですが、ソースを以下に記述します。 ***HTML*** <ul id="navi"> <li><a href="#">風景</a></li> <li><a href="#"> 生き物</a></li> <li><a href="#">建物</a></li> <li><a href="#">乗り物</a></li> </ul> ***CSS*** #navi { margin-left: 0px; padding-left: 0px; list-style-type: none; width: 600px; border-right: 1px solid #333333; } #navi li { float: left; border-left: 1px solid #000000; border-top: 1px solid #333333; border-bottom: 1px solid #000000; width: 149px; } #navi a { display: block; background-color: #ff9900; color: #FFFFFF; text-decoration: none; width: 149px; line-height: 30px; text-align: center; font-size: 12px; font-weight: bold; letter-spacing: 0.5em; } #navi a:hover { background: #00FFFF; color: #000000; } IEではボーダーで区切られたナビがキレイに表示されますが、FFでは右端のボーダーが消えてしまいます。 これもハックしなきゃならないものですか? とりあえず、背景に画像を使用することで逃げられるのですが、すっきりしませんので対処法を教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px~2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- div#left {width:50%;
div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか? <html> <head> <title>a</title> <style type="text/css"> <!-- div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} --> </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか?
- 締切済み
- HTML
- テキストの揃え方について
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
- IE7のfloatの回り込みがうまくきません
お疲れ様です。いつもお世話になっております。 FF2、Opera、IE7という3つのブラウザでコーディングしたHTMLをチェックしている状態です。 下記に問題のHTMLとCSSを記述します。 <div id="common_border"> <div id="common_border_side"> <div id="common_border_top"></div> <div id="l_navi"> <ul> <li id="l_navi_1"><a href="">ナビ1</a></li> <li id="l_navi_2"><a href="">ナビ2</a></li> <li id="l_navi_3"><a href="">ナビ3</a></li> </ul> </div> <div id="explain"> <h1>説明</h1> <dl> <dt>内容1</dt> <dd>説明が入ります。</dd> </dl> <dl> <dt>内容2</dt> <dd>説明が入ります。</dd> </dl> </div> <div id="common_border_bottom"></div> </div> </div> </div> common_borderのtop,bottomは丸角の枠画像です。 sideには1pxの背景画像が入ります。 /*---------丸角の枠線を表示するCSS--------------*/ #wrapper #common_border{ width:736px; margin:10px 82px; padding:0; } #wrapper #common_border_top{ background:url(../img/common_border_top.jpg) no-repeat; height:10px; padding:0; margin:0; } #wrapper #common_border_side{ background:url(../img/common_border_back.jpg) repeat-y; margin:0; padding:0; } #wrapper #common_border_bottom{ background:url(../img/common_border_bottom.jpg) no-repeat; height:20px; padding:0; margin:0; } /*----------------左のナビゲーション------------------*/ #wrapper #l_navi{ float:left; margin:0; padding:0; width:200px; } #wrapper #l_navi ul{ list-style:none; padding:0 20px; margin:25px 0; } #wrapper #l_navi ul li{ margin:0 0 5px; } /*-------------説明部分-----------------*/ h1{ text-indent:-9999px; background:url(../img/productexplain.jpg) no-repeat; margin:20px 0 10px 180px; } p{ margin:0; padding:0; } #explain{ text-align:left; width:506px; margin:0 35px 30px 15px; padding:0; } #explain dl dt{ color:#8E2E00; } 差し障りのないようところどころ端折ってます。 出来上がりは適当ですが、下記のようになります 丸角の枠線画像(上) ナビ1 h1の説明 ナビ2 説明1 ナビ3 説明2 丸角の枠線画像(下) ナビをfloat:leftにしていて、explainにはfloatをかけていません。 explainをfloatすると、なぜか丸角の枠線画像(下)の下にナビ、explainともに表示されてしまうためです。 なので、ナビにfloatをかけた状態で、そのナビを内包するかたちでexplainに左のmarginを210pxとり、 explainのwidthを680pxほどにすることで、OperaとFFはきれいに表示されました。 ボーダーを表示させると 丸角枠線画像(上) ┏━━━━━━━━━━━ ┃┏━━━┓ h1 ┃┃ナビ1┃ 説明 と、強制的な感じです。 ところが、IE7だとこれがうまくいかず、つまり、floatされたナビを内包できずに、widthが足りず、 丸角の枠736px-(ナビ200px+説明680px)でマイナスになり、説明がナビの下に来てしまうような状態です。 なんとか足りるようにピクセルを合わせると、IE7ではきれいに見えるが、Opera,FFで崩れてしまいます。 IE7だけのハックなどがあるようなのですが、何分まだ慣れてなくて、自力で解決するのは難しそうです。 上記のソースを見て何か助言いただくことができたら、お願いします。
- ベストアンサー
- HTML
- CSSでの画像サイズ指定について
本などでCSSを練習中です。 画像サイズを自動的に指定したサイズに縮小するCSSは ありますでしょうか? 以下のよな商品紹介のサムネイルを作りました。 画像部分は常に120×120pxに収まってほしいのですが、 横幅が高さより大きい画像を入れた場合、高さは指定した120pxになりますが(縦横比率は同じ)、横は飛び出してデザインが崩れてしまいます。 正方形の画像はそのまま120×120pxになります。 何かアドバイスをお願い致します。 また、他のおかしいところもご指摘下さい。 【HTML】 <div id="itemBox"> <div class="itemPhoto"><a href="#"><img src="#" alt="商品名" width="120" height="120" /></a></div> <p><a href="#">商品名</a></p> </div> 【CSS】 div#itemBox{ border: 1px solid #9f9f9f; width: 120px; margin: 10px; float: left; text-align: center; padding: 10px; height: 150px; } div#itemBox p{ float: left; text-align:left; width: 120px; margin-top: 5px; } div#itemPhoto{ margin: 0; padding: 5px; text-align: center; width:120px; height:120px; }
- 締切済み
- CSS
- CSS初心者です。各ブラウザに対応した記述の仕方をご教授ください!
CSSを独学で学んでいる初心者です。 floatを使ってブロックを並べて配置させたいのです。 IE6で見てみたところ、なんとか思ったとおりに表示されたのですが safari、Netscapeなど他のブラウザで見てみるとどうしてもくずれてしまって思ったとおりに表示されません。 http://homepage2.nifty.com/meary/renshu/renshu.html この、「mini_box1」と「mini_box2」を並べて表示させたいのです。 floatを使わなくても構いません、何か良い方法がありましたらご教授お願いします! もしくは私の記述で間違っているところなどもありましたら教えてくださるととても助かります。 ☆HTML☆ <div class="mini_box1"> <a href="#"> <p class="box_moji">mini_box1</p></a> </div> <div class="mini_box2"> <a href="#"> <p class="box_moji">mini_box2</p></a> </div> ☆CSS☆ .mini_box1 { width:330px; height:83px; margin:0px 0px 0px 0px; font-size:11px; border-color: #ccc; border-style: solid ; border-width: 1px; display: block; float: left; } .box_moji { word-break: break-all; } .mini_box2 { width:330px; height:83px; margin:0px 0px 0px 0px; font-size:11px; border-color: #ccc; border-style: solid ; border-width: 1px; display: block; }
- ベストアンサー
- その他([技術者向] コンピューター)
補足
おかしな現象が出てきました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> を認識させると、 IE→1つのボタンが改行される。 クローム等→正常に表示。 「IEが改行されないように幅を調整すると、」 IE→は正常に表示。 クローム等→1つのボタンが改行される。 とにかく、”あっちを立てれば、こちらが立たず”って感じです。 益々、訳が分かりません。 この現象からすると、marginやpaddingの問題ではないみたいですね!