Pony62
{ Membre }
Messages : 39
| Bonsoir ! Je viens soliciter votre aide car je suis confronté à un problème! Forum : forum test Tout en bas, le footer ! Voilà, je souhaite que mon footer s'adapte sous toutes les tailles en hauteur et largeur. J'ai réussis à avoir la largeur, mais pas moyen de trouver en hauteur, si vous avez une idée HTML: - Code:
-
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script> <div class="navigationmagique_princip"> <table width="58.75%" style="margin:auto;" id="navigationmagiquetable"><tr><td width="66.6%" valign="top" colspan="2"><span class="navigationmagique_titre">Full Horse V3</span><br/> Bienvenue <span class="USERNAME"></span> ! Nous sommes ravis de te voir ici, en Alaska , actuellement, il n'y fait pas très chaud, mais rassure toi ,tu peux quand même sortir ta monture. Bon jeu ! </td> <td width="25%" valign="top" rowspan="2"><span class="navigationmagique_titre">Ton compte</span><br/> <div class="navigationmagique">{GENERATED_NAV_BAR}</div></td></tr><tr> <td width="25%" valign="top"><span class="navigationmagique_titre">Liens utiles</span><br/> <a href="http://fullhorsev3.forumotion.com/t9-rules" target="_blank">Réglement</a><br /> <a href="http://fullhorsev3.forumotion.com/t20-bottin-des-avatars" target="_blank">Avatars pris</a><br /> <a href="http://fullhorsev3.forumotion.com/f29-club-house" target="_blank">Club House</a><br /> <a href="#" target="_blank">Livre d'or </a><br /> <a href="http://fullhorsev3.forumotion.com/f57-federation" target="_blank">Fédération</a><br /> <a href="http://fullhorsev3.forumotion.com/t37-resumes-finis" target="_blank">Résumé fini</a><br /> <a href="http://fullhorsev3.forumotion.com/f12-rappels" target="_blank">Rappel</a><br /> <a href="http://fullhorsev3.forumotion.com/t83-aide-au-rp" target="_blank">Aide au RP</a><br /> <a href="http://fullhorsev3.forumotion.com/f21-annonces" target="_blank">Annonces</a> </td> <td width="25%" valign="top"><span class="navigationmagique_titre">Top sites</span><br/> Un clic toutes les deux heures!<br/><div class="navigationmagique_boite"><a href="#" target="_blank">♘</a> <a href="#" target="_blank">♞</a> <a href="#" target="_blank">♘</a></div> </td></tr> </table> </div> CSS : - Code:
-
#navigationmagiquetable td { padding: 10px;
}
.navigationmagique_boite { background-color: #e8e9eb; border-radius:20px; box-shadow: 2px 2px 3px #cdd3de; font-size: 40px; margin-top: 10px; padding-bottom: 5px; text-align: center;
}
.navigationmagique_princip a{ color: #c44c52; text-shadow: 2px 2px 3px white; letter-spacing: 0; transition: 0.5s; /* realise une transition lente avec l effet au survol */ -moz-transition: 0.5s; -htm-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; }
.navigationmagique_princip a:hover{ letter-spacing: 3px; transition: 0.5s; /* realise une transition lente avec l effet au survol */ -moz-transition: 0.5s; -htm-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; color: white; text-shadow: 2px 2px 3px #c44c52; } .navigationmagique img { display: none;}
.navigationmagique_princip{ background-image: url('http://imageshack.com/a/img811/2006/t13v.png'); color: #94a2bc; background-position:top center; background-repeat:no-repeat; background-size: 100% auto; text-align: center; padding-top: 40.1%; text-align: justify; font-size: 14px; padding-bottom: 0; height: 340px; width: 100%; height: 100%; }
.navigationmagique { margin-top:20px; } .navigationmagique a { display: block; margin-top: -20px; color: #c44c52; text-shadow: 2px 2px 3px white; letter-spacing: 0; transition: 0.5s; /* realise une transition lente avec l effet au survol */ -moz-transition: 0.5s; -htm-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; font-size: 14px; }
.navigationmagique a:hover { letter-spacing: 3px; transition: 0.5s; /* realise une transition lente avec l effet au survol */ -moz-transition: 0.5s; -htm-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; color: white; text-shadow: 2px 2px 3px #c44c52; }
.navigationmagique_titre{ font-family: 'Carrois Gothic SC', sans-serif; font-size: 20px; color: #7685a1; text-shadow: 2px 2px 3px #aab1bf; border-bottom: solid 1px white ; } Merci de votre aide =) | | |
|
Nihil
{ Modérateur }
Messages : 1216
| Bonjour Pony62
Il y a beaucoup d'informations sur ton footer, mais comment souhaites tu qu'il soit en responsive ? Que la taille de la police diminue au fur et à mesure, que des éléments se cachent (car il y a beaucoup de contenu), qu'une barre de défilement (scrollbar) apparaisse dans les blocs quand le texte dépasse ? | | |
|
Pony62
{ Membre }
Messages : 39
| Je pensais plus a une diminution du texte pour le coup. (parce que je remarque que sur grosse résolutions parfois c'est pas super super lisible), donc faudrait utiliser le e.m ?
EDIT: Le soucis c'est qu'il y a aussi un padding en haut, comment puis-je faire ? | | |
|