ie6,7で画像の下に10px程のスペースができる

前へ 次へ
このQ&Aのポイント
  • ie6,7で画像の下に10px程のスペースができ非常に困っています。色々検索して試してみましたが全く解消されません。
  • liのdisplayをblockからinlineに変更すると下のスペースがなくなる、border: 1px solid #ffffff ;をつけると下のスペースがなくなる、-10px入れて上にあげるなど試してみましたが全く解消されません。
  • m1とm2のメインのカテゴリの中にs1、s2、s3、s4と分類分けされたカテゴリがあり、その分類の間にdotの画像を入れたいというイメージです。dotとs2、dotとs4の間に10px程の隙間ができてしまいます。これを解消したいのです。
回答を見る
  • ベストアンサー

ie6,7で画像の下に10px程のスペースができる

ie6,7で画像の下に10px程のスペースができ非常に困っています。 色々検索して試してみましたが全く解消されません。 下にhtmlとcssを記述します。 /* html */ <div id="navi"> <ul class="menu"> <li class="m1"><a href="main1.html"></a></li> <li class="s1"><a href="sub1.html"></a></li> <li class="dot"></li> <li class="s2"><a href="sub2.html"></a></li> <li class="m2"><a href="main2.html"></a></li> <li class="s3"><a href="sub3.html"></a></li> <li class="dot"></li> <li class="s4"><a href="sub4.html"></a></li> </ul> </div> /* css */ #contents #navi ul.menu{ float:left; margin:10px 0 0 20px; *margin:10px 0 0 10px; padding:0; width:125px; height:auto; } #contents #navi ul.menu li{ margin: 0; padding: 0; } #contents #navi ul.menu li.m1 a { display: block; width:115px; height:45px; text-indent:-9999px; background: url(../img/menu_m1.jpg) no-repeat top left; } #contents #navi ul.menu li.m1 a:hover { background-position:0 -45px; } m1と同じ記述でm2、s1、s2、s3、s4と続きます。 そして、dotのcssですが、 .dot { display: block; margin:0; padding:0; width:111px; height:7px; background: url(../img/dot.jpg) no-repeat top left; vertical-align:bottom; } です。 色々なサイトを検索して ・liのdisplayをblockからinlineに変更すると下のスペースがなくなる ・border: 1px solid #ffffff ;をつけると下のスペースがなくなる ・-10px入れて上にあげる など試してみましたが全く解消されません。 やりたいイメージは m1とm2のメインのカテゴリの中に s1、s2、s3、s4と分類分けされたカテゴリがあり、その分類の間にdotの画像を入れたいというイメージです。 m1 s1 ..... s2 m2 s3 ..... s4 です。 そのため上記のような表記になったのですが、dotとs2、dotとs4の間に10px程の隙間ができてしまいます。これを解消したいのです。 どなたかお教えいただけたら非常にうれしく思います。 よろしくお願いいたします。 もし説明が足りない場合は言っていただけたら補足いたします。

  • CSS
  • 回答数4
  • ありがとう数6

質問者が選んだベストアンサー

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.3

そもそも、CSSが云々の前に、 そのイメージを書く場合、リストで無意味なdotまんてマークアップはしない。 また、listを空にしてはいけませんって事。 どうしても開けたいのなら、部分的なliにpaddingでもheightでも設定して背景でdotを表示すれば、シンプルに済む話です。 <html> <head> <style type="text/css"> #navi .nav { float:left; padding-top: 10px; width:125px;} #navi .nav ul { margin: 0; padding: 0 0 0 10px; list-style: none;} #navi li { margin: 0; padding: 0; width:115px; height:45px;} #navi li a { display: block; width:115px; height:45px; text-indent:-9999px;} #navi li.m1 a { background: url(../img/menu_m1.jpg) no-repeat;} #navi li a:hover { background-position: 0 -45px;} #navi li.dot { height:52px; background: url(../img/dot.jpg) no-repeat 0 100%;} </style> </head> <body> <div id="navi"> <!-- #naviが不明な為、.navを設置（書き方によっては設置不要） --> <div class="nav"> <ul> <li class="m1"><a href="main1.html">main1</a></li> <li class="s1 dot"><a href="sub1.html">sub1</a></li> <li class="s2"><a href="sub2.html">sub2</a></li> <li class="m2"><a href="main2.html">main2</a></li> <li class="s3 dot"><a href="sub3.html">sub3</a></li> <li class="s4"><a href="sub4.html">sub4</a></li> </ul> </div> <p style="clear: both;"> ※ dot.jpg画像は親要素の背景色と同化か透過か、 親要素と色違いなら115×7px+α程度にするか。</p> </div> </body> </html>

