CSS初心者スレッド＝3rd＝

つまらんヲタの価値観なんか気にすんな

ttp://blog.ninja.co.jp/Preview/MASTER/4360/
現在使用しているブログはユーザー自作のスタイルがテンプレとして
配布されているのですが、それを多少調整したいのです。
具体的に言うと、現在はブログのエントリーが左、各ボタン(プラグイン)が右
という構成になってますが、これを逆にしたいのです。
対象はお手数ですが上のリンク先のソースを閲覧してください。

#EntryBlock{
background : url(http://bfile.shinobi.jp/4360/08_wp.gif) repeat-y right top #F2F2E1;
float : left;

■ プラグインのデザイン

**************************************************************************************/
#PluginBlock{
float : left;
width : 250px;
margin : 0 0 0 -250px;
background-color: #1C1811;
color : #C3BE9F;}

このあたりのright leftをいじっても無理でした・・・

>>953
ざっと見た感じ、修正する必要がある部分はこんだけかな

#EntryBlock {
background: #f2f2e1;
float: right;
}
.EntryInnerBlock {
margin:10px 0 30px 250px;
}
#PluginBlock　{
float : left;
0 -250px 0 0
}

>>954
記入ミス
#PluginBlock　{
float : left;
margin: 0 -250px 0 0;
}

ありがとうございました。
しかし、こんな風にずれてしまったようです。
ttp://imepita.jp/20080804/626120

一つお聞きしたいのですが、

#EntryBlock {
background: #f2f2e1;

は

