適切なフッターを作成してウェブページを拡大すると、要素がそれに応じて移動するようにする方法

私はこのプロジェクト用にフッターを作成しています。ウェブページをズームインすると、「Follow us on Facebook」がフッター情報の上に表示されるようにするにはどうすればよいですか？あなたが私のコードで見つけられるかもしれないいくつかの間違いがあれば、すみません。提案と修正は非常に高く評価されます。適切なフッターを作成してウェブページを拡大すると、要素がそれに応じて移動するようにする方法

<!DOCTYPE html> 
    <html> 
     <head> 
     <meta charset="UTF-8"> 
       <title> Pamana Beach Resort </title> 
      <link rel="icon" type="image/png" href="icon.png"> 
      <style> 
      div#fixedfooter { 
      position:fixed; 
      bottom:0px; 
      left: 0px; 
      width:100%; 
      height: 70px; 
      background:#00ADEF; 
      } 
      #footer-info { 
      background-color: #00adef; 
      width: 50%; 
      margin-left: 50px; 
      margin-top: 10px; 
      float: left; 
      } 

      #footer-infotext { 
      color: #FFFFFF; 
      font-family: footer-info; 
      font-size: 90%; 

      text-align: center; 
      float: left; 
      } 
      #social { 
      margin-top: 10px; 
      margin-right: 30px; 
      background-color: #00adef; 
      float: right; 
      widht: 400px; 

      } 
      #sociallogo { 
      width: 50px; 
      height: 50px; 
      } 
      #socialtext { 
      float:left; 
      font-family: footer-info; 
      padding-right: 10px; 
      color: #FFFFFF; 
      } 


      @font-face { 
       font-family: footer-info; 
       src: url(GOTHIC.ttf); 
      } 
      @font-face { 
       font-family: footer-infoBold; 
       src: url(GOTHICB.ttf); 
      } 

      #bold-info { 
      font-family: footer-infoBold; 
      font-size: 100%; 
      } 

     </style> 
     </head> 

     <footer> 
     <div id="fixedfooter" > 
      <div id="footer-info"> 
       <p id="footer-infotext">Designed by <span id="bold-info">CMSC 2 Students | Pamana Beach Resort </span> © Copyright 2016, All Rights Reserved.</p> 
      </div> 
      <div id="social"> 
       <p id="socialtext">FOLLOW US ON FACEBOOK</p> 
       <img id="sociallogo" src="social.png"> 
     </body> 
    </html>

出典

2016-05-13 Vindex

ブートストラップを使用していますか？ – d4rty

主なポイント：

タグを閉じます！あなたはあなたのフッタといくつかのdiv要素を閉じませんでした。
最初に "social" -divを入力してください。ビューがより小さくなると上に表示されます。
id "fixedfooter"から "height"属性を削除します。それ以外の場合、フッターは、小さな画面のすべての情報を表示するのに十分な大きさではありません。
@mediaを使用して、画面サイズに従ってコードを変更します。

すべての変更を確認するには、次のコードスニペットをご覧ください。私はそれが助けて欲しい

* {} #fixedfooter { 
 
    position: fixed; 
 
    bottom: 0px; 
 
    background: #00ADEF; 
 
    text-align: center; 
 
} 
 
#footer-info { 
 
    background-color: #00adef; 
 
    width: 30%; 
 
    margin-top: 10px; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#footer-infotext { 
 
    color: #FFFFFF; 
 
    font-family: footer-info; 
 
    font-size: 90%; 
 
    text-align: center; 
 
    float: left; 
 
} 
 
#social { 
 
    margin-top: 10px; 
 
    background-color: #00adef; 
 
    width: 400px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#sociallogo { 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
#socialtext { 
 
    float: left; 
 
    font-family: footer-info; 
 
    padding-right: 10px; 
 
    color: #FFFFFF; 
 
} 
 
@font-face { 
 
    font-family: footer-info; 
 
    src: url(GOTHIC.ttf); 
 
} 
 
@font-face { 
 
    font-family: footer-infoBold; 
 
    src: url(GOTHICB.ttf); 
 
} 
 
#bold-info { 
 
    font-family: footer-infoBold; 
 
    font-size: 100%; 
 
} 
 
@media(min-width: 768px) { 
 
    #footer-info { 
 
    width: 40%; 
 
    margin-left: 50px; 
 
    } 
 
    #social { 
 
    float: right; 
 
    margin-right: 30px; 
 
    margin-left: 50px; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Pamana Beach Resort</title> 
 
    <link rel="icon" type="image/png" href="icon.png"> 
 
</head> 
 

 
<body> 
 

 
    <footer> 
 
    <div id="fixedfooter"> 
 
     <div id="social"> 
 
     <p id="socialtext">FOLLOW US ON FACEBOOK</p> 
 
     </div> 
 
     <div id="footer-info"> 
 
     <p id="footer-infotext">Designed by <span id="bold-info">CMSC 2 Students | Pamana Beach Resort </span> © Copyright 2016, All Rights Reserved.</p> 
 
     </div> 
 
    </div> 
 
    </footer> 
 
</body> 
 

 
</html>

出典

2016-05-13 07:53:49 Ashielf

ありがとうございました。しかし、どのようにズームすると、すべての要素が中央にくるようにするのですか？ – Vindex

上記のコードを更新しました。「margin-left：auto; margin-right：auto;」を使用できます。オブジェクトを中心に置く。残念ながら、私はそれを完了するために時間がなくなっていますが、あなたは今これを行う方法の一般的な考えを得る必要があります。ハッピーコーディング！ – Ashielf

必要なのは、他の要素の上に "Follow us on facebook"を置き、高解像度で浮かせることです。私はそれを示すためにthis fiddleを作成しました。ただし、ニーズに合わせて@mediaクエリの解像度ブレークポイントを調整する必要があります。

出典

2016-05-13 07:36:12

ズームインしたときにもう1つの要素が消えるのは – Vindex

適切なフッターを作成してウェブページを拡大すると、要素がそれに応じて移動するようにする方法

答えて

関連する問題