解決済み

maqueとabsolute

  • 困ってます
  • 質問No.676788
  • 閲覧数109
  • ありがとう数2
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 68% (1434/2088)

<html>
<head>
<style type="text/css">
<!--
.1{background-color:blue;width:200;height:100;
position:absolute;}
.2{background-color:red;width:200;height:100;}
-->
</style>
</head>
<body>
<marquee direction="right">
<span class="1"></span>
</marquee>
<marquee direction="left">
<div class="2"></div>
</marquee>
</body>

このようにBoxを2つ書きマーキーで右からと左からの交差を作りたいのですが、なぜかclass="2"でその列にほかのBOXが表示できないようです。つまりマージンでclass1をちょっと下にずらすと、半分切れた状態になります。position:absolute;を消してもらうとわかるのですが、アブソでない状態であれば上下にずれますが、行き来していますので、もう一歩だと思うのですが・・・。
どこが間違っているかわかりません。教えてください

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

  • 回答No.2
ちょっと試してみましたが、まずご質問の主題について。

「position: absolute;」を使ってそれぞれの表示を交錯させようとしているのであれば、そのスタイルを適用するべき先はmarquee要素だと思います。
この場合、span要素がabsoluteで他の要素から独立した表示になったとしても、marquee要素はposition: static;で表示されているので、marquee要素が確保する縦幅の分だけ二つ目のmarquee要素は下に押し出されます。
この場合は、上側のmarquee要素に対して「style="position: absolute;"」を設定してやる必要があるでしょう。 そうすれば、そのmarquee要素が他の表示要素から独立して表示され、下に続く要素はその分だけ間を詰めて表示されます。

<marquee direction="right" style="position: absolute;">

上側のmarqueeを、以上のように修正してみてください。 とりあえず、質問文中のソースを使って、質問にある動作を実現できると思います。

あと、他に修正した方が良い点がいくつか散見されます。

<style type="text/css">
<!--
.1{background-color: blue; width: 200; height: 100; position: absolute;}
.2{background-color: red; width: 200; height: 100;}
-->
</style>

このソースについてですが、まずスタイルシートのセレクタとしてのクラス名は、半角数字で始まってはいけません。 半角英字で開始されるようにする必要があります。 スタイルシートの解釈が厳密なブラウザや表示モードでこのような記述をした場合、クラスの設定が不正と判定され、スタイルシートが無視されます。 同様に、効果を適用する要素のほうでも、class属性を修正した方がよいでしょう。

また、スタイルシートで数値を設定する場合、必ず単位をつける必要があります。 ご質問のソースの場合、width、heightには単位をつけたほうがよいでしょう。

それと、スタイルシートの解釈に厳密なブラウザや表示モードでは、span要素に対するwidth、heightのスタイルシート指定は無視されます。 ご質問のソースであれば、span要素ではなくdiv要素を使うほうが良いと思います。

現状の質問文のソースについては、ブラウザのスタイルシートの実装のバグによって狙い通りになっている可能性があります。 ブラウザのバグに依存しない形で正常にスタイルシートを適用させるのであれば、上の点は修正しておくことをお勧めします。

参考になれば。
お礼コメント
azicyan

お礼率 68% (1434/2088)

ご丁寧にありがとうございます!

><marquee direction="right" style="position: absolute;">

おお!出来ました!!

マーキーに適用させなければだめだったんですね・・・

>半角数字で始まってはいけません

すいません・・・
確か先生にもそんなようなこと言われたような気が・・・
その場ではaoとかakaとかつけていたんですが、
質問文を作る際に、1,2としてしまいました・・・

ご指摘十分注意します。

ありがとうございました。
投稿日時 - 2003-10-12 22:43:46

その他の回答 (全1件)

  • 回答No.1

ベストアンサー率 38% (164/424)

いささか強引な方法ではありますが、
以下のようなやりかたもあります。

<html>
<head>
<style type="text/css">
<!--
.1{background-color:blue;width:200;height:100;}
.2{background-color:red;width:200;height:100;position: relative;top:-100px;}
-->
</style>
</head>
<body>
<marquee direction="right">
<span class="1"></span>
</marquee>
<marquee direction="left">
<span class="2"></span>
</marquee>
</body>

本来marqueeタグでは一列に複数のオブジェクトはHTML的にムリです。
そこでHTML的には別の列でmarqueeタグで動かし、
それをCSSのposition:relative;の配置を-100pxすることにより
強引に同列に表示させています。

あくまで強引ではありますので、ご利用にはご注意を。
しかしながらCSSのpositionを使うと、意外に強引な配置ができて
楽しいですけど(笑
お礼コメント
azicyan

お礼率 68% (1434/2088)

ああーー
でました(*^_^*)

リラティブでやるんですねえ・・・

実は今教室で習ってまして・・・
リラティブは習っていないんですよね・・・

それでアブソだけ習って、
今回のようなことが課題としてだされまして、
皆さん出来ているのに自分だけだめで・・・

先生にソースを診てもらったんですが・・・
「間違っているところはない」
といわれてしまい・・・^_^;

そして質問してみたしだいです。
投稿日時 - 2003-10-12 00:12:38
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

ピックアップ

ページ先頭へ