- 締切済み
ＣＳＳの作成方法で
ＨＰ作成、初心者です。ＣＳＳで段組をしました。 現在、下記の状態ですがヘッダーの上にもう１個<DIV>を入れて空白のスペースを作りたいのですが ＨＴＭＬの<ＤＩＶ 外枠><ＤＩＶ ヘッダー>の間にもう一個<ＤＩＶ 空白></ＤＩＶ>を作り ＣＳＳ側で＃空白 { width:900px; height:50px; background-color: #FFFFFF ～にしたいのですが どうしても間に白い背景の空白欄ができません。左サイドにナビを入れているので背景にサイド部分の色つきの背景が全部に入ってます。なので空欄ができても背景が白になりません。また空欄も文字を入れるとプレビューで見れますが、文字なしだと空白欄が形成されません。 外枠 { width:900px; margin-right: auto; margin-left: auto; background-image: url(画像1.jpg); ここが左サイドナビの背景になっている background-color: #FFFFFF; margin-top: 0px; border: 1px solid #060; } #ヘッダー { width:900px; height:130px; background-image: url(画像2.jpg); background-color: #FFF; text-align: center; } どのようにすればいいでしょうか。 初心者なので、この書き方で分かりますでしょうか。 よろしくお願いします。
- kasai2050
- お礼率88% (63/71)
- ホームページ作成ソフト
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.2です。 ＞デザインのためにHTML(div)を描くことは止めましょう。 スペースを開けたいために<div></div>を入れるのは、よくないと言うことです。 HTMLが示されていないため、それ以上の的確な回答は無理だから、みんな困るのです。 たとえば、HTMLが <body> <div class="article"> <div class="header"> ・・・ </div> <div class="section"> ・・・でしたら、CSSも簡潔に div.article,div.article div.header{ width:900px; margin:0 auto; border:solid 1px #060; background:white url(背景画像1) 50px 0px; } div.article div.header{ margin-top: 50px; background-image: url(背景画像2); } だけで済むはずです。 デザインのために、<div></div>を入れるのは、本当に必要な場合のみです。 ★適用したいHTMLとどんなデザインにしたいかがわからないと、期待される回答は出来ないのです。今回の回答は、HTMLはこちらで想像するしかないので、適当なものです。 HTMLは文書構造をマークアップするもの、CSSはデザインするもの。HTMLでデザインためのマークアップするのではありません。
- naokita
- ベストアンサー率57% (1008/1745)
#1です。全体が見えないから良く分からないけど、 ただ、DIV突っ込んでもダメ・・・ DIVで何をするのかが問題。 -------- <div 外枠> <div style="padding-top: 50px; background-color: white;"> <div ヘッダー> </div> </div> たぶんここには<DIV ナビ>等が入っています。 </div> -------- 余計なDIVを使わない無い方法なら、 元の状態で（ナビの画像が見えないので検証が出来ないけど・・・） -------- <div 外枠> <div ヘッダー> </div>（ヘッダーの閉じる） ここには<DIV ナビ>等が入っています。 </div> 外枠 { width:900px; padding-top:50px; /* ←これを追加！！！ */ margin-right: auto; margin-left: auto; background-image: url(画像1.jpg); ここが左サイドナビの背景になっている background-color: #FFFFFF; margin-top: 0px; border: 1px solid #060; } --------
お礼
ありがとうございました。 一応試した見ましたが直りませんした。他の何かが悪いのでしょう。 全部は書けないので、とりあえずヘッダーの背景画像の上に白いスペースを作り対応しました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
たとえば HTML・CSSタグの書き方教えてください！ - HTML - 教えて！goo ( http://okwave.jp/qa/q7147636.html#a4 )の回答のスタイルシートに div.header{margin-top:50px;}を加えるという風に・・ 大事なことは、デザインのためにHTMLを書くことはほとんどないということです。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
外枠{ background-position: left 50px; } を追加してみてください。 #空白を追加する方法なら、質問文に書かれている方法で行けると思いますが、 HTMLの全体と#空白の追加の仕方がどうなっているのかわかりませんので、なんとも、、、
お礼
ご回答ありがとうございます。 ご指示のようにしてみましたが、何も変わりませんでした。 他のところの書き方が影響しているのかもしれませんね。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
デザインのためにHTML(div)を描くことは止めましょう。 必要ありません。(ゼロではないですが) HTMLがきちんと書けていれば不要です。 HTMLは文書構造をマークアップするもの、プレゼンテーションはスタイルシートに任せると言うのが基本です。
お礼
何を言いたいのか、無用なら回答しないでください。
- naokita
- ベストアンサー率57% (1008/1745)
<div 外枠> <div ヘッダー> </div> </div> を↓に <div 外枠> <div 空白> <div ヘッダー> </div> </div> </div> 空白{ padding-top: 50px ;background-color: white;} ---------------- というより、外枠の外枠に（bodyとかに） padding-top: 50px ;background-color: white; でダメなのかな？
補足
ご回答ありがとうございます。 ご指示のようにしてみましたが、元は <div 外枠> <div ヘッダー> </div>（ヘッダーの閉じる） ここには<DIV ナビ>等が入っています。 </div> こんな状態だと思います。 <div 外枠> <div 空白> <div ヘッダー> </div> </div> たぶんここには<DIV ナビ>等が入っています。 </div> こうすると、空白のエリアがなくなります。 なので <div 外枠> <div 空白></div> <div ヘッダー></div> たぶんここには<DIV ナビ>等が入っています。 </div> こうすると、空白のエリアが出現します。 ただしどちらも背景が白ではなく、左サイドバーの色つき背景のしかでません。 またheight:50px;といれても100pxといれても変化しません。 どこか他がわるいのでしょうか？
お礼
ありがとうございました。 貴方のように分かっている方には書き方が重要なのでしょうが、素人同然のものには作るほうが優先なのです。ＣＳＳもＨＴＭＬもよく分かりませんし、質問も不行き届きな点があるかと思いますが、「デザインのために、<div></div>を入れるのは、本当に必要な場合のみです。」と思っているから入れたいのであって何をするかは、貴方の意向ではないでしょう。専門知識がないから質問してるのですが不足があることも前提で質問しております。個々のスキルなど図るすべもないので分かり難いのならそうゆう回答を先にしていただきたいですね。