Bonjour,

Je n'arrive pas à mettre mon pieds de page sur trois lignes, j'ai trois colonnes, pourtant j'ai règlé le parent en inline-flex ! Je peux mettre le content en inline, mais là c'est toute ma page qui se met en ligne, et ça ne me convient pas. C'est pour le foyer de mon village.

body {
background-image : url();
background-color : #FFCC66;
font-size : 100%;
min-height : 100vh;
display : flex;
flex-direction : column;
flex-grow : 1;
}
main_wrapper {
min-width : 100vh;
}
page {
min-height : 100vh;
display : flex;
flex-direction : column;
min-width : 100vh;
}
content {
flex-grow : 1;

}
footer {
display : flex;
text-align : center;
background-color : #FF9900;
min-width : 100vh;
flex-direction : row;
justify-content : space-around;
}
#foot {
display : inline-flex;
flex-wrap: nowrap;
align-content: flex-start;
}
#liens {
flex-direction : row;
}
#contact {
flex-direction : row;
}
#mentions {
flex-direction : row;
}
footer .pied {
text-align : center;
list-style : none;
background-color : #FF9900;
justify-content : space-around;
}
.pied .pied {
flex : 1;
position : relative;
margin : 0;
}
.pied .pied ul {
min-height : 20%;
overflow : hidden;
transition : 1s;
position : absolute;
margin : auto;
list-style : none;
min-width : 10vh;
}
.pied a {
display : block;
margin : 0;
padding : 0.5em;
font-size : inherit;
color : black;
background-color : #FF9900;
text-decoration : none;
box-sizing : border-box;
}

<footer>
<div id="foot">
<div id="liens">
<ul class="footer">
<ul class="pied">
    <div>
    <li><a href="http://www.baubigny.fr/" target="_blank">Commune</a></li>
    <li><a href="http://lesgnaulus.canalblog.com/" target="_blank">Archives</a></li>
    <li><a href="https://www.facebook.com/FineBoucheB7/" target="_blank">Fines bouches</a> </li>   
    <li><a href="http://www.rouhier-ceramistes.fr/" target="_blank">Poterie d'evelle</a></li>
    <li><a href="http://www.fnfr.org/le_reseau_3.php&region=21" target="_blank">FDFR</a></li>
    <li><a href="http://www.net1901.org/association/ASSOCIATION-DE-RECHERCHES-ET-DETUDES-DHISTOIRE-RURALE-SAINT-ROMAIN-A.R.E.H.R.,1934398.html" target="_blank">AREHR</a></li></ul></div>
 
<div id="contact">
<ul class="footer">
<ul class="pied"> 
<div>
   <li><a href="#">Haut de page</a></li>
   <li><a href="#">Nous contacter</a> </li>
       <p><a href="" target="_blank">Le Président, Jean Paul LEDOUX </a>mail :  jpjackledoux@outlook.fr</p>
       <p><a href="" target="_blank">Le Secrétaire, René MONTAGNON </a>mail :  rmontagnon@ozone.net</p>
   <li><a href="https://www.facebook.com/people/Foyer-Rural-de-Baubigny/100013338196143" target="_blank">facebook</a></li></ul> </div>
 
<div id="mentions"> 
<ul class="footer">
<ul class="pied">
<div>
    <li><a href="" target="_self">association loi de 1901 </a></li>
    <li><a href="www.elsarouhier.fr/" target="_blank">Site réalisé par Elsa</a></li>
</div></div></ul>

Quelqu'un saurait-il m'aider ?

-
Edité par Idja 6 juin 2018 à 11:41:20

Salut, tu met un bout de ton HTML, mais tout le CSS, du coup plein de code qui sert a rien, on doit pas être obliger de trier, entre le CSS inutile ici et les balise non fermées etc etc..

Je te suggere (en tout cas moi je jette pas un oeil tant que c'est pas fait) de remettre a jour ton code, en faisant gaffe au balise, au code CSS interressant et l'indentation

Voila

PaulTanné a écrit:

Salut, tu met un bout de ton HTML, mais tout le CSS, du coup plein de code qui sert a rien, on doit pas être obliger de trier, entre le CSS inutile ici et les balise non fermées etc etc..

Je te suggere (en tout cas moi je jette pas un oeil tant que c'est pas fait) de remettre a jour ton code, en faisant gaffe au balise, au code CSS interressant et l'indentation

Voila

Euh, oui, pardon. J'ai modifié ça. C'est mieux là ?
J'ai rajouté une règle pour ma liste et ça fonctionne, pas exactement comme je veux mais c'est mieux.

-
Edité par Idja 6 juin 2018 à 12:06:12

Re, 

c'est deja un peu mieux, mais fait tres attention niveau balise, j'en ai supprimer et été obliger d'en modifier plein..(ton footer se ferme pas, tu commence par une <li> mais tu la ferme avec une </p> etcetc..) 

Donc j'ai un peu rager et tout supprimer et tout recommencer, et j'ai ca, dis moi ce que t'en pense!

<footer>

<div id="liens" class="ligneitem">
    <br>    <p><a href="http://www.baubigny.fr/" target="_blank">Commune</a></p>
    <p><a href="http://lesgnaulus.canalblog.com/" target="_blank">Archives</a></p>
    <p><a href="https://www.facebook.com/FineBoucheB7/" target="_blank">Fines bouches</a> </p>  
    <p><a href="http://www.rouhier-ceramistes.fr/" target="_blank">Poterie d'evelle</a></p>
    <p><a href="http://www.fnfr.org/le_reseau_3.php&region=21" target="_blank">FDFR</a></p>
    <p><a href="http://www.net1901.org/association/ASSOCIATION-DE-RECHERCHES-ET-DETUDES-DHISTOIRE-RURALE-SAINT-ROMAIN-A.R.E.H.R.,1934398.html" target="_blank">AREHR</a></p>
</div>
  
  
 <div id="contact" class="ligneitem">

<p><a href="" target="_blank">Le Président, Jean Paul LEDOUX </a><br>jpjackledoux@outlook.fr</p>
       <p><a href="" target="_blank">Le Secrétaire, René MONTAGNON </a><br>rmontagnon@ozone.net</p>
 </div>
  
  
<div id="mentions" class="ligneitem">
   <p><a href="" target="_self">association loi de 1901 </a></p>
   <p><a href="www.elsarouhier.fr/" target="_blank">Site réalisé par Elsa</a></p>
</div>
  
  

<div id="plus">   
  <p><a href="#">Haut de page</a></p>
   <p><a href="#">Nous contacter</a> </p>
   <p><a href="https://www.facebook.com/people/Foyer-Rural-de-Baubigny/100013338196143" target="_blank">facebook</a></p> </div>
  
</footer>

footer{
 background-color:orange; 
}

.ligneitem{display:flex;
justify-content:space-around}

#plus{display:flex;
justify-content:space-between;}

-
Edité par PaulTanné 6 juin 2018 à 13:35:49

J'ai rajouté une règle pour ma liste et ça fonctionne, pas exactement comme je veux mais c'est mieux.

bah si c'etait bon tu pouvais mettre en resolu ca m'aurait évité de passer du temps dessus x)

Ben, ce n'est qu'à moitié résolu, je n'ai pas exactement ce que je veux.
Ceci-dit, merci de t'être penché sur la question. Je continue de chercher.

bah tu as regardé ma solution ?

C'est que ça a cassé ma mise en forme. J'ai simplifié le truc, et tout tient sur une ligne, donc c'est résolu, merci.