[Résolu] Images côtoyant le texte: problèmes de peaufinage

Bonjour,

Je suis en train de faire la nouvelle mouture du site de ma boîte, dont la page d'accueil doit comporter quelques vignettes venant illustrer le texte. Je me suis donc attelé à la tâche, et au bout de quelques heures de sauna mental, j'ai réussi à produire ceci :

http://www.microlinux.fr/nouveau/index.html

Maintenant, je me pose une série de questions quant au peaufinage de la chose. Mais avant de voir plus loin : est-ce qu'il existe un tutorial plus ou moins complet sur cette question ?

Dans l'état actuel des choses, un souci: la dernière liste à puces revient sous l'image à gauche, ce qui est très moche. Et en dehors de ça, je me demande ce qui se passera si quelqu'un avec un écran de 22 ou 24 pouces va visiter ce site.

Des conseils sur la chose ?
Modifié par kikinovak (02 Nov 2009 - 21:01)

kikinovak a écrit :
la dernière liste à puces revient sous l'image à gauche, ce qui est très moche.

La dernière ligne passe sous l'image puisque la liste est plus longue que l'image, un petit padding-bottom plus grand pourrais régler la chose.

kikinovak a écrit :
Et en dehors de ça, je me demande ce qui se passera si quelqu'un avec un écran de 22 ou 24 pouces va visiter ce site.

J'ai un écran de le 20 ou 21 pouce panoramique, du coup ton image placé à droite paraît un peu trop éloigné du texte et semble sortir du contexte.

Je m'interroge sur la façon dont tu as intégré tes images...
J'aurais plutôt mis la balise image directement dans la div du texte avec un float plutôt que de m'encombrer d'une balise paragraphe qui n'en est pas un en réalité...

juliesunset a écrit :

La dernière ligne passe sous l'image puisque la liste est plus longue que l'image, un petit padding-bottom plus grand pourrais régler la chose.


J'ai un écran de le 20 ou 21 pouce panoramique, du coup ton image placé à droite paraît un peu trop éloigné du texte et semble sortir du contexte.

Je m'interroge sur la façon dont tu as intégré tes images...
J'aurais plutôt mis la balise image directement dans la div du texte avec un float plutôt que de m'encombrer d'une balise paragraphe qui n'en est pas un en réalité...

Merci pour ta réponse, mais je crains qu'elle ne soit trop laconique pour mes connaissances relativement fraîches.

Bonjour,

Alors avant de peaufiner ou justement dans ce but :

Il manque un alt="" à tes images et il y a une balise <li> qui n'est pas fermée

<li>Un particulier qui utilise l'ordinateur pour travailler&nbsp;?

Pour la fluidité, en regardant de 1024* à 1680*1050 je trouve que le comportement est correct.

Par contre pourquoi avoir stylé un paragraphe alors que tu pouvais créer une classe pour ton image ?

<div>
<img class="flottant-droite" src="exemple.png" alt="" />
<p>Ton texte </p>
<br class="clear" />
</div>

.clear {clear:both;}
.flottant-droite {float:right; margin:0;}

De même pourquoi utiliser un <hr /> alors que ce que tu sembles vouloir faire c'est un <br /> ?
Modifié par Maki (02 Nov 2009 - 17:44)

kikinovak a écrit :


Merci pour ta réponse, mais je crains qu'elle ne soit trop laconique pour mes connaissances relativement fraîches.

Mais fallait le dire!

Ensuite Maki a quand même bien résumé mon idée.

<div> 
<img class="flottant-droite" src="exemple.png" alt="" /> 
<p>Ton texte </p> 
<br class="clear" /> 
</div>

Je mettrais plutôt ça, pour rester dans l'idée des listes

<div> 
<img class="flottant-droite" src="exemple.png" alt="" /> 
<ul>
   <li>Ton texte</li>
   <li>Ton texte</li>
</ul> 
<br class="clear" /> 
</div>

