人に聞けない痔の悩み、これでスッキリ >>

http://makasete-web.net/dropdown-menu

こちらのサイトを元にドロップダウンメニューを作ってみたのですが、
すぐに引っ込んでしまったり、うまく選べません。
jqueryは借りてくるだけなので、内容はわかってないです;
大元のドロップダウンメニューは安定しているようですが、
どこを治せば安定してボタンを選べるようになるでしょうか(´・ω・`)?

ちょっと、長くなっちゃうのですが、こんな感じのメニューで
上段の中2つがドロップダウンします。
よろしくお願い致しますm(==)m


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>tesuto</title>
<style type="text/css">
a:link {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
* {
margin: 0px;
padding: 0px;
}
body {
line-height: 180%;
}
header {
text-align: center;
}

nav {
width: 930px;
margin-top: 20px;
}
ul{
list-style-type: none;
padding: 0;
color: #fff;
margin: 0;
}
ul#menu li{
display: block;
padding: 0px;
float: left;
position: relative;
height: 27px;
width: 150px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
color: #FFF;
text-align: center;
background-color: #933;
}
ul#menu li a {
display: block;
color: #FFF;
}
ul.child{
display: none;
position: absolute;
padding: 0;
opacity: 0.9;
background-color: #CCC;
font-size: 14px;
width: 150px;
}
ul.child li a{
display: block;
color: #fff;
}
li a:hover {
background-color: #FFBB00;
color: #FFF;
}
ul#menu2 li {
float: left;
width: 155px;
background-color: #666666;
display: block;
margin-right: 5px;
text-align: center;
height: 26px;
color: #FFF;
}
ul#menu2 li a {
color: #FFF;
display: block;
}
#titlle {
margin-top: 100px;
width: 700px;
}
#navmenu {
width: auto;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
}
#cl2 {
height: 100px;
width: 100%;
float: left;
margin-top: 0px;
margin-bottom: 10px;
padding-top: 3px;
background-color: #FFC;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.1 …
<script>
$(function(){
$('#menu li').hover(function(){
$("ul:not(:animated)", this).slideDown();
}, function(){
$("ul.child",this).slideUp();
});
});
</script>
</head>
<body>
<nav>
<ul id="menu">
<li><a href="#">ご案内</a></li>
<li>ご案内
<ul class="child">
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
</ul>
</li>
<li>ご案内
<ul class="child">
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
</ul>
</li>
<li class="menu"><a href="#">ご案内</a></li>
</ul>
</nav>
<div id="titlle">
<div id="cl2"></div>
<div id="navmenu">
<ul id="menu2">
<li><a href="#a">ご挨拶</a></li>
<li><a href="#i">ご挨拶</a></li>
<li><a href="#u">ご挨拶</a></li>
<li><a href="#e">ご挨拶</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</body>
</html>

このQ&Aに関連する最新のQ&A

A 回答 (1件)

スクリプトそのものは単純で、指定のLI要素に対してマウスエンターでスライドダウン、マウスリーブでスライドアップという内容になっています。




>すぐに引っ込んでしまったり、うまく選べません。

ご提示のソースを表示してみると、親メニューと子メニューの間に隙間ができていますので、そこをマウスが通るとマウスリーブとなって、メニューが閉じるという事象が発生します。
マウスを素早く動かすと、うまくいけば子要素のLIへのマウスエンターが間に合って、表示されたままとなります。
ご質問の「安定しない」とはこれではないかと推測しました。

スクリプトを修正して対応することも不可能ではないでしょうが、レイアウトの方法を修正する方が遥かに簡単そうです。
(スクリプトの修正で対応するにしても、レイアウトの方法を変えた方がやりやすそうに思います)


要は、隙間部分をなくすか、隙間を設けるにしてもその部分をLI要素の一部として評価されるようなレイアウトになさればよろしいのではないでしょうか。
一番簡単なのは、
 ul.child{ top:27px; }
みたいに、位置を明示的に指定することで隙間をなくしてしまえば、とりあえずはご期待の動作になるのではないかと推測します。
    • good
    • 1
この回答へのお礼

fujillinさん、さっそくありがとうございました☆

ご教授のように、topの位置を指定して隙間をなくしたら、

動作が安定して、ボタンがすぐにひっこんだりしなくなりました!

スキマにカーソルが合うなんて、絶対一人じゃ解らなかったです;

fujillinさんが神さまみたいに思えます〜(´;ω;`)ブワッ

