Positionnement image dans pied de page
nov
-
Joretcamarche Messages postés 9 Date d'inscription Statut Membre Dernière intervention -
Joretcamarche Messages postés 9 Date d'inscription Statut Membre Dernière intervention -
bonjour,
voilà,je voudrai avoir un conseil pour insérer une image sur mon pied de page.
En fait mon pied de page est une div avec comme propriété height: 1em;line-height: 1em; car il n'y avait que du texte jusque là mais là je dois rajouter une image à droite du dernier mot,le probleme c'est qu'il m'insere l'image collé au haut du pied de page alors que le texte est centré au milieu de la div,je ne vois pas comment faire.
merci
voilà,je voudrai avoir un conseil pour insérer une image sur mon pied de page.
En fait mon pied de page est une div avec comme propriété height: 1em;line-height: 1em; car il n'y avait que du texte jusque là mais là je dois rajouter une image à droite du dernier mot,le probleme c'est qu'il m'insere l'image collé au haut du pied de page alors que le texte est centré au milieu de la div,je ne vois pas comment faire.
merci
A voir également:
- Positionnement image dans pied de page
- Supprimer une page dans word - Guide
- Calcul km marche à pied gratuit - Télécharger - Sport
- Image iso - Guide
- Imprimer tableau excel sur une page - Guide
- Numéro de page word - Guide
7 réponses
et autre probleme que je n'ai pas précisé ,c'est que l'image agrandit mon pied de page pourtant elle tient en hauteur et en largeur sans que le pied de page est besoin d'etre redimmensionné
dans le html:
<div id="pied"><a class="type1" href="../contact.html">contact</a> - <a class="type1" href="../liens.html">liens</a> - <a class="type1" href="../mentions.html">mentions légales</a> - <a class="type1" href="../plan.html">plan du site</a> - <a class="type1" href="../revue.html">revue de presse </a> - <a class="type1" href="../reportage.html">reportage</a><div align="right" style="display:inline; padding:5px; margin:0 px;"><a href="../reportage.html"><img src="../images/tf1.jpg" height="10" border="0" "></a></div> </div>
dans le css:
#pied
{
clear: left;
height: 1em;
line-height: 1em;
background-color: #2A0899;
text-align: center;
color: #FFFFFF;
}
A.type1:link {
text-decoration: none;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
}
A.type1:visited {
text-decoration: none;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
}
A.type1:hover {
text-decoration: underline;
color: #F6D01F;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
}
en ayant rajouter la ligne de code suivante:
<div align="right" style="display:inline; padding:5px; margin:0 px;"><a href="../reportage.html"><img src="../images/tf1.jpg" height="10" border="0" "></a></div>
j'ai réussi à espacer mon image entre reportage et l'image ,l'image est bien centré au milieu verticalement mais je trouve que la taille de l'image est trop petite mais je ne veux pas agrandir mon pied de page car il tient juste à la hauteur de IE6 mais comme ça n'est pas en pixel,je ne peux pas savoir combien mon pied de page fait en hauteur!et maintenant j'ai IE7...
<div id="pied"><a class="type1" href="../contact.html">contact</a> - <a class="type1" href="../liens.html">liens</a> - <a class="type1" href="../mentions.html">mentions légales</a> - <a class="type1" href="../plan.html">plan du site</a> - <a class="type1" href="../revue.html">revue de presse </a> - <a class="type1" href="../reportage.html">reportage</a><div align="right" style="display:inline; padding:5px; margin:0 px;"><a href="../reportage.html"><img src="../images/tf1.jpg" height="10" border="0" "></a></div> </div>
dans le css:
#pied
{
clear: left;
height: 1em;
line-height: 1em;
background-color: #2A0899;
text-align: center;
color: #FFFFFF;
}
A.type1:link {
text-decoration: none;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
}
A.type1:visited {
text-decoration: none;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
}
A.type1:hover {
text-decoration: underline;
color: #F6D01F;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
}
en ayant rajouter la ligne de code suivante:
<div align="right" style="display:inline; padding:5px; margin:0 px;"><a href="../reportage.html"><img src="../images/tf1.jpg" height="10" border="0" "></a></div>
j'ai réussi à espacer mon image entre reportage et l'image ,l'image est bien centré au milieu verticalement mais je trouve que la taille de l'image est trop petite mais je ne veux pas agrandir mon pied de page car il tient juste à la hauteur de IE6 mais comme ça n'est pas en pixel,je ne peux pas savoir combien mon pied de page fait en hauteur!et maintenant j'ai IE7...
probleme résolu en parti
j'ai rajouté une div en position absolu et je l'ai placé comme ça elle ne dépend pas de mon pied de page par contre ,l'inconvénient c'est que lorsqu'on augmente ou diminue la taille du texte de la page web ben l'image ne bouge pas si bien que le texte est caché par l'image donc ça fonctionne que si on laisse la taille du texte en normal...
si quelqu'un avait une autre solution je suis preneur
j'ai rajouté une div en position absolu et je l'ai placé comme ça elle ne dépend pas de mon pied de page par contre ,l'inconvénient c'est que lorsqu'on augmente ou diminue la taille du texte de la page web ben l'image ne bouge pas si bien que le texte est caché par l'image donc ça fonctionne que si on laisse la taille du texte en normal...
si quelqu'un avait une autre solution je suis preneur
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Essaie peut-être comme ça.
Et oublie pas l'atribut width="" pour ton image.
<div style="float:left;">
<a class="type1" href="../contact.html">contact</a> - <a class="type1" href="../liens.html">liens</a> - <a class="type1" href="../mentions.html">mentions légales</a> - <a class="type1" href="../plan.html">plan du site</a> - <a class="type1" href="../revue.html">revue de presse </a> - <a class="type1" href="../reportage.html">reportage</a>
</div>
<div style="float:left; margin-left: 10px; padding-top: 5px;">
<img src="../images/tf1.jpg" height="10" width="???" border="0"></a>
</div>
Et oublie pas l'atribut width="" pour ton image.
<div style="float:left;">
<a class="type1" href="../contact.html">contact</a> - <a class="type1" href="../liens.html">liens</a> - <a class="type1" href="../mentions.html">mentions légales</a> - <a class="type1" href="../plan.html">plan du site</a> - <a class="type1" href="../revue.html">revue de presse </a> - <a class="type1" href="../reportage.html">reportage</a>
</div>
<div style="float:left; margin-left: 10px; padding-top: 5px;">
<img src="../images/tf1.jpg" height="10" width="???" border="0"></a>
</div>
merci pour ton code.
par contre,il crée un nouveau probleme ,c'est que tout le texte est aligné à gauche du coup...je voudrais qu'il soit centré.
mais je constate qu'en agrandissant le texte il fait presque la meme chose .En fait j'ai remis le padding top à 0px car quand le texte est en taille normal l'image est trop basse si je met 5 px (j'ai réaugmenté la taille de l'image) .Si je mets 0px il est bien aligné par contre quand j'augmente la taille du texte il reste collé en haut du coup...
mais je pense qu'on ne peut pas regler ce probleme puisque la taille de ma div dépend de la taille du texte ,il faudrait que je mette la dimension de ma div en pixel pour que ça fixe le pb car quand j'augmente la taille du texte ,le pied de page s'agrandit...
de toute façon je me suis aperçu que mon site est illisible quand on met la taille 2 fois plus grand dans firefox donc je pense que je vais garder ce que j'ai fait.
merci quand meme!
par contre,il crée un nouveau probleme ,c'est que tout le texte est aligné à gauche du coup...je voudrais qu'il soit centré.
mais je constate qu'en agrandissant le texte il fait presque la meme chose .En fait j'ai remis le padding top à 0px car quand le texte est en taille normal l'image est trop basse si je met 5 px (j'ai réaugmenté la taille de l'image) .Si je mets 0px il est bien aligné par contre quand j'augmente la taille du texte il reste collé en haut du coup...
mais je pense qu'on ne peut pas regler ce probleme puisque la taille de ma div dépend de la taille du texte ,il faudrait que je mette la dimension de ma div en pixel pour que ça fixe le pb car quand j'augmente la taille du texte ,le pied de page s'agrandit...
de toute façon je me suis aperçu que mon site est illisible quand on met la taille 2 fois plus grand dans firefox donc je pense que je vais garder ce que j'ai fait.
merci quand meme!
salut,
si ton image est décorative mets la en arrière-plan, plus de problème de dimension ou de position.
si ton image est décorative mets la en arrière-plan, plus de problème de dimension ou de position.
