Design Extensible avec image de fond

Bonjour,

J'ai besoin de réaliser un site en design extensible et comme on le sait, ce n'est pas aussi simple que le design fixe bien entendu.
J'ai fait pas mal de recherches et j'ai trouvé plusieurs pistes qui tournent toutes autour de la même chose avec les histoires de html et body avec des marges à 0, des pourcentages etc etc...Seulement après avoir visualisé l'ensemble de ces solutions, aucune ne m'est très claire et même si tout tourne autour de la même chose, selon les exemples, ce n'est pas tout à fait pareil alors je m'y perds un peu...

Je sais que ce n'est pas conseillé mais j'ai besoin pour créer mon site d'avoir une image en fond et pour le moment, rien devant à part un menu/bouton "entrer". En fait, cela serait une page d'accueil avant d'entrer sur le site qui présenterait l'ensemble en prenant toute la taille de l'écran.
Seulement voilà, bien évidemment, j'ai aussi besoin de l'adapter selon la résolution des visiteurs. Sur cela aussi j'ai fait des recherches sur plusieurs sites connus ou pas comme celui-ci qui me donne une astuce utile mais pas suffisamment convaincante malgré tout...
<lien url="http://gcyrillus.free.fr/dkg/trucs_css/fond_extensible.html"></lien>

Alors voilà ma question, que me conseillez-vous comme code à rentrer exactement pour réaliser tout cela ?
Merci.

Bien alors, j'ai effectué de nouveau quelques tests en me basant sur le code source de cette page:
http://www.cssplay.co.uk/layouts/background.html

J'ai changé l'image de fond mais voilà que je rencontre quelques problèmes. Si sur le site ci dessus l'image de fond du lapin semblent correctement proportionné, celle que je rajoute, peu importe sa définition que je calibre dans photoshop, elle se retrouve toujours compressée par le navigateur. Alors là déjà je comprends pas car comme je disais, le lapin lui semble correctement proportionné et non-compressé...
J'ai remarqué toutefois qu'en fait, mon image n'était pas si compressée que ca en réalité. Effectivement, elle l'est selon le nombre de barres de menus en haut du navigateur. Moins il y en a, plus l'image s'affiche correctement proportionnée.
Mais bien entendu, je ne veux pas que les menus en haut définissent la répartition de l'image. Je veux que l'image soit déjà correcte peu importe la quantité de barres de menus en haut. Comment faire cela ?

…

Finalement, après nouvel essai entre Firefox et Explorer qui chez moi ont des barres de menus plus ou moins hautes, le lapin est aussi réparti différemment selon.
Je me doute bien donc que c’est une histoire de définition mais comment faire en sorte que l’image de fond soit le plus proche possible proportionnellement à son origine ? Car peu importe comment l’on change sa définition dans Photoshop, c’est toujours pareil. Je me doute bien là aussi que cela vient sans doute des body et html à 100% et que répartir l’image proportionnellement dans le navigateur n’est pas possible entièrement surtout si elle n’a pas une définition égale à celle du navigateur du genre un 1280x1024 alors que le navigateur serait en 1280x768 par exemple. Il y aurait obligatoirement des parties de l’image rognées.
Mon image est en 1280x960 et mon écran en 1280x1024. Alors voilà pourquoi en 100% en CSS, ca s’étire…Mais ca s’étire si en plus il ya des barres de menus en haut, et si j’en enlève, ca devient de plus en plus proportionné. Mais on ne peut pas non plus enlever tous les menus !!!
Alors comment faire pour que l’image soit le plus proportionné possible, peu importe le nombre de menus ?

Même si je suis peut-être largué sur certains points, ce n’est pas en restant tout seul dans mon coin que je vais résoudre ca. Alors répondez-moi SVP. Je ne demande qu’à apprendre et comprendre, et j’ai fait des recherches sur des problèmes similaires mais là, j’ai besoin d’une aide sur un problème spécifique à mon cas.
Je n’ai pas de code à fournir à part ceux des exemples des sites que je cite sur lesquels je me base dans un premier temps afin de régler et comprendre les notions de définition. Voilà pourquoi comme je le disais dans mon premier message, que me conseillez-vous comme code précis à entrer dans mon cas, soit une image de fond correctement proportionnée ou qui s’en approche le plus et adaptée pour chez tous le monde, pour un design extensible ?

Merci.
Modifié par nicky14 (14 Mar 2011 - 13:04)

bonjour,

(oups pour la vielle page de 2005 pas convaincante), il y a aussi la page yidille.free.fr .

ça demontre surtout que c'est moche et que ça pixellise , bref le truc a ne pas faire .

D'autre s'appuieront sur des javascripts ou CSS3 avec : background-size: http://www.w3.org/TR/css3-background/#the-background-size avec les valeur contain ou cover (et les autres pourquoi pas) .
voir aussi : http://www.quirksmode.org/css/background.html#t012

bonne continuation

Merci bien pour les liens d'aides. Oui, j'avais déjà vu aussi la page sur le site yidille.free.fr.

Je continue mes essais, et après quelques modifications sur des codes adaptés à ce que je souhaite réaliser pour mes tests, voilà ce que j'obtiens...

<style type="text/css">
html, body {margin:0; padding:0; width:100%;height:100%;}
body {font-family:verdana, arial, sans-serif;background-color:#000000;}
#background{position:absolute; z-index:1;width:1263px;height:960px;}
</style>

</head>

<body>
	<div>
		<img id="background" src="Photo0748-1.jpg" alt="" title="" /> </div>
	</div>
</body>

</html>

J'ai peut-être laissé des codes qui ne concernent pas mon image sur ce modèle.
Toujours est-il donc que j'obtiens comme résultat mon image sur le fond élargit correctement
sur la largeur mais pas la hauteur. De toute manière, en fonction de la définition de l'image et du navigateur, je pense que ce n'est pas possible d'afficher une image entièrement et proportionnée sur la largeur et la hauteur. Voilà pourquoi des barres de défilement apparaissent dans tous les cas.
A ce propos justement, on parle de définition d'écran, mais y-en a t-il pas aussi une pour le navigateur ? Car mon image est en 1280x960, mon écran en 1280x1024 mais sur le navigateur, pour ne pas entrainer l'affichage de barres de défilement, il faut une définition de 1263x797 environ. Et cela lié à la hauteur des menus en haut du navigateur.
En fait la définition écran, quand on se base dessus pour créer un site, est-ce vraiment bon ? Car le vrai rendu reste celui dans le navigateur, qui ne recouvre pas la taille exacte de l'écran de part ses menus en haut et la barre de tâches en bas.

En testant mon code comme cela donc, j'ai une barre de défilement pour la hauteur et si je change la résolution de l'écran en 800x600, le site ne s'adapte pas et il faut naviguer avec les barres de défilement...Bon pour ca, je n'ai pas encore tout testé mais si mon code est satisfaisant, c'est ce que je cherche à faire à présent...

Je précise aussi que mon image de fond réelle, et non pas celle de test que j'utilise en ce moment, sera vectorielle...

Je débute plus ou moins sur la programmation de site. Je sais que le design extensible n'est pas conseillé aux débutants mais j'aimerais faire ca alors voilà...
Voilà le genre de site que je souhaiterais approcher : http://gregoryronot-creations.com/mon-travail-en-un-coup-doeil/ mais avec une page d'intro avec image de fond et bouton "entrer", comme je le disais avant d'entrer sur le site présenté ainsi.
Vos conseils pour mes erreurs, voire ma bêtise (!) seraient précieux. Merci.

Un conseil : pour fixer la taille de ton site, sache que si tu veux que ton site s'affiche bien chez la majorité des gens, il ne doit pas dépasser 1024 de largeur (auquel il faut retirer qques pixels pour les barres de défilemeent etc.)

Pour la hauteur, la seule chose qui est limitée est la partie "présentation", la chose que tu veux que tout le monde voie bien en entier en ouvrant ta page.

Pour info la partie visible dans un navigateur sur un pc de résolution 1024x768 avoisine les 700px voir ptet moins.

Il reste vraiment peu de gens en 800x600, je ne pense pas que ce soit la peine de se limiter a cette résolution.

Personnellement, je fixe la largeur du contenu de mes sites à 960 pixels.
La hauteur, elle s'adapte au contenu. Le gens ont l'habitude de scroller.
Modifié par Tetranima (15 Mar 2011 - 14:46)

Merci pour tes conseils, je testerais. En attendant, j'avance et j'arrive à un résultat intéressant en me basant toujours sur les codes des sites ou conseillés...

<body>

<div class="arriere"><img alt="" src="Photo0748-1.jpg" /></div>

</body>
</html>

html, body {
margin:0;
padding:0;
height: 100%;
width: 100%;
max-width:1600px;
min-width:640px;
}

#arriere {
position: absolute;
}

.arriere img {
width : 100%;
}

Avec cela, j'ai bien mon image de fond sur toute la largeur et répartie proportionnellement avec la hauteur automatique.
L'image d'origine est en 1280x960. Si je réduis ma définition à 800x600, l'image est bien redimensionnée et entière autant sous Firefox que Explorer.
Ca serait bon là ?
Modifié par nicky14 (15 Mar 2011 - 17:31)

Bien alors, en l'état actuelle des choses, comme je l'ai précisé, j'arrive à obtenir une image sur le fond intégral et qui s'adapte à d'autres définitions écran correctement sans trop de déformation.

Cela dit, ce que je cherche à réaliser actuellement, c'est un bouton "entrer" situé sur une zone bien précise de l'image de fond. Ce bouton sera en fait une petite image comprenant un lien qui amènera ensuite sur le site en lui-même. Sur ma définition normale, j'ai réussi à placer parfaitement cette image/bouton/lien (appelez-y comme vous voulez), mais le problème se pose pour l'adapter et le conserver à la même place en fonction des différentes définitions.
J'ai fait plusieurs essais sans succès et continue à chercher. Ici, contrairement à l'image de fond, je n'ai pas à signaler un étirement sur 100% et ce sont ces nouvelles données à rentrer qui me perturbent...
Alors voilà, que me conseillez-vous comme code à rajouter pour réaliser cela ? Merci.

<body>

<div class="arriere"><img alt="fond_site" src="Intro31.png" /></div>
<div class="entrer"><a href="#"><img alt="bouton_entrer" src="entrer.png" /></a></div>
</body>

html, body {
margin:0;
padding:0;
height: 100%;
width: 100%;
max-width:1600px;
min-width:640px;
background:#000000;
}

#arriere {
position: absolute;
}

.arriere img {
width : 100%;
}

.entrer img {
	position: absolute;
	left: 877px;
	top: 338px;
}

a img {
border:0;
}

Modifié par nicky14 (17 Mar 2011 - 20:37)

Hellooooooo !!! Ya t-il un magicien dans la salle ?????

Bien alors j'ai continué mes tests et même si j'ai encore des idées, ca reste assez ardu...

Mon image/bouton, une fois positionnée correctement en 1280x1024 se retrouve réduite correctement en 800x600 et reste sur le même axe verticale mais par contre, elle se décale sur le haut.
J'ai touché à toutes les valeurs possibles de pourcentages en gardant le code ci-dessus sur le ".entrer img" mais rien n'y fait une fois que je change de définition.
Il doit pourtant bien y avoir un moyen de faire cela même si c'est compliqué...Mais que cela soit un code spécifique à rentrer ou une intense réflexion, je commence à douter un peu là...

Il est possible de faire un site extensible adapté pour toutes définitions quand ca concerne une image de fond ou un fond tout court, et aussi quand il comprend des blocs de menus par-ci par-là comme j'ai pu le voir sous différents tutoriels. Cela dit, faire ce que je veux, c'est-à-dire une petite image par dessus une autre image qui est le fond du navigateur, le tout en extensible, c'est pas le même procédé apparemment que pour de simples menus...
A moins que ca ne soit quelque chose à voir avec le type de balise...block ou inline ?...qui permet dans ce cas-là d'y adapter pour ce que je veux pour une image tant qu'elle n'est pas en fond. Je ne sais pas...

Est-ce trop compliqué pour que personne ne veuille se mouiller ?
Merci de m'apporter vos lumières car je cherche, je cherche...mais...
Modifié par nicky14 (18 Mar 2011 - 11:18)