CSSのposition指定しています。
相対指定の上に絶対指定のボツクスが乗るようにしました。
相対指定のボックスには<ul>があり、<li>ひとつずつにクラス指定で背景色をつけています。
Dreamweaver8のレンダリングではきれいに表示されていますが、IE6プレビューすると<li>の背景色が消えているものがあります。
CSSには様々なルールがありますが、してはいけないことをしてるでしょうか?
下にhtmlとCSSを記述しますので、よろしくお願いします。
HTML****************
<div id="schedule">
<p class="nendo">* 2007年度 *</p>
<ul class="sche_date">
<li class="date_back1">02月18日(日)<strong class="finished">終了</strong></li>
<li class="date_back2">03月18日(日)<strong class="finished">終了</strong></li>
<li class="date_back1">04月15日(日)<strong class="finished">終了</strong></li>
<li class="date_back2">05月20日(日)<strong class="finished">終了</strong></li>
<li class="date_back1">06月17日(日)<strong class="finished">終了</strong></li>
<li class="date_back2">07月15日(日)<strong class="uketuke">受付中</strong> </li>
<li class="date_back1">08月19日(日)<strong class="uketuke">受付中</strong> </li>
<li class="date_back2">09月16日(日)<strong class="notyet">---</strong></li>
<li class="date_back1">10月21日(日)<strong class="notyet">---</strong></li>
<li class="date_back2">11月18日(日)<strong class="notyet">---</strong></li>
<li class="date_back1">12月16日(日)<strong class="notyet">---</strong></li>
</ul>
<p class="nendo">* 2008年度 * </p>
<ul class="sche_date">
<li class="date_back1">01月20日(日)<strong class="notyet">---</strong></li>
<li class="date_back2">02月17日(日)<strong class="notyet">---</strong></li>
<li class="date_back1">03月16日(日)<strong class="notyet">---</strong></li>
</ul>
<div id="procedure">
<p class="jyuken">受験手続</p>
<p>★07月15日(日)受験★</p>
<div class="kigen">
<p>お申込み期限 ~6月27日(水)</p>
<p>受験料払込期限 ~6月27日(水)</p>
</div>
<p></p>
<p>★08月19日(日)受験★</p>
<div class="kigen">
<p>お申込み期限 ~7月27日(金)</p>
<p>受験料払込期限 ~7月27日(金)</p>
</div>
</div>
</div>
CSS****************
#second #schedule {
position: relative;
width: 500px;
margin-right: 50px;
margin-left: 50px;
}
.sche_date li {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 40px;
border-bottom: 1px dotted #666666;
}
.date_back1 {
background: #DBDBDB;
}
.date_back2 {
background: #F0F0F0;
}
#procedure {
position: absolute;
left: 298px;
top: 40px;
width: 250px;
background: #FFFFFF;
border: 1px solid #666666;
padding-bottom: 10px;
}
#procedure p {
padding-right: 10px;
padding-left: 10px;
}
#procedure .jyuken {
background: #FF6600;
color: #FFFFFF;
text-align: center;
margin-bottom: 10px;
}
#procedure .kigen {
padding-left: 30px;
}
.finished {
color: #0000FF;
padding-left: 25px;
letter-spacing: 0.3em;
}
.uketuke {
color: #FFFFFF;
background: #FF0000;
line-height: 100%;
padding: 2px 5px;
margin-left: 15px;
}
.notyet {
margin-left: 20px;
}
以上****************
No.8
- 回答日時:
spanはdivと対になっているようなタグだと思います。
ある部分だけにスタイルを適用させたいときに使います。
なので、非推奨ではないと思います。
詳しくはこちらなどで。
http://www.tohoho-web.com/html/span.htm
strongは、b等と同じで、見映え指定だけのタグですから、できればCSSを使ってね、ということで、廃止の方向ということです。http://www.htmq.com/html/strong.shtml
う~ん、ナルホド・・・
私は思い違いをしていたようです(^_^;)
<b>と<i>が廃止となり、<strong>と<em>が取って代わったと。
そして、<span>は非推奨と思っていたので必死で<strong>と<em>にクラスをつけていました(>_<)
この勘違いがとけて良かった!
けど、今からやり直しだ~(@_@;)
とにかく、ありがとうざいました!
No.7
- 回答日時:
たびたびごめんなさい。
下の答間違ってました。申し訳ないです。
strongは犯人じゃなかったです・・・
その上の
<p class="nendo">* 2007年度 *</p>
ここが影響していました。
この"nendo"というクラス指定は質問記載CSSには無いですよね。
たとえば、.nendo { background: #ffffff; }
と入れてみると、なぜか、下欄のしましまが出ます。
.nendo としなくても、pタグだけに背景色指定をするだけでもシマシマ(つまり次のliに対する設定)が反映されました。
要素の継承の関係だと思うんですが、ごめんなさい、何が継承して、何がしないのか、良くわかってません。
何度も余計なこと言ってスミマセンでした。
うまくいけばいいのですが・・・
No.6ベストアンサー
- 回答日時:
こんばんは。
↓犯人はコイツな気がします。
<strong class="finished">終了</strong>
<strong>タグは表示を司るもので、CSSでコントロールすべきですよね。
<strong>~</strong>でくくられている部分を全部<span>~</span>としてみてください。
で、CSSの方に
span { font-weight: bold; }
を入れておけば、strongタグの代わりになって全部太文字になります。
他の表示に影響は無いはず・・・です。
この回答への補足
おぉっ!
解き放たれたようにシマシマがでてきました!
すみません、さらに質問を・・・ <span>タグは使用してもいいのですか?
使用を推奨されない部類ではなかったかと思い、使うのを控えていたのですが・・・私の思い違いですか?
No.5
- 回答日時:
すみません。
追記です。#secondと言うより#scheduleの方があやしいです。
htmlの方の<div id="schedule">を<div>だけにして試してみてください。
なんかうまく表示されてるんですけど。
CSSの書き方そのものとしては間違ってはいないんじゃないか、と思うんですが、やはりそれ以外のタグの干渉があるんじゃないかな、と言うのが正直な印象です。
PS一度書いた回答を編集できないので、回答数が増えちゃってすみません・・・
この回答への補足
いえ回答数は気になさらないでください。
私もよくあることですので(^_^;)
それより、返事おそくなりすみません。
>htmlの方の<div id="schedule">を<div>だけにして試してみてください。
シマシマは出ましたが、幅指定ができないのでちょっとマズイです・・・
現在は質問に記述したHTMLとCSSのみで検証しているので、他のタグは干渉してません。
相対値・絶対値指定ではこうなるものなのでしょうか??
No.3
- 回答日時:
ごめんなさい、もう一つ。
私はあくまで質問に書かれたタグのみに<head> とか<body>を加えてhtmlファイルとして完結させて、cssと関連付けをしてみた結果です
。
前の補足に書かれているような不具合は出てません。
一行おきに背景色が付きます。
画面サイズを変えてもそれなりにきれいに見えています。
たぶん書かれているタグ以外にもタグがあるんでしょうから、もしかしたら、その辺が干渉していたりしませんか。
この回答への補足
ありがとうございます。するどいかも・・・
上にも下にもタグはたくさんついてます(ーー;)
ですが、余分なタグとCSSをどんどん削除してもシマシマはでてきませんでした。
それでは、と記述した部分のみでしてみると・・・#scheduleのwidthを狭めるとシマシマが消えます。
ちなみに、#secondはこのhtmlには存在しないので削除して試してみてください。
なぜでしょう?
これってルール違反ですか?
No.2
- 回答日時:
こんばんは。
そうですか。黒が出ませんか・・・
不思議ですね。
あ、書き忘れましたが、こちらもIE6.0 XPです。
編集はezhtmlというエディタ使用。
やはり#dcdcdcや#f0f0f0ですと薄くて判別できない。
少しずつ濃くしていったら出ました。
さて・・・・弄ったのはカラーコードだけなんですけど。
なんでだろう?
No.1
- 回答日時:
指定した色が薄すぎて、白と判別できないだけではないかと。
ためしに
.date_back1 {background: #DBDBDB;}の色を黒(#000000)に変えたら黒く表示されたので、そう思いました。
書き方は間違ってないと思いますけど。
この回答への補足
お返事ありがとうございます。
教えていただいたように黒にしましたが、私のIE6では完全には表示されません。
8/19から12/16までは常にきちんと表示されますが、それ以外の7月と8月も背景色がでません。
しかも、IEを最大化、最小化を切り替えると表示状態が変わります。「以外」の部分の表示されるところが増えたり、減ったり、です。
なぜだろう・・・?
不思議です。どうしたらいいのでしょう?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
display blockのレイアウトが崩...
-
CSSのposition指定で親要素の背...
-
ドリームウィーバーでリスト作...
-
リストの画像をくっつけたい!
-
htmlの文字が縦書きになる
-
画像にリンクを張ると画像がず...
-
【ヒトの神秘】美男美女から何...
-
ポップアップメニューを表のよ...
-
htmlのolやulなどlistにtitleや...
-
超音波で洗脳。
-
スクロールボックスを中央に配...
-
widthやheightの数値に単位(px...
-
含む含まないという概念自体の...
-
CSS:animation開始位置の設定
-
HTML属性での「""」 「''」違い
-
min-heightとheightの違いについて
-
ホームページの質問です。
-
inputタグはformタグで必ず囲む...
-
liリストタグの背景色に色がつ...
-
CSS li float 2列組み
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ワードにコピペ、画像が表示さ...
-
Firefoxだとメニューバーが崩れ...
-
リストの画像をくっつけたい!
-
箇条書きで表される点がずれる...
-
CSSのposition指定で親要素の背...
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
htmlのolやulなどlistにtitleや...
-
<h1>、<h2>と<p><div>の行間を...
-
HTML属性での「""」 「''」違い
-
超音波で洗脳。
-
widthやheightの数値に単位(px...
-
ボタンをセル内一杯に表示させ...
-
div要素が重なってします
-
リストマーカーをボックス内に...
-
質問1.
-
<div id="container">の使いか...
-
リンクを知らせる手のマークが...
-
画像イメージの上下左右、欲し...
-
複数のボタンを等間隔に、かつ...
おすすめ情報