rossi46mail
質問者

お礼

回答ありがとうございます。 > listを空にしてはいけませんって事。 listを空にしたのはBBS用に文字数を減らすために消してしまいました。これから投稿する際は変な記述はしないように気をつけます。ご指摘ありがとうございます。 > そのイメージを書く場合、リストで無意味なdotまんてマークアップはしない とても勉強になります。リストには無意味なイメージを入れたからこういった結果になった訳なんですね。 これからは画像とdotを１つの画像にするなど考慮し、気をつけたいと思います。 web初心者で去年末から独学で始めたので知らないことがまだ山ほどあります。 基本ができてないことがたくさんあるので、こういう風に指摘していただくととても嬉しいです。 回答ありがとうございます。

その他の回答 (3)

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.4

NO.3　naokitaです（お礼拝見済み） ちょっと返答が気になるので、質問からは脱線しますが・・・ ----------- ＞リストには無意味なイメージを入れたからこういった結果になった訳なんですね。 <li class="dot"> <img /> </li>の事なら、そうなのですが、 CSSで表示が崩れるのは別の話です（以下で追記） ＞これからは画像とdotを１つの画像にするなど考慮し、気をつけたいと思います。 あ、いや、そういう意味だけではなく、 HTML側でリストに項目名以外（dot）がある事自体が問題。 リストだから、 テキストとか音声ブラウザとかHTMLのみとか検索エンジンが読んだら、 例： 　・リンゴ 　・みかん 　・バナナ 　・ドット線　　← これが項目名だと理解される。 　・イチゴ こんな変なテキスト・マークアップになるって事。空白でも変だし。 今回の場合は、 別々のリストに分けるか、途中でCSSでドット用に隙間を作るかの問題。 NO.3の回答は、 既存の項目の下側を伸ばしてCSSで罫線の画像背景を見せてるだけ。 だから、リストとしてのマークアップなので、本来の項目名だけになる。 　・リンゴ 　・みかん 　・バナナ　← CSSでのドットは読まれない。 　・イチゴ HTML側で見栄えだけの為にリストに罫線画像を入れない方が良いし、 CSSで表示した方がよいよって意味です。 というか、NO.3回答で表示出来たのかな？　　既に理解されていたのなら失礼。

rossi46mail
質問者

お礼

回答ありがとうございます。 naokitaさんが言う様に間違って理解していました。 cssを外して考えたとき、リストの中に「ドット線」が入っているのは確かにおかしいです。 今回１サイトの中に２２項目のメニューがあり、バリエーションで８サイトあるので、時間的に全て直すことができなかったのでドットを消すことになりました。 なので、次回同じことを試すときには、ぜひno.3のやり方で試したいと思います。 お忙しい中、何回もお返事いただきありがとうございました。

回答No.2

#contents #navi ul.menu li a { margin: 0; padding: 0; } を追加、、、でしょうか、、、？ 未検証です。 HTMLの書き方で、 <li class="m1"> <a href="main1.html"></a> </li> このような改行やインデントをしていると、それが影響してスペースが空くことがありますので、 BBS投稿用に改行位置も編集したものであれば、 そういうのを消してみると、解消することがあります。

rossi46mail
質問者

お礼

回答ありがとうございます。 検証してみた結果、変化はありませんでした。 <li class="m1"> <a href="main1.html"></a> </li> 初心者なのでこれで影響がでるということ知りませんでした。 とても勉強になりました。 こういった記述をしないように気をつけます。 ありがとうございます。

  • abacabu
  • ベストアンサー率37% (250/663)
回答No.1

