CSSテクニックコミュのMTのスタイルシートの指定で質問です

現在ＭＴをカスタマイズしています。
ＭＴもＣＳＳも今回初めての挑戦で、どこの指定が間違っているのかが解りません。
もしよろしければ具体的に間違いの指摘をして下さると助かります。
是非ご教授願います。
なお、ＩＥ６の環境でしかまだ確認しておりません。

サイトのアドレス　http://kokoroblog.net/column/

◆現状の問題点------

その１．薄緑の帯の下に影の画像をつけると下に空白が出来しまいます。そのためheightやmargin-bottomを指定しましたが変わりません。空白をなくしたいです。

.kage{
padding : 0px 0px;
background-image: url(archives/kage.gif);
background-repeat:repeat-x;
width : 700px;
height: 4px;
margin-bottom: 0px;
}

その２．右側に背景色を指定しボックスっぽくすると
画像を指定したリストマークが出てこなかったので
以下のようにpadding-left:25px;設定した所ずれてしまいました。

.right2 {
padding-left:25px;
font-size: 10px;
color: #004000;
background-color: #ffffff;
background-position:center
text-align:left;
width: 190px;
}

他にも問題点はありますが、この２つは特に困っています。
よろしくお願いします。

コメント(12)

最初
全て
最新の40件

[1] mixiユーザー 09月01日 09:52

WindowsXP Pro / Internet Explorer 6.0にて確認しました。

１に関して
まず、画像をみたところ、透過GIFではないため、影グラデーションの下に白がそのまま出てしまっているようです。
CSSの前に、画像を変えてみてください。

２に関して
ずれてしまうというのは、何がどのようにずれてしまったのか詳しくお願いします。
liタグにもかかってくるので、それに指定しているCSSも合わせて載せるとよいでしょう。（私はソースからCSSファイルを直接見ました。）

CSSは、OSやブラウザによって多様な動きを見せることがあります。現象が発生した環境（OSとブラウザ）を教えてもらえると解決する場合もあります。

[2] mixiユーザー 09月02日 01:32

大変失礼致しました。
こちらはWindowsXP Pro / Internet Explorer 6.0の環境です。

１の画像は4×4pxの画像で、白は下の1px部分のみです。
グラデーションそのものを透過GIFに出来るのでしょうか？
アルファチャネル付き透過PNGを使えば良いのでしょうか？
解らなくてすみません。

２は、right200pxに白いボックスとタイトルを190pxでセンタリングしたいです。
現在白いボックスが190px以上あるように見えている状態です。

上手く説明出来なくてすみません。

[3] mixiユーザー 09月02日 03:08

むむむ、とりあえずソースに危険な間違いがたくさんあるっぽいので直した方がｲｲかもですよ…

[5] mixiユーザー 09月02日 04:57

＞激しく構成放棄なネエ様

＞ソースに危険な間違いがたくさんあるっぽい

え？そうなんですね・・・。ガーン。

ＭＴテンプレ配布所や、カスタマイズＴＩＰＳみたいなサイトの中から、CSSとメインページのタグを切り貼りした部分がいくつかあります。
理解せずやってみたのがいけないようですね。

＞なっ様

ＩＥ以外のブラウザでは確認しておりませんでした。
ありがとうございます。

ＭＴにしたのは、誰かのテンプレではなく自分のオリジナルにしたかったからなんですが、確かに欲張っています・・・。
そして、既に１ヶ月格闘しています。

ちなみに、古いビルダーで作ったデザイン案です。
これに近づけようとして、現在いっぱいいっぱいになってます。
http://www.unki-up.com/test/newpage3.htm

もっとシンプルに色の変更などから始めた方が良いかも知れませんね。
みなさま、助言ありがとうございます。

[7] mixiユーザー 09月04日 04:31

途中経過です。なかなかもどかしいのですが^_^;

背景画像を入れたいために<div>を使うのは
本来の使い方ではない事を知りました。
しばらく考えて、border-bottomで薄いグレーを使用して
影っぽくなるように変更しました。

それから、↓このサイトでどの部分を指定しているのか
目視で確認してpaddingやmarginを調整しました。
http://style.yarea.net/index.html

W3CのCSS検証サービスで;が抜けていた所を直しました。
HTMLタグの大文字小文字混在を小文字に統一しました。

以前より少しはマシになったでしょうか・・・。

現状では、自分の環境ではまとまったレイアウトとして見えています。
しかし、フッターが別モノになっているのでこれから考えて直したいと思います。
それと、<Li>の改行が何故 になるのかは解りません。これも調べます。

[8] mixiユーザー 09月09日 05:14

自分の環境(IE6.0)ではおおむね納得できる形になりました。
他のブラウザでの検証をするために、Firefox(1.0.6)を入れて
見てみました。

現状の見栄えの違いとしては、右側のリストの部分が
IEは、自分の希望通りなのですが
Firefoxだと、薄い緑のタイトルの帯と白いボックスが
離れてしまいます。
このあたりについてはもっと調べようと思っています。

他の環境、特にmacだとどのように見えるかが解りません。
もしよろしければ変な所を教えて頂けると
大変大変助かります。
http://kokoroblog.net/column/
よろしくお願いします。

[9] mixiユーザー 09月09日 14:19

改行＝ 

これはXHTMLで記述されているからですよね。

HTMLなら ですよね？

[10] mixiユーザー 09月09日 14:37

>よいこさん

いろいろなOS,ブラウザ環境でのキャプチャーを表示してくれるサイトです

http://www.browsercam.com/

右のFREE 24 HOUR EVALUATIONというところから申し込みをすると
無料で２４時間使えます。
１ページだけならこちらで十分だとおもいますのでおすすめです

[11] mixiユーザー 09月12日 05:12

＞さくら様

ご指摘ありがとうございます！
XHTMLはHTMLとの違って終了タグを省略してはいけないらしい程度しか知識が有りません。
Movable Typeのテンプレートを見返すと違和感があるタグを結構みつけました。
XHTMLもこれから勉強したいと思います。

＞激しく構成放棄なネエ様

お世話になっております。
良いサイトを教えて下さってありがとうございます。
英語だったのでビビリましたが、是非使ってみたいと思います。

また報告させて頂きます。

[12] mixiユーザー 09月12日 12:49

>>9
>HTMLなら ですよね？

 のtypoでしょうか?
HTML4 なら br 要素は空要素なので終了タグは存在しません。

ログインすると、みんなのコメントがもっと見れるよ