Divs qui ne s'alignent pas correctement

Question

yvesman

28 Dec 2021 à 13:23

Bonjour

Je voudrais que la div caroussel_content se place en dessous du div fiche_content et que div class footer se poste logiquement en bas de page sur toute la largeur de la page.
J'ai beau retourner le probleme dans tout les sens je trouve pas la solution.
Merci d'avance pour votre aide

code source de la page :


<html>
    <!Doctype html>
<html lang="fr">
<head>
<title>****</title>
<meta charset="utf-8" />
<LINK rel="stylesheet" type="text/css" href="inc/css/style.css"><script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
   
       <body>
<div class ="bloc">    
 
 <header>
  <img src="upload/Logo-blue.png" class="logo" alt="logo" />
  <div class = "titre_content">
  <h1>Un comparateur</h1>
  </div>
  <div class = "etoile_content">
  <img src="upload/etoile.png" class="etoile" alt="etoiles" a href="********"/>
  </div>
  <br/>
  <div class="intro-content">
  <h3>Marre de perdre du temps dans les classements ?<br/>Avec ******** Trouvez en un click les produits les mieux notés </h3>      
  </div>
 <!-- <div class = "searchbox_content">-->
  <form id= "searchbox" class="q" method= "get" action= "?search" autocomplete= "off"> 
  <!--<input class= "q" type= "text" placeholder= "Que Voulez vous aujourd'hui ?" /> -->
   <input type = "search"  classe="q" name = "terme" placeholder= "Que Voulez vous aujourd'hui " >
   <input type = "submit" class = "s" name="s"  value = "Rechercher">
  </form>     
 <!-- </div> -->
 <!--
<section>
  <nav>
    <ul class="menuItems">
      <li><a href='#' data-item='Home'>Home</a></li>
      <li><a href='#' data-item='About'>About</a></li>
      <li><a href='#' data-item='Projects'>Projects</a></li>
      <li><a href='#' data-item='Blog'>Blog</a></li>
      <li><a href='#' data-item='Contact'>Contact</a></li>
    </ul>
  </nav>
</section> -->
   <div class = "menu_content">
      <nav>
<ul class="menuItems"> 
   <li class="deroulant"><a href="?gpe=Electro menager">Electro-Menager</a>
      <span>
        <a href="?name=Fours encastrables">Fours Encastrables</a><br/><br/>
        <a href="?name=Fours">Fours</a><br/><br/>
        <a href="?Name=Micro ondes">Micro Ondes</a><br/><br/>
        <a href="?name=Cuisinieres">Cuisinières</a><br/><br/>
        <a href="?name=Tables de cuisson">Tables De Cuisson</a><br/><br/>
        <a href="?name=lave linges">Laves-Linge</a><br/><br/>
        <a href="?name=Seche linge">Sèches-Linge</a><br/><br/>
        <a href="?name=Lave vaisselles">laves-Vaisselle</a><br/><br/>
        <a href="?name=Refrigerateurs">Réfrigérateurs</a><br/><br/>
        <a href="?name=Congelateurs">Congélateurs</a><br/><br/>
        </span> 
        </li> <!-- fin li deroulant -->
        <br/>
        <br/>
        <li class="deroulant"><a href="?gpe=Informatique">Informatique &ensp;</a>
        <span> 
        <a href="?name=Ordinateurs portables">Ordinateurs Portables</a><br/><br/>
        <a href="?name=Ordinateurs de bureau">Ordinateurs De Bureau</a><br/><br/>
        <a href="?name=Ecrans">Ecrans</a><br/><br/>
        <a href="?name=Tablettes tactiles">Tablettes Tactiles</a><br/><br/>
        <a href="?name=Scanners">Scanners </a><br/><br/>
        <a href="?name=Imprimantes">Imprimantes</a><br/><br/>
        </span> 
        </li> <!-- fin li deroulant -->
        <br/>
        <br/>
        <li class="deroulant"><a href="?gpe=Telephonie">Téléphonie &ensp;</a>
        <span> 
        <a href="?name=Telephones portables">Téléphones Portables</a><br/><br/>
        <a href="?name=Telephones fixes">Téléphones Fixes</a><br/><br/>
        <a href="?name=Accessoires">Accessoires</a><br/><br/>
        <a href="?name=Casques">Casques</a><br/><br/>
        </span> 
        </li> <!-- fin li deroulant -->
        <br/>
        <br/>
  </ul> 
  </nav>
  </div>  <div class = "menu">
   <script type="text/javascript"
