Alignement vertical et footer toujours en bas de page

Alignement vertical et footer toujours en bas de page - HTML/CSS - Programmation

Marsh Posté le 16-04-2015 à 10:05:43    

Bonjour,
Je tiens déjà à préciser que je suis stagiaire et que j'ai donc une clause de confidentialité.
Je ne pourrais donc vous donner AUCUNE ligne de code pour illustrer mes mots (malheureusement pour tous...).
 
Je m'explique, je suis en train de bosser sur une application, je dois refaire tout le design en CSS car, sur l'application, il n'y a pas de CSS.
Cependant, j'ai un petit soucis, je n'arrive pas à centrer verticalement une div.
Voici la structure html de la page.
 
<body>
    <header>
    </header>
 
     <div id="divAcentrerVerticalement">
          <form>
          </form>
     </div>
   
     include d'un fichier php qui contient aussi le footer
 </body>
 
 
Voilà comment se présente ma page en gros, j'ai donc essayé pas mal de chose , et meme mettre ma div en question dans une div et attribuer à cette div une min-height:100%; pour être sur d'avoir de l'espace de "travail", sauf que le footer est au final TOUT en bas de la page (il y a donc du défilement).
 
Rien ne passe, quelqu'un pourrait t'il me filer un coup de main que ce soit en profondeur ou juste sur le principe pour centrer verticalement quelque chose en laissant le footer en bas de la page? (sans défilement, car avec position : absolute et bottom 0, il y a quand même défilement).  
 
Merci d'avance !


---------------
|i9 13900K | MSI Z690 Tomahawk WIFI DDR4 | 4*16Go G.SKILL Trident Z Neo 3600Mhz C16 | EVGA 3090Ti FTW3 Ultra | DeepCool LT720 | NZXT H7 FLOW|
Reply

Marsh Posté le 16-04-2015 à 10:05:43   

Reply

Marsh Posté le 16-04-2015 à 14:19:53    

Bonjour,
As-tu essayé ce paramètre ?
vertical-align:middle;

Reply

Marsh Posté le 16-04-2015 à 14:38:03    

moi j'utilise ça ( IE9 et plus )
http://codepen.io/anon/pen/EaqJOy

 

si tu dois etre compatbile IE10 et + , tu peux te tourner vers du flex box :love:


Message édité par flo850 le 16-04-2015 à 14:38:27

---------------

Reply

Marsh Posté le 16-04-2015 à 14:44:19    

Oui j'ai bien essayé vertical-align:middle; et ca ne fonctionne pas.
Pour : position: relative;
  top: 50%;
Ca fonctionne pas non plus...


---------------
|i9 13900K | MSI Z690 Tomahawk WIFI DDR4 | 4*16Go G.SKILL Trident Z Neo 3600Mhz C16 | EVGA 3090Ti FTW3 Ultra | DeepCool LT720 | NZXT H7 FLOW|
Reply

Marsh Posté le 16-04-2015 à 14:45:47    

Tu as fait le translateY aussi  ?


---------------

Reply

Marsh Posté le 16-04-2015 à 15:54:28    

euh non?


---------------
|i9 13900K | MSI Z690 Tomahawk WIFI DDR4 | 4*16Go G.SKILL Trident Z Neo 3600Mhz C16 | EVGA 3090Ti FTW3 Ultra | DeepCool LT720 | NZXT H7 FLOW|
Reply

Marsh Posté le 16-04-2015 à 19:40:16    

Je pense que ce lien peut t'aider :  
http://openclassrooms.com/courses/centrer-en-css

Reply

Marsh Posté le 16-04-2015 à 23:09:11    


Ben je t'ai poste un lien qui marche juste au dessus


---------------

Reply

Marsh Posté le 17-04-2015 à 15:09:03    

J'viens d'essayer, ca fonctionne pas chez moi


---------------
|i9 13900K | MSI Z690 Tomahawk WIFI DDR4 | 4*16Go G.SKILL Trident Z Neo 3600Mhz C16 | EVGA 3090Ti FTW3 Ultra | DeepCool LT720 | NZXT H7 FLOW|
Reply

Marsh Posté le 17-04-2015 à 15:18:59    

même quand tu fais un copier/coller à l'identique de tout le code?
Est-ce que tu as essayé de faire uniquement ce code là dans ton fichier css et dans ton fichier html?

Reply

Marsh Posté le 17-04-2015 à 15:18:59   

Reply

Marsh Posté le 17-04-2015 à 15:24:20    

Nope, mais vu la structure HTML que j'ai :/
J'vais avancer sur mon projet, je reviendrais la dessus plus tard.
Merci !


---------------
|i9 13900K | MSI Z690 Tomahawk WIFI DDR4 | 4*16Go G.SKILL Trident Z Neo 3600Mhz C16 | EVGA 3090Ti FTW3 Ultra | DeepCool LT720 | NZXT H7 FLOW|
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed