28241 sujets

CSS et mise en forme, CSS3

Design controversé

Bonjour,

Je viens vers vous afin de vous poser une petite question.

J'ai accepté de faire un site pour une amie qui vient de monter sa boîte de fleuriste. Le problème est qu'elle voudrait une page d'accueil contenant la photo interactive de la devanture de sa fleuristerie.

Le problème est que j'aimerais que tous les utilisateurs puisse la voir.

Je vous montre le rendu (http://archivesda.free.fr/instantbucolique/), connaitriez-vous un moyen d'avoir un bon affichage sur toutes les résolutions ?

Merci ! Smiley lol
Bonjour,

Le compromis actuel (largeur fixe, compatible 1024 et au dessus) me semble correct. En sachant que c'est un compromis et pas un affichage correct sur «toutes» les résolutions car il reste quelques utilisateurs en 800x600, des utilisateurs d'iPhone et autres Blackberry, etc.

Par contre, dommage de n'avoir ni texte, ni menu de navigation sur ce site.
Modifié par Florent V. (07 Jan 2009 - 14:55)
Haaaaaa!!! les liens cachés ou l'utilisateur doit s'amuser à parcourir tous l'étendue de l'image pour trouver les informations (contact, diaporama, présentation).

Très utile pour être sur de perdre des visiteurs et donc des clients potentiels.
Je sais bien (ceci concerne les deux remarques) Smiley decu Malheureusement mon amie ne veut pas en démordre...
J'ai fait le maximum possible pour réduire l'image afin de faire rentrer le site dans un 1024, et elle voudrait que j'agrandisse encore, mais je vais dire non...

Soit dit en passant, la page que je vous ai montré n'est que la page d'accueil, le site en lui même sera plus conventionnel (menu sur la gauche ou en haut en fixed) avec du contenu farpaitement lisible.

Enfin pour ce qui est de ce que j'ai fait en tenant compte de ses demandes, c'est bien le moins pire ?
Je peux pas faire d'image qui suivent la résolution en en gardant le visuel actuel ? (j'ai bloqué parce que le background ne peut pas s'étirer, et que les imagemap n'ont pas de % et ne peuvent pas avoir de hover)
Modifié par Aerandir (07 Jan 2009 - 21:28)
En JavaScript tu pourrais récupérer les dimensions de la page et l'appliquer à l'image. Le rendu ne sera pas merveilleux, mais enfin au moins elle aura ce qu'elle veut.

A placer dans le code html :
<body onload="resizeImg('idImage');">
	<p>
	<img src="image.jpg" alt="image indisponible" id="idImage" />
	</p>
</body>


A placer dans une page JavaScript :
var resizeImg = function(id) {
	var body = document.getElementsByTagName('body');
	var element = document.getElementById(id);
	element.style.width = body[0].offsetWidth + 'px';
	element.style.height = body[0].offsetHeight + 'px';
}


N'oublies pas d'enlever toutes les marges automatiques pour que ça fonctionne hein Smiley cligne . Normalement une image ajoute un petit saut de ligne gênant, si tu as une barre de défilement n'hésites pas à enlever quelques pixels à l'image comme cela :

element.style.height = body[0].offsetHeight [b]- 5[/b] + 'px';


Ensuite, si tu veux que la largeur s'ajuste à la page, mais que la hauteur reste proportionnelle, enlève cette-ligne :
element.style.height = body[0].offsetHeight + 'px';

L'image sera automatiquement proportionnée.
Modifié par Noix de Coco (07 Jan 2009 - 22:59)
Sujet clos
Aller à