src="inc/js/menu.js"></script>
  <nav>
<p>     

  <a class="a-haut" href="*********">Accueil</a>  </p>
  </nav>
 </div>
</header><div class ="clear">  
</div>
<div class="container">
<div class ="fiche_content">
<div class ="fiche_box1">
<div class ="fiche1">
<img src= "photos/Micro ondes/Panasonic NN-ST45KWEPG1.jpg" <alt= "Panasonic NN-ST45KWEPG" width="400" height="400">
</div>
</div>
<div class ="fiche_box2">
<div class ="fiche2">
<p>Panasonic NN-ST45KWEPG</p>
</div>
<div class ="fiche3">
<p>Four Micro-Ondes Solo, 32 L, Technologie Inverter, Micro-ondes 1000 W, Plateau tournant 34 cm, 21 Programmes, Décongélation Turbo, Menu Junior, Blanc – Version FR [Classe énergétique A]</p>
</div>
<div class ="fiche4">
<p> <img src="https://www.best-products.fr/prestations/.img/etoiles/etoile_4.5.png"></p>
</div>
<div class ="fiche5">
 <p>711 évaluations</p>
</div>

<hr></hr> 
<div class ="fiche6">
<p><style color="black">prix :</style>189€</p>
</div>
<div class ="fiche7">
<p>Retours GRATUITS  Tous les prix incluent la TVA.</p>
</div>
<br/>
<div class ="fiche8">
<ul><li>gbgfhbgnkjngfnbfgnhgjngfnbgfnghkghnbrfgnhbghjndgf</li></ul>
</div>
<div class ="fiche9">
<ul><li>fqgergvdfgfhiuklioljkjhlkhlhjkjhkhjjgfhfgjhjgfghjuohk,jghjf</li></ul>
</div>
<div class ="fiche10">
<ul><li>bcvbcvncvbccvnbcvvxcvbcvbncvbvcncvbcncvbcvnc </li></ul>
</div>
<div class ="fiche11">
<ul><li>gdfgdfgdfgdfgfghgjgh kjghghjfghgfh</li></ul>
</div>
<div class ="fiche12">
<ul><li>dfgfhfhfghfgjghkjbkfggdfgdfhfgjhdfdfg</li></ul>
</div>
</div>
<div class ="fiche_box3">
<div class ="fiche2">   
<p> 189 €</p><br>
</div>
<div class ="fiche3">   
<a href="https://amzn.to/3pnYuLa">Ajoutez ce produit à votre panier</a>
</div>
</div>
</div>
</div>
<div class ="clear">  
</div>
<br><a href='index.php?categorie=Micro ondes" '>Retour vers la séléction de  Micro ondes </a>
<div class="caroussel_content">
<h2>Produits similaires :</h2>
<div class="contenu_carou_auto">
<div class="caroussel-image">
   
  <div class="caroussel1" style=" width:12%; height: 100%; 
    text-align:center;
   /* position: absolute;*/
  /*  filter:drop-shadow(0 12px 5px hsla(0,0%,0%,.4));*/
    display: inlin-table;
    background-color:white;">
   <table class="carr">
   <tr>
    <td class="c1">
    <div>
     Panasonic NN-ST45KWEPG    </div>
   </td>  <!--fin c1-->
  </tr>
  <tr>
   <td class="c2">     
    <div>
     <img src=" photos/Micro ondes/Panasonic NN-ST45KWEPG1.jpg">
    </div>
   </td>  <!--fin c2-->
  </tr>
  <tr>
   <td class="c3">
    <div>
     189 €
    </div>  
   <td>   <!--fin c3-->
  </tr>
  <tr>
   <td class="c4">
    <div >
     <a href="fiche_produit.php?id_produit=308">Voir la fiche</a>
    </div>
   </td>  <!--fin c4-->
  </tr>
 </table>
