remonter image

[symbol]

Re-bonjour

J'ai une image "bandeau" qui se trouve au haut du forum (j'importe cette image dans les preferences du forum). Je n'ai pas le choix de son emplacement.

1) Comme pour l'image de la déco de noel (pour ceux qui ont suivi) puis-je redimensiobber "a la volée" cette image ?

Si ce n'est pas possible, est-il possible de :
2) j'affiche une copie de cette image plus bas dans le forum, puis remonter cette image pour prendre la place de l'image de celle du dessus ? (celle du dessus que j'aurais remplacer par un gif transparent afin de garder la place pour y mettre celle que je remonte).

Merci

 

[Membre supprimé 1129907]

1) oui
2) oui

 

[pouppinou]

Petit détail en passant, utilises des images .png plutôt que du .gif pour de la transparence. Le PNG sera moins limité en couleur et beaucoup moins gourmand en octet pour une utilisation internet.

 

[symbol]

J'ai comparé le png prends un peu de moins place (png 8) que gif. Toujours bon a savoir.

 

[symbol]

Bon, voila le mieux que je peux faire.

- il reste plein de place vide en dessous l'image
- quand je reduit la fenetre l'image deborde sur le bord orange.

pffffffffff

 

[symbol]

Si un Kamikaze du code veut jeter un oeil.

<style>
.redimensionnement {
width: 100%;
height: 100%;
}
</style>


<style>
#logoads
.redimensionnement {
width: 100%;
height: 100%;
position: absolue;
}
</style>


<!-- ##############  NOUVELLE IMAGE REDIMENSIONNE, REMPLACEMENT GRANDE IMAGE BANNIERE   -->
<center>
<div id="logoads" align="center">
<a href="/"><img class="redimensionnement" src="http://kenopronos.free.fr/graph/08a15aCLEAN.png" id="forumLogo" alt=""></a>
</div>
</center>

 

[symbol]

J'ai revu un peu code qui me donne maintenant :

<style>
.redimensionnement {
width: 100%;
height: 100%;
}
</style>



<!-- ##############  NOUVELLE IMAGE REDIMENSIONNE, REMPLACEMENT GRANDE IMAGE BANNIERE   -->
<div id="bandeau">
<a href="/"><img class="redimensionnement" src="http://kenopronos.free.fr/graph/08a15aCLEAN.png" alt="" style="float:left;margin-left:-10px;"></a>
</div>

 

[symbol]

Bon, j'en suis la.

mais 2 decalage a virer

<style>
.redimensionnement {
width: 100%;
height: 100%;
}
</style>

<style>
.barreZone {
width: 102%;
height: 100%;
}
</style>

<!-- ##############  NOUVELLE IMAGE REDIMENSIONNE, REMPLACEMENT GRANDE IMAGE BANNIERE   -->

<div id="bandeau">
<img class="barreZone" src="http://kenopronos.free.fr/graph/08a15aCLEAN.png" alt="" style="float:left;margin-left:-10px;">
</div>

 

[symbol]

ca marchae pas comme prévu. Si reduit (ou affichage sur tel), l'image est trop décalée , y'a une marge qui se créée.

Maintenant ca me fait chier, je crois que je vais arrêter ce truc

 

[Membre supprimé 1129907]

Un margin négatif ?

Via le paramètre position et les top, left ... , tu peux changer la place d'un élément.
https://www.w3schools.com/css/css_positioning.asp

 

[symbol]

J'ai deja essayé, j'y arrive pas. Je connais cette URL.

Et quand on reduit la fenetre du navigateur a mort ou si c'est vu sur un tel, y'a la marge de droite qui apparait.

 

[Membre supprimé 1129907]

Vraiment ? Que donne ceci ?

<style>
.redimensionnement {
width: 100%;
height: 100%;

position: relative;
top: -5em;
}
</style>

La taille du div contenant ton image gène sans doute pour le redimensionnement.

 

[symbol]

ca donne ca :

J'ai essayé en mettant 3em au lieu 5em, du coup ca descends l'image mais il manque 1 pixel pour collé a la bande orange derriere

 

[symbol]

en plus , sur une petite fenetre, c'est pire.

 

[symbol]

je voudrais que ce soit comme ca

 

[Membre supprimé 1129907]

Donc l'image bouge bien comme prévue
Mais pour que ce soit bon quelque soit l'écran, il faut que tu trouves ce qui gène (le div ou autre chose)

 

[symbol]

J'arrete, j'en ai assez, J'y suis depuis ce matin.

 

[symbol]

Bon, on va faire plus simple.

Je souhaite que seulement la banniere (KENO PRONOS) du haut soit redimensionnée a la volée.

actuellement ca ne reste de la meme dimension meme si on reduit la fenetre.

SI je ne me trompe pas , cette image est dans une DIV appelé "logoads"

 

[symbol]

le mieux que j'ai pu faire c'est ca (meme avec une fenetre retrecie, les graphiques restent en place). Reste a retirer les marges trop large

<style>
.redimensionnement {
  width: 100%;
  height: auto;
}
</style>


<!-- ##############  DECO DE NOEL   -->
<div  id="imagebandeau"; align="center">
<img class="redimensionnement" src="http://kenopronos.free.fr/graph/08a15aCLEAN.png" alt=""/>
<img class="redimensionnement" src="http://kenopronos.free.fr/graph/bandeaunoellong2.gif" alt=""/>
</div>

 

[symbol]

Une solution acceptable a été trouvée. Sujet fermée.
Merci aux participants.