.clear {clear:both;} 
.flottant-droite {float:right; margin:0;} 

margin:o... hm, pas sûr. Je pense plutôt à un mixte de margin et de padding. Margin = marges externe d'un élément, et padding = marges interne d'un élément (les valeurs du padding s'additionneront aux valeurs de ton élément). On en parle un peu ici

OK, j'ai suivi vos conseils détaillés, et ma foi, on s'approche petit à petit. Mais quelques problèmes subsistent.

(Pour l'oubli des alt="", vous inquiétez pas. Je les ai mis, mais normalement je m'occupe de la conformité XHTML quand j'ai résolu les problèmes plus grossiers de mise en page...)

Sur ma première liste, j'ai ajouté des entrées bidon pour illustrer un effet. Dès qu'elle arrive plus bas que le bas de l'image à gauche, hop, elle se glisse en-dessous. Est-ce qu'il existe un moyen simple et efficace pour éviter ce comportement ?

Pour l'image de gauche, j'ai simplement défini une marge 0 20px 0 0, pour éviter que la liste à puce ne se colle contre elle.

En dehors de cela, je suis cruellement conscient de mon manque de rudiments en matière de graphisme (au niveau esthétique). Je n'ai pas la moindre idée comment placer ces images avec mon texte. Agrandir les images (oui mais quelle dimension idéale)? Agrandir le texte ? Passer d'une série de listes à puces à un "bloc de texte", quitte à tout reformuler?
Modifié par kikinovak (02 Nov 2009 - 18:26)

kikinovak a écrit :
Sur ma première liste, j'ai ajouté des entrées bidon pour illustrer un effet. Dès qu'elle arrive plus bas que le bas de l'image à gauche, hop, elle se glisse en-dessous. Est-ce qu'il existe un moyen simple et efficace pour éviter ce comportement ?

Avec le padding comme je te disais. Dans ta classe "flottant-gauche" ajoute un padding.
Je reprend ton code:

.flottant-gauche {
float:left;
margin:0 20px 0 0;
}

Si tu ajoute quelque chose comme ça, ça devrait se placé comme tu veux:

display: block;
padding : 0 0 30px 0;

le principe du padding est le même que le margin, mais il s'agit ici de marge interne. Raison pour laquelle j'ai mis ta classe en display:block, sinon je crois que le padding n'aurait pas été bien appliqué (je dit peut-être de bêtise aussi, le display block n'est peut-être pas nécessaire, à essayer donc.). Le padding, dans ce cas-ci, agit comme s'il ajoutais 30px en bas de ton image, mais sans la déformer.
Modifié par juliesunset (02 Nov 2009 - 19:08)

Oups! pour répondre à ta dernière question.

Personnellement, je crois que la liste à puce convient bien ici.
Pour ce qui est des images par contre, je les placerais toutes du même côté. Là je suis un peu dérouté par l'image de droite qui semble sortir du contexte de page. La dimension me semble parfaite en ce moment.

Effectivement, c'est mieux.

http://www.microlinux.fr/nouveau/

Je pense qu'une alternance droite/gauche est jolie à voir sur papier, mais sur une page web, c'est le cauchemar à implémenter proprement.

Finalement je n'ai pas mis le padding en bas de l'image, car ça l'aurait trop écartée du titre subséquent.

Même sur papier des fois c'est...

Mais effectivement la c'est beaucoup mieux. Pour le padding, pour l'instant tu ne semble pas en avoir besoin, mais advenant que ça doit arrivé, le padding est à mon avis la meilleur option. Suffit simplement d'ajouter ce dont tu as besoin pour évité le renvoie sous l'image.

Désolé pour l'abandon en cours de route, je vois que tu as trouvé pas mal de réponses à tes questions

Effectivement c'est toujours mieux quand tu as un design extensible de garder tes images à gauche.

Par contre je vois que tu as agrandi la taille de tes images et du coup elles sont un peu floues. C'est un détails, mais ne pourrais tu pas les redimensionner avec The Gimp pour que la résolution native soit celle que tu souhaites ?

Quelques remarques :

Il manque un acronyme à GNU

<acronym title="Gnu's Not Unix " lang="en">GNU</acronym>

Personnellement j'aurais mis un couleur différente pour ton border, celle de ton H1 par exemple, quitte à augmenter sa taille :

#navigation {
background-image:url(images/fond_redhat.png);
border:4px solid #EAF1FB;
}

De même pour tes h3 une petite couleur ferait moins tristounet

h3 {
color:#6A93D4;
font-size:1.2em;
}

Bon attention c'est subjectif ^^

PS : j'ai relu mon premier message et il m'a semblé un brin agressif, c'était pas le but

Pas de souci pour le ton, t'inquiète. En tant qu'admin système, je fréquente beaucoup les forums, et au contraire, j'ai noté le ton professionnel et agréable de celui-ci. (Si tu veux savoir ce que c'est que l'agressivité, jette un oeil sur news:alt.os.linux.slackware ou irc.debian.org#debian...)

Le flou des images s'explique par le simple fait que ce sont des images "bidon" que j'ai prises chez un fournisseur d'images professionnel, mais juste pour tester le site. Ce sont donc des échantillons, que je redimensionne un peu n'importe comment pour tester le positionnement. Évidemment, une fois que je serai fixé sur le choix des images, j'achèterai les "vraies" versions, non floues, et je les redimensionnerai correctement. (Oui, j'utilise GIMP, c'est mon autre outil de développement web, à côté de Vi )

J'ai suivi tes conseils, qui me semblent tous très pertinents. Merci. Jette un oeil pour voir ce que ça donne. D'ailleurs, je me suis posé la question... les h3 en couleurs, j'aime bien. Est-ce qu'il est judicieux de choisir une "couleur" pour le texte principal, je veux dire autre chose que le noir tout noir? Un gris anthracite peut-être, je sais pas trop...

Autrement je ne me suis pas encore trop penché sur le peaufinage du contenu en lui-même (liens, etc...). Je m'en charge justement dans les jours à venir. Mais avant, il faut que je m'occupe du contenu lui-même. J'ai lu le livre de Raphael Goetter sur le CSS et celui de Mathieu Nebra sur le XHTML, et j'en profite maintenant pour reprendre mon ancien site (http://www.microlinux.fr) et pour faire la nouvelle mouture (http://www.microlinux.fr/nouveau en attendant) en prenant soin de faire du code bien propre.

Ha oui j'avais pas fait gaffe aux filigranes sur les images ^^

Oublies pas de modifier le border de #contenu au passage.

Pour les couleurs il faut penser à nos amis daltoniens et donc éviter les gris trop clairs, pour mon site j'ai utilisé la couleur #292929, c'est légèrement plus doux que le noir. Bon après la différence est pas flagrante non plus...

Pour ton contenu, les éditions Eyrolles viennent de sortir un livre "Bien rédiger pour le Web et améliorer son référencement", je l'ai et c'est honnêtement bien écrit (vu le thème c'est mieux), clair et très utile.

Bonne chance pour la suite

Voili voilu. Jette un oeil, j'ai pris en compte tes suggestions.

Je suis moi-même auteur chez Eyrolles, et mon éditrice a la gentillesse de me tenir au courant quand ils sortent un bouquin qui peut m'intéresser. Et donc le livre d'Isabelle Canivet est une de mes lectures de chevet depuis quelque temps. Oui, il est excellent.

Tu verras d'ailleurs que la refonte de mon site tient compte de certaines de ses recommandations. Pas toutes encore, mais bon, Saint-Bauzille-de-Montmel n'a pas été construit en un jour.

Il y a quelques années, j'avais lu "Web Site Usability" de Jakob Nielsen, qui me semblait très bien aussi.

Ça semble en bonne voie, maintenant comme tu le dis il va falloir le remplir

Bon courage