background : url(http://bfile.shinobi.jp/4360/08_wp.gif) repeat-y right top #F2F2E1;

の全てと置き換えるのでしょうか？

なんで書籍にdivばっかり使ってあるかというと異なるブラウザに対応するため
ボックス単位でこまかな調整しなきゃならないんでdivで統一しておいたほうが
わかりやすくていいんだよ
FirefoxとIEの地獄の調整やったことのある人ならdivの有り難さがわかるはず

>>956
>の全てと置き換えるのでしょうか？
そういうこと

他にも修正箇所があったんでまとめてうｐしといた
ttp://www.vipper.net/vip583793.zip.html

本当に丁寧にありがとうございました。
とても助かりました。

ちなみに、矢継ぎ早に注文して申し訳ないのですが、
この状態で、エントリーの長さを調整するにはどうすればいいのでしょうか？

エントリーの「width : 100%;」を500〜1000の間でいじりたいのですが、
ここを触ると、崩れてしまうみたいです。

おんぶにだっこかい！！

なんで>>958がzipにしてまで全部してやったのかというと、
面倒くさいからだよ。>>960お前が。
ここはお前のためだけのスレじゃない。お前の下らない自己満足の
デザインに付き合って、レスを消費させるほど暇……なんだけど実際。

cssわかってないなら用意されたデザインを使え。
カスタマイズしたいならcssを少しでも理解すべき。

とりあえずcssの初心者講座行くなりして勉強して来い。
勉強して、検索して、それでもわからなかったらここに来い。

>>961
>>962
了解しました。長期的にはその方がいいと思いますので
勉強してきます。ありがとうございました。

質問です。
IE や Firefox で html 上の半角二重引用符が
全角二重引用符に自動的に置換されてしまいます。
この設定を css 上でリセットすることができましたら、その方法を教えてください。
半角二重引用符はコードの解説などで使用しています。
コードを textarea 内に入れれば済むのですが、
今までに半角二重引用符をたくさん使ってしまったのでできれば避けたいです。

この現象について色々なキーワードでググったのですが検索単語が悪いのか全然見つかりませんでした。
よろしくお願いします。

１．ブラウザ上では全角に見えるフォントで表示されてんじゃないの？
問題のテキストをコピーして、メモ帳とかに貼り付けると全角になってるの？
引用符のコードはU+0022？

２．もしくは、エディタで編集した時に全角の引用符を使っていた。
エディタの表示フォントのせいで半角に見えただけで実は全角だった。
いわゆる「全角」引用符のコードに「半角」幅のグリフを持ってる欧文フォントは結構あるよ。

どちらにしてもコードが変更されることはありえない。
フォント設定の問題。

>>964
↑こういうのかな？
実態参照に置き換えればいいのでは？

必要最低限な情報が欠けているからエスパー判断だが
blogとかじゃねーの？
自動変換される場合がある。

>>965
おっしゃる通り、欧文フォントのせいでした。
css のフォント指定を日本語フォントにしたところ表示がなおりました。
問題のテキストをコピペすると全角になっていたのでてっきりブラウザのせいだと思ってました。
ご丁寧に開始引用符と終了引用符になっていたんですよね。
何にせよ、ありがとうございました！

あ、いや、半角かと思ったらコピペしたらやはり全角のままでした。
おそらく >>967 さんのおっしゃる通りです。wordpress のせいです、きっと。
ここまで分かれば後は何とかなりそうです。みなさんありがとうございました！

(´-`).。ｏＯ（どこまで後出しすれば気が済むのだろう・・・）

(´-`).。ｏＯ（解決するまでだよ、きっと・・・）

background-color: #ff0000;
として、特定の箇所の背景に色を付けています。

これを色を付けないようにする、
つまりスタイルを無効にする方法ってないでしょうか？

class を使う

自己レスです。
background-color:transparent;
で背景を無効（透明）に出来ました。

背景無効じゃない。そりゃ引継ぎって意味だ

質問です。

<style type=text/css>
<!--
a:link {color:#00ccff;text-decoration:none;border-bottom:2px dotted hotpink;}
a:visited {color:#0000ff;text-decoration:none;border-bottom:2px dotted hotpink;}
a:active {color:#ff0000;text-decoration:none;}
a:hover{color:#ff0000;text-decoration:overline underline;}
-->
</STYLE>

こうしてページ全てのリンクに下線がつくようにしているのですが、
画像にリンクをつけた場合にも下線が出てしまうのを
なくす方法はないでしょうか？
よろしくお願いします。

img{border:none;}

初心者というかなんというか

>>977
レスありがとうございます。

<style type=text/css>
<!--
a:link {color:#00ccff;text-decoration:none;border-bottom:2px dotted hotpink;}
a:visited {color:#0000ff;text-decoration:none;border-bottom:2px dotted hotpink;}
a:active {color:#ff0000;text-decoration:none;}
a:hover{color:#ff0000;text-decoration:overline underline;}
img{border:none;}
-->
</STYLE>

上記のようにしてみたのですが、やはり画像にも下線が出てしまいましたorz
解釈のしかたが違うのでしょうか？

a img {border:none;}

すみません、説明し難い問題ですが質問させて下さい。

図のように１（上）２（下）に分かれたフレームを利用したサイトを製作しており、
それに、CSSでbackground-imageで外枠のような画像を１，２に入れております。
______________
|1 |
|--------.|
|2 |
|____________.|

２の部分が下に長くなった場合、２のみスクロールが表示され、１にはスクロールが表示されないので
２の方がスクロールバー分だけ左にずれてしまいます。
なにか良い解決法を教えていただけないでしょうか、よろしくお願いします。

スクロールバーを出す

リンクをその周りと同じ色にしたいと思い、
a{　color: inherit !important; }
としました。ＩＥではうまくいかなかったのですが
Ｏｐｒｅａではうまくいったので出力の違いだと思い、

ＩＥにも対応させる方法として、
（その親の選択子名が hoge だとして）
hoge *{ color: (色名); }
を使おうと思っているのですが、これ以上に簡単な書き方はあるでしょうか。
教えてください。お願いします

>>983
IEには対応してない
わざわざ書き分けるという面倒なことをしなくても、a { color: #fcc !important; } という風に
直接指定すればいいんじゃないの？

画像をセンタリングするのに２時間かかってもできないのです・・・
初心者な質問すぎて申し訳ないです！
（テンプレも読んだのですが上手く行かず）

<div style="text-align: center;"><img ほにゃ/></div>

ならうまくいくのですが、CSSを別ファイルにして

test.css:

.centering{text-align: center;}

test.html:

<div class="centering"><img ほにゃ/></div>

とすると左寄せになってしまいます。centering クラスの中に
margin: 0px auto;
display: block;
やら何やらいろいろ足してみてもだめです・・・何が間違っているのでしょうか？

>984

ありがとうございます。そうします

>>985

.centering {text-align: center;}
の後に

div {text-align; center;}
などスタイルが上書きされていないかい？

>>987
お返事ありがとうです！

スタイルのあとがきは無いです・・・
あーもーCSS辛いです・・・すいません愚痴って。
半日使って画像を真ん中に持って来れないなんて
もうアホすぎてイヤになりますよー（涙）

>>988
CSSの部分だけでもうｐしてくれたら見てやる

ずいぶん偉そうやね ?

大橋巨泉ですから

table をつくってそのセルを覆う様にDIVの箱を表示させようと考えています。
その際、ｔａｂｌｅの罫線を表示されないように（ＤＩＶの箱の線だけ表示される）ようにするにはどのようにＣＳＳを設定すればいいのでしょうか？
普通にやると、tableとＤｉｖ両方の線が表示されてしまいます。

divをテーブルに囲うのか？テーブルにマージンを左右上下置けば解決しねぇか？後はdivにボーダーひく事だきゃ。

>>993

自己解決ですが、z-index使ったらうまくいきました。

まあいいんじゃね。質問自体がタグとスタイルみないと具体的にわからんよ。

float left rightみたいなtop bottomってないかな。

htmlでは
div A
div B
と記入するけど表示では
div B
div A
とやりたい。

初心者ですが
CSSで位置指定してみたら同じTOPから100pxでも表示位置がIEとFFで違うんですけど、これって仕様ですか？

>>997
各ブラウザの仕様
W3C勧告に沿ってるのはFFの方

>>998

ありがとです
IE6だと長めに表示されるみたいなのでFFに合わせてかなり長めに位置指定しなきゃいけないですね

>>999
デフォルトで各要素のmarginとかpaddingの幅も違ったりするから
* {
　margin: 0;
　padding: 0;
}
みたいな事やってからだと、手間は増えるけど比較的あわせ易いよ

このスレッドは１０００を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。