画像で作り直すしかないかもと思ってたので、大変助かりましたm(==)m

本当にどうもありがとうございました☆

お礼日時:2015/04/01 17:56

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q「jQuery」アコーディオンメニューがうまく動きません

jQuery初心者です。
ホームページのサイドカラムにアコーディオンメニューを作ろうとしているのですが、
上手く動作しないためお力を貸していただけると助かります。


jQueryバージョン:2.1.3

■HTML
<ul>
<li class="oya"><a href="A.html">リンクA</a>
<ul class="kodomo">
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
</ul>
</li>
<li class="oya"><a href="B.html">リンクB</a>
<ul class="kodomo">
<li><a href="BB.html">リンクBB</a></li>
<li><a href="BB.html">リンクBB</a></li>
<li><a href="BB.html">リンクBB</a></li>
</ul>
</li>
</ul>


■希望する動き
普通のアコーディオンの動きで特殊なものでは無いと思うのですが、念のため。

・初期状態は<ul class="kodomo">が非表示。
・<li class="oya"><a href="A.html">リンクA</a>をクリックで以下を開閉。
<ul class="kodomo">
<li><a href="">リンクAA.html</a></li>
<li><a href="">リンクAA.html</a></li>
<li><a href="">リンクAA.html</a></li>
</ul>
・<li class="oya"><a href="B.html">リンクB</a>をクリックで以下を開閉。
<ul class="kodomo">
<li><a href="">リンクBB.html</a></li>
<li><a href="">リンクBB.html</a></li>
<li><a href="">リンクBB.html</a></li>
</ul>

.oyaである
<a href="A.html">リンクA</a><a href="B.html">リンクB</a>クリックの際の動きは下記のどちらでも構いません。
↓↓↓どちらでもいいです↓↓↓
「A.html、B.htmlに飛ぶ。同時にアコーディオンも開く」
「A.html、B.htmlには飛ばず、アコーディオンのみ開く」
※A.html、B.htmlにも同じアコーディオンナビゲーションを設置しています。

そもそもA.html、B.htmlリンクが邪魔なのかもしれませんが、CMSを使用しているため外すことができません。


【失敗したパターン1】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
});
});

※アコーディオンが開いた瞬間に閉じてしまいます。
ちなみに'li.oya a'→'li.oya'にすると.nextが効かなくなりアコーディオンが開かなくなります。


【失敗したパターン2】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});

※パターン1に「return false;」を追加しました。
アコーディオンを開閉できるようになりましたが、
ul.kodomo配下の<a href="">リンクAA.html</a><a href="">リンクBB.html</a>が効かなくなってしまいました。


[失敗したパターン3]
$(function(){
$('ul.kodomo').hide();
$('li.oya').on("click", function() {
$(this).find('ul.kodomo').slideToggle();
return false;
});
});

※パターン3より「li.oya a」→「li.oya」
「.next」→「.find」に変更。
アコーディオンは開閉します。
ただ、ul.kodomo配下の<a href="">リンクAA.html</a><a href="">リンクBB.html</a>をクリックすると該当ページには飛ばず、アコーディオンが閉じてしまいます。

なんだか良くわからなくなってきてしまいました。
ちなみに他のJQuery記述はすべて削除の上、確認、
全体はjQuery(function(){ });で囲っています。

ごくごく初歩的な部分でつまづいているのだとは思いますが、
何卒賢者のお力を。

jQuery初心者です。
ホームページのサイドカラムにアコーディオンメニューを作ろうとしているのですが、
上手く動作しないためお力を貸していただけると助かります。


jQueryバージョン:2.1.3

■HTML
<ul>
<li class="oya"><a href="A.html">リンクA</a>
<ul class="kodomo">
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
</ul>
</li>
<li class="oya"><a href="B.html">リンクB</a>
<ul class="kodom...続きを読む

