質問編集履歴

3

追記

2016/10/07 18:05

投稿

ryo-dev
ryo-dev

スコア437

test CHANGED
File without changes
test CHANGED
@@ -43,3 +43,141 @@
43
43
  そのしたのソースで変わったところはわかりません。
44
44
 
45
45
  文字が隠れたままです。
46
+
47
+
48
+
49
+ ここで一度整理します。
50
+
51
+ 今起きている問題は、上部にヘッダーを固定することはできたのですが、その固定したヘッダーの下に違うファイル(グローバルナビ)やテキストなどを書くと、ヘッダーの下に隠れてしまいます。
52
+
53
+ 隠れた要素をCSSでmargin-topなどで下にさげようとしてもゆうこときいてくれません。
54
+
55
+ 自分はお手上げ状態です。
56
+
57
+ 呼び出されている側は、前のファイルなので問題ないので、呼び出し側の問題だと思うので、ソースを貼って起きます。
58
+
59
+ ```html
60
+
61
+ <html lang="jp">
62
+
63
+ <head>
64
+
65
+ <!-- mainstyle呼び出し -->
66
+
67
+ <link rel="stylesheet" href="CSS/mainstyle.css">
68
+
69
+ <!--style呼び出し -->
70
+
71
+ <link rel="stylesheet" href="style.css">
72
+
73
+ </head>
74
+
75
+ <body>
76
+
77
+ <div>
78
+
79
+ <!-- ヘッダーを呼び出し -->
80
+
81
+ <iframe id="header" src="header/header.html" frameborder="no"></iframe>
82
+
83
+ </div>
84
+
85
+
86
+
87
+ <!-- ナビを呼び出し -->
88
+
89
+ <div>
90
+
91
+ <iframe id="nav" src="nav/nav.html" frameborder="no"></iframe>
92
+
93
+ </div>
94
+
95
+ <!-- メイン内容 -->
96
+
97
+ <div id="wrapper">
98
+
99
+ <div id="content">
100
+
101
+ <p>コンテンツ</p>
102
+
103
+ </div>
104
+
105
+ </div>
106
+
107
+ </body>
108
+
109
+ </html>
110
+
111
+ ```
112
+
113
+ ```css
114
+
115
+ body{
116
+
117
+ /* 背景色を設定 */
118
+
119
+ background: #eee;
120
+
121
+ /* 枠をなくす */
122
+
123
+ margin: 0;
124
+
125
+
126
+
127
+ }
128
+
129
+ #header{
130
+
131
+ width: 100%;
132
+
133
+ height: 40px;
134
+
135
+ position:fixed;
136
+
137
+ }
138
+
139
+ nav{
140
+
141
+ padding-top: 50px;
142
+
143
+
144
+
145
+ width: 1400px;
146
+
147
+ height: 140px;
148
+
149
+
150
+
151
+ margin: 0 auto;
152
+
153
+
154
+
155
+ }
156
+
157
+
158
+
159
+ ```
160
+
161
+ ```css
162
+
163
+ #wrapper{
164
+
165
+ margin-top:10px;
166
+
167
+ width:80%;
168
+
169
+ margin-right:auto;
170
+
171
+ margin-left:auto;
172
+
173
+ }
174
+
175
+ #content{
176
+
177
+ background:#fff;
178
+
179
+ height:900px;
180
+
181
+ }
182
+
183
+ ```

2

訂正

2016/10/07 18:05

投稿

ryo-dev
ryo-dev

スコア437

test CHANGED
File without changes
test CHANGED
@@ -15,3 +15,31 @@
15
15
  これも偶然発見した方法です。
16
16
 
17
17
  なぜこんな事が起こるのでしょうか?
18
+
19
+
20
+
21
+ 追記です。
22
+
23
+ ```css
24
+
25
+ body {
26
+
27
+ padding-top: 40px;
28
+
29
+ }
30
+
31
+ iframe#p_top {
32
+
33
+ position: fixed;
34
+
35
+ top: 0; /* 追記:これも必要 */
36
+
37
+ }
38
+
39
+ ```
40
+
41
+ 回答いただいたこのソースを記述したところ、padding-top: 40px;のせいで、固定ヘッダーの上に空間が空いただけでした。
42
+
43
+ そのしたのソースで変わったところはわかりません。
44
+
45
+ 文字が隠れたままです。

1

訂正

2016/10/07 17:09

投稿

ryo-dev
ryo-dev

スコア437

test CHANGED
File without changes
test CHANGED
@@ -10,4 +10,8 @@
10
10
 
11
11
  ![イメージ説明](d7b981fcf428ff3462bfccb658257f77.png)
12
12
 
13
+ 現在の解決方法としては、別ファイルを呼び出したあとに<br>で改行をする方法です。
14
+
15
+ これも偶然発見した方法です。
16
+
13
17
  なぜこんな事が起こるのでしょうか?