CSSのpositionで画像を上にかぶせて表示させています。
そこでIE,firefoxはOKなのですがchromeだけ15pxぐらい下にずれてしまいます。

下記の2つのハックを使った場合、display:noneだと反映されたのですが
positionにすると何も反映しなくなります。

ハックはpositionには効かない、などあるのでしょうか?
どなたか教えていただけますでしょうか。

よろしくお願いいたします。

-----------------------

body:nth-of-type(1) #selector {position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;
}

-----------------------

@media screen and (-webkit-min-device-pixel-ratio:0){
#selector {
position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;
}
}

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

A 回答 (2件)

趣味でWEBサイトを作成している者です。


あの・・・display:none;で反映されたって・・・消えただけですよね…
これは非表示にする物です。
positionとは何ら関係のないものです。
あとposition:absolute;よりもrelativeの方がいいですよ?
absoluteだとほかと全く独立して位置決めするので画面上部、画面左右からの指定ですが
relativeだと元々出る位置からの指定で、画面倍率の値をいじってもずれません
セットで居る為だと思います。
あと上の画像の値にz-index:1;とでも書いて下さい。
これは画面に対して奥(数字が小さい1)手前(数字が大きい10)というz軸を設定する為のものです。
これ入れるとずれないと思います。
同じ位置で重なるとどうしてもずれが出ると思いますので。
    • good
    • 0

HTMLの抜粋がないので何をしたいかいまひとつわからないのですが?


absoluteは、親コンテナブロックがstatic以外のとき、親ボックスに対しての絶対配置ですが、一部ブラウザはrelativeに似た挙動をするものがあります。
また画像入れているものをブロックと判断して上下にマージンをとるものもあります。きちんとCSSを理解して対策をすればハックの必要はないはずですが?
★きちんと標準モードで動作するようにDOCTYPEを記述する。
★画像を含むそのコンテナブロック内の位置をrelativeないabsoluteなどで指定する。
★その子供要素に関してmarginやpaddingはいったん0にしておく。
とか・・
div.section{padding:0;position:relative;}
div.section p.image{position:absolute;margin:0;padding:0;tip:0px;left:0;z-index:1;}
とか・・
    • good
    • 0

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

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

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

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

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

QIEとクロームの表示ずれ

普段IEを使ってHPを表示しているのですが、クロームで
表示してみたところ、添付資料のように表示されました。
(レイアウトに関する部分はCSSで定義しています)

他のページもほとんど同じようなズレ方なのですが、
なにか簡単に修正ができるのでしょうか?

Aベストアンサー

IEのバージョンがわかりませんが、たぶんウェブ標準のすべてのブラウザでそうなります。
基本的な対策は、ウェブ標準に直し、IEが互換モードではなく標準モードで起動するようHTMLを修正する必要があります。
 DOCTYPEスイッチで、標準モードで起動するように直すこと
・doctypeスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )

 もちろん、HTMLもDOCTYPEに合わせて修正する必要があるでしょう。
 さすがにないでしょうが、可能ならHTML4.01strict,XHTML1.0strict,XHTML1.1(XHTML1.1にはtransitinalやframesetはない)・・1999年の勧告以来
【引用】____________ここから
HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )]より
 とされてきましたから、strictだとは思いますが・・

 なお、互換モードで一番問題となるのは、IEのスタイルシートのサイズ計算のバグです。
すなわち、コンテナブロックのサイズをpaddin辺の内側ではなくborder辺の内側として計算してしまうことにあります。
 IEを標準にWebページを作成すると良く犯す失敗です。できれば他のウェブ標準ブラウザを使用して作成するほうが無難です。特にFirefoxは開発用ツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )が豊富ですから、この様なときにとても助かります。

IEのバージョンがわかりませんが、たぶんウェブ標準のすべてのブラウザでそうなります。
基本的な対策は、ウェブ標準に直し、IEが互換モードではなく標準モードで起動するようHTMLを修正する必要があります。
 DOCTYPEスイッチで、標準モードで起動するように直すこと
・doctypeスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )

 もちろん、HTMLもDOCTYPEに合わせて修...続きを読む

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

QChrome だと、画像が少し下にずれてしまう

こんにちは!

CSS初心者で、今回初めてCSSを利用してホームページを作っています。
制作中に、行き詰ってしまい質問をさせていただきました。

メインナビの背景に画像、その上にリストのテキスト、そしてカーソルオーバーをすると、違う画像が表示するようにしています(ナビは、リストをfloatで横並びに表示しています)。

IEだと、問題なく正しい位置で表示されるのですが、Firefoxや Chromeだと、カーソルオーバー用の画像が下に少しずれて表示されてしまいます。

