Je sais que cela pourrait me regarder droit dans les yeux, mais je ne peux pas vraiment déterminer ce qui pourrait causer mon problème. J'ai un pied de page et un iframe qui ne jouent pas bien ensemble. Mon pied de page est assis sur mon iframe. J'ai besoin de mon pied de page pour m'asseoir au bas de ma page, comme toutes mes autres pages, et rester là, peu importe si un utilisateur fait défiler vers le haut ou vers le bas. J'en ai juste besoin pour rester au fond. Je ne suis pas tout à fait sûr si c'est un problème de positionnement, un problème div, si c'est le problème du pied de page, ou le problème de l'iframe. Je suppose que c'est le problème du pied de page, mais le pied de page est placé là où j'en ai besoin sur toutes mes autres pages. C'est ce qui me déroute. Encore une nouveauté en matière de conception de page web, donc je suis toujours en train d'envelopper ma tête autour des propriétés de positionnement et de ce qui ne l'est pas. Voici ce que j'ai:IFrame Problèmes: Le pied de page est au-dessus de l'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">
   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">
   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">
   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>
Beaucoup des autres styles CSS au milieu sont alignés et bien, ne se sentait pas le besoin pour ajouter ceux-ci, sauf si cela est demandé. J'ai regardé partout ici et d'autres articles pour la journée passée, et je ne peux pas vraiment trouver ce que je cherche. Toute aide serait appréciée.
Le pied de page est tombé! Mais il est toujours assis dessus. Presque comme le corps de la page ne sait pas qu'il y a un pied de page là-bas. Voir ici: http://www.jp.pima.gov/NewWebTest/Info/GeneralInfo-Spanish.html C'est tellement proche! – Heather
Puis-je vous demander pourquoi votre classe '.footer1' est-elle absolument positionnée? Il suffit de supprimer ce positionnement absolu ainsi que le 'bottom' et le' left' de la classe '.footer1' et ça va le réparer. Qu'est-ce que le positionnement est il le prend hors du flux de document normal du DOM (modèle d'objet de document). https://www.w3schools.com/css/css_positioning.asp – Jorden1337
Saint oui! Merci beaucoup! C'était ça! Je comprends que ça sort, je ne comprends toujours pas tous les positionnements et tout. J'espère qu'après ce projet, je serai capable de m'asseoir et d'en apprendre plus. Merci encore. – Heather