プロが教えるわが家の防犯対策術!

HP作成、初心者です。CSSで段組をしました。
現在、下記の状態ですがヘッダーの上にもう1個<DIV>を入れて空白のスペースを作りたいのですが
HTMLの<DIV 外枠><DIV ヘッダー>の間にもう一個<DIV 空白></DIV>を作り
CSS側で#空白 {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;
}

どのようにすればいいでしょうか。
初心者なので、この書き方で分かりますでしょうか。
よろしくお願いします。

A 回答 (6件)

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でデザインためのマークアップするのではありません。
    • good
    • 0
この回答へのお礼

ありがとうございました。
貴方のように分かっている方には書き方が重要なのでしょうが、素人同然のものには作るほうが優先なのです。CSSもHTMLもよく分かりませんし、質問も不行き届きな点があるかと思いますが、「デザインのために、<div></div>を入れるのは、本当に必要な場合のみです。」と思っているから入れたいのであって何をするかは、貴方の意向ではないでしょう。専門知識がないから質問してるのですが不足があることも前提で質問しております。個々のスキルなど図るすべもないので分かり難いのならそうゆう回答を先にしていただきたいですね。

お礼日時:2011/11/25 19:35

#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;
}
--------
    • good
    • 0
この回答へのお礼

ありがとうございました。
一応試した見ましたが直りませんした。他の何かが悪いのでしょう。
全部は書けないので、とりあえずヘッダーの背景画像の上に白いスペースを作り対応しました。

お礼日時:2011/11/25 19:13

たとえば


HTML・CSSタグの書き方教えてください! - HTML - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7147636.html#a4 )の回答のスタイルシートに
div.header{margin-top:50px;}を加えるという風に・・

 大事なことは、デザインのためにHTMLを書くことはほとんどないということです。
    • good
    • 0

外枠{


background-position: left 50px;
}

を追加してみてください。


#空白を追加する方法なら、質問文に書かれている方法で行けると思いますが、
HTMLの全体と#空白の追加の仕方がどうなっているのかわかりませんので、なんとも、、、
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
ご指示のようにしてみましたが、何も変わりませんでした。
他のところの書き方が影響しているのかもしれませんね。

お礼日時:2011/11/22 18:46

デザインのためにHTML(div)を描くことは止めましょう。


 必要ありません。(ゼロではないですが)
HTMLがきちんと書けていれば不要です。
HTMLは文書構造をマークアップするもの、プレゼンテーションはスタイルシートに任せると言うのが基本です。
 
    • good
    • 0
この回答へのお礼

何を言いたいのか、無用なら回答しないでください。

お礼日時:2011/11/22 18:46

<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といれても変化しません。

どこか他がわるいのでしょうか?

補足日時:2011/11/22 18:55
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!