Aベストアンサー

パターン2に少し手を加えれば動きます。
'li.oya a'→'li.oya > a'

$(function(){
$('ul.kodomo').hide();
$('li.oya > a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});

一つずつ解説します。

【失敗したパターン1】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
});
});
リンクが効いてしまうのでページ移動(=アコーディオンが開いた瞬間に閉じる)
対応にはタグの変更が必要(TARGET="_blank")を入れるなど。
※'li.oya a'→'li.oya'にした場合は「li.oyaの子孫の全てのa」にクリックイベントが不可されるので
next('ul.kodomo')が見つけられない

【失敗したパターン2】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});
'li.oya a'→'li.oya'にした場合は「li.oyaの子孫の全てのa」にクリックイベントが不可されるので
アコーディオンの子要素のaタグにもクリックイベントが付加されていため。
※'li.oya a'→'li.oya > a'にすると「li.oyaの子のa」に限定されるので希望している動きになります。

[失敗したパターン3]
$(function(){
$('ul.kodomo').hide();
$('li.oya').on("click", function() {
$(this).find('ul.kodomo').slideToggle();
return false;
});
});
これは'li.oya'のタグがクリックされた時(子孫の要素も含む)
'li.oya'の子孫から'ul.kodomo'を探し出し、slideToggleを行い、
return falseする(ページ移動をキャンセル)
という処理になっています。

パターン2に少し手を加えれば動きます。
'li.oya a'→'li.oya > a'

$(function(){
$('ul.kodomo').hide();
$('li.oya > a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});

一つずつ解説します。

【失敗したパターン1】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
});
});
リンクが効いてしまうのでページ移動(=アコーディオンが開いた瞬間に閉じる)
対応...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QCSSプルダウンメニューとjQueryの重なりについて

CSSプルダウンメニューとjQueryの重なりについて

下記サイト
http://www.karuizawanet.com/cgi-bin/database/database.cgi?cmd=s&sc=hotel

にてCSSプルダウンメニューと

Simple jQuery Spy Effect(要素の自動スクロール)
http://f32.aaa.livedoor.jp/~azusa/index.php?t=ajax&p=jquery_plugin_scroll

を設置していますが、

CSSプルダウンメニューが
要素の自動スクロールの下に隠れてしまい
困っています。

CSSのz-indexを入れてみましたが、改善されません。

どなたかお力添えをお願いいたします。

Aベストアンサー

cssでul.menu ulを下記の通り書き換え。

position:relative;

position:absolute;

以下追加。
z-index:2;

QjQueryのアコーディオンメニューで、他をクリックした際に自動で閉めたい。

JavaScript、CSS初心者のものです。
今回、jQueryのアコーディオンメニューを使用しているのですが、現状ではクリックするとメニューはうまく開くのですが、他をクリックした際にはじめにクリックした箇所が開いたままになってしまいます。
これを自動で閉じ、常に最新のクリックしたメニューのみ表示するにはどうすればよいのでしょうか?
お手数ですが、ご教示お願いします。

以下ソースを載せておきます。

◆javascript◆
<script type="text/javascript">
$(function()
{
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function(i)
{
var elementVal = $(this).next("div");

$(this).click(function()
{
elementVal.toggle("fast");
});
});
});
</script>

◆HTML◆
<div id="simpleAccordion">
 <h1>画像の箇所</h1>
 <h2><a href="#">クリックする箇所</a></h2>
 <div>クリックされると開く箇所</div>
 <h2><a href="#">クリックする箇所</a></h2>
 <div>クリックされると開く箇所</div>
</div>

JavaScript、CSS初心者のものです。
今回、jQueryのアコーディオンメニューを使用しているのですが、現状ではクリックするとメニューはうまく開くのですが、他をクリックした際にはじめにクリックした箇所が開いたままになってしまいます。
これを自動で閉じ、常に最新のクリックしたメニューのみ表示するにはどうすればよいのでしょうか?
お手数ですが、ご教示お願いします。

以下ソースを載せておきます。

