2017-06-21 9 views
0

これは私が顔の中で私を見つめている可能性があることを知っていますが、私の問題の原因となるものを正確に指摘できません。私は一緒に素晴らしい演奏されていないフッターとiframeを持っています。私のフッタは私のiframeの上に座っています。私のフッタは、他のすべてのページと同じように、ページの一番下に座る必要があり、ユーザがスクロールしてもスクロールしても、そこにとどまる。一番下にとどまるだけです。私は、その位置付けの問題、divの問題、それがフッタの問題かiframeの問題かどうかは分かりません。私はそれがフッタの問題だと思っていますが、フッターは私が他のすべてのページで必要な場所に配置されています。それが私を混乱させている。まだWebページデザインには新しいので、私はまだ位置付けプロパティの周りに頭をラッピングしています。ここで私が持っているものです。IFrameの問題:フッタがiframeの上にあります

CSS:

/*BODY*/ 
html, body { 
    background:White; 
    font-family:Segoe UI; 
    width:100%; 
    margin:0; 
    padding:0; 
    height:100%; 
} 

#wrapper { 
    min-height: 100%; 
    position:relative; 
} 

#body { 
    padding:10px; 
    padding-bottom:460px; 
} 

.footer1 { 
    background-color:#494949; 
    display:inline-block; 
    width:100%; 
    height:360px; 
    position:absolute; 
    bottom:100px; 
    left: 0; 
} 

.footer2 { 
    background-color:black; 
    display:inline-block; 
    width:100%; 
    height:100px; 
    /*margin-top:0px;*/ 
    position:absolute; 
    bottom:0; 
    left:0; 
} 

