[Résolu] Probleme d'espacement entre les images

Bonjour,
Je viens de créé mon premier site web, jusqu'a present je n'avais eu aucun probleme mais là... je me vois dans l'obligation de vous demander de l'aide.
Alors mon probleme est que mes images de titre sont decalées comme le montre l'image.


j'aimerais savoir si il est possible de supprimé cet espace qui me gene tant?
ai je fais une erreur de code?

<div id="en_tete">
    <div id="menu_en_tete-01">
	<h1>CejeSoft</h1>
     </div>
     <div id="menu_en_tete-02">
	<img src="images/banniere-bas-gauche.jpg" alt="banniere" />
	<a href="index.html">
		<img src="images/banniere-lien-gauche.jpg" alt="banniere" title="Acceuil" />
	</a>
	<img src="images/banniere-centre-gauche.jpg" alt="banniere" />
	<img src="images/banniere-centre.jpg" alt="banniere" />
	<img src="images/banniere-centre-droite.jpg" alt="banniere" />
	<a href="mailto=ceje007@hotmail.com">
		<img src="images/banniere-lien-droite.jpg" alt="banniere" title="Contact" />
	</a>
	<img src="images/banniere-bas-droite.jpg" alt="banniere" />
    </div>
</div>

#en_tete
{
	width : 800px;
	height : 160px;
	margin : 0px;
	padding : 0px;
	border : 0px
}

#menu_en_tete-01
{
	background : url("images/banniere.jpg") no-repeat;
	width : 800px;
	height : 126px;
}

#menu_en_tete-02
{
	width : 800px;
	height : 34px;
	border : 0px;
}

img
{
	border : 0px;
	padding : 0px;
	margin : 0px;
}

merci et a bientot...
Modifié par Ceje007 (24 Mar 2007 - 08:52)

Bonjour,

La balise BBcode utilisée pour citer du code sur le forum est [ code], pas [ quote]. Merci de corriger.

Pour ton problème : si tu dessines ta bannière avec autant d'images, ça n'est pas une erreur de code, c'est une erreur de conception.

Fais plus simple. Tu n'as aucune raison de procéder à un « découpage » aussi étrange.

re-bonjour ,
j'ai rectifié mon erreur BBcode.
alors j'ai fais une decoupe de l'image pour faire des images cliquable comme le montre mon code XHTML.
si tu as une autre maniere de le faire exactement comme moi je ne suis pas contre.
merci!

S'il vous plais est ce que quelqu'un pourait m'aider car là je ne trouve pas de solution.
merci...

Ceje007 a écrit :
alors j'ai fais une decoupe de l'image pour faire des images cliquable comme le montre mon code XHTML.

Que les images qui portent effectivement des liens hypertexte soient des images séparées du reste du bandeau, ça se conçoit. Mais à vue de nez cela concerne deux images. Dans ce que tu as fait, il y a sept petit morceaux d'image. Il n'y aurait pas comme un problème ?

Par ailleurs, si tu désactives les images tu te retrouves avec le mot « bannière » répété un peu partout. Les textes alternatifs pour les images ne s'utilisent pas ainsi. Ils doivent être pertinents. Dans le cas d'une image de décoration, cela signifie que l'attribut alt doit être vide (<img alt="" />). Dans le cas d'une image fournissant une information, un bon test est d'essayer d'avoir une page cohérente et utilisable lorsque l'on désactive les images (et qu'elles sont remplacées par leur texte alternatif).

Sinon, pour les aspects techniques du problème de rendu que tu rencontres, je te conseille cet article : Impact sur le rendu de la mise en forme du code HTML.

Mais comme déjà souligné la solution ne sera pas d'appliquer les correctifs suggérés dans cet article, mais bien de revoir à la base la manière de faire.

Il faut prendre les choses ainsi : tu as trois informations dans ton bandeau : « CejeSoft Website » (nom du site), « Accueil » (lien de navigation) et « Contact » (lien de navigation).
Les trois étant très graphiques, on utilisera trois images HTML (avec texte alternatif qui va bien). Le reste du bandeau, c'est de la déco, donc image de fond en CSS.

