Ajouter une image qui s'adapte à la résolution de l'écran.

Salut à tous !

Après des recherches sur Google qui ne m'ont pas aidé, je demande de l'aide ici :

Est-ce que quelqu'un qui s'y connaît en html (ou autre je sais pas^^) saurait comment ajouter à un site une image qui s'adapte à la résolution de l'écran ?

Voici mon forum : http://breizhdefenders-ca.vraiforum.com/index.php
Je l'ai optimisé pour ma résolution (1600x900), seulement avec une résolution différente (inférieure en particulier) le rendu n'est pas le même et la page devient trop large pour être entièrement affichée (sans scrolling horizontal). En images :

Rendu en 1600x900 : http://img78.xooimage.com/files/7/4/1/fofo-1600x900-3598315.png (les flèches ajoutées bleu et rouge c'est juste pour montrer grosso modo les espacements que je veux)

Rendu en 800x600 : http://img82.xooimage.com/files/a/d/b/fofo-800x600-3598496.png (2 screenshots)

L'image du haut (avec les drapeaux) reste fixe et donc elle dépasse de l'écran et un ascenseur horizontal apparait, ce que je veux virer en permettant à l'image de s'adapter aux différentes résolutions, tout enconservant les autres dimensions dont les marges actuelles (flèches rouges et bleues sur le 1er screen)

Merci d'avance !

Aucune idée.

Utilise des medias queries en CSS3, je pense que ça devrait marcher ^^
Je te laisse te documenter à ce sujet !

Volta a écrit:Utilise des medias queries en CSS3, je pense que ça devrait marcher ^^
Je te laisse te documenter à ce sujet !

C'est sur un forum xooit, donc il n'y a pas de CSS sauf erreur de ma part, ou bien on ne peut pas y toucher. Je pensais que c'étais possible avec un code html ?

Je sais pas comment marche un forum par contre, désolé ;(
En HTML, je ne pense pas qu'on puisse modifier les dimensions d'une image...
Tu en sur que tu ne peux pas insérer de <.style.> dans le code HTML ?

Jtaide kan jrentre dmon week

Volta a écrit:Je sais pas comment marche un forum par contre, désolé ;(
En HTML, je ne pense pas qu'on puisse modifier les dimensions d'une image...
Tu en sur que tu ne peux pas insérer de <.style.> dans le code HTML ?

J'y connais presque rien en html tout ça, j'ai juste eu 8h de cous là dessus avec un merveilleux logiciel qui s'appelle Nvu et qui nous a pas appris grand chose
[HORS SUJET OFF]

Pat' a écrit:Jtaide kan jrentre dmon week

Merci !
Toi ça devrait pas te poser problème

Je pense que si je savais comment marcherais le forum je pourrai t'aider...

Comment t'arrive à modifier le code HTML du forum ?

C pour sa que jtai dit kje t aidrai G Bsoin dsavoir tt sur ton forum et met moi ton Code ke ta codé avec l icone a coté de quote jrentre dans 1h

Volta a écrit:Je pense que si je savais comment marcherais le forum je pourrai t'aider...

Comment t'arrive à modifier le code HTML du forum ?

C'est sous forme de "templates" que l'on peut modifier, j'en sais pas plus le peu de motifs que j'ai fait c'est des tutos Google appliqués ^^

Pat' a écrit:C pour sa que jtai dit kje t aidrai G Bsoin dsavoir tt sur ton forum et met moi ton Code ke ta codé avec l icone a coté de quote jrentre dans 1h

Je te MP =D

ok jsuis rentré jme met au taff.

g bsoin de te parlé en direct mais t pas la ^^ va sur la chat box

Quand tu auras terminé, tu me diras comment tu as fait SVP ? Ca m’intéresse ^^

si il revient oui ^^
g bsoin de la partie admin il y a 2 template a changer

Code:

<table align="center" border="0" cellpadding="10"
 cellspacing="0" width="100%">

modification de la taille du forum selon la résolution 100%

Code:

<td align="center" valign="middle"
 width="100%"><a href="%7BU_INDEX%7D"><img
 style="border: 0px solid ;width: 100%; height: 100%;" src="http://img9.xooimage.com/files/9/d/4/nouveau-fond2-337e3dd.png"
 alt="{L_INDEX}" vspace="1"></a></td>
          </tr>

largeur de l image 100%

optimisation de la cellule du tableau acceuillant l image de l index hauteur 100% et largeur 100%

a essayer.

petit plus coder ceci a la fin du template permet d afficher une iframe transparente qui permet de faire apparaitre les menu déroulant et transformer les fonds de pubs en transparent .

code:

Code:

<iframe name="google_ads_frame" style="z-index:20;" src="" width="0" height="0" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

topic un peu + détaillé
J'espère que mon PB est plus clair maintenant

T'es démodé avec tes vielles iFrame :-D
L'HTML5 c'est la life <3

Le forum en en 4.01 ?

l iframe n est pas démodé seulement une astuce bebête très utile. et forum est en 4.01