元凶を、探してみたんですが、なかなか見つけられません。
わかる方がいらっしゃったら、教えていただけないでしょうか。

お粗末なCSSコードですが(多分、無駄なコードがいっぱいありそう・・・)
のせさせていたたきました。

よろしくお願いします。





CSS
--------------------------------------------------------------


@import url(base.css);
body{
text-align:center;
margin-right : auto;margin-left : auto;
background-image : url(images/bg_brown.png);
background-repeat: repeat;
font-size : 90%;
padding-top : 0px;
padding-bottom : 0px;
margin-top : 0px;
margin-bottom : 0px;
height : 100%;
}
#wrap{
text-align : center;
margin-top : 0px;
margin-left : auto;
margin-right : auto;
margin-bottom : auto;
width : 100%;
padding-top : 0px;
}
#com_back{
background-image : url(images/bg_green.png);
background-repeat : repeat-x;
}
#g_navi_back{
width : 100%;
height : 80px;
text-align : center;
background-repeat : repeat;
background-image : url(images/bg_g_navi.png);
}
#g_navi{
overflow : hidden;
width : 900px;
margin 0 auto;
margin-left : auto;
margin-right : auto;
background-repeat : no-repeat;
background-image : url(images/navi_base.png);
height : 80px;
}
#g_navi ul{
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
}
#g_navi li{
text-align : center;
width : 180px;
float : left;
border-collapse : collapse;
background-position : left center;
top : 50%;
bottom : 50%;
letter-spacing : 1px;
line-height : 18px;
}
#g_navi li a{
display : block;
padding-top : 20px;
}
#g_navi ul li a:link{
text-decoration : none;
color : black;
}
#g_navi ul li a:hover{
background-image : url(images/navi_hover_g.png);
background-repeat : no-repeat;
background-position : center center;
height : 80px;
}
.inner{
text-align : left;
margin-top : 0px;
margin-left : auto;
margin-right : auto;
width : 900px;
background-repeat : repeat;
height : auto;
background-image : url(images/bg_white.png);
}

html
------------------------------------------------------------------------------
<!--外枠-->
<div id="wrap">
<!--ロゴ-->
<div id="com_back"><div id="com" ></div></div>

<!--ナビ-->
<div id="g_navi_back">
<div id="g_navi">
<UL style="list-style-type : none">
<LI><a href="index.html">ホーム</a></li>
<LI><a href="**********">ご案内</a></li>
<LI><a href="**********">ご利用方法</a></li>
<LI><a href="**********">イベント詳細</a></li>
<LI><a href="**********">アクセス</a></li>
</UL></div>
</div><!--ナビ_end-->
<div class="clear"><hr /></div><!--ナビfloatクリア-->

<div class="inner"><!--インナー-->

こんにちは!

CSS初心者で、今回初めてCSSを利用してホームページを作っています。
制作中に、行き詰ってしまい質問をさせていただきました。

メインナビの背景に画像、その上にリストのテキスト、そしてカーソルオーバーをすると、違う画像が表示するようにしています(ナビは、リストをfloatで横並びに表示しています)。

IEだと、問題なく正しい位置で表示されるのですが、Firefoxや Chromeだと、カーソルオーバー用の画像が下に少しずれて表示されてしまいます。

元凶を、探してみたんですが...続きを読む

Aベストアンサー

そんな長くて煩雑だと・・・途中で読む気がうせてしまいました。すみません。
IEでのみ表示が違う原因で、最も多いのは互換モードでの動作です。--IEの解釈が間違っている--
HTMLを標準モードで起動するように書き換えてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
・・・
詳しくは、
DOCTYPE スイッチ - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&output=search&sclient=psy-ab&q=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&oq=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&aq=f&aqi=g1&aql=&gs_l=hp.3..0.1480.11553.1.12817.18.15.2.0.0.0.682.3732.0j10j1j1j1j2.15.0...0.0.TUp2L8opvrs&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=d0414a132c82753&biw=1024&bih=619 )
 など

 HTML5を目前とした今は、transitinalは過去の技術です。1999年のHTML4.01の勧告以来「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」といわれ続けてきたことですから。

 HTMLを
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
 などでチェックしながら、ウェブ標準にまず直してください。

 それでスタイルシートを記述すれば、どのブラウザでも標準モードで起動し、ブラウザによる差は消えるでしょう。

 なお、スタイルシートはHTMLが文書構造だけ記述してあれば、もっとシンプルに簡単になるし、わかりやすくなります。

 昨日回答した
(CSS)縦メニューを一枚画像で作るには・・ - Webデザイン・CSS - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7464353.html )
 なんて、HTMLは極めて簡単で、スタイルシートもわかりやすいかと。

 たぶん、あなたの期待されていることをHTMLさえ正しければ・・・HTMLは半分、スタイルシートは1/10で済むと思います。
★継承されるプロパティは、一度しか書かない
★同じ設定をする要素はグループ化する。
★デザインのためにidやclassは書かない
 これだけで、随分とスリムになりメンテナンスも容易になります。
「例」
 (CSS)縦メニューを一枚画像で作るには・・ - Webデザイン・CSS - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7464353.html )

 具体的には、HTMLは
<div class="nav">
 <ol>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
 </ol>
</div>
 だけでよいのです。

そんな長くて煩雑だと・・・途中で読む気がうせてしまいました。すみません。
IEでのみ表示が違う原因で、最も多いのは互換モードでの動作です。--IEの解釈が間違っている--
HTMLを標準モードで起動するように書き換えてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
・・・
詳しくは、
DOCTYPE スイッチ - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&output=search&sclient=psy-ab&q=DOCTYPE+%E3%82%B9%E3%82...続きを読む

QcssでIEとFIREFOX(とchrome)の表示が違う

http://www.recipe-de-cooking.com/で
IEで見たときとfirefoxで見たときではレイアウトが異なっています。
中央寄せの状況もブラウザで違い、またコンテンツの幅も違っています。
firefoxでは右端が出っ張った形になっています。(ガタガタ)なぜでしょうか?
解決方法がわからないので教えてください。

Aベストアンサー

IEの横幅 -> width
他 -> width + 左右padding(指定があれば) + 左右border(指定があれば)

全体や広告部分にも該当箇所があるかと思います。
これらプロパティを併用しないようなつくりにするか、
ブラウザ別にスタイルを変えるなど対処してください。

「CSSハック」で検索すると、特定のブラウザに向けて
スタイルを設定する方法を説明するサイトが沢山出るかと思います。

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の方も修正する方法でもよけ...続きを読む

QIEとFireFoxでの指定位置のズレに困っています。

IEとFireFoxでの指定位置のズレに困っています。
cssでポップアップを施した部分についてなんですが、IEだと思った通りの位置に出てくるんですけど、FireFoxだと全然違った位置に出てきてしまいます。
ネットで色々調べて、知る限りの事を全てやってみましたが、結局一週間も無駄に過ごしています。だれか助けてください(ΩДΩ)

ちなみに以下がそのcssとhtmlです

■css■

.popup img.pop {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

.popup a:hover {
position:relative;
}

.popup a:hover img.pop {
top: -290px;
left: -68px;

}

■html■

<DIV class="popup" align="center"><SPAN><a href=""><img class="pop" width="260" height="243" src="1.gif"/><IMG width="103" height="111" src="image1.jpg" border="0"></a></SPAN></DIV>


何をどう書き足したらFireFoxでもきちんとした場所に出てくるようになるんでしょうか?
どうぞよろしくお願いしますm(。-_-。)m

IEとFireFoxでの指定位置のズレに困っています。
cssでポップアップを施した部分についてなんですが、IEだと思った通りの位置に出てくるんですけど、FireFoxだと全然違った位置に出てきてしまいます。
ネットで色々調べて、知る限りの事を全てやってみましたが、結局一週間も無駄に過ごしています。だれか助けてください(ΩДΩ)

ちなみに以下がそのcssとhtmlです

■css■

.popup img.pop {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

.popup a:hover {
position:relative;
}

.popup a...続きを読む

Aベストアンサー

IEのスタイルシートの解釈には、いまだにバグがあります。そこで、あんなおかしな挙動になる。(あなたではなく、IEの動作はウソという意味)

 そこで、少しオーソドックスな書き方をします。
 具体的にどこに表示したいかの補足がないので、親コンテナブロックの上から99%に指定してあります。top:-240pxとかでもよいですから、任意に変更すること。

・基本はabsoluteは、その親コンテナブロックがstatic以外だと、親コンテナブロックに対して、絶対配置される。
・動的な疑似クラスは、古いブラウザだとA要素にしか働かないので、a要素に適用する。

 が基本にります。

【参考資料】
5.11.2 リンクに関する疑似クラス ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#link-pseudo-classes )
5.11.3 動的な疑似クラス ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#dynamic-pseudo-classes )
9.3.1 配置体系を選択する ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#choose-position )

★その前に、HTML自体が正しくないとなりません。【最も重要な基本です】
  これができてないと、ややこしくなるし、どう逆立ちしても無理になる。

 今回は、(htmlに対するリンクなので)ナビゲーションリストで、画像で示していると解釈して次のようなマークアップがされているとします。(あなたのHTMLでは無理なのもありますし。)
 下記HTMLだと、スタイルシートを解釈しないユーザーエージェントはむろん、スタイルシートを正しく理解できないユーザーエージェントはスタイルシートを解除することで閲覧に支障がないでしょう。大きな画像が表示されると邪魔・・

・・・・・・・・・・下記はタブを全角スペースで置き換えてあります。・・・・・・・・・・
・・・・・・・・・・画像はいずれも./images/にあるものとします。・・・・・・・・・・
・・・・・・・・・・画像、リンク先ファイル名は変えてあります。・・・・・・・・・・

<ol class="imageList">
 <li>
  <a href="page1.html">
   <img width="103" height="111" src="../images/image1.jpg" alt="犬">
   <span style="height:243px;width:260px;background-image:url(../images/1.gif)"><span>犬の写真へ</span></span>
  </a>
 </li>
 <li>
  <a href="page2.html">
   <img width="103" height="111" src="../images/image2.jpg" alt="猫">
   <span style="height:243px;width:260px;background-image:url(../images/2.gif)"><span>猫の写真へ</span></span>
  </a>
 </li>
</ol>

注意) <span>犬の写真へ</span>,<span>猫の写真へ</span>の部分は、
<span><img src="透明な画像" height="10" width="10" alt="犬の写真">の方がよいかも・・・
 そうすると、スタイルシートの
ol.imageList a:hover span span,
ol.imageList a:focus span span,
ol.imageList a:active span span
{display:none;}
が不要になる。

★ポップアップ時の画像のサイズが異なるときは、位置を個別にHTML内で指定するとよい
 <span style="height:243px;width:260px;background-image:url(../images/2.gif)">
で指定する。
 <span style="height:243px;width:260px;background-image:url(../images/2.gif);top:-200px;">

☆Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
☆W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )
で検証済み。

★ブラウザ(IE8,firefox,safari,googlechrome)は、同じ位置に表示される。
★Operaは、position:absoluteに対応していないためおかしな位置に表示されます。

________ここから全ソース(HTNK4.01strict/厳密型)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:hoge@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">
<!--
html,body{
margin:0px;padding:0px;background-color:rgb(200,200,200);
}
body>div{
width:60%;min-width:500px;
max-width:800px;margin-left:auto;margin-right:auto;
background-color:white;padding:10px;border:none;
}
/* ここから */
ol.imageList{
display:block;
margin-left:0px;
padding-left:0px;
}
ol.imageList li{
display:inline-block;
margin-left:0px;
margin-right: 10px;
padding:0px;
list-style: none;
border:solid 1px blue;
position: relative;
}
ol.imageList a img{border:none;}
ol.imageList a span{
display:none;
position:absolute;
z-index: 2;
border: 1px red solid;
text-decoration: none;
/* ホーバー時のpopup画像の位置指定 */
top:99%;
left:-10px;
}
ol.imageList a:focus span,
ol.imageList a:hover span{
display:block;
border: 1px red solid;
}
ol.imageList a:active span{
display:block;
border-color:green;
}
ol.imageList a:hover span span,
ol.imageList a:focus span span,
ol.imageList a:active span span
{display:none;}
-->
</style>

</head>
<body>
<div>
<h1>サンプル</h1>
<p>ブラウザの横幅を変更しても、太郎<span class="rub" style="left:-4em">(たろう</span>内容が左右真中に表示されています</p>
<p class="test">こんな感じです。幅60%、ウィンドウ幅を変えると、ウィンドウ幅によって最小500px、最大800px内で変化する。</p>
<ol class="imageList">
<li>
<a href="page1.html">
<img width="103" height="111" src="../images/image1.jpg" alt="犬">
<span style="height:243px;width:260px;background-image:url(../images/1.gif)"><span>犬の写真</span></span>
</a>
</li>
<li>
<a href="page2.html">
<img width="103" height="111" src="../images/image2.jpg" alt="猫">
<span style="height:243px;width:260px;background-image:url(../images/2.gif)"><span>猫の写真</span></span>
</a>
</li>
</ol>
</div>
</body>
</html>

IEのスタイルシートの解釈には、いまだにバグがあります。そこで、あんなおかしな挙動になる。(あなたではなく、IEの動作はウソという意味)

 そこで、少しオーソドックスな書き方をします。
 具体的にどこに表示したいかの補足がないので、親コンテナブロックの上から99%に指定してあります。top:-240pxとかでもよいですから、任意に変更すること。

・基本はabsoluteは、その親コンテナブロックがstatic以外だと、親コンテナブロックに対して、絶対配置される。
・動的な疑似クラスは、古いブラウザだと...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

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>

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 )を使うと、このあたりがよくわかると思います。


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

人気Q&Aランキング

おすすめ情報