</div><!-----fin caroussel----->
    </div> <!-----fin _caroussel-image----->
 </div> <!-----fin contenu_carou_auto----->
</div> <!-----fin carrousel_content----->

            </div>
        </section>
        <footer>
            <div class="footer">    
                2021 - Tous droits reservés -
            </div>
        </footer>
    </body>
</html></div>
</body>
</html>

voila le code css :


*
{   /*color: grey;
    font-family: Avenir, sans-serif;*/
    font-weight: bold; 
}
a 
{
    text-decoration: none;
    max-width: 10%;
}
.a-haut
{ color: white; text-decoration: none;  max-width: 10%;
    max-height: 12%;
    float:right;
    right: 15px;
    top: 01px;
    padding-left: 1%;
    padding-right: 1%;
    display: block; 
}
.a-haut:after {
    clear:both;
    overflow:hidden;
}
.affichage
{
    height: 90%; 
  /*  margin :5%;*/
 /*  margin-left:15%;*/
}
.bloc
{
    background: linear-gradient(grey , white); 
    display:block;
}
.bloq {
    width: 100%;
    border: 3px solid red;
    clear: both;
    text-align: justify;
    margin: auto;
    overflow: hidden;
}
body
{
   /* background-image: url("../img/fond-gris-degrade.jpg"); */
}
#box
{
      content: "";
      display: table;
      clear: both;
}
#button-submit 
{
    background: url(http://2.bp.blogspot.com/-4OxjMRukhCM/VD1gBscpzII/AAAAAAAAAhk/TUxMSv7bCzA/s1600/search-button.png) no-repeat;  width: 5%; height: 5%;
    border-width: 0px;
    cursor: pointer;
 
    position: absolute;
   /* left: 35%;*/
    /*top: 30%;*/
}
#button-submit:hover
{
     background: url(http://4.bp.blogspot.com/-GgNBTS_3FEA/VD1gBgm7RFI/AAAAAAAAAhg/flg6VijzW8E/s1600/search-button-hover.png) no-repeat;
}
#button-submit::-moz-focus-inner
{
     border: 0;
}
input:focus::-webkit-input-placeholder 
{
     color: transparent;
}
input:focus:-moz-placeholder
{
     color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
.c1
{
    /*left:10px;*/
    outline:1px solid transparent;
    height:30%;
    top:-10%;
}
.c2
{
    /*left:10px;*/
    outline:1px solid transparent;
    top:-5%;
    justify-content: center;
    height:20%;
    display:block;
}
.c2 img {
     height:60%;
     width:60%;
}
.c3
{
    outline:1px solid transparent;
    height:40%;
    margin-top:0.05%;
    color:red;
 /*   position:absolute; */
}
.c4
{
    outline:1px solid transparent;
    height:20%;
    margin-top:-3.0%;
    position:absolute;
}
.c5
{
    outline:1px solid transparent;
    height:20%;
    top:0%;
    
}
.c6
{
    outline:1px solid transparent;
    top:0%;
}
.c7
{
    outline:1px solid transparent;
    top:0%;
}
.c8
{
    outline:1px solid transparent;
    top:0%;
}
.carr
{
    border: 3px solid #42A5F5;
    outline:3px solid #42A5F5;
    width: 100%;
    height: 100%;
    float:left;
    text-align:center;
    background-color:white;
    margin: 0%;  
}
cadre 
{
    display: inline-flex;
}/*
.caroussel1 
{
    transform:translate3d(0,0,545px);
    transform:rotateY(0deg) translateZ(545px);
}
.caroussel2
{
    transform:rotateY(45deg) translateZ(545px);
}
.caroussel3 
{
    transform:rotateY(90deg) translateZ(545px);
}
.caroussel4
{
    transform:rotateY(135deg) translateZ(545px);
}
.caroussel5
{
    transform:rotateY(180deg) translateZ(545px);
}
.caroussel6 
{
    transform:rotateY(225deg) translateZ(545px);
}
.caroussel7 
{
    transform:rotateY(270deg) translateZ(545px);
}
.caroussel8 
{
    transform:rotateY(315deg) translateZ(545px);
}*/
.caroussel1,.caroussel2,.caroussel3,.caroussel4,.caroussel5,.caroussel6,.caroussel7,.caroussel8,.caroussel9,.caroussel10,.caroussel11,.caroussel12,.caroussel13,.caroussel14,.caroussel15,.caroussel16,.caroussel17,.caroussel18,.caroussel19,.caroussel20,.caroussel21
{

    width: 12%;
    height: 100%; 
    text-align:center;
   /* position: absolute;*/
   /*  filter:drop-shadow(0 12px 5px hsla(0,0%,0%,.4));*/
   /* display: inlin-table;
    background-color:white;
   */  
}
    /*****carrousel 3d automatique***/
    *{box-sizing : border-box}
.caroussel_content
{
    padding-top:5%;
   /* float:left;*/
    width:100%;
}
.clear
{
display:block;
float:unset;
position:unset;
content:"";
}
#colonne1,#colonne2,#colonne3
{
      float:left;
      height:470px; 
      width:23%;
      padding:0 10px;
}
.contenu_carou_auto
{
    width:100%;
    height:35%;
    overflow:hidden;
    display: flex;
    position: inherit;
}
.caroussel-image
{
    display:table;
    position:relative;
    height:90%;
    width: 100%;
    display: flex;
    position: relative;
  /*  -webkit-animation: mysecond 20s ease -1s infinite;
    -webkit-animation: myAnim 5s ease-in 15s infinite alternate-reverse forwards;
        -moz-animation: mysecond 20s ease -1s infinite;
        -moz--animation: myAnim 5s ease-in 15s infinite alternate-reverse forwards;
         -ms-animation: mysecond 20s ease -1s infinite;
         -ms-animation: myAnim 5s ease-in 15s infinite alternate-reverse forwards;
          -o-animation: mysecond 20s ease -1s infinite;
          -o-animation: myAnim 5s ease-in 15s infinite alternate-reverse forwards;
             animation: mysecond 20s ease -1s infinite;*/
          /*   animation: myAnim 5s ease-in 8s infinite alternate-reverse forwards;*/

}
.caroussel-image img:hover
{
  /* -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
     -ms-transform: scale(1.5);
      -o-transform: scale(1.5);
         transform: scale(1.5);  /*
       /*  position:absolute; */
         width:10%;
         
  /*   -webkit-animation: mythird 20s ease -1s infinite;
        -moz-animation: mythird 20s ease -1s infinite;
         -ms-animation: mythird 20s ease -1s infinite;
          -o-animation: mythird 20s ease -1s infinite;
             animation: mythird 20s ease -1s infinite;    */ 
}   
.caroussel-image img:hover hover
{
 /*  -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
     -ms-transform: scale(1.5);
      -o-transform: scale(1.5);
         transform: scale(1.5);  */
       /*  position:absolute; */
         width:10%;
   /*  -webkit-animation: mythird 20s ease -1s infinite;
        -moz-animation: mythird 20s ease -1s infinite;
         -ms-animation: mythird 20s ease -1s infinite;
          -o-animation: mythird 20s ease -1s infinite;
             animation: mythird 20s ease -1s infinite;     */
}
.caroussel-image img
{
    background-position : center bottom;      
    width:5em;
    height:5em;
    top:36%;
    outline:1px solid transparent;
    backface-visibility:hidden;
    filter:drop-shadow(0 12px 5px hsla(0,0%,0%,.4)); 
   /* position:absolute;*/
  /*     -webkit-transition: all .5s cubic-bezier( .6, 2, .4, 1);
    -moz-transition: all .5s cubic-bezier( .6, 2, .4, 1);
     -ms-transition: all .5s cubic-bezier( .6, 2, .4, 1);
      -o-transition: all .5s cubic-bezier( .6, 2, .4, 1);
         transition: all .5s cubic-bezier( .6, 2, .4, 1); */
}

.connexion_content
{
    text-align: center;
}
.container
{
display:block;    
}
.erreur
{ 
    background: #ff0000;
    padding: 5px;
    margin: 5px; 
}
.etoile_content
{
    height: 10%;   
}
.etoile {
     width: 20%;
     /* max-height: 30%; */
     left: 50%;
     top:50%;		  
     margin-left:34%;
     margin-top:3%;
     float: none;
     transform: translate(35%, -00%);
}
.float_nul
{
content:"";    
float:null;  
display:null;
}
.footer
{
    background: #000;
    color: white;
    text-align: center;
    padding: 7px ;
    display:block;
    float:left;
    width:100%;
    display:block;
}
.fiche_content
{
position:inherit;
display:flex;
}
.fiche_box1
{
flex: 1 1 0;    
/*flex-shrink:1;
/*display:flex;*/
/*flex-grow: 1;
flex-direction:row;
float:left;*/
margin-top: 5%;
width:30%;
/*margin-left: 35%;*/
/*margin-right: 35%;*/
font-size: 24px!important;
font-family: "Amazon Ember",Arial,sans-serif;
position:absolute;
}
.fiche_box2
{
flex: 1 1 0;
/*flex-shrink:1;
display:flex;
flex-grow: 1;
flex-direction:row;*/
width:30%;
float:left;
margin-top: 5%;
margin-left: 35%;
/*margin-right: 35%;*/
font-size: 24px!important;
font-family: "Amazon Ember",Arial,sans-serif;
position:absolute;
}
.fiche_box3
{
flex: 1 1 0;
/*flex-shrink:1;
display:flex;
flex-grow: 1;
flex-direction:row;*/
width:30%;
float:left;
margin-top: 5%;
margin-left: 35%;
/*margin-right: 35%;*/
font-size: 24px!important;
font-family: "Amazon Ember",Arial,sans-serif;
/*position:absolute;*/
}
.fiche2,.fiche3,.fiche4,.fiche5,.fiche6,.fiche7
{
height: 10%;
text-align:center ;
padding-left: 35%;
}

.fiche1
{
margin-top: 5% ;
flex-grow: 1;
/*float:left;*/
}
.fiche4 img
{
height :2%;
width:40%;
}
.fiche5
{
/*position:absolute; */
font-size: 12px;
text-align:center;
}
.fiche6
{
/*position:absolute; */
color: orange;
}
.fiche7
{
/*position:absolute; */
font-size: 12px;
color: green;
}
.fiche8,.fiche9,.fiche10,.fiche11,.fiche12,.fiche13,.fiche14
{
/*position:absolute; */
font-size: 12px;
/*margin-left:45%;*/
text-align:unset;
}

/*
.fiche2
{
display:inline-block;
float:left;
margin-top: 5%;
margin-left: 5%;
}
.fiche3
{
display:inline-block;
float:left;
margin-top: 5%;
margin-left: 5%;
}
.fiche4
{
display:inline-block;
float:left;    
color:red;    
margin-top: 5%;
margin-left: 5%;
}
.fiche5
{
display:inline-block;
float:left;    
color:red;    
margin-top: 5%;
margin-left: 5%;
}
*/
h2 
{
    text-align :center;
    color:white;
    right: 34%;
}
header 
{
    background: #42A5F5; padding: 5px; 
}
header:after
{
    content:"";
    display:block;
    clear:both;
    overflow:hidden;
}
header .conteneur
{ 
    margin: 0 auto; height: 50%; padding:2% ;
}
header .conteneur:after {
    content:"";
    display:block;
    clear:both;
    overflow:hidden;
}
header .a-haut
{
    text-decoration: none;
    max-width: 10%;
    color:white;
    position:inherit;
}
hr{
 color: black;
}
img {
  max-width: 100%;
    max-height: 100%;
}
.intro-content
{
color:white;
text-align:center;
padding-top:3%;
}
.modif_mdp_content
{
text-align:center;
}

/*
@keyframes rotation
{
    from {transform:rotateY(0);} to {transform:rotateY(1);}
}
*/
/*
@keyframes mysecond {
from,11%,to {margin-left:00px;}
15%,26%{margin-left:100px;}
30%,41%{margin-left:200px;}
45%,56%{margin-left:300px;}
65%,76%{margin-left:400px;}
80%,91%{margin-left:500px;}
99.99%{margin-left:600px;}
}
*/
@keyframes myAnim {
  0% {
    transform: scale(5);
  }
  
  100% {
    transform: scale(6);
  }
}
@keyframes mysecond {
    0%   { left:00%; top:0px;}
    15%  { left:-15%; top:0px;}
    30%  { left:-30%; top:0px;}
    45%  { left:-45%; top:0px;}
    60%  { left:-60%; top:0px;}
    75%  { left:-75%; top:0px;}
    90%  { left:-90%; top:0px;}
    100% { left:-105%; top:0px;}
}
/*
@keyframes mythird {
    0%   { left:00%; top:0px;}
    100%   { left:00%; top:0px;}
    
}*/
/*
@keyframes rotation
{
    from{transform:rotatey(0)}
    to{transform:rotatey(1turn);}
}
*/
.lien_table  
{
    display:block;
    width:100%;
    height:100%;  
}
.logo_content
{
    height: 20%;   
}
.logo {
    width: 50%;
    max-height: 30%; 
    left: 40%;
    top:50%;		  
    margin:20px;
    float: none;
    transform: translate(45%, -00%);
}
.logo:after {
    content:"";   
    clear:both;
    overflow:hidden;
}
.menu_content
{
/*display:none;*/
}
.menu_content_responsive
{
    height: 20%;  
    position:relative; 
    margin-top:5%;
}
nav
{
    width: 100%;
    top: 0px;
}
nav ul  {
    margin: 0; padding: 0;
 /*   float: left;*/
    width: 99%;
    list-style: none;
    display:flex;
   /* position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
}
nav ul li 
{
    width:15%;
     float: left;
   /* margin: 0; padding: 0;*/
    /*--Divider for each parent level links--*/
   /* font-size:45px;*/
}
nav ul li a
{
  /*  padding: 1% 6%;*/
    display: block;
    color:white;
    text-decoration: none; 
  /*  position:inherit;*/
}
nav ul li span
{
top:0%;
   /* float: left;*/
 /*   padding: 0% 95%;*/
  /*  position:inherit;*/
/* left: 0; top:15%; */
  display: flex; 
    width: 15%;
    height:10%;
    color: white;
    left:0px;opacity:0;width:152px; 
    transition:1s left,1s width,1s opacity;
    /*--Bottom right rounded corner--*/
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
     /*--Bottom left rounded corner--*/
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
 /*    -webkit-border-bottom-left-radius: 5px;*/
}
nav ul li span:hover
{
}
nav ul  li:hover span 
{
    display: block; 
    left:00%;opacity:1;width:276px; 
     transition:1s left,1s width,1s opacity;   
} /*--Show subnav on hover--*/
nav ul  li span a {
    display: inline;
    position:absolute;
}   /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
nav ul  li span a:hover {
    text-decoration: underline;
}
p1,p2,p3,p4
{
position:absolute;
float:left;
display:block;
}
.pagination
{
display:box;    
}
.searchbox_content
{
    /*height: 15%;   
    display:flex;*/
}
.searchbox_content
{
    max-width:30%;
}
 #searchbox
{
    max-width:100%;  
    display:flex;
}
 #searchbox 
{
    margin-left:35%;
    margin-top:5%;;
    border-radius: 10px;
    width: 40%;
    height: 20%;
    text-align:center
}
#searchbox input 
{
    outline: none;
    border-radius:10px; 
    width: 40%;
    height: 25%;
    position:inherit;
    margin-top:4.8%;
}
#searchbox input[type= »text ] 
{
    background: transparent;
    padding: 5px 0px 5px 0px;
    font-family: « Arial Narrow », Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    width: 77%;
    color: #828282;
    display: inline-table;
    vertical-align: top;
}
section
{
    height: 30%; 
}
.titre_content
{
    height: 5%;    
    text-decoration: bold; 
    color: white; 
}
.td1 
{
    height:5em;  
    padding: 1.5%;
}
.td2 
{
    height:-1em;   
    padding: 1.5%;
}
.td3 
{
   height:22%; 
    padding: 1.5%;
}
.td4 
{
    height:6%;  
    padding:1.5%;
}
.td5
{
   /* height:10%;*/
    padding: 1.5%;
    color:red;
}
.td6 
{
  /*  height:05%;  */
    padding:1.5%;
}
table
{
    border: 3px solid #42A5F5;
    outline:3px solid #42A5F5;
    height:40em;
    float:left;
    text-align:center;
    overflow:hidden; 
    background-color:white;
    margin: 0.1%  ;
}
.table
{
 /*   border: 3px solid #42A5F5;*/
    outline:3px solid #42A5F5;
    width: 12%;
    height:40em;
    float:left;
    text-align:center;
    overflow:hidden; 
    background-color:white;
    margin: 0.2%  ;
    display:flex;
    margin-top:5%;
}
.table img
{
    /*max-height:90%;*/
    height:60%;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto;
}
.table p1
{
    height:10%;
}
td
{
height:unset;
}
.titre_content
{
    text-align:center;   
}
tr
{
height:unset;
}
.ul1,.ul2,.ul3,.ul4,.ul5,.ul6,.ul7,.ul8,.ul9
{
position:absolute;
float:left;
}
.validation
{
    background: #669933;
    padding: 5px;
    margin: 5px; 
}

@media (max-width:50px)
{
 .logo
{
margin-left:35%; 
}   
    
#searchbox .q
{
    margin-left:35%;
    margin-top:5%;;
    border-radius: 10px;
    width: 80%;
    height: 80%;
    text-align:center
} 
h1
{
    color:yellow;
}
}

Olivier C

28 Dec 2021 à 18:04

Bonsoir,

Par définition, les page n'ont pas de hauteur, c'est donc le contenu qui le définit. Pour contourner cela on peut définir une hauteur minimale de 100% de la page, comme ceci :

body {
  min-height: 100vh;
}

On ne prend pas des pourcentages : ceux-ci définiraient un pourcentage selon le contenu, et non selon le viewport. Ce qui n'est pas logique d'ailleurs, car les pourcentages fonctionnent pour la largeur, c'est une des bizarreries de CSS qu'il faut apprivoiser...

A partir de là, on peut définir un système de grille, les plus récents étant flex ou grid. Partons sur grid layout car c'est celui qui est dédié aux templates, ce qui donne au final :

body {
  display: grid;
  grid-template-rows : auto auto 1fr; /* Le secret est ici : un footer directement enfant de body occupera l'espace restant. Mais personnellement j'aurais plutôt opté pour étirer la div principale. */
  min-height: 100vh;
  margin: 0;
}

Modifié par Olivier C (28 Dec 2021 - 18:27)

yvesman

29 Dec 2021 à 09:23

bonjour

j'ai essaye ta solution mais jme retrouve avec le footer a droite Smiley ohwell

Modifié par yvesman (29 Dec 2021 - 09:23)

Olivier C

29 Dec 2021 à 16:18

Un exemple en ligne : CodePen

Peut-être faut-il définir un width:100% pour sur l'élément parent pour contrecarrer un style déjà établi dans votre code :

body {
  width: 100%;
}

yvesman

29 Dec 2021 à 19:25

cela ne change rien

ps : j'ai rajoute un div clear en dessous de fiche_box1 afin d'en annuller l'absolute

apparement c'est la div fiche_content qui cause probleme car elle n'est pas place dans container comme elle devrait mais je ne pense pas que cela vienne de la div en elle meme mais d'un comportement anormal des divs ( peut etre un absolute qui traine et c'est pour ca que les divs ne s'aligne pas ) pourtant j'ai tout isole par des divs clear alors je vois pas ( mais ptet que je me trompe)
Modifié par yvesman (30 Dec 2021 - 05:27)

Sujet clos

CSS et mise en forme, CSS3

Divs qui ne s'alignent pas correctement