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.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でデザインためのマークアップするのではありません。
ありがとうございました。
貴方のように分かっている方には書き方が重要なのでしょうが、素人同然のものには作るほうが優先なのです。CSSもHTMLもよく分かりませんし、質問も不行き届きな点があるかと思いますが、「デザインのために、<div></div>を入れるのは、本当に必要な場合のみです。」と思っているから入れたいのであって何をするかは、貴方の意向ではないでしょう。専門知識がないから質問してるのですが不足があることも前提で質問しております。個々のスキルなど図るすべもないので分かり難いのならそうゆう回答を先にしていただきたいですね。
No.5
- 回答日時:
#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;
}
--------
ありがとうございました。
一応試した見ましたが直りませんした。他の何かが悪いのでしょう。
全部は書けないので、とりあえずヘッダーの背景画像の上に白いスペースを作り対応しました。
No.4
- 回答日時:
たとえば
HTML・CSSタグの書き方教えてください! - HTML - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7147636.html#a4 )の回答のスタイルシートに
div.header{margin-top:50px;}を加えるという風に・・
大事なことは、デザインのためにHTMLを書くことはほとんどないということです。
No.1
- 回答日時:
<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といれても変化しません。
どこか他がわるいのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのborderが実際の領域より上...
-
htmlの文字が縦書きになる
-
form input テキストを上下中央...
-
【ヒトの神秘】美男美女から何...
-
含む含まないという概念自体の...
-
<h1>、<h2>と<p><div>の行間を...
-
smallにtext-allignが効かない
-
初心者html・CSS ウィンドウを...
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
CSSが上手く反映されないみたい...
-
html の divとtable の役割
-
CSSで指定した背景画像にリンク...
-
htmlの<ol>タグで、数字などを...
-
HTML5 iframe の代わり
-
<table>の高さ固定。情報増加時...
-
画像だけを端に寄せる方法
-
ulタグやliタグの中でbrタグ...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
cssの記述方法について
-
スーマートフォンの用のHP作成...
-
opacityとbackground-color
-
青いタイトルバーのダイアログ...
-
CSSのborderが実際の領域より上...
-
html+cssでフレーム落ちしてし...
-
CSSを使った全体の配置
-
ホームページ作成 画像の回り込み
-
ヘッダーのみを横幅いっぱいに...
-
ホームページビルダー16 ペー...
-
htmlの文字が縦書きになる
-
htmlのolやulなどlistにtitleや...
-
還暦を過ぎた方々に質問です。
-
【ヒトの神秘】美男美女から何...
-
リストマーカーをボックス内に...
-
複数のボタンを等間隔に、かつ...
-
widthやheightの数値に単位(px...
-
質問1.
-
含む含まないという概念自体の...
-
smallにtext-allignが効かない
おすすめ情報