[b]HTML :[/b]
<div id="entete">
	<h1><img src="entete-titre.jpg" alt="CejeSoft Website" /></h1>
	<p>
		<a id="lien-accueil" href="#"><img src="entete-lien-accueil.jpg" alt="Accueil" /></a><span>,</span>
		<a id="lien-contact" href="#"><img src="entete-lien-contact.jpg" alt="Contact" /></a>
	</p>
</div><!-- fin de div#entete -->

[b]CSS :[/b]
div#entete {
	width: 600px;
	height: 160px;
	position: relative; /* Important pour positionner les enfants positionnés en absolu par rapport à ce bloc */
	background: url(entete-fond.jpg) no-repeat center top;
}
div#entete h1 img {
	position: absolute;
	top: 20px;
	left: 150px;
}
div#entete #lien-accueil {
	position: absolute;
	top: 120px;
	left: 100px;
}
div#entete #lien-contactl {
	position: absolute;
	top: 120px;
	left: 450px;
}

(Dimensions prises au pif, à adapter selon tes besoins.
Les éléments positionnés en absolu le sont par rapport aux bords de div#entete (plus proche ancêtre positionné).

Tant qu'à faire, une petite critique sur le design :

- Le style graphique de l'entête est trop chargé, et ne « signifie » pas grand chose. Le mélange entre celtico-gothique et kanji nippons (si je ne m'abuse) ne va pas de soi. L'intégration des images sur les deux côtés est mauvaise (la réduction à cette échelle fait perdre trop de détail... utiliser un détail d'une image ou quelque chose de plus simple passerait mieux à cette dimension ; par ailleurs, l'effet d'ombre portée un peu bourrin fait très web des années 1997-1998 ).

- Le Comic Sans est une fonte affreuse (surtout les capitales, et les bas de casse telles que le « m », le « n », le « r » et le « s »), sans la moindre distinction. Je préconiserais l'emploi de Georgia (à la rigueur d'un Times New Roman avec un corps suffisamment grand), ou bien d'une Verdana passe-partout. Mais pitié, pas du Comic Sans*.

--
* Ou à la rigueur juste pour le corps de texte, mais surtout pas pour le titrage !

Merci ca marche nikel a part un petit probleme...
quand je reduis la fenetre les images sont decalé il 'ya pas un autre moyen?
j'ai changé la banniere mais c'est pas la definitive et merci pour ton avis!!!
je voulais demandé un avis une fois le site fini mais bon maintenant que c'est fait je ne vais pas me plaindre!!!

encore merci pour tout!!!
Modifié par Ceje007 (20 Mar 2007 - 10:50)

Ceje007 a écrit :
quand je reduis la fenetre les images sont decalé il 'ya pas un autre moyen?

Les images sont bien positionnées en absolu, et l'en-tête en relatif ?
Là avec juste une capture d'écran ça va être dur de se prononcer, à vrai dire. Le plus pratique, pour obtenir de l'aide, c'est la page en ligne (qui permet d'avoir accès au code source HTML et CSS, de tester des modifications à la volée, etc.).

oki alors test sur ce lien
Page Test
tu trouveras peut etre une reponse a mon problème!!
merci encore

Tu n'as pas positionné le bloc d'en-tête en relatif comme j'avais bien précisé de le faire. Du coup les éléments positionnés en absolu sont positionnés par rapport aux bords de la fenêtre du navigateur, et pas par rapport aux bords de div#en_tete. Il faut donc rajouter un position: relative au bloc d'en-tête, et corriger les valeurs pour le positionnement absolu des liens.

Par ailleurs : quel intérêt d'utiliser une image HTML si c'est pour la cacher avec un text-indent négatif ? C'est une idée vraiment saugrenue. Les images de contenu dans le code HTML sont-elles donc les lépreux de la conception de pages Web, qu'il faille absolument les cacher ?

Virer l'image de fond sur div#en_tete, et virer le text-indent négatif sur le h1.

En passant, on peut rappeler qu'un site ayant une largeur de 800px provoquera une barre de défilement horizontale sur une résolution de 800x600 (la largeur de référence pour un contenu de largeur fixe compatible avec la résolution 800x600 est 760px... on peut monter à 770px, mais pas plus haut).

si j'ai positionné le text-indent en negatif c'est juste pour que les mal voyant et d'autre persnnes invalide puissepouvoir lire le tout en sachant bien sur qu'il enleve le css de la page.
vue que le css vire le texte et k'une fois le css parti il n'ya plus d'image mais juste le texte alors ca fai bien ce que je lui demande... ^^
je vais rectifié la position et je revien te dire!!
merci encore ^^


Voila je viens de le faire et ca marche nikel merci encore!!! si tu as d'autre chose a me dire sur le site n'hesite pas je ne demande qu'a l'amélioré!!

par contre une chose en xhtml et css est til possible de faire une page avec des miniature faite autrement que reduire l'image en lui forcan a avoir une certaine taille?

merci encore!!!
Modifié par Ceje007 (21 Mar 2007 - 08:48)

PS: écris accUeil, sinon ça fait asseuil,
bon, merci de to post, moi aussi je cherche!
Modifié par pepper (21 Mar 2007 - 20:24)

Ceje007 a écrit :
si j'ai positionné le text-indent en negatif c'est juste pour que les mal voyant et d'autre persnnes invalide puissepouvoir lire le tout en sachant bien sur qu'il enleve le css de la page.

Les malvoyants ne désactivent pas nécessairement la feuille de style. Si leur handicap n'est pas trop sévère, ils peuvent agrandir la taille des caractères. Il existe aussi des logiciels faisant un effet de loupe sur l'écran, ce qui permet (plus ou moins confortablement, et parfois avec quelques problèmes) de naviguer sur une page avec un navigateur graphique.

Le problème de la technique que tu utilises (une technique de remplacement de texte par une image de fond, où l'on masque le texte pour ne laisser que l'image de fond apparaitre... technique d'ailleurs présente dans certains articles et tutoriels d'Alsacréations), c'est qu'il y a des cas où elle ne marchera pas. L'accessibilité ça n'est pas juste penser 1) aux utilisateurs « classiques » et 2) aux aveugles. C'est une problématique beaucoup plus large que ça.

Par exemple : un navigateur pour téléphone mobile, smartphone, ou n'importe quel terminal mobile ayant un écran limité, veut afficher ta page. Il récupère l'image, qui fait 800px de large. Comme son écran d'affichage fait 320px de large, il n'affiche pas l'image, mais la remplace par le texte alternatif.

Ou alors : ce même navigateur pour terminal mobile désactive par défaut toutes les images et couleurs de fond, mais applique le text-indent qui cache le texte. Résultat : plus d'information.

Bien sûr, même sur un écran suffisamment large il n'est pas exclu que l'utilisateur désactive les images (pour accélérer le surf sur une connexion bas-débit, par exemple), ou bien les images peuvent être bloquées par le proxy de l'entreprise, ou bien l'utilisateur peut avoir désactivé les couleurs de fond (ce qui désactive aussi les images de fond) parce qu'il a des problèmes de vision des couleurs, ou bien...

(Note: je serais bien incapable de dresser une liste cohérente, n'étant pas spécialiste de la question... d'ailleurs, certains des « cas d'utilisation » que je viens d'évoquer sont peut-être farfelus.)

Bref, la solution la plus fiable et la plus accessible est celle qui ne détourne pas les technologies (les images de fond en CSS ne sont pas conçues pour afficher des images de contenu en remplacement de texte...), mais applique les technologies standard sans bidouiller des choses en pensant à des cas d'utilisation pré-définis. Donc : balise <img alt="texte alternatif">

Ceje007 a écrit :
par contre une chose en xhtml et css est til possible de faire une page avec des miniature faite autrement que reduire l'image en lui forcan a avoir une certaine taille?

La bonne pratique pour les miniatures consiste à préparer les miniatures à l'avance, pas à afficher les grandes images en taille réduite (via CSS ou les propriétés HTML de dimensions d'images). Penser aux utilisateurs en bas débit, qui ne peuvent pas télécharger 3 Mo d'images pour afficher les « miniatures » d'une galerie de photos, par exemple.
Et les gains de bande passante profitent également au propriétaire du site (bande passante).

merci encore!!!

Merci pour toute ses explications et j'essayerais d'en tenir compte tout comme le font Comic Sans MS que tu deteste par dessus tout donc les titre on ete changer et la banniere aussi l'a été!!!
Pour les minatures j'ai pensé a cette solution mais je me suis dis qu'il y avais surement une autre solution.
merci encore pour toutes ses precisions et ses explications