[Résolu] Espacement entre 2 images

[EmmaZL]

Bonjour !

Pourquoi y a-t-il une différence d'affichage dans mon navigateur avec ce code :

Code : Tout sélectionner

<div id="header">
	  	<img class="imghead1" src="images/logo2.jpg" alt="" />
		<img class="imghead2" src="images/header.jpg" alt="" />
		<img src="images/nom_site.jpg" alt="" />
		<img src="images/header2.jpg" alt="" />
</div>

et ce code :

Code : Tout sélectionner

<div id="header">
	  	<img class="imghead1" src="images/logo2.jpg" alt="" />
		<img class="imghead2" src="images/header.jpg" alt="" />
		<img src="images/nom_site.jpg" alt="" /><img src="images/header2.jpg" alt="" />
</div>

La seule différence au niveau du code, c'est un retour à la ligne entre la baslise img de la 3ème image (nom_site.jpg) et la balise de la 4ème image (header2.jpg).

La différence au niveau de l'affichage, c'est qu'il y a un espace entre les 2 images quand il y a un retour à la ligne dans le code et qu'il n'y a pas d'espace entre les 2 images si les img se suivent dans le code (sans retour à la ligne).

Je croyais qu'un retour à la ligne dans le code n'influençait pas l'affichage.



En espérant que mes explications soient claires.

Merci de votre aide.

PS : merci à SIBELIUS pour ses modèles.

[calimo]

Un retour à la ligne n'influence pas l'affichage. Mais un espace si !
Un retour à la ligne se comporte simplement comme un espace. Essaye avec le code

Code : Tout sélectionner

<div id="header">
        <img class="imghead1" src="images/logo2.jpg" alt="" />
      <img class="imghead2" src="images/header.jpg" alt="" />
      <img src="images/nom_site.jpg" alt="" /> <img src="images/header2.jpg" alt="" />
</div>

(remarque l'espace sur la ligne avec les deux images)

Il faut voir tes images simplement comme des caractères (du texte quoi !). Si tu n'a pas d'espace lesmotssontcollés (lire : les mots sont collés). Eh ben les images c'est pareil, s'il n'y a pas d'espaces elles sont collées, et s'il y en a un il s'affiche.

En revanche un espace ou un retour à la ligne ça ne change rien

[EmmaZL]

Mais quand j'indente mon code (c'est comme ça qu'on dit ?) pour le mettre plus à droite, je mets des espaces et le navigateur ne les prend pas en compte. ???

[calimo]

Non, que tu ait un, 2, 25 ou 100 espaces c'est pareil. Espaces, tabulations, retour à la ligne sont strictement identiques et seront quelle que soit leur nombre et leur organisation toujours considérés comme un seul et unique espace.

Mais il y a une grosse différence entre un espace (1, 2, 25, 100, tabs, retours chariot...) et 0 (zéro) espace !

[EmmaZL]

ah bon, ah bon... ben j'avais jamais remarqué ça. Sûrement à cause des WYSIWYG et parce que je n'ai jamais vraiment pris le temps de faire un joli code lisible...

Ben, une fois de plus, merci calimo (mon sauveur ! )

[PsyDk]

Que ferait ce forum sans calimo ?

[HP]

pour faire plusieurs espaces tu peux utiliser  
espace insécable,
en cumulant leur nombre, ça cumule les espaces que tu tentes d'insérer en vain ...
mais ça reste une solution assez cracra à mon goût ...
si ça reste raisonnable, pourquoi pas !

[calimo]

Que ferait ce forum sans calimo ?

Profitez, dès la semaine prochaine vous ne me verrez plus trop

[EmmaZL]

Que ferait ce forum sans calimo ?

Profitez, dès la semaine prochaine vous ne me verrez plus trop

[dodovolant]

et j'en profite sur le fameux   que j'utilise bcp pour ce qui me concerne pour "augmenter les espaces entre objets" mais qui ne me semble absolument pas INSECABLE (au sens de word, où il "colle ensemble" le mot précédent et le mot suivant, garantissant une absence de saut de ligne entre les 2 (exemple avec les ponctuations double où word fait automatiquement cette insertion.
et bien malgré son utilisation, en html, j'ai régulièrement des ": ! ? etc..." qui se retrouvent seuls à un début de ligne alors que le mot précédent est resté à la ligne au-dessus (ou alors c'est firefox qui ne le reconnais pas ?)

[calimo]

Les espaces insécables fonctionnent à merveille chez moi. Tu as un exemple de page où ça ne marche pas ?

Pour en revenir aux chiens d'Emma, j'ai quelques remarques : essaye de désactiver les images (barre web developer Désactiver > désactiver les images).
Tu verra que ton site n'a pas de titre Il faut t'arranger pour en mettre un, de préférence dans un h1

En plus les textes alternatifs des images, tu les a un peu baclés c'est dommage ! Quand tu as une image avec un texte dedans où il y a marqué "barf", alors le texte alternatif doit être "barf". Ce n'est pas pour rien qu'ils existent, c'est parce qu'ils sont utiles, alors fait au moins un petit effort là dessus

Regarde ce que voient les utilisateurs de Lynx en regardant ton site.
Il faut plus structurer ton code. Les div c'est bien, mais ils sont vide de sens. Utilise des éléments qui ont un sens

Par exemple les 4 images de l'entête, tu pourrais les fusionner en une seule, que tu insérerais dans un h1 avec un joli texte alternatif. Ce serait beaucoup plus efficace

Code : Tout sélectionner

<h1><img src="header_complet.jpg" alt="Barf"></h1>

Et pour l'image contenant le "menu", pourquoi ne pas l'inclure réellement dans ton menu ? Tu as de plus un div id="gauche" inutile, car il ne contient qu'un seul et unique ul. Tu peux plutôt mettre

Code : Tout sélectionner

<ul id="gauche" class="menugauche">

Et tu peux également mettre l'image "menu" dedans avec un joli texte alternatif, par exemple sous forme d'un vrai titre (<li><h2><img /></h2></li>).

Ensuite

Code : Tout sélectionner

<img class="imgtitrepage" src="images/titre.jpg" alt="" />

C'est un titre, pourquoi ne pas l'indiquer à l'aide d'un hx (h2 p.ex) ?

Tu as aussi des <br /> qui restent... ce n'est pas très utile, essaye plutôt de positionner tes blocs pour faire en sorte de pouvoir les supprimer (en jouant sur les marges et les paddings )

Bref, essaye maintenant de mettre un peu de sens à tout ce contenu
Remarque que l'affichage est excellent, on peut très bien redimentionner le texte sans faire sauter la mise en page, en général c'est assez galère mais la ça fonctionne parfaitement, bravo

En conclusion, toujours sur la sémantique, essaye de nommer tes classes et tes id de manière un peu plus sémantique. Par exemple tu as des id="centre" et des class="gauche" partout. Mais que va-tu faire quand tu voudra changer la mise en page ? Tu devra commencer par renommer tes id et class
Alors plutôt que de décrire leur mise en page, essaye de trouver comment décrire leur fonction. Par exemple ton class="menugauche" devrait plutôt être id="menu" (comme ça si un jour tu veux un menu à droite tu peux ; d'autant plus que tu aura supprimé le div#gauche inutile qui l'entoure)


PS : je vois que tu as choisi un doctype XHTML 1.0 Transitionnal... pourquoi pas si tu tiens à te prendre la tête avec les règles de compatibilité HTML, mais sache que le XHTML envoyé comme du HTML n'est rien d'autre que du HTML invalide (en gros une soupe de balise que le navigateur doit commencer par corriger). Bref, si tu n'en a pas besoin, préfère le HTML 4.01 Strict

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

[PsyDk]

et j'en profite sur le fameux &nbsp; [...] et bien malgré son utilisation, en html, j'ai régulièrement des ": ! ? etc..." qui se retrouvent seuls à un début de ligne alors que le mot précédent est resté à la ligne au-dessus (ou alors c'est firefox qui ne le reconnais pas ?)

Firefox gère bien les espaces insécables dans le document. En revanche il a du mal quand une espace insécable est insérée dans un formulaire (elle se trouve convertie en espace normale).

Pour ce qui est d'espacer les éléments, il est en général plus simple d'utiliser des marges déclarées par CSS.

[EmmaZL]

@calimo > Je me rend bien compte que j'ai encore du travail !
Merci pour ces critiques très constructives !

[HP]

Pour ce qui est d'espacer les éléments, il est en général plus simple d'utiliser des marges déclarées par CSS.

absolument d'accord !