◆javascript◆
<script type="text/javascript">
$(function()
{
$("#simpleAccordion div"...続きを読む

Aベストアンサー

#1です。

最初の1行目で、サブメニューを閉じて(=非表示にする)いるので、それをコピペすればよいだけでは?
自作ではなかったのかな?

$(function()
{
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function(i)
{
var elementVal = $(this).next("div");

$(this).click(function()
{
$("#simpleAccordion div").hide(); //←1行追加
elementVal.toggle("fast");
});
});
});
(これだと、トグルでクリックして閉じるようにはならないので、トグルを生かしたいのなら、自分以外を閉じるようにする必要あり)


ついでにちょっとだけコンパクトにして、不用のiを削除すれば

$(function() {
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function() {
$(this).click(function() {
$("#simpleAccordion div").hide();
$(this).next("div").toggle("fast");
});
});
});

#1です。

最初の1行目で、サブメニューを閉じて(=非表示にする)いるので、それをコピペすればよいだけでは?
自作ではなかったのかな?

$(function()
{
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function(i)
{
var elementVal = $(this).next("div");

$(this).click(function()
{
$("#simpleAccordion div").hide(); //←1行追加
elementVal.toggle("fast");
});
});
});
(これだと、トグルでクリックして閉じるようにはならないので、トグルを生かしたいのなら...続きを読む

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q【jQuery】クリックで開閉するメニュー

今、クリックで開閉するプルダウンメニューを以下のように作っているのですが

【HTML】
<div class="menu">メニュー</div>

<div class="a">
<p>カテゴリー1</p>
<p>カテゴリー2</p>
</div>


【jQuery】
$(".menu").click(function(e){
if($(".a").css("display") == "none"){
$(".a").show();
}else{
$(".a").hide();
}
});


".munu"の要素をクリックした場合、メニューの".a"の要素が開き
もう一度".munu"の要素をクリックすると、メニューの".a"の要素が閉じます。

基本的な動作はこれでいいのですが
".munu"や".a"の要素以外の場所をクリックしたら
".a"を閉じるようにしたいのですが、どのようにすればいいのでしょうか?

OKWaveサイトのメニューバーの開閉みたいに、メニューバー以外の場所をクリックしたら
表示されているメニューのカテゴリーが閉じる動作にしたいです。

今、クリックで開閉するプルダウンメニューを以下のように作っているのですが

【HTML】
<div class="menu">メニュー</div>

<div class="a">
<p>カテゴリー1</p>
<p>カテゴリー2</p>
</div>


【jQuery】
$(".menu").click(function(e){
if($(".a").css("display") == "none"){
$(".a").show();
}else{
$(".a").hide();
}
});


".munu"の要素をクリックした場合、メニューの".a"の要素が開き
もう一度".munu"の要素をクリックすると、メニューの".a"の要素が閉じます。

基本的な動作は...続きを読む

Aベストアンサー

$(document).on('click', '*', function (e) {
var target = e.target;
var a = $('div.a');
if ($(target).parents('div.menu, div.a')[0] // targetが div.menu, div.a どちらかの子孫
|| target === $('div.menu')[0] // target が div.menu
|| target === a[0]) // target が div.a
return; // いずれかの条件に一致すれば処理を終了

a.hide();
});


documentで監視してみた一例です。第二引数にセレクタを置いてますが、省略してもかまいません。
clickイベントならdocumentですべての要素を補足できますから、event.targetプロパティの扱いにも慣れておくと良いと思います。.on()はバージョン1.7から使えます。

1.7以前のバージョンでは.delegate()を使って下さい。


$(document).delegate('*', 'click', function (e) {
...
});


引数の位置関係に注意と、こちらはセレクタの省略ができません。

$(document).on('click', '*', function (e) {
var target = e.target;
var a = $('div.a');
if ($(target).parents('div.menu, div.a')[0] // targetが div.menu, div.a どちらかの子孫
|| target === $('div.menu')[0] // target が div.menu
|| target === a[0]) // target が div.a
return; // いずれかの条件に一致すれば処理を終了

a.hide();
});


documentで監視してみた一例です。第二引数にセレクタを置いてますが、省略してもかまいません。
clickイベントならdocumentですべての要素を補足できますか...続きを読む

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング