出産前後の痔にはご注意!

position:fixedが親要素に準じて表示してくれません。。

<div id="relative">
  <div id="flashContent"><img></div>
  <div id="TopBnr"><img></div>
</div>


ーーCSS-ーーーーーーーーーーーーーーーーーーーーーーーーーーーー

#relative {
     position:relative;
     width:990px;
     height:374px;
     margin:0px auto;
}
#flashContent {
     width:990px;
     height:374px;
     margin:0px auto;
     z-index:0; }
#TopBnr {
position:fixed;
width:260px;
height:90px;
right:90px;
top:30px;
z-index:1;
}

Ie6対応済みです。。
なぜかIeでの配置はできているのですが、
それ以外のブラウザでは、親要素に準じて配置してくれません。
どなたか解決策を教えてください。。

A 回答 (3件)

<div class="IE_old"><!-- IEバグ対策 -->


 <div id="Top">
  <!-- XHTML/HTML及び古いブラウザ用 -->
  <object classid="clsid:D27CDB6E- AE6D-11cf-96B8-444553540000"
  codebase="http://get.adobe.com/jp/flashplayer/" width="990" height="374">
    <param name="movie" value="http://example.com/test.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <embed src="http://example.com/test.swf" quality="high"
     pluginspage="http://get.adobe.com/jp/flashplayer/"
     type="application/x-shockwave-flash" wmode="transparent"
     width="990" height="374"></embed>
  </object>
  <img src="cde.jpg" class="logo" width="260" height="90">
 </div>
</div>

CSS>>>>

div.IE_old{ /* old_IE */
text-align:center;
margin:0px;
}
div#Top {
position:relative;
width:500px;
height:333px;
margin:0px auto;
}
div#Top object{
display:block;
width:100%;
height:100%;
}
div#Top img{
display:block;
position:absolute;
right:90px;
top:30px;
}
    • good
    • 0

補足です。


>それ以外のブラウザでは、親要素に準じて配置してくれません。
は思い違いではないですか
fixedは、表示領域を参照するので親要素は無関係です。親ボックスに影響を受けてはならないのに、なぜ「親要素に準じて」と聞かれるのかがわかりません。


【引用】____________ここから
9.6 絶対配置(Absolute positioning)
 絶対配置のボックスは、包含ブロックに対する位置を明示され、通常フローから完全に取り除かれる(つまり兄弟要素に全く影響しない)。 ・・・【中略】・・・
 9.6.1 固定配置(Fixed positioning)
 固定配置は絶対配置の1種である。 固定配置ボックスの包含ブロックは閲覧領域に設定するというのが、唯一の相違点である。連続媒体では、文書がスクロールしても固定配置ボックスは動かない。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[視覚整形モデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )]より
    • good
    • 0

それだと



      ┌───┐
      │TopBnr│
      └───┘
┌─────┐
│┌───┐│
││■■■││
│└───┘│
└─────┘
とならなければならないのですが、それでよいのですか?

この回答への補足

ありがとうございます。
思い違いでした。。
まだまだ未熟なので、せっかく回答していただいたのに、半分程しか理解できていません。。

参考サイトを読ませていただきます。

最終的には

┌───────────┐
│ ┌──┌───┐  │
│ │  │TopBnr│ │
│ │  └───┘  │
│ └──────┘  │
└───────────┘

を目指しています。。

補足日時:2010/05/17 22:49
    • good
    • 0

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

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

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

Qリンクの下線を消したいのに消せない(CSS)

自分でタグを入力して、XHTMLとCSSでサイトを作っているのですがどうしても解決できない問題があるので質問させていただきます。

サイトの各ページに飛ぶテキストリンクをページの上部に作っていて、そのリンクを

・通常時(a:link)は・・・・・・・・下線なし
・訪問後(a:visited)は・・・・・・・下線なし
・マウスオーバー時(a:hover)は・・・下線あり

というふうにしたいので、CSSに書いたのですがどの場合においても下線が表示されてしまいます。

CSSをどのように書き直せば、上記のように下線が表示されるのでしょうか教えてください。

XHTML:http://love.meganebu.com/~twilight/question/index.html

CSS:http://love.meganebu.com/~twilight/question/mainstyle.css

Aベストアンサー

このあたりのサイトが参考になるかと。
http://www.tagindex.com/stylesheet/link/text_decoration.html

Q会社名の後につくInc.とは?

こんにちは。
会社名の後につく、Inc.とは、どういう意味でしょう?会社の法的な位置付けをあらわしていると思うのですが、実際の所どうなんでしょう?1.日本語でどういう意味か、2.英語の原型はどういうかたちか。教えて下さい。


ちなみに、co.,ltd.はcompany limited か、または、cooperation limitedで、株式会社(有限責任)の意味ですよね??


回答よろしくお願いします。

Aベストアンサー

inc.は
incorporated の略で
「一体化した,法人組織の」の意味だそうです。
「有限責任の」の意味もあります。

映画「モンスターズ・インク」のインクもこれですね。

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>

Q左○○px、右は残りの幅(100%-左px)ってできますか?

CSSでレイアウトを組みたいと思ってます。

要は左と右に2つに割って左はpx単位で指定して、右は残りのサイズ、ウインドウのサイズ変更に伴って可変するようにレイアウトを組んでいきたいと考えています。

発想力が足りないのか、基礎的な知識が足りないのか・・・
どちらも足りないとは思いますが、おしえていただければ幸いです。

どうかよろしくお願いいたします。

Aベストアンサー

とりあえずdivでフロートするだけでもよいかと

<style>
#l{
width:200px;
background-Color:blue;
float:left;
}
#r{
width:auto;
background-Color:red;
}
#b{
width:auto;
background-Color:green;
}
</style>
<div id="l">test</div>
<div id="r">test</div>
<div id="b">test</div>

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q外部ファイルにしたら文字化けしてしまいました

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://~";
jmp[1] = "http://~";
jmp[2] = "http://~";
jmp[3] = "http://~";
jmp[4] = "http://~";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "img/img1.jpg";
img[1] = "img/img2.jpg";
img[2] = "img/img3.jpg";
img[3] = "img/img4.jpg";
img[4] = "img/img5.jpg";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"' target='_blank'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先...続きを読む

Aベストアンサー

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

一般的に、Windowsの標準の環境だと。前段で述べた様な、様々な種類の文字コードを扱う事が出来ないので。事実上、作業は「Shift-JIS」1択と言う事になります。また『メモ帳(notepad.exe)』では「改行コード」を編集出来ないので、HTMLやJavaScript(JSファイル)を編集するには力不足です。何か特別なソフトとかを使わずに、Windows標準の『メモ帳(notepad.exe)』でJSファイルを編集したのであれば、十中八九、文字コードは「Shift-JIS」になっているはずです。


>文字コード
「文字コード」とは、コンピュータ上でテキストファイル(*.txt)をやり取りする時の方式の事で、現在では100種類近くの文字コードがあります。インターネット上でよく使われる文字コードは、「UTF-8」、「Shift-JIS」、「EUC-JP」~の3種類で、基本的にはこれだけ押さえておけばOKです。

考え方としては、日本語や英語のように。同じ意味を持つ文書でも色んな国の言葉で書く事が出来る様に。コンピュータ上での文書の表し方にも方言というか、色んな国の言葉がある様な物だと思ってて下さい。先に述べた「改行コード」や「BOM無し」とかは忘れて下さい。

で、初心者はコレだけ覚えて置いて欲しいのですが…

・半角英数文字だけなら文字化けは起きない

~と(実際は違いますが、話がややこしくなるので簡単にします)。半角英数文字ってのは「abc,?!#123456+-=」みたいな文字の事です。全角文字とは違うので注意して下さい(全角文字 → abc,?!#123456+-=)。従って逆説的に言えば「日本語を使う時は常に文字コードの影響を受ける」と言う事です。

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

...続きを読む

Q

CSSの質問です。

<ul>と<li>でリストマークを消すために
list-style-type:noneとするのは<ul>と<li>のどちらに設定するのが正しいですか?

どちらに設定してもリストマーク消えますけど。
どちらに設定したら規格上違反とかありますか?

Aベストアンサー

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Generated content, automatic numbering, and lists( http://www.w3.org/TR/CSS2/generate.html#propdef-list-style )]より

 OLとUL要素からLI要素に "のlist-style 'の値を転送し継承します。これは、リストのスタイル情報を指定するための推奨方法です

 このことから、ulないし、olに指定すると、その子孫のliに引き継がれるようですし、それが推奨されていて、どのブラウザもそれに従うようです。実際、最初にも書きましたようにブラウザのデフォルトの捨て要るシートもulに対して指定しているようです。

 listのスタイルシートは他にも問題があって、liを字下げして表示するブラウザが多いのですが、その字下げをmarginを使うか、paddingを使うか、それをul,olに対してか、liに対してかもブラウザによって差があります。
 そこで、私は、
div.nav ul,div.nav ul,div.nav li{display:block;list-style:none;margin:0;padding:0;}
といったんリセットしてから、様々な指定を付け加えていくことにしています。

 文法的にも正しいし、かつブラウザ間の実装の差も吸収できますから・・

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values fr...続きを読む

QWindows標準の中国語(繁体字)のゴシックフォントはありますか?

Windows標準で、
簡体字(明朝系)→ SimSun
簡体字(ゴシック系)→ SimHei
繁体字(明朝系) → MingLiu
はありますが、
繁体字(ゴシック系)フォントが見当たらないのですが、もし知っている方がいらっしゃったらお教えください。
中国語(繁体字)Windowsでは普通なんというゴシックフォントを使っているのでしょうか?自由に使える適当なゴシックフォントがなくて困っています。
よろしくお願いいたします。

Aベストアンサー

なんだかあちこちで回答しているような,いろんな携帯で同じ人と会話しているような,変な感じですね。

それはともかく,一部の漢字が使えないのは,CJK で無理に統一したせいかもしれません。具体的に何という字でしょうか?

それから,「。」や「,」ですが,台湾式に真ん中に丸や点を打ちたいと言うことでしょうか? それならば,たとえば Word であれば,[挿入]-[記号と特殊文字] で,フォントに SimHei を選択,種類で「CJK用の記号および分音記号」を選択すれば,あります。

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

Qリンクの文字と下線の間にスペースを持たせたい

ホームページを制作する際のリンク設定について教えてください。
文字とリンク下線の間を少し空けるには、「text-decoration:underline」以外にどのような記述が必要なのでしょうか?

Aベストアンサー

アンダーラインの間隔を調整するプロパティはありませんが、
やりたいことは下記ような感じでしょうか。

--------------
<html>
<head>
<style>
a {
color: #0033cc;
text-decoration: none;
border-bottom: solid 1px #0033cc;
padding-bottom: 0px; /* ←ここの値を変更して文字との間隔を調整 */
}
</style>
</head>
<body>
<a href="http://oshiete.goo.ne.jp/">あいうえお</a>
</body>
--------------

※IEは後方互換モードでしか駄目みたいですが。


人気Q&Aランキング