はHTML:途中で

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <title>Pagina De Informacion General</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
     <meta name="description" content="Slide Down Box Menu with jQuery and CSS3" /> 
     <meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/> 
     <link rel="stylesheet" href="CaseTypes/style.css" type="text/css" media="screen"/> 
     <script src="/NewWebTest/jquery.min.js"></script> 
    </head> 

    <body> 
     <div id="wrapper"> 

      <!--HEADER--> 
      <div id="header"> 
      </div> 

      <!--PAGE TITLE--> 
      <div id="pageTitle"> 
       Pagina De Informacion General 
      </div> 

      <!--NAVIGATION MENU--> 
      <div id="navigation"> 
      </div> 

      <br/> 

     <div id="body" style="height:100%"> 
     <div style="height: 532px"> 
      <div id="openingImage"> 
       <img src="../images/Blended Courthouse JPG Less Opacity.jpg" alt="Courthouse" height="274" width="1271"/>   
      </div> 

      <!--DIV LEFT: ANNOUNCEMENTS--> 
      <div id="annouceDiv"> 

       <div class="sectionHeader"> 
        &nbsp&nbsp Ubicación Central 
       </div> 
       <br/> 

       <div class="announceSection" style="text-align:center"> 
        Pima County Consolidated Justice Court<br/> 
        240 N. Stone Avenue, segundo piso<br/> 
        Tucson, AZ 85701<br/> 
        (520) 724-3171 <br/><br/> 

        Para obtener información sobre estacionamiento, visite el sitio web de la Ciudad de Tucson:<br/> 
        <a href="https://www.tucsonaz.gov/park-tucson/where-can-i-park-downtown" target="_blank">City of Tucson Downtown Parking</a>     
       </div> 

       <!--SECTION DIVIDER IMAGE--> 
       <div class="breakImageDiv"> 
        <img src="../images/EchoPet_Line_Break_PNG.png" class="breakImagePic" alt="Divider"/> 
       </div> 

      </div> 

      <div id="annouceDiv"> 

       <div class="sectionHeader"> 
        &nbsp&nbsp Horario y Cierre por Dias Festivos 
       </div> 
       <br/> 

       <div class="announceSection" style="text-align:center"> 
        Lunes a Viernes, 8:00 a.m. to 5:00 p.m., excepto días festivos<br/> 
        <table style="margin:auto; width:100%"> 
         <tr> 
          <td>Año Nuevo</td> 
          <td>Día del Obrero</td> 
         </tr> 
         <tr> 
          <td>Día de Martin Luther King</td> 
          <td>Día del Armisticio</td> 
         </tr> 
         <tr> 
          <td>Día de los Presidentes</td> 
          <td>Día de Acción de Gracías</td> 
         </tr> 
         <tr> 
          <td>Día de los Caídos</td> 
          <td>Día despues de Acción de Gracías</td> 
         </tr> 
         <tr> 
          <td>Día de la Independencia</td> 
          <td>Navidad</td> 
         </tr> 
        </table>     
       </div> 

       <!--SECTION DIVIDER IMAGE--> 
       <div class="breakImageDiv" style="width: 100%"> 
        <img src="../images/EchoPet_Line_Break_PNG.png" alt="Divider" style="width:100%" height="39"/> 
       </div> 

      </div> 

      </div> 

     <div style="float:left; width:100%"> 
      <div id="annouceDiv" style="width:100%"> 

       <div class="sectionHeader" style="margin-right:60px"> 
        &nbsp&nbsp Plano 
       </div> 
       <br/> 

       <div class="announceSection" style="text-align:center; margin-right:60px"> 

         <iframe 
          src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3375.2154892306807!2d-110.97141080000001!3d32.22536379999999!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86d6711e54972b5f%3A0x655603b7f78ec698!2s240+N+Stone+Ave%2C+Tucson%2C+AZ+85701!5e0!3m2!1sen!2sus!4v1422889378316" 
          width="95%" height="450" postion="relative" bottom="460px" frameborder="0" style="border:0"> 
         </iframe> 

       </div> 

       <!--SECTION DIVIDER IMAGE--> 
       <div class="breakImageDiv" style="width:100%"> 
        <img src="../images/EchoPet_Line_Break_PNG.png" class="breakImagePic" alt="Divider" style="width:100%"/> 
       </div> 

       </div> 

      </div> 

     </div> 

      <!--FOOTER--> 
      <div id="footer" style="position:relative; bottom:0"> 
      </div> 

     <!--Javascript for header, nav, and footer-->       
     <script type="text/javascript" src="/NewWebTest/jquery.min.js"></script> 
     <script type="text/javascript" src="/NewWebTest/jquery.easing.1.3.js"></script> 
     <script type="text/javascript"> 
      $(function() { 
      $("#header").load("/NewWebTest/header.html"); 
      $("#navigation").load("/NewWebTest/navigation.html"); 
      $("#footer").load("/NewWebTest/footer.html"); 
      }); 
     </script> 

    </div> 

</body> 

</html> 

他のCSSスタイルの多くが並んと罰金され、必要性を感じませんでした要求されない限り、それらを追加する。私は過去の日にここや他の記事をどこでも見てきたし、私が探しているものを見つけることができない。どんな助けもありがとう。

答えて

0

clear:both;のスタイルを追加する理由は、あなたがiframefloat:leftを持っているため、iframeの上に座っているという理由があります。あなたはフロートをクリアする必要があります。

+0

フッターがダウンしました!しかしそれはまだ上に座っている。ページの本文のように、そこにフッターがあることはわかりません。こちらをご覧ください:http://www.jp.pima.gov/NewWebTest/Info/GeneralInfo-Spanish.htmlそれはとても近いです! – Heather

+0

'.footer1'クラスが絶対配置されているのはなぜですか? '.footer1'クラスから' bottom'と 'left'だけでなく絶対位置も取り除くだけで解決します。どのような位置付けは、DOM(ドキュメントオブジェクトモデル)の通常のドキュメントフローから取り除くことです。 https://www.w3schools.com/css/css_positioning.asp – Jorden1337

+0

聖なるそうです!どうもありがとうございます!それだった!私はそれを取り出す、私はまだ位置とすべてのすべてを理解していない取得します。このプロジェクトが完了したら、私は座ってもっと学べます。ありがとうございました。 – Heather

関連する問題