- 締切済み
Winで見たときfloatさせたメニュー位置がずれる問題
お世話になります。 XHTML+CSSにてウェブページを作っている者です。 WinIEで見たときのfloatさせた置換画像の位置ずれについての質問です。 内容としては、XHTMLにて<li>を使いメニューを制作し、CSSにてそれをfloatさせ横並びのメニューにします。そしてtext-indent:-9999pxでテキストを見えなくし、代わりに<a>要素で背景に画像を配置し、画像の横並びのメニューを実現している・・・というものです。 safari、Opera、MacIE5ともにMacではやりたいことが実現できているのですが、WinIE6、7だと横並びしているメニュー画像が右へいくほど少しずつ下へずれていってしまっています。ちょうど右下がりの階段のように・・・。 これはなぜなんでしょうか？？marginとかpadding関係のバグなのでしょうか？ ちなみに、メニュー大枠の幅とひとつずつのメニュー幅の合計はピッタリ一致させているのですが、この余裕のなさが原因でしょうか？（そう思ってひとつずつのメニュー幅をそれぞれ1pxずつ縮めてみたりしたんですが、ダメでした）
- mausan
- お礼率69% (71/102)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- aoi_hito
- ベストアンサー率50% (1/2)
参考URLは、リストを入れ子にした時に記述方法を誤ってうまく一列に並ばないというものです。 同じような間違いをしているということはありませんか？
- SAYKA
- ベストアンサー率34% (944/2776)
とりあえずliやそれをくくるolやらdlやらのスタイルを出したら 何かわかるかもしれないよ。
お礼
返答が大変遅くなりました。 申し訳ありません。無事に解決できました。 ありがとうございます。 以下を参考にさせていただきました。 http://css-happylife.com/log/css-template/000040.shtml ちなみに上のサイトで紹介されていたものと私のものとの違いは、リスト要素に display:inline、a要素に overflow:hiddenをつけていた違いでした。
関連するQ&A
- float で画像が指定サイズより小さくなる
困っております。 添付の画像なんですが、 float で、370px 幅のdiv を横並びにして、 その中に、それぞれ370px幅の画像を入れたいのですが、 なぜか、勝手に縮小されてしまいます。 これは、画像の詳細を見ると333px になっております。 上の横並びの画像と、下の画像は、全く同じものです。 HTMLとCSSを下記します。 どなたか、お知恵を拝借いただければ、助かります。 宜しくお願いいたします。 <div> <div class="float_370"><img src="image/black370.jpg" alt=""></div> <div class="float_370_2"><img src="image/black370.jpg" alt=""></div> <div><img src="image/black370.jpg" alt=""></div> </div> .float_370 { float:left; margin:0; padding:0; width:370px; } .float_370 img { width: 370px; margin:0; padding:0; } .float_370_2 { float:left; margin:0; padding:0; width:370px; }
- ベストアンサー
- CSS
- <li>タグを使って横並びメニューボタンを作成する際ベストな手法とは？
CSSで、横並びのメニューボタンを作成しています。 （文字も画像にしています。） imgタグで並べるのではなく、liタグを使って、テキストは表示しないようにしたいと思い、下記のようなソースで記述しました。 /*htmlソース*/ <li class="tmenu01"><a href="sample">はじめに</a></li> /*cssソース*/ li.tmenu01 { display:block; width:126px; height:31px; background:url(image/menu01.gif) no-repeat; text-indent:-9999px; float: left; } しかし、text-indent:-9999px;とfloat: left;をいっしょに使用すると、背景画像・文字とも表示されなくなってしまいます。 いろいろネットを調べてみたのですが、文字を飛ばす+横並びのバージョンの解決方法が見つからず、方法がわかりません。 いい方法がありましたら、どなたか教えてください…m(_ _)m
- ベストアンサー
- ホームページ作成ソフト
- CSSのリスト 背景画像が表示されません
横並びのメニューを作成したいと思っています。 text-indent:-999pxを利用して、背景画像のみを表示させようとしているのですが、h1はうまくいくもののリスト(li)についてはまったく表示されません。 ちなみにtext-indentを使用しなければ背景画像は表示されますが、かなり画像が下にずれ込んでしまっています。 よろしくお願いします。 #header h1 { margin: 5px 0 0 20px; padding: 0; width: 248px; height: 143px; float: left; text-indent: -9999px; font-size: 130px; background: url(../images/logo.jpg) no-repeat #FFFFFF; background-position: center; } ul { margin: 0; padding: 0; width: 635px; height: 54px; } li{ float: left; list-style: none; margin: 0; padding: 5px; font-size: 50px; text-indent:-999px; } li#top { background: url(../images/menu/top.jpg) no-repeat; }
- ベストアンサー
- HTML
- cssのfloatについて
cssのfloatを使い横並びを実現していますがoverflowを利用して横並びを実現するという方法を聞きました。 現状の構成は具体的に以下のような感じです。 <div id="main"> <div id="left">レフト</div> <div id="center">センター</div> </div> #main:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; } #left {float: left;} #center { float: right} これをoverflowで実現するにはどうすればいいのでしょうか？ また、floatを使用しないで実現するメリットはなんでしょうか？
- ベストアンサー
- HTML
- IE7でfloatしない原因
css初心者です。 テキストの横に画像をフロートさせたいのですが、 IE７のみ、表示が崩れてしまいます。 原因を教えてください。 簡潔に必要な部分だけを書き出すと、 HTMLは以下のようになっています。 <div class="main"> <p class="float">テキスト1</p> <img src="a.jpg" alt="A画像" width="100" height="10"class="a"> <img src="a.jpg" alt="B画像" width="100" height="10"class="b"> <p class="padding"><a href="index.html">テキスト２</a></p> </div> CSSは以下。 div.main { width: 600px; padding:15px; } .float{ float:left; width:100px; } .a { float:left; padding-right:20px; padding-bottom:5px; } .b { clear:left; padding-bottom:5px; } .padding{ padding-bottom:10px; } 表現したいのは、 ～～～～～～～～～～～～～～ テキスト１ A画像 B画像 テキスト２ ～～～～～～～～～～～～～～ このようなレイアウトです。 IE８、Firefox、Chromeでは希望通りのレイアウトになっていますが、 IE７でみると、 ～～～～～～～～～～～～～～ テキスト１ A画像 B画像 テキスト２ ～～～～～～～～～～～～～～ となっています。 また、画像が一つだけ（A画像だけ）のパターンもあるのですが、 この場合には ～～～～～～～～～～～～～～ テキスト１ A画像 テキスト２ ～～～～～～～～～～～～～～ となってしまいます。 A画像とB画像はまったく同じ大きさです。 padding-bottom指定は、各行の行間を開けたくて指定しています。 宜しくお願いします。
- ベストアンサー
- CSS
- float と text-indent について
floatを利用して、画像を右か左に寄せたとき、ネットエスケープ7.1でインデント2emが反映されない。(IE6は、OK) 同じく背景を画像に合わせて付けたいのですが、何かいい方法はありませんか。 2つの疑問についてお願いいたします。 <HTML> <HEAD> <TITLE>無題ドキュメント</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- p { background-color: #99CC00; text-indent: 2em; font-size: 12px} img { float: right} --> </STYLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <p><IMG src="test.jpg" width="100" height="75">floatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについて</p> </BODY> </HTML>
- ベストアンサー
- HTML
- CSSでfloat指定した画像に隙間
floatの指定をすると並べた画像に隙間ができます。 div aで外を囲み、幅を400px固定し、 その中にli(幅200px）を放り込んでいます。 （幅400pxの入れ物に200pxの小箱を2列に並べていく） 画像をfloatさせなければ隙間は出ないのですが、下記cssのようにfloatさせると幅400pxにIEだけ収まりません。 WinXP・irefox1.0やOpera7.5では意図通り表示されます。。 どなたか解決策お持ちの方よろしくおねがいします。 <html> <head> <title></title> <style type="text/css"> <!-- #a{ width:400px; margin: 0 auto; padding:0; } li{ width:200px; padding:0; list-style:none; float:right; display: inline; } img{ border:none; margin:0; padding:0; vertical-align:top; float:left; ←これの有無で不具合 } --> </style> </head> <body> <div id="a"> <dl> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="100" /><img src="xxx.jpg" width="50" height="100" /></li> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="200" /></li> </dl> </body> </html>
- ベストアンサー
- HTML
- CSSーfloatについて
divの中にp要素を三つ作成して、最初のp要素にfloat:leftを指定しました。結果MacIEとIE6では2番目のpのみ右に並び、3番目のpは1番目のpの下にある状態です。しかも、FirefoxやSafari・Operaでは3つとも縦に並んだままです。単純なミスのようなきがするんですが解決できません。どなたか助けてください。よろしくお願いします。 以下のコードです。 <!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> <style type="text/css"> <!-- #box{ background-color:#0099CC; width:400px; padding: 0px; } #A,#B,#C{ color:#FFFFFF; border:1px solid #fff; margin:0; } #A{ background-color:#990000; float:left; width:100px; } #B{ background-color:#003366; width:100px; } #C{ background-color:#336600; width:100px; } --> </style> </head> <body> <div id="box"> <p id="A">AAA</p> <p id="B">BBB</p> <p id="C">CCC</p> </div> </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
- 【css】floatを指定するとはみ出します
ブロック要素をfioatで横並びにした際に、画像とテキストが全体を囲っている要素（親要素）からはみ出すことが多々あります。 その度に高さを指定して回避しているのですが、こちらはその他に回避の方法というのはあるのでしょうか？ それとも、自分の記述がおかしいのでしょうか？ 例えば下記の例です。 こちらは左に画像、右にタイトルとコメントが入ります。 <div class="aaa"> <div class="left"><img src="photo.jpg" width="180" height="120"></div> <div class="right"> <h3 class="title">タイトルです</h3> <div class="comment">コメントです</div> </div> </div> //////////////////////////////////// .aaa{ margin-bottom: 5px; padding-top: 7px; padding-right: 10px; padding-bottom: 7px; padding-left: 10px; clear: both; } .left{ float: left; height: 120px; width: 180px; } .right{ float: left; padding-left: 10px; width: 380px; } .title{ font-size: 90%; line-height: 120%; padding-right: 10px; padding-left: 10px; width: 360px; padding-top: 3px; padding-bottom: 1px; clear: both; } .comment{ font-size: 80%; line-height: 120%; padding: 5px; clear: both; }
- 締切済み
- 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
お礼
返答が大変遅くなりました。 申し訳ありません。無事に解決できました。 ありがとうございます。 以下を参考にさせていただきました。 http://css-happylife.com/log/css-template/000040.shtml ちなみに上のサイトで紹介されていたものと私のものとの違いは、リスト要素に display:inline、a要素に overflow:hiddenをつけていた違いでした。