18041 sujets

Questions générales et questions de débutants

Resize du contenu en fonction du background

Pages :
Bonjour à tous,

Pour mon site, j'aimerais travailler avec une photo en background. Cette photo doit faire 100% de l'écran, chose faite grâce au plugin Fullscreenr. L'image se resize bien par rapport à la taille du navigateur. Pas de MediaQueries car entre 2 résolutions l'image est rognée.

Le problème est le suivant : il me faut mettre du contenu sur cette photo à un endroit précis... mais voila, une fois que l'image se resize, forcément le contenu ne suit pas.

C'est très important, car il s'agit de mon travail de fin d'année...

Quelqu'un aurait-il une solution miracle ?

Merci d'avance.
Bonjour à toutes et à tous,

voici un exemple d'étirement d'une image dans une boite.
Puis sur cette image, deux textes y sont placés !

La boite est dimensionnée (1200 x 300) exprès pour avoir une image déformée.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
		margin					: 0;
		border					: none;
		padding					: 0;
}

body {
		background-color		: grey;
		overflow				: auto;
	}

div#boite {
		position				: relative;
		width					: 1200px;
		height					: 300px;
}
	
div#boite img {
		width					: 100%;
		height					: 100%;
}

div#boite p {
		position				: absolute;
		top						: 1em;
		left					: 1em;
		font-size				: 1.5em;
		color					: white;
}

div#boite p+p {
		position				: absolute;
		top						: 3em;
		left					: 1em;
		font-size				: 2em;
		color					: red;
}

</style>
</head>

<body>
	<div id="boite">
		<img src="image.jpg" />
		<p>titre sur l'image étirée</p>
		<p>autre titre ailleurs sur l'image</p>
	</div>
</body>
</html>


Si tu as un problème de compréhension, fait le nous savoir !

@+
Merci beaucoup pour la réponse, mais cela ne convient pas Smiley confus .

J'ai eu le temps de tester le code, pas de soucis de compréhension, mais voila l'image et le texte ne bouge pas, ils ont une taille fixe.

Hors mon problème c'est d'arriver à redimensionner le background en fonction de la taille du navigateur et qu'en même temps le contenu (texte, liens,...) suive l'image...

Je pourrais le faire avec des mediaqueries mais je n'aime pas ça car entre 2 résolutions l'image est rognée... Et si je le fais avec un plugin resize, alors le contenu ne reste pas au même endroit sur le background...

Une autre idée ?
Bonjour, si tu vas voir le demo de fullscreenr et que tu regardes le code source html et css, tu trouveras comment faire.

Si ça ne fonctionne pas et que tu veux que l'on t'aide, montre nous un bout de code que tu as essayé. De cette façon, on aura pas l'impression de faire ton travail à ta place...
Bonjour,

Ton travail est-il de faire un site web ou de faire un truc extensible.

1ère solution: oublie ton idée, tu cours dans le mur avec un site totalement inaccessible : car comment t'assurer qu'il sera lisible sur les écrans de tes visiteur. Laisse ton site scroller.

2ème solution : utilise Flash.
@Mabelle : Merci de ta réponse! Mais ce n'est pas le fullscreenr qui pose problème. Seulement sur l'exemple qu'on peut trouver sur le net, on voit bien que la <div> qu'ils ont mis au-dessus de la photo ne reste pas au même endroit : http://nanotux.com/plugins/fullscreenr/index.html. C'est à dire qu'une fois la bande noire est au-dessus du véhicule, et quand on diminue la taille du navigateur la bande noire passe sur la voiture. Hors ce que je voudrais c'est que la bande noire reste au-dessus à sa place initiale... qu'en gros la police suive le rétrécissement.

Je veux bien montrer mon code mais comme tu l'as dis le but n'est pas de faire le travail à ma place, j'attends juste un lien vers lequel me tourner. Smiley smile


