-3
私はコーディングにかなり新しいので、完璧とは限りません。私はこのページを携帯電話でうまく見せるための助けを探しています。ほとんどの場合、テキストと画像は重なり合うでしょう。私はヘッダとフッタについて何をすべきか分かりません。レスポンシブウェブページを作成するためにはどのような調整が必要ですか？
<body>
<h1 div id= "header"> </h1>
<div id="logos"> <img id="logo" src= "https://msu.edu/~donald88/portfolio/logo02.png" </div>
<ul id="navigation">
<li> <a href= "http://kelsiedonaldson.com."> About</a></li>
<li> <a href= "http://kelsiedonaldson.com/portfolio.html"> Portfolio</a></li>
<li> <a href= "http://kelsiedonaldson.com/resume.html"> Résumé</a></li>
<li> <a href= "http://kelsiedonaldson.com/contact.html"> Contact</a></li>
</ul>
<h2> Project Spotlight </h2>
<h3> Refugee Development Center Newsletters </h3>
</br> </br>
<div id= "main">
<div class="project-image"><img src= "https://msu.edu/~donald88/portfolio/rdcnewslettertwo.png" alt="RDC newsletter" /></div>
<div id="spotlight-text"> <p class="project-text"> This is a project I did in a class during my freshman year of college. A member of the RDC staff came to my class to
give a general overview of what she wanted, and then we divided into teams to design two newsletters for this awesome organization. My team
consisted of three members, and we all worked together to write and design the newsletters. I specifically wrote the story pictured on the
left in the summer 2016 newsletter about the GLOBE camp program. I also helped collaborate on the design of both newsletters as far as color choice,
text formatting, and article length. I then edited my other team members' articles and helped assemble everything as a PDF that could be printed
or looked at online. Finally, my team gave a presentation to the rest of my class and the RDC staff member about our newsletter and the choices
we made while creating it. The client only had positive things to say about our design! </p>
<p class="project-text"> Completed: April, 2016 <br/>
Category: Web/Print </p>
</div>
<div class="back-button"> <a href= "http://kelsiedonaldson.com/portfolio.html"> Back to portfolio </a> </div>
<div class="portfolio-button"> <a href= "http://kelsiedonaldson.com/rdc_newsletters.pdf" target="_blank"> See full project </a> </div>
</div>
</p>
<div style="clear: both"></div>
<div style="clear: both"></div>
<footer class="footer">
<div class="container">
<div id="ftr-wrap">
<div class="ftr-links">
<div class= "table">
<ul>
<li><a href="https://twitter.com/Kelsdonaldson22"> <div class="icons"><img src= "http://icons.iconarchive.com/icons/limav/flat-gradient-social/256/Twitter-icon.png"></div></a></li>
<li><a href="https://www.facebook.com/kelsie.donaldson"><div class="icons"><img src= "https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png"></div></a></li>
<li><a href="https://www.instagram.com/kelsiedonaldson/"><div class="icons"><img src= "http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram_App_Large_May2016_200.png"></div></a></li>
<li><a href="https://www.linkedin.com/in/kelsie-donaldson-965033115?trk=hp-identity-name"><div class="icons"><img src= "https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/linkedin-512.png"</a></div></li>
</div>
</ul>
</div>
<div class="copyright-amazon">
<p class="copyright">© Copyright Kelsie Donaldson 2016</p>
<p class="amazon"><a href="https://www.instagram.com/kelsiedonaldson/"><img
</div>
</div>
</div>
</footer>
CSS：
Body {
background-image: url("http://www.publicdomainpictures.net/pictures/140000/velka/grey-white-background.jpg");
width: 100%;
}
html {
position: relative;
min-height: 100%;
}
#header {
height: 120px;
width: 100%;
min-width: 1200px;
background-color: #b196db;
text-align: center;
font-family: 'Yesteryear', cursive;
margin: 0px;
padding-top: 20px;
padding-bottom: 20px;
line-height: 120px;
font-size: 100px;
position: relative;
}
#logo {
height: 110px;
max-width: 880px;
padding: 30px;
padding-top: 10px;
padding-bottom: 28px;
margin-top: -10em;
margin-left: auto;
margin-right: auto;
display: block;
position: relative;
}
#navigation li {
display: inline;
list-style-type: none;
padding: 50px;
float: center;
text-decoration: none; }
#navigation {
text-align: center;
min-width: 1160px;
height: 30px;
background-color: #35b7ab;
margin-top: 0px;
top: 140px;
padding-top: 15px;
font-family: Lucida bright;
font-size: 20px;
color: white
}
a {
text-decoration: none;
color: white;
}
a:hover{
color: #867289; }
h2 {
font-size: 50px;
color: #66096c;
font-family: 'Philosopher', sans-serif;
text-align: center; }
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; }
body {
padding:0;
margin: 0;
}
.footer {
position: absolute;
margin-bottom: -30;
margin-top: 10px;
bottom:0;
width:100%;
min-width: 1200px;
background-color: #b196db;
}
.footer p {
color: #fff;
font-size:1em;
display: inline-block;
position: relative;
bottom: 10px;
float: right;
}
.container {
max-width: 1674px; /* adjust to allow for padding as needed */
padding:0 50px; }
#ftr-wrap {
display:table;
table-layout:fixed;
width:100%;
margin:0 auto; }
#ftr-wrap > div:nth-child(1) {text-align:left;}
#ftr-wrap > div:nth-child(2) {text-align:center;}
#ftr-wrap > div:nth-child(3) {text-align:right;}
.ftr-links ul {
padding: 0;
display: inline-block;
position: relative;
margin: auto;
width: 100%; }
.table {
position: relative;
display: table;
margin: 0 auto;
display: inline-block;
list-style: none;
margin-left: 45%;
bottom: -50; }
.ftr-links ul li {
display: inline-block;
padding-right: 15px;
font-size:.75em; }
.ftr-links ul li a {
display: inline-block;
color: #fff;
margin: 0; }
.icons > img {
display: inline;
height: 40px;
width: 40px;
padding-bottom: 20px; }
#main{
height:800px;
width:100%;
}
#main {
height:500px;
width:100%;
}
.project-image{
width:40%;
color: #66096c;
height:100%;
float:left;
margin-left: 7em;
padding-right: 3em;
}
div#spotlight-text {
width:40%;
height:100%;
float:left;
font-family: Lucida Bright;
font-size: 20px;
color: #66096c;
margin-right: 2%;
}
h3 {
font-size: 30px;
color: #867289;
text-align: center;
font-family: Lucida Bright;
役に立つヒント：HTMLコードを反応的なものに変更すると、時間がかかる可能性がありますので、ここでは広すぎます（ウェブ上のほとんどの場所）。また、基本的に「助けてください」という質問には注意してください。それは、その方法で「私のためにやってください」と尋ねられた質問には非常に一般的です。これを「どのように反応するように2つの部門にするか、これは私が試したものです」と言えば、それは大きな疑問です。 HTH！ – halfer