趣味でWEBページを作成しているものです。 まぁ単純に考えられる原因としては .dot { display: block; margin:0; padding:0; width:111px; height:7px; background: url(../img/dot.jpg) no-repeat top left; vertical-align:bottom; 　　　　←わざわざ指定してるよね？ } わざわざ見え方がおかしく（dot上部の方が広くなる様に指定してますよね？）なるように 指定している為かと?? align：左右方向 vertical-align：上下方向 この表示位置調整用でdotがもってるスペースで下寄せで画像を表示しているので 自ずとdot上部分と下部分の空き具合が変わってきます。 …こういうことですかね？

rossi46mail
質問者

お礼

回答ありがとうございます。 充分な説明ができていませんでした。申し訳ありません。 vertical-align:bottom; これを指定した理由は これがなければ ie6は同じ現象なんですが ie7ではdotが下に移動してしまい逆に上に10px程開いてしまいます。 他のサイトで検索した結果 vertical-align:bottom;をつけると上のスペースがなくなると記述されていたのでこのようにしたところ上のスペースはなくなったのですが、ie7もie6と同じ様に下にスペースができてしまった。ということです。 十分な説明ができていなくて申し訳ありませんでした。 しかし回答ありがとうございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • html,cssプルダウンメニューについて教えてください。

    html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません） 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}

  • プルダウンメニューの設置について

    【質問内容】 画像のすぐ上にドロップダウンメニューを設置したいのですが、 マウスオンすると下部の画像の表示位置が下がってしまいます。 この画像表示位置を動かないようにするにはどうすればいいのでしょうか？ 【html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="navi_continer"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 1</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <img src="shingo/images/1.TOP.jpg" width="150" height="150" alt="#" /> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 2</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> <li><a href="#">サブメニュー 3</a></li> <li><a href="#">サブメニュー 4</a></li> </ul> </li> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 3</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> <li><a href="#">サブメニュー 3</a></li> </ul> </li> </ul> </div> </div> </body> </html> 【css】 @charset "utf-8"; #navi_continer { position: relative; z-index:100; width: 300px; height:30px; } #navi { position: absolute; top: 10px; left: 10px; width: 150px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { color: #fffff; float: left; width: 100px; margin: 0; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 3px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } /* サブメニュー */ #navi ul.sub { background: #eeeeee; } #navi ul.sub li { float: none; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding: 3px 0; border-top:1px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:1px solid #000099; } #navi li.navi_menu_on{ border:1px solid #000099; } ご教授お願いします。

  • CSSのプルダウンメニュー

    menu1とmenu2の挙動について疑問があります。 添付画像をご覧ください。 menu2からsub4-1を選択している状態です。 この時、menu2の背景色が赤に戻らないのは仕様でしょうか？ それとも何か間違っているのでしょうか？ 背景を画像にしても同じ結果になります。 -------------------------------------------- ul#menu li{ float:left; list-style-type:none; text-align:center; } ul#menu ul li{ clear:both; } ul#menu li a,.menu1,.menu2{ display:block; width:200px; height:50px; line-height:50px; text-decoration:none; background:#ff0000; } ul#menu li a:hover,.menu1:hover,.menu2:hover{ background:#ffcc00; } ul#menu ul{ display:none; } ul#menu li:hover > ul{ display:block; position:absolute; } ul#menu ul ul{ margin:-50px 0 0 200px; } --------------------- <ul id="menu"> <li class="menu1">menu1</a> <ul> <li><a href="#">sub1</a> <ul> <li><a href="#">sub1-1</a></li> <li><a href="#">sub1-2</a></li> </ul> </li> <li><a href="#">sub2</a></li> </ul> </li> <li class="menu2">menu2</a> <ul> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a> <ul> <li><a href="#">sub4-1</a></li> <li><a href="#">sub4-2</a></li> </ul> </li> </ul> </li> </ul> ------------------ お分かりになる方よろしくお願いします。

    • 締切済み
    • CSS
  • Firefox2.0における5ｐｘのずれ

    下記の記述（原因部分のみ一部抜粋）において、Firefox2.0では#menu部分が5px上にずれ込む現象が起こるようなのですが、どこが原因なのかわからずに困っております。 対処方法ご存知の方がおられましたらご教授願います。 XHTML <div id="menu"> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu6</a></li> </ul> </div> CSS #header,#menu,#contents,#footer { width: 950px; margin: 0px 25px; clear: both; } #menu { height: 50px; } #menu ul li,#footer ul li { display: -moz-inline-box; /* firefox2.0以前対策 */ display: inline-block; /display: inline; /* ie6,7対策 */ /zoom: 1; /* ie6,7対策 */ } #menu ul li { width: 156px; height: 22px; text-align: center; margin: 0px; padding: 13px 0px; list-style: none; border: solid 1px #333333; } もしかしたら某サイトで発見した記述であるdisplay部分が問題かとも思うのですが、どうぞよろしくお願いいたします。

  • CSS　 IEバグ　リストの後の隙間を消したい

    よろしくお願いします。 以下のメニューで、"sub_menu02" の下に隙間が出てしまいます。 IEのバグのようなのですが、回避方法ご教授願います。 *実際は、の部分はJAVASCRIPTによるプルダウンになってます。 --------------------------------------------------------------- <style> * { margin : 0; padding : 0; } body { margin : 0; padding : 0; background: #fafafa; } #slidemenu_sample { overflow:hidden; } #menu_1 { padding: 0; margin: 0 0 0 0; background-color: #e7f6ff; } div#contentsArea div#sNaviArea{ width: 175px; float: left; } div#contentsArea div#sNaviArea dd{ width: 163px; background: #ffffff; } div#contentsArea div#sNaviArea dd ul{ width: 163px; list-style: none; } div#contentsArea div#sNaviArea dd ul li{ width: 163px; border-top: 1px solid #dddddd; margin: 0; padding: 0; display: block; } div#contentsArea div#sNaviArea dd ul li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul li a{ display: block; padding: 5px 0 5px 17px; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li{ width: 153px; margin: 0 0 0 10px; display: block; background: #ffffff; } </style> <body> <div> <div id="contentsArea"> <div> <div id="sNaviArea"> <dl> <dd> <ul> <li><a href="">menu01</a></li ><li class="choice"><a href="">menu02</a><ul class="sNaviSmall"><li><a href="">sub_menu01</a></li><li id="slidemenu_sample"><a href="" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">sub_menu02</a><ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')"><li><a href="">aaaaa</a></li><li><a href="">bbbbb</a></li><li><a href="">cccccc</a></li></ul></li ><li><a href="">sub_menu03</a></li></ul> </ul> </dd> </dl> </div> </div> </div> </div>

  • <li>タグでメニューを作った場合

    横並びでサブメニューがあるメニューを以下の様に作成しました HTMLは <ul> <li><a href="">トップページ</a></li> <li><a href="">メニュー2</a> <ul class="sub-menu"> <li><a href="">メニュー2のサブメニュー</a></li> <li><a href="">メニュー2の長いんだよサブメニュー</a></li> <li><a href="">メニュー2のサブメニュー</a></li> </ul> </li> <li><a href="">メニュー3</a></li> <li><a href="">メニュー4</a></li> <li><a href="">メニュー5</a></li> <li><a href="">メニュー6</a></li> <li><a href="">メニュー7</a></li> </ul> CSSは ul{ float:right; font-size:95%; padding-bottom:20px; } ul ul{padding-bottom:0;width:auto;} ul li{ display:inline-block; vertical-align:text-top; text-align:left; padding:5px 0; margin-left:15px; background:url(../images/arrow.png) no-repeat 0 9px; } ul li a{ display:block; padding:0 0 0 12px; overflow:hidden; } ul li li{ display:block; padding:0; margin-left:5px; background:url(../images/arrow2.png) no-repeat 0 6px; } これですと添付画像の左のようになってしまいます。 サブメニューの長さに関係なく、右のようにメニューを詰めることは可能ですか

    • ベストアンサー
    • CSS
  • メニューバーが消えて困っています。

    メニューバーの下に画像を挿入すると、メニューバーが消えてしまいます。 また文章を挿入しようとすると、メニューバーの下から文章が続かず、中盤からはじまってしまいます。 すいませんが原因がわかりません。下記にHTMLコード・CSSコードを記載したので、すいませんがわかる方がおりましたら、教えてください。 HTML；<!DOCTYPE html> <html> <link rel="stylesheet" type="text/css" href="test.css"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>What is HTML?</title> </head> <body> <div id="header-top"> <div id="menu1"> <ul id="down1"> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> </ul> </div> </div> <ul id="dropmenu"> <li><a href="#">Home</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">About US</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Buy</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Q&A</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> </ul> <p class="test">Hello</p>　　　　←　問題の箇所、中盤から始まる。 CSS： /*As for header */ #header-top{ width: 100%; position: fixed; top: 0; left: 0; background: linear-gradient(90deg, #05a 10%, #21b3b2 90%); height: 60px; } } #header-in{ width: 997px; margin: 0 auto; } /*As for header top of website */ #menu1 ul{ margin-left: 1000px; margin-top: 10px; padding :0; list-style: none; } #menu1 li{ padding: 0; margin: 0; float: left; } #menu1 li a{ background: url(最初の画像のアドレス) no-repeat left center; padding: 2px 0px 3px 18px; color: #555; width: 100px; margin: 1px 0px; text-decoration: none; border-bottom: 1px dotted #666666; font-size: 18px; } #menu1 li a:hover{ background: url(入れ替わる画像のアドレス) no-repeat left center; } /* drop menuw */ #dropmenu{ list-style-type: none; width: 800px; height: 10px; margin: 30px auto 300px; padding: 0; background: #8a9b0f; border-bottom: 5px solid #535d09; border-radius: 3px 3px 0 0; } #dropmenu li{ position: relative; width: 20%; float: left; margin: 0; padding: 0; text-align: center; } #dropmenu li a{ display: block; margin: 0; padding: 15px 0 11px; color: #fff; font-size: 14px; font-weight: bold; line-height: 1; text-decoration: none; } #dropmenu li ul{ list-style: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; border-radius: 0 0 3px 3px; } #dropmenu li:last-child ul{ left: -100%; width: 100% } #dropmenu li ul li{ overflow: hidden; width: 200%; height: 0; color: #ff33ff; -moz-transition: .2s; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; transition: .2s; } #dropmenu li ul li a{ padding: 13px 15px; background: #ff33ff; text-align: left; font-size: 12px; font-weight: normal; } #dropmenu li:hover > a{ background: none; color: #ff33ff; } #dropmenu > li:hover > a{ border-radius: 3px 3px 0 0; } #dropmenu li:hover ul li{ overflow: visible; height: 38px; border-top: 1px solid #7c8c0e; border-bottom: 1px solid #616d0b; } #dropmenu li:hover ul li:first-child{ border-top: 0; } #dropmenu li:hover ul li:last-child{ border-bottom: 0; } #dropmenu li:hover ul li:last-child a{ border-radius: 0 0 3px 3px; } #top-pic{ } #test{ float: right; }

    • ベストアンサー
    • CSS
  • レイアウトが崩れてしまう原因を教えて下さい。

    添付データのようなデザインをtableを使わずに作りたいのですが、 テキスト数の増減やphotoのmarginをいじるとレイアウトが崩れてしまいます。 テキストが増えても減ってもレイアウトが崩れない方法はありますか？ <style type="text/css"> .contents{ width: 650px; margin-right: auto; margin-left: auto; } .contents ul{ list-style: none; } .contents ul li.photo{ float: left; border: 1px solid #ccc; padding: 5px; } .contents ul li.text, .contents ul li.title{ margin-left: 200px; } .contents ul li.title{ margin-top: 20px; margin-bottom: 10px; color: #111; } .contents ul li.text{ font-size: 14px; } .contents ul li.photo a img{ border-style: none; outline: none; } .contents ul li.title a:hover{ color: #ccc; } </style> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> </ul> </div> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキスト</li> </ul> </div> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> </ul> </div>

    • ベストアンサー
    • HTML
  • HTML/CSSで配置の仕方がわかりません。

    メニューバーの下に画像を挿入すると、メニューバーが消えてしまいます。 また文章を挿入しようとすると、メニューバーの下から文章が続かず、中盤からはじまってしまいます。 すいませんが原因がわかりません。下記にHTMLコード・CSSコードを記載したので、すいませんがわかる方がおりましたら、教えてください。 HTML；<!DOCTYPE html> <html> <link rel="stylesheet" type="text/css" href="test.css"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>What is HTML?</title> </head> <body> <div id="header-top"> <div id="menu1"> <ul id="down1"> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> </ul> </div> </div> <ul id="dropmenu"> <li><a href="#">Home</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">About US</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Buy</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Q&A</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> </ul> <p class="test">Hello</p>　　　　←　問題の箇所、中盤から始まる。 CSS： /*As for header */ #header-top{ width: 100%; position: fixed; top: 0; left: 0; background: linear-gradient(90deg, #05a 10%, #21b3b2 90%); height: 60px; } } #header-in{ width: 997px; margin: 0 auto; } /*As for header top of website */ #menu1 ul{ margin-left: 1000px; margin-top: 10px; padding :0; list-style: none; } #menu1 li{ padding: 0; margin: 0; float: left; } #menu1 li a{ background: url(最初の画像のアドレス) no-repeat left center; padding: 2px 0px 3px 18px; color: #555; width: 100px; margin: 1px 0px; text-decoration: none; border-bottom: 1px dotted #666666; font-size: 18px; } #menu1 li a:hover{ background: url(入れ替わる画像のアドレス) no-repeat left center; } /* drop menuw */ #dropmenu{ list-style-type: none; width: 800px; height: 10px; margin: 30px auto 300px; padding: 0; background: #8a9b0f; border-bottom: 5px solid #535d09; border-radius: 3px 3px 0 0; } #dropmenu li{ position: relative; width: 20%; float: left; margin: 0; padding: 0; text-align: center; } #dropmenu li a{ display: block; margin: 0; padding: 15px 0 11px; color: #fff; font-size: 14px; font-weight: bold; line-height: 1; text-decoration: none; } #dropmenu li ul{ list-style: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; border-radius: 0 0 3px 3px; } #dropmenu li:last-child ul{ left: -100%; width: 100% } #dropmenu li ul li{ overflow: hidden; width: 200%; height: 0; color: #ff33ff; -moz-transition: .2s; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; transition: .2s; } #dropmenu li ul li a{ padding: 13px 15px; background: #ff33ff; text-align: left; font-size: 12px; font-weight: normal; } #dropmenu li:hover > a{ background: none; color: #ff33ff; } #dropmenu > li:hover > a{ border-radius: 3px 3px 0 0; } #dropmenu li:hover ul li{ overflow: visible; height: 38px; border-top: 1px solid #7c8c0e; border-bottom: 1px solid #616d0b; } #dropmenu li:hover ul li:first-child{ border-top: 0; } #dropmenu li:hover ul li:last-child{ border-bottom: 0; } #dropmenu li:hover ul li:last-child a{ border-radius: 0 0 3px 3px; } #top-pic{ } #test{ float: right; }

    • ベストアンサー
    • HTML
  • ドロップダウンの残像

    どなたか教えていただけないでしょうか。 ドロップダウンメニューを設置した所、一部のメニューで残像が残ります。 【css】 ul.menu { width: 960px; position: relative; list-style:none; float:left; margin:0; padding:0; text-align: left; } ul.menu * { margin:0; padding:0; } ul.menu a { display:block; color:#fff; text-decoration:none; font-weight: bold; } ul.menu li.a { position: relative; float:left; } ul.menu ul { position:absolute; top:50px; left: 4px; background: url(../images/navi/bg.png) repeat; display:none; opacity:0; list-style:none; border: 1px solid #ccc; } ul.menu ul li { position:relative; border-top:none; width:150px; margin:0; border-top: 1px solid #bad7dd; } ul.menu ul li a { display:block; padding:3px 7px 5px; background: url(../images/navi/bg.png) repeat; } ul.menu ul li a:hover { background-color:#c5c5c5; } ul.menu ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } ul.menu ul ul { left:160px; top:-1px; } ul.menu .menulink { width:160px; } ul.menu .topline { border-top:1px solid #aaa; } 【html】 <ul class="menu" id="menu"> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a></li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a></li> </ul> png画像を使って背景透過をしています。 htmlとかcssは勉強中です…宜しくお願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する