@Laurie-Anne: Merci également pour ta réponse! Mon travail est de faire un site web. Je ne comprend pas le soucis d'accessibilité Smiley confus ? Justement mon but est d'adapter le site pour toutes résolutions (peut-être pas jusqu'au Smartphone mais bon...) Si je laisse mon site scroller ça veut dire que l'image sera coupée (Mais chaque pixels de ma photo est important)... et pour t'as 2e solution, Flash est une très bonne idée, seulement je dois intégrer d'office du html/css donc je me retrouverais avec le même problème et pour tout te dire j'en touche pas une en action script Smiley rolleyes


Si le code peut vraiment vous aider, faites moi signe! Merci à vous.
Modifié par 90max (18 Jun 2011 - 10:56)
Ou alors (parce que plus je me casse la tête plus ça me parait impossible) existerait-il un moyen de resizer une div entière plutôt qu'un background ?

C'est +- la même chose en fait... mais formulé de cette manière c'est peut-être plus clair ^^
Bonjour à toutes et à tous,

j'ai un problème de compréhension de ce que tu veux faire !

D'abord tu veux une image qui prend toute la largeur et toute la hauteur de ta fenêtre. Est-ce bien cela ?

Je suppose que par redimensionnement, tu entends une manipulation faite par l'utilisateur et non la taille réelle de la fenêtre qui est propre à chaque navigateur ! Est-ce bien cela ?

Car si l'image n'a pas exactement les même proportions que ta fenêtre, lors du redimensionnement de celle-ci, l'image sera déformée, c'est à dire étirée soit en hauteur soir en largeur ? Est-ce que cela correspond à ton désire ?

Ensuite, je n'ai pas bien compris ce que tu entends par texte ? S'agit-il d'un titre à placer à un endroit bien précis sur l'image ou est-ce un texte volumineux concernant une quelconque explication qui vient donc cacher l'image ?

Et puis, je n'ai pas compris ce qui avait de l'importance pour toi ! Est-ce l'image qui est importante ou le texte ?

Car s'il s'agit d'un titre, une solution consisterait à placer le texte hors de l'image ?

Tu voudrais que le texte placé sur l'image à un endroit bien précis, par exemple dans le beau ciel bleu de ton exemple, reste à cet endroit là, même si l'image est totalement rétrécie en hauteur. Mais là, nous ne sommes pas en mesure de toujours placer le texte dans un endroit précis de l'image surtout si celle-ci se déforme.

Une solution préconiser par Laurie-Anne est de faire un scrolling du texte avec une image prenant la largeur et la hauteur de la fenêtre. L'utilisateur pourra visualiser l'image à un instant donnée puis ensuite lire le texte à sa convenance !

Une autre solution consistera via un bouton, de visualiser l'image sans le texte, au format désiré selon la convenance de l'utilisateur.

Personnellement, j'ai l'impression que tu te compliques l'existence sur des choix qui n'ont pas lieu d'être. Pose toi la question de ce qui est important ou pas ?

Rien ne t'empêche de mettre cette image en arrière plan avec un texte par dessus et de laisser le choix à l'utilisateur s'il veut visualiser l'image dans sa totalité sans le texte. Ça serait comment même plus simple à faire.

@+
Déja, merci pour la réponse et l’intérêt porté à mon problème !

Je vous montre un exemple (chose que j'aurais du faire depuis le début) : http://dl.dropbox.com/u/5393111/Portfolio.jpg

Voici une version non-finie d'une des pages de mon portfolio. Sur cette image, les cadres à gauche sont des bouton qui permettront d'afficher les travaux en grand...

L'image est donc importante, les cadres sont importants, mais l'image ne fonctionne pas indépendemment des cadres...

Et donc ce que j'expliquais, c'est que quand je rétrécis ma fenêtre de navigateur, les cadres vont se décaler par rapport à l'image... Smiley confus
Re-bonjour,

ça y est, je crois avoir compris ce que tu voulais faire !?!?

Donc dans l'image qui servira d'arrière plan, il y a des tableaux ou des portraits qui servirons de liens vers une autre page et tu aimerais que la zone qui vient se mettre sur ce tableau soit toujours en concordance (ou en superposition).

Si j'ai bien compris le problème, tu désires faire un MAP ! C'est à dire définir une zone cliquable sur ton image en arrière-plan.

Je ne sais pas si j'ai été assez clair ? Est-ce bien cela que tu désires faire ?

@+
90max a écrit :
Seulement sur l'exemple qu'on peut trouver sur le net, on voit bien que la <div> qu'ils ont mis au-dessus de la photo ne reste pas au même endroit : http://nanotux.com/plugins/fullscreenr/index.html. C'est à dire qu'une fois la bande noire est au-dessus du véhicule, et quand on diminue la taille du navigateur la bande noire passe sur la voiture. Hors ce que je voudrais c'est que la bande noire reste au-dessus à sa place initiale... qu'en gros la police suive le rétrécissement.

Euh, en fait le texte reste toujours au même endroit par rapport à la fenêtre du navigateur.

Pour ton exemple, c'est vrai que tes cadres vont se retrouver sur ton image à un endroit différent. Ce ne sont pas les cadres qui bougent mais ton image qui se redimensionne.

Ceci étant dit, si tu mets le tout dans une div entière qui se redimensionne, tes cadres aussi vont changer de dimensions...

Je comprends ce que tu cherches à faire mais il te faudra trouver une solution où ton layout aura une dégradation gracieuse... à moins que je me plante et que finalement je ne comprenne rien à ce que tu veux faire.
Oui ce n'est pas toujours facile de s'exprimer par écrit.

Voila, chaque tableau ouvrira par exemple une lightbox. Donc y'a la zone cliquable, mais également (mais ça tant pis si ça ne va pas) un état hover sur le tableau...
Re-bonjour 90max,

90max a écrit :
Oui ce n'est pas toujours facile de s'exprimer par écrit.
Oui, nous en sommes tous là !

Comme tu ne m'as pas répondu sur mes questions, j'ai un peu travaillé sur la map. Voici un exemple avec ton image.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
* {
		margin				: 0;
		border				: none;
		padding				: 0;
	}
</style>
</head>

<body>
<img src="Portfolio.jpg" usemap="#meszones" />

<map name="meszones">
	<area shape="rect" coords="123,55,378,320" href="#1" alt="ca ne marche pas" title="zone 1" />
	<area shape="rect" coords="423,50,550,150" href="#2" alt="ca ne marche pas" title="zone 2" />
</map>
</body>
</html>

Je constate que si tu étires l'images à la largeur et la hauteur de ton écran, les zones cliquables ne sont plus en phases avec les dessins.

J'ai l'impression que tu ne peux pas résoudre ton problème d'alignement avec une image redimensionnée.

Conclusion : pourquoi redimensionnée l'image ?

Personnellement, même si elle déborde de l'écran, cela ne me dérange pas du tout. Ou alors fait une image exactement à la taille de l'écran.

@+
Modifié par Artemus24 (18 Jun 2011 - 14:40)
Et bien justement je venais de tester le map et j'en venais à la même conclusion : les coordonnées changent forcément.


Je voulais redimensionner mon image pour être sur qu'à toutes résolutions l'image sera en 100% du navigateur... si je lui donne une taille fixe, elle sera en 100% sur mon écran mais pas pour la personne qui n'aura pas la mm résolution.... Je crois qu'il ne me reste que la solution MediaQueries et tant pis Smiley decu

Merci en tout cas pour vos réponses !!!
@Mabelle : Oui les cadres aussi changeront de taille, c'est ça que je recherche...
Modifié par 90max (18 Jun 2011 - 15:04)
Bonjour,

Pour que tes liens suivent les proportions de l'image et se positionnent a peu prés au bon endroit il te faudrait les positionné en absolu avec les coordonnées exprimées en pourcentage ...

L'image map en taille fixe et raisonnable semble être le plus fiable à mon sens.

Cordialement
J'ai exprimé pour mes liens une position: absolute; et j'ai exprimé les distances en % mais rien n'y fait, ils ne suivent pas l'image.

Pour l'image map j'imagine qu'il n'y a pas moyen d'exprimer de position (absolute) ni de mettre des "%" derrière les coordonnées ? Smiley sweatdrop
bonsoir,

peut-etre n'ai je pas compris ton probléme, ou que certaine notion du positionement t'echappe encore.

un exemple:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test : positions liens sur image </title>
<style type='text/css'>
html, body, div , img {margin:0;padding:0;height:100%;width:100%;}
div {position:relative;}
a , img {position:absolute;color:white;top:0;left;0;/* il n'est pas necessaire de mettre l'image en position absolute , il faut alors modifier son vertical-align */}
a {border:1px solid;z-index:1;background:rgba(250,250,250,0.2)}
#batte {width:20%;top:20%;left:5%;height:12%;min-height:1.2em;}
#joueur {height:95%;top:4%;left:25%;width:15%}
#balle {top:48%;left:78.5%;height:6%;min-height:1.2em;width:4%}
</style><script type='text/javascript'></script></head><body><div>
<a href='#' id="batte">batte</a>
<a href='#' id="joueur">joueur</a>
<a href='#' id="balle">balle</a>
<img src="http://lorempixum.com/600/300/sports/1/" />
</div>
</body>
</html>


ce n'est pas trés esthetique , mais les liens se deplacent sans se deplacer Smiley smile

Cordialement
Merci beaucoup, je pense que tu as réglé mon problème ! Je vais tester ça en exemple pour voir comment cela se comporte mais ça m'a l'air d'être la meilleure piste jusqu'a présent ! Encore un tout grand merci ++
Pages :
Sujet clos
Aller à