<script>記述したらレイアウトに変化が...
- 現在制作中のサイトにthickboxを使って、大きな画像を表示させたいと考えています。しかし、thickboxを使用するとレイアウト面で若干の変化が生じます。詳細は以下の通りです。
- div#headerの<h1>見出し分が10px上に上がる
- marginで指定したロゴ画像が15px上に上がる
- ベストアンサー
<script>記述したらレイアウトに変化が...
お世話になります。どうしても分からないので、また質問させてください。 現在制作中のサイトにthickboxを使って、大きな画像を表示させたいと考えています。 それで、当たり前ですが、thickboxをダウンロードして<head>内に下記のように記述しました。 <link href="css/thickbox.css" rel="stylesheet" type="text/css" media="all"/> <script language="JavaScript" type="text/JavaScript"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></script> thickbox自体は特に問題なく作動するのですが、ところがおかしなことにレイアウト面で若干変化が生じました。具体的に言うと、 1:div#headerの<h1>見出し分が10pxほど上へ上がった（ウインドウの最上部に表示されるようになった） 2:marginでピクセル指定して配置していたロゴ画像がやはり15pxくらい上へ上がって表示されるようになった。（そもそもロゴ画像がどのブラウザで見ても同じところに表示するように方法が分からなかったので、このように記述したのですが、これは根本的に問題ありかもしれません。） 3:thickboxを使用しているdiv#rightmenuの下に全ページ共通で表示させているdiv#adress-areaという店舗情報を記述する部分があるのですが、そこのmargin-bottom:10px;が適用されていない。他のCSS記述はそのまま生きている。 ちなみにthickboxを使用しているページ以外はこのような現象は見られません。 これはどうしてでしょうか。もしよければアドバイスください。 THML: <body> <div id="header"> <h1>見出し文</h1> <a href="index.html"><img src="images/logo.gif" alt="ロゴマーク" border="0"></a> </div> <div id="contens"> <div id="leftmenu"> 省略 </div> <div id="rightmenu"> <div id="rightbox-inside"> <ul id="resultList"> <li><a href="images/001.jpg" class="thickbox" title="タイトル"><img src="images/01.jpg" alt="代替テキスト"/></a></li> <li><a href="images/001.jpg" class="thickbox" title="タイトル"><img src="images/01.jpg" alt="代替テキスト"/></a></li> <li><a href="images/001.jpg" class="thickbox" title="タイトル"><img src="images/01.jpg" alt="代替テキスト"/></a></li> <li><a href="images/001.jpg" class="thickbox" title="タイトル"><img src="images/01.jpg" alt="代替テキスト"/></a></li> <li class="mustright"><a href="images/001.jpg" class="thickbox" title="タイトル"><img src="images/01.jpg" alt="代替テキスト"/></a></li> </ul> </div> <div style="clear:both; "></div> <div id="rightbox-buttom"> <img src="images/rightbox-buttom.jpg" alt="代替テキスト"> </div> </div> <div id="adress-area"> <p class="adress-txt">店舗情報いろいろ</p> </div> <div style="clear:both;"></div> </div> <div id="footer"> 省略 </div> </body> CSS>> body { background-image:url(../images/body.jpg); background-position:top center; background-repeat:no-repeat; background-color:rgb(237,232,195); margin:0px; } /* Header部分CSS */ div#header { width:800px; height:150px; margin-left:auto; margin-right:auto; } #header h1 { color:#666666; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:x-small; } #header img { margin:77px 0px 0px 10px; } /* Contens部分CSS */ div#contens { border-bottom:1px dotted #333333; width:800px; min-height:700px; margin-left:auto; margin-right:auto; padding-bottom:10px; } /* Leftmenu部分CSS */ div#leftmenu { width:155px; float:left; } /* rightmenu部分CSS */ #rightmenu { width:645px; float:right; padding-top:20px; background:url(../images/rightbox-top.png) no-repeat; } html#rightmenu{ height: auto !important; height: 800px; } #rightbox-inside { background:url(../images/rightbox-inside.png) repeat-y; } #rightbox-buttom { clear:both; } /* thickboxを使用した表部分CSS */ #resultList { overflow:hidden; margin:0 25px 0 30px; padding:0; list-style-type:none; } #resultList li { float:left; display:inline; width:120px; text-align:center; } #resultList li.mustright { float:right; width:110px; padding-right:none; } #resultList li a { display:block; } #resultList li a img { border:none; } /*店舗情報部分CSS */ div#adress-area { width:620px; float:right; margin:5px 10px 5px 10px; background-color:#E6E6E6; } #adress-area p.adress-txt { width:300px; padding:0 0 0 20px; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:12px; letter-spacing:130%; line-height:160%; color:#333; float:left; }
- toonie
- お礼率26% (55/210)
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
thickbox.cssの最初の方に *{ padding:0; margin:0; } のような記述があると思いますが、その影響では？ （↑）の記述でデフォルトのpaddingやmarginがキャンセルされますので、その分だけ表示位置が変わる可能性がありそう。 なので、CSSのベースを同じようにデフォルトをキャンセルする形にあわせてあげればよろしいかと。
関連するQ&A
- <ul><li>で画像が均等配置せずレイアウト崩れ
<ul><li>で画像が均等配置せずレイアウト崩れしてしまいます。 いつもお世話になります。 添付画像のように、#rightmenuのul#resultList内で<li>を使用して110pxの画像を5つ均等に配置させそれぞれの隙間には10pxの空間を空けて配置したいと考えています。 左から4つの画像は#resultList li {}でpadding-right:10px;で余白を作り、5番目の画像は逆に余白がないように#resultList li.mustright 指定でpadding-right:none;設定です。 ところがそんな設定していないのに、何故か間には20pxほどの空白ができ、そのため一番右端の画像がレイアウト崩れして下段に落ちてしまいます。CSSもしくはHTMLの記述のどこがいけないのでしょうか？どうか教えてください。ちなみに並べたい画像はクリックするとthickboxで大きな画像が表示できるようにしたいと考えています。 ●HTML <div id="rightmenu"> <div id="rightbox-inside">←背景にコンテンツの外枠となる画像の上部表示用 <div id="rightbox-inside-txt"> <p class="title">タイトル</p> <p class="standard-title">コンテンツ内容</p> <p class="standard"> <ul id="resultList"> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li class="mustright"><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> </ul> </p> </div> <div style="clear:both; "></div> <div id="rightbox-buttom"><img src="images/rightbox-buttom.jpg" alt="枠">←背景にコンテンツの外枠となる画像の下部表示用 </div> </div> </div> ●CSS #rightmenu { width:645px; float:right; padding-top:20px; background:url(../images/rightbox-top.png) no-repeat; } #rightbox-inside { background:url(../images/rightbox-inside.png) repeat-y; } #resultList { overflow:hidden; margin:0 25px 0 30px; padding:0; list-style-type:none; } #resultList li { display:inline; float:left; margin:0; padding-right:10px; } #resultList li.mustright { float:right; padding-right:none; } #resultList li a { display:block; } #resultList li a img { display:block; width:110px; height:100px; border:0; } #rightbox-buttom { clear:both; }
- ベストアンサー
- CSS
- このhtml,cssでどこがおかしいか分かりません
お世話になります。 CSS初心車です。参考書など見ながらhtmlとCSSを作成してみましたが、 レイアウトが崩れてしまいます。CSSのほうに問題があるとは思うのですが、初心者な者でいまいちどこが間違っているのか分かりかねます。どうかご教授くださらないでしょうか。 問題はdiv#rightmenuにあると思います。 rightmenuの中にさらにrightbox-top/rightbox-inside/rightbox-buttomと3つのdiv分けをしており、それぞれbackground-image指定してコンテンツの多さによってリピートしていく背景(ボックスのような画像)を制作したいです。 ところが、以下のような指定をするとおかしなところがたくさん出てきました。 (1)headerとrightmenu全体の間に20pxほどの隙間ができる。 (2)rightbox-topとrightbox-insideの間、同じくrightbox-insideとrightbox-buttomにも20pxほどの隙間ができる。 (3)rightbox-insideのbackground-imageが適用されない。 さらに言うとFirefoxやSafariで確認するとレイアウトは上記のような問題があるにしろ、そこそこレイアウト崩れはありませんが、DWで作業しているともうひどいレイアウト崩れが発生しています。自分だけではどうしても解決できなくてみなさんに力に頼ざるを得ませんでした。どうかお願いします。 ●html <div id="rightmenu"> <div id="rightbox-top"> <h3></h3> </div> <div id="rightbox-inside"> <p><img src="images/index-main-image01.jpg"></p> <p><img src="images/index-main-image02.jpg"></p> <p class="text"> 本文いろいろp> <a href="result.html" id="index-button01"></a> <a href="contact.html" id="index-button02"></a> </div> <div id="rightbox-buttom"> <h4></h4> </div> </div> </div> ●CSS div#rightmenu { width:650px; float:right; margin:0px; } div#rightbox-top { width:650px; } #rightbox-top h3 { background-image:url(../images/rightmenu-top.png); background-repeat:no-repeat; width:650px; height:20px; } #rightbox-inside { background-image:url(../images/rightmenu-inside.png); background-repeat:repeat-y; width:650px; } #rightbox-inside p img { float:left; padding-left:40px; } #rightbox-inside p.text { margin-right:30px; padding-bottom:10px; width:400px; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:10px; letter-spacing:130%; line-height:180%; color:#333333; float:right; } #rightbox-buttom { width:650px; clear:both; } #rightbox-buttom h4 { background-image:url(../images/rightmenu-buttom.png); background-repeat:no-repeat; width:650px; height:20px; margin:0px; }
- ベストアンサー
- ホームページ作成ソフト
- FireFoxで確認するとliがずれます
webページを作成していてリスト部分が下にずれてしまうのに困っています。 添付図のようにIEで見るとちゃんと置きたい位置に収まってくれるのですが、 firefoxでは収まってくれません。 ご教授頂けたら幸いです。 タグ <div id="header"> <h1><a href="index.html"><img src="images/buyoon_syoukai_web_site.jpg" alt="ブヨーン商会WEBSITE" width="180" height="50" /></a></h1> <div id="gNavi"> <ul> <li><a href="information.html"><img src="images/information.jpg" alt="information" width="120" height="50" /></a></li> <li><a href="profile.html"><img src="images/profile.jpg" alt="profile" width="120" height="50" /></a></li> <li><a href="photograph.html"><img src="images/photograph.jpg" alt="photograph" width="120" height="50" /></a></li> <li><a href="bbs.html"><img src="images/bbs.jpg" alt="bbs" width="120" height="50" /></a></li> </ul> </div><!-- /gNavi --> </div> スタイルシート #header { width: 740px; height: 50px; margin: 0px; padding: 0px; } #header h1 { width: 180px; height: 50px; margin-top: 0px; margin-right: px; margin-bottom: 0px; margin-left: 0px; padding: 0px; float: left; position: absolute; } #gNavi { list-style-type: none; width: 560px; height: 50px; margin-top: 0px; margin-right: 0px; margin-left: 220px; margin-bottom: 0px; float: right; position: absolute; } #gNavi li { list-style-type: none; margin: 0px; padding: 0px; float: left; } 素人作成のため乱雑の作成内容で恐縮ですが、 アドバイス頂けると幸いです。
- ベストアンサー
- 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; }
- 締切済み
- その他([技術者向] コンピューター)
- IEでは指定の位置に配置してくれません
添付図のようにしたいのですが、 IEでは右に空白ができてしまい配置したいところに配置できません。 図のFireFox確認時の方が配置したい位置に配置できている正です。 タグ <div id="header"> <h1><a href="index.html"><img src="images/buyoon_syoukai_web_site.jpg" alt="ブヨーン商会WEBSITE" width="180" height="50" /></a></h1> <div id="gNavi"> <ul> <li><a href="information.html"><img src="images/information.jpg" alt="information" width="120" height="50" /></a></li> <li><a href="profile.html"><img src="images/profile.jpg" alt="profile" width="120" height="50" /></a></li> <li><a href="photograph.html"><img src="images/photograph.jpg" alt="photograph" width="120" height="50" /></a></li> <li><a href="bbs.html"><img src="images/bbs.jpg" alt="bbs" width="120" height="50" /></a></li> </ul> </div><!-- /gNavi --> </div> CSS /* レイアウト設定ここから */ #pageBody { width: 740px; margin-top: 0px; margin-right: auto; margin-left: auto; margin-bottom: auto; } #header { width: 740px; height: 50px; margin: 0px; padding: 0px; } #topFlContens { width: 740px; height: 320px; margin: 0px; padding: 0px; } #box { width: 740px; height: 550px; margin-top: 20px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; padding: 0px; } /* レイアウト設定ここまで */ #header h1 { width: 180px; height: 50px; margin-top: 0px; margin-right: px; margin-bottom: 0px; margin-left: 0px; padding: 0px; float: left; position: absolute; } #gNavi { list-style-type: none; width: 560px; height: 50px; margin-top: 0px; margin-right: 0px; margin-left: 220px; margin-bottom: 0px; float: right; position: absolute; } #gNavi ul { margin: 0px; } #gNavi li { list-style-type: none; margin: 0px; padding: 0px; float: left; } Web初心者のため、アドバイス頂けると幸いです。
- ベストアンサー
- 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
- アップロードするとレイアウトが崩れる
前にも質問させていただいたのですが、まだ解決していません。 FC２でアップロードはできたのですが、HTMLがデスクトップ上ではちゃんとみれたのに、 サーバーにアップしたら表示されません。 FFFTPでアップロードする際になにか作業をしないといけないことがあるのかわからないのですが・・・。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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="root/css/top.css" rel="stylesheet type="text/css"> <title>パーティ専門アイス本舗</title> </head> <body link="#61503e" vlink="#61503e" alink="#aaaa"> <div id="wrapper"> <div id="header"> <p>パーティ専門アイス本舗は、パーティや記念日などに便利な2リットルサイズの業務用アイスを販売しています。数あるフレーバーからお好きなセットをお選びください。</p> <h1><img src="root/images/logo_ice.gif" width="450" height="60" /></h1> <p id="kaimono"><a href="#"><img src="root/images/idx_btn_cart.gif" width="180" height="30" alt="kaimono" /></a></p> <ul id="menu_navi"> <li><img src="root/images/gnavi_btn01.jpg" width="158" height="25" alt="home" /></li> <li><img src="root/images/gnavi_btn02.jpg" width="158" height="25" alt="syouhin" /></li> <li><img src="root/images/gnavi_btn03.jpg" width="159" height="25" alt="kaimono" /></li> <li><img src="root/images/gnavi_btn04.jpg" width="159" height="25" alt="shiharai" /></li> <li><img src="root/images/gnavi_btn05.jpg" width="158" height="25" alt="faq" /></li> <li><img src="root/images/gnavi_btn06.jpg" width="158" height="25" alt="mailmagazine" /></li> </ul> </div><!-- //header --> <div id="page_body"> <div id="side"> <div id="kensaku"> <form method="post" action="http://test.com/text.cgi"> <p>商品名や種類で検索</p> <p><input type="text" name="kensaku" size=20"></p> <p id="kensaku_form"><input type="submit" value="検索"></p> </form> </div> <p id="tokushu"><a href="#"><img src="root/images/Untitled-5_03_03.jpg" width="180" height="120" alt="tokushu" /></a></p> <div id="prodact_side"> <div class="section1"> <p><img src="root/images/idx_menu_ph01.jpg" width="63" height="35" alt="apple" /></p> <p class="right"><a href="#"> ストロベリー</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph02.jpg" width="63" height="35" alt="ugi" /></p> <p class="right"><a href="#"> 宇治抹茶</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph03jpg.jpg" width="63" height="35" alt="chocoship" /></p> <p class="right"><a href="#"> チョコチップ</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph04.jpg" width="63" height="35" alt="berugi" /></p> <p class="right"><a href="#"> ベルギーチョコ</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph05.jpg" width="63" height="35" alt="cookie" /></p> <p class="right"><a href="#"> キャラメルクッキー</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph06.jpg" width="63" height="35" alt="banira" /></p> <p class="right"><a href="#"> バニラ</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph07.jpg" width="63" height="35" alt="pain" /></p> <p class="right"><a href="#"> パイナップル</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph08.jpg" width="63" height="35" alt="apple" /></p> <p class="right"><a href="#"> アップル</a></p> </div> <div class="section1"> <
- 締切済み
- HTML
- ie6 でリストが横に並ばず縦に並んでしまう
ie6のコーディングでノイローゼになりそうです。5時間くらいいろいろ試行錯誤しましたが、解決できません。 <div class="pic0"> <ul> <li class="pic1"><img src="images/pic1.jpg"/></li> <li class="pic1"><img src="images/pic2.jpg" /></li> <li class="pic1"><img src="images/pic3.jpg" /></li> <li class="pic1"><img src="images/pic4.jpg"/></li> <li class="pic1"><img src="images/pic5.jpg"/></li> </ul></div> .pic0{ width: 250px; height:40px; float: left; display:inline; padding-top: 10px; padding-bottom: 10px; overflow:hidden; } .pic1 li { float: left; height: 47px; width: 36px; display:block; margin-left:3px; margin-right:3px; } ie6のみ縦に並んでしまいます。 疑ったもの ・haslayout *{ zoom:1; } {line-height:0;} ・marginが倍になるバグ widthの指定 ・cssが効いていない ・ ネガティブマージン など ie6のcssを読み込ませるなど、何でもいいので、ie6のリストが横にさせる方法はないでしょうか。 雑文ですが、どうかお願いします。助けてください。
- ベストアンサー
- CSS
- 画像にリンクを張ると画像がずれるのを解消したいです
ホームページ作成初心者です。 ある個所の画像にリンクを張ると画像がずれて、表示がおかしくなります。 CSSで横幅を設定した中に同じサイズの画像を配置しています。 詳細をご覧いただきアドバイス頂けたら幸いです。よろしくお願いいたします。 html <div id="sidenavi2"> <ul> <li id="midashi2"><img src="image/os_side.jpg" width="200" height="56"></li> <li><a href#">あああ</a></li> <li><a href#">あああ</a></li> <li><a href#">あああ</a></li> <li><a href#">あああ</a></li> </ul> <p><img src="image/message.jpg" width="200" height="65" border="0"></p> <p><img src="../open_service/siryo_seikyu.jpg" width="200" height="62"></p> </div> css #contents #sidenavi2 { padding: 0px; float: right; height: auto; width: 200px; margin-right: 5px; margin-bottom: 0px; margin-left: 0px; } 情報が不足する点があるかもしれませんが、よろしくお願いいたします。
- ベストアンサー
- 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
お礼
返信ありがとうございます！ ご指摘の通りでした。 これで解決しました。 感謝します！