ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

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

  • mixiチェック
  • このエントリーをはてなブックマークに追加
現在MTをカスタマイズしています。
MTもCSSも今回初めての挑戦で、どこの指定が間違っているのかが解りません。
もしよろしければ具体的に間違いの指摘をして下さると助かります。
是非ご教授願います。
なお、IE6の環境でしかまだ確認しておりません。

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

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

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

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

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

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

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

コメント(12)

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

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

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

CSSは、OSやブラウザによって多様な動きを見せることがあります。現象が発生した環境(OSとブラウザ)を教えてもらえると解決する場合もあります。
大変失礼致しました。
こちらはWindowsXP Pro / Internet Explorer 6.0の環境です。

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

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

上手く説明出来なくてすみません。
むむむ、とりあえずソースに危険な間違いがたくさんあるっぽいので直した方がイイかもですよ…
> 激しく構成放棄なネエ 様

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

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

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

>なっ様

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

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

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

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

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

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

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

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

現状では、自分の環境ではまとまったレイアウトとして見えています。
しかし、フッターが別モノになっているのでこれから考えて直したいと思います。
それと、<Li>の改行が何故<br />になるのかは解りません。これも調べます。
自分の環境(IE6.0)ではおおむね納得できる形になりました。
他のブラウザでの検証をするために、Firefox(1.0.6)を入れて
見てみました。

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

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

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

HTMLなら</br> ですよね?
>よいこさん


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

http://www.browsercam.com/

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

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


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

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

また報告させて頂きます。
>>9
>HTMLなら</br> ですよね?

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

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

mixiユーザー
ログインしてコメントしよう!

CSSテクニック 更新情報

CSSテクニックのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

人気コミュニティランキング