タグ・デザイン掲示板

[

メニューとコンテンツの間の空白を埋めたい
by もも

2016-08-30 12:28
似たようなスレが無かったため、質問させてください。
トップメニューとコンテンツの間にある空白をどうにかして埋めたく思い、スレ立てさせていただきます。
indexページのHEAD内タグはこうです。

<link href='ウェブフォントURL' rel='stylesheet' type='text/css'>

<style type="text/css">

#wrapper{
max-width: 500px;
margin: 0px auto;
padding: 20px 20px 10px;
}

body{
font-family:Marvel,Meiryo,メイリオ, sans-serif;
font-size: 13px;
letter-spacing: 1px;
line-height: 22px;
color: #7d7d7d;
background: -moz-linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
background: -webkit-linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
background: linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
-moz-background-size: 20px 20px;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
margin: 0;
padding: 0;
text-align:center;
}

#tp {
width: 210px;
height: 100px;
background: #fff;
-moz-border-radius: 120px / 80px;
-webkit-border-radius: 120px / 80px;
border-radius: 120px / 80px;
margin: 0 auto;
padding: 10px 0;
border: solid 3px #999;
box-shadow: 0 0 0 5px #fff;
-webkit-box-shadow: 0 0 0 5px #fff;
-moz-box-shadow: 0 0 0 5px #fff;
}

.img{
width: 250px;
margin: -60px 10px 0 0;
}

.menu{
position: relative;
bottom: 225px;
}

.ft{
margin: -80px 20px 5px;
padding: 5px;
background: #a2d7dd;
border-radius: 5px;
box-shadow: 0 0 0 2px #fff;
-webkit-box-shadow: 0 0 0 2px #fff;
-moz-box-shadow: 0 0 0 2px #fff;
}

.ft a{
color: #fff;
}

.ft a:hover{
color: #dc143c;
}

.contents{
text-align:left;
background: #fff;
padding:30px 10px 10px;
margin: -15px 0 5px;
z-index: -1;
border-radius: 5px;
border: solid 3px #a2d7dd;
box-shadow: 0 0 0 5px #fff;
-webkit-box-shadow: 0 0 0 5px #fff;
-moz-box-shadow: 0 0 0 5px #fff;
}

a{
text-decoration:none;
color: #dc143c;
padding: 1px 2px;
}

a:hover{
color: #f6bfbc;
position: relative;
top: 2px;
}

h1 {
letter-spacing: -1px;
font-size: 30px;
margin: 20px 0 0;
}

h2{
margin: 0 auto;
width: 180px;
height: 30px;
position: relative;
z-index:10;
background: #a2d7dd;
font-size: 20px;
line-height: 30px;
text-align: center;
padding: 0 20px;
border-radius: 5px;
box-shadow: 0 0 0 3px #fff;
-webkit-box-shadow: 0 0 0 3px #fff;
-moz-box-shadow: 0 0 0 3px #fff;
}

h3{
margin: 20px 0 0;
text-decoration: underline;
}

.ma{
background:linear-gradient(transparent 70%,#a2d7dd 0);
}

input[type],textarea{
height: 80px;
width: 95%;
font-family:Marvel,Meiryo,メイリオ, sans-serif;
font-size: 12px;
letter-spacing: 1px;
line-height: 22px;
color: #7d7d7d;
background:#fdeff2;
border: solid 1px #fff;
-webkit-appearance: none;
border-radius: 3px;
box-shadow: none;
margin: 3px 0;
padding: 3px;
}

input[type=text]{
height: auto;
width: 170px;
margin: 5px 0;
border-radius: 5px;
}

input[type=submit]{
height: auto;
width: 60px;
cursor:pointer;
color:#fdeff2;
background: #7d7d7d;
text-shadow: none;
border-radius: 5px;
}

</style>

indexページはこれでいいのですが、子ページにトップメニュー（多分#wrapper{）のことだと思うのですが、表示させてその下にコンテンツを入力するとトップメニューとコンテンツの間に空白が空いてしまいます。indexページはこのタグで問題ないのですが、子ページにindexページに表示されるメニューの下の枠が必要ではないので消したのですが、空白だけが残り中途半端にトップメニューとコンテンツの間に空白が出来てしまってその空白を埋めたく思っているのですが、いろいろタグも弄ってみましたが私の力では無理でした。
どうか、お力をお貸しくださると助かります。
どうやって説明していいかも分からないため、分かりづらい部分もあるとは思いますが…どうかよろしくお願いいたします…！！

参考までに、こちらがindexページの全体レイアウトのタグの例です。

<div id="wrapper"><div id="tp"></div><img src="##画像URL##" class="img"><div class="menu"><h1>site title</h1>サイトURL<br />
<a href="#">???</a> <a href="#">contents</a> <a href="#">bkm</a></div><div class="ft"><a href="#">rank</a> <a href="#">rank</a> <a href="#">rank</a> / 123456</div></div>

pc
[編集]

by と

2016-08-30 15:58
問題のページのHEAD内と全体レイアウトを貼ってください。

pc
[編集]

by もも

2016-08-30 16:14
すみません、と様。貼りますのでよろしくお願いいたします。
HEAD

<link href='フォントURL rel='stylesheet' type='text/css'>

<style type="text/css">

#wrapper{
max-width: 500px;
margin: 0px auto;
padding: 20px 20px 10px;
}

body{
font-family: 'Satisfy',"メイリオ",sans-serif;
font-size: 13px;
letter-spacing: 1px;
line-height: 22px;
color: #7d7d7d;
background: -moz-linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
background: -webkit-linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
background: linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
-moz-background-size: 20px 20px;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
margin: 0;
padding: 0;
text-align:center;
}

#tp {
width: 210px;
height: 100px;
background: #fff;
-moz-border-radius: 120px / 80px;
-webkit-border-radius: 120px / 80px;
border-radius: 120px / 80px;
margin: 0 auto;
padding: 10px 0;
border: solid 3px #999;
box-shadow: 0 0 0 5px #fff;
-webkit-box-shadow: 0 0 0 5px #fff;
-moz-box-shadow: 0 0 0 5px #fff;
}

.img{
width: 250px;
margin: -60px 10px 0 0;
}

.menu{
position: relative;
bottom: 225px;
}

.ft{
margin: -80px 20px 5px;
padding: 5px;
background: #a2d7dd;
border-radius: 5px;
box-shadow: 0 0 0 2px #fff;
-webkit-box-shadow: 0 0 0 2px #fff;
-moz-box-shadow: 0 0 0 2px #fff;
}

.ft a{
color: #fff;
}

.ft a:hover{
color: #dc143c;
}

.contents{
text-align:left;
background: #fff;
padding:30px 10px 10px;
margin: -15px 0 5px;
z-index: -1;
border-radius: 5px;
border: solid 3px #a2d7dd;
box-shadow: 0 0 0 5px #fff;
-webkit-box-shadow: 0 0 0 5px #fff;
-moz-box-shadow: 0 0 0 5px #fff;
}

a{
text-decoration:none;
color: #dc143c;
padding: 1px 2px;
}

a:hover{
color: #f6bfbc;
position: relative;
top: 2px;
}

h1 {
letter-spacing: -1px;
font-size: 30px;
margin: 20px 0 0;
}

h2{
margin: 0 auto;
width: 180px;
height: 30px;
position: relative;
z-index:10;
background: #a2d7dd;
font-size: 20px;
line-height: 30px;
text-align: center;
padding: 0 20px;
border-radius: 5px;
box-shadow: 0 0 0 3px #fff;
-webkit-box-shadow: 0 0 0 3px #fff;
-moz-box-shadow: 0 0 0 3px #fff;
}

h3{
margin: 20px 0 0;
text-decoration: underline;
}

.ma{
background:linear-gradient(transparent 70%,#a2d7dd 0);
}

input[type],textarea{
height: 80px;
width: 95%;
font-family: 'Satisfy',"メイリオ",sans-serif;
font-size: 12px;
letter-spacing: 1px;
line-height: 22px;
color: #7d7d7d;
background:#fdeff2;
border: solid 1px #fff;
-webkit-appearance: none;
border-radius: 3px;
box-shadow: none;
margin: 3px 0;
padding: 3px;
}

input[type],textarea,select{
height: auto;
margin:1px 1px;
padding:1px 4px;
color:#7d7d7d;
background:#fdeff2;
border:1px solid #a2d7dd;
border-radius:10px;
outline:none;}

input[type=submit]{
height: auto;
width: 60px;
cursor:pointer;
color:#fdeff2;
background: #7d7d7d;
text-shadow: none;
border-radius: 5px;
}

</style>

全体レイアウト

<div id="wrapper"><div id="tp"></div><img src="画像URL" class="img"><div class="menu"><h1>site title</h1>サイトURL<br />
<a href="#">???</a> <a href="#">contents</a> <a href="#">bkm</a></div>
<div id="wrapper"><h2>information</h2><div class="contents">ここは×××サイトです。版権元及び関係者様とは一切関係ありません。サイト内の文章及び画像の無断転載、模倣などはご遠慮ください。閲覧は自己責任でお願いしております。<br />
動作確認はIEとiPhoneからのみです。<br />
<h3>about link</h3>当サイトはリンクフリーです。<br />
site name / <br />
name / <a href="#">memo</a> - <a href="#">mail</a><br />
2016,01,00~<center><a href="#">back to top</a></center></div></div>

全体レイアウトですが、サイトの情報とかが載っているためここには書けませんので問題のページに近い状態でUPさせていただきました。
分かりづらくてすみません。

pc
[編集]

by と

2016-08-30 22:39
正直このテンプレ？はどの状態が正解なのかわかりません。またレイアウトの組み方も無駄に複雑で改変が難しいため、別のテンプレを借りた方が良いと思います。どうしてもこれを使いたいなら正常な状態のものを借り直して必要な部分だけ書き換えてはいかがでしょうか。

ご質問の件ですが、質問者様が削除されたという枠？や画像の高さが不明なので改変出来ませんでした。メニュー部分とインフォメーションの部分(<h2>以降)の余白は単にmarginやpaddingが取られているのではなく、画像や白い丸枠のボックス、コンテンツ枠の配置により出来ている余白のようですからそれぞれの高さが明示されていないと組換えられません。

ちなみにインフォページの全体レイアウトの画像タグ内にデコヤさんの素材を入れてみたところ、白い丸枠の真ん中くらいに表示されました。
またおそらく白い丸枠の中にサイト名やサイトアドレスを入れたいんだと思いますが、トップページもインフォページも両方ずれています。

提示されたインフォページの内容だと、<div id="wrapper">は二回も書いてはだめです。<要素名 id="～"></要素名>はページにひとつずつしか書けません。
あと↑の終了タグもありません。
HEAD内では必要な引用符が所々抜けています。

お役に立てなくて申し訳ないです。

＊一部編集しました。

pc
[編集]

by もも

2016-08-31 22:20
と様、いろいろと方法を探っていただきありがとうございました。
解決しなくとも問題に取り組んでいただけただけでもありがたかったです。
なんとか試行錯誤して、自分なりに納得のいく方法を探したいと思います。
本当にありがとうございました…！！

pc
[編集]

[