Forums Développement Multimédia

Aller au contenu

Espacement entre images/texte

CODE HTML CSS

8 réponses à ce sujet

#1 Londoncalling

    Ceinture Blanche

  • Members
  • Pip
  • 5 messages

Posté 23 October 2011 - 13:34 PM

Bonjour à tous,

-Débutant sur Dreamweaver CS5 sur Mac, je cherche simplement à réduire l'espacement entre "References" et "About" comme sur ma capture d'écran, afin que l'espacement entre les 4 mots soit identiques. Je fais pourtant click droit "Align", et j'ai beau tout essayer rien ne marche.

-Je cherche à résoudre le même problème pour rapprocher le Work du logo que vous apercevez plus haut.

A noter: tous ces mots, que je veux ensuite évidemment en faire des liens, sont des images en format .gif.


Merci d'avance pour votre aide,

Londoncalling

Fichier(s) joint(s)



#2 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 23 October 2011 - 14:54 PM

Bonjour.
Est-ce que :

Citation

Débutant sur Dreamweaver CS5 sur Mac
veut aussi dire débutant en HTML / CSS ?

Pourquoi, te sers-tu d'images pour afficher du texte ? On n'affiche pas avantageusement des images en lieu et place du texte, c'est surtout plus lourd et inutile.
Commence par chercher à formater ton texte pour qu'il soit ressemblant à tes images, ce que tu voudrais voir en fait… ensuite trouves la meilleure solution pour le mettre en page. Là, je dirais qu'une liste (formatée) devrait faire ton bonheur !

#3 Londoncalling

    Ceinture Blanche

  • Members
  • Pip
  • 5 messages

Posté 23 October 2011 - 15:21 PM

Voir le messageedfred, le 23 October 2011 - 14:54 PM, dit :

Bonjour.
Est-ce que :
veut aussi dire débutant en HTML / CSS ?

Pourquoi, te sers-tu d'images pour afficher du texte ? On n'affiche pas avantageusement des images en lieu et place du texte, c'est surtout plus lourd et inutile.
Commence par chercher à formater ton texte pour qu'il soit ressemblant à tes images, ce que tu voudrais voir en fait… ensuite trouves la meilleure solution pour le mettre en page. Là, je dirais qu'une liste (formatée) devrait faire ton bonheur !

Merci edfred pour ta réponse rapide.

Oui je débute aussi sur HTML et CSS, d'ailleurs je ne comprends encore que mal les limites d'HTML et les avantages du CSS . La police/style voulue pour ce texte (vu sur la capture d'écran) étant très spécifique, j'ai pris le parti d'importer des images d'Illustrator pour avoir exactement le type de police que je voulais (à tort ou à raison à vous de me dire).

Pourrais-tu me donner quelques précisions sur ce qu'est une liste formatée?

merci infiniment

Modifié par Londoncalling, 23 October 2011 - 15:22 PM.


#4 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 23 October 2011 - 18:11 PM

Une liste classique se présente sous forme de liste à puce ou à numéros selon qu'elle soit ordonnée
<ol><!-- cette liste sera par défaut avec des numéros -->
<li></li>
<li></li>
<li></li>
</ol>
ou non
<ul><!-- cette liste sera par défaut avec des puces -->
<li></li>
<li></li>
<li></li>
</ul>
.
J'entends par "la formater", lui changer son aspect avec des propriétés CSS : annuler la puce ou le chiffre, styliser la puce si on en veut une, utiliser des chiffres ou des lettres ou autre pour les listes ordonnées, etc.
Si la police utilisée est incompatible web tu peux alors utiliser des images de texte mais il faut alors préparer tes images parfaitement et pour un résultat optimum, utiliser des sprites avec deux états pour tes images, un au repos et un au survol !!!

Si tu n'es pas encore habitué aux langages html et CSS qui sont relativement simple à apprendre et assimiler, je t'invite par commencer à les apprendre car même si tu peux facilement faire un site web avec des logiciels wisiwig, il faudra un jour ou l'autre optimiser ton code, réparer une erreur, etc.

Dè que je trouve un peu de temps, je vais te préparer un petit fichier de liste avec liens à deux états afin que tu voies par toi même comment agencer une liste avec une seule image.

#5 Londoncalling

    Ceinture Blanche

  • Members
  • Pip
  • 5 messages

Posté 23 October 2011 - 18:18 PM

Voir le messageedfred, le 23 October 2011 - 18:11 PM, dit :

Une liste classique se présente sous forme de liste à puce ou à numéros selon qu'elle soit ordonnée
<ol><!-- cette liste sera par défaut avec des numéros -->
<li></li>
<li></li>
<li></li>
</ol>
ou non
<ul><!-- cette liste sera par défaut avec des puces -->
<li></li>
<li></li>
<li></li>
</ul>
.
J'entends par "la formater", lui changer son aspect avec des propriétés CSS : annuler la puce ou le chiffre, styliser la puce si on en veut une, utiliser des chiffres ou des lettres ou autre pour les listes ordonnées, etc.
Si la police utilisée est incompatible web tu peux alors utiliser des images de texte mais il faut alors préparer tes images parfaitement et pour un résultat optimum, utiliser des sprites avec deux états pour tes images, un au repos et un au survol !!!

Si tu n'es pas encore habitué aux langages html et CSS qui sont relativement simple à apprendre et assimiler, je t'invite par commencer à les apprendre car même si tu peux facilement faire un site web avec des logiciels wisiwig, il faudra un jour ou l'autre optimiser ton code, réparer une erreur, etc.

Dè que je trouve un peu de temps, je vais te préparer un petit fichier de liste avec liens à deux états afin que tu voies par toi même comment agencer une liste avec une seule image.


C'est super sympa je n'en demandais pas tant!! Merci beaucoup.

Pour les sprites c'est du chinois pour moi, je vais me plonger dedans!

La police utilisée en l'occurence est ScalaSans et ne figure pas dans la liste des Fonts de mon DW CS5.

#6 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 23 October 2011 - 21:54 PM

Si je peux toutefois te conseiller c'est d'utiliser des polices compatibles avec le web et pas d'exotiques !
CSS3 permet une meilleure gestion des polices…

Les sprites sont des regroupements de graphiques en une seule image. On gère l'apparition d'une partie de cette image en fond d'une zone dans la page HTML (liste item, div, paragraphe, etc.) par une déclaration des coordonnées de cette image dans sa "fenêtre" par les CSS.

Voici en PJ un exemple de ce qu'on peut faire vite fait avec une liste et une image de fond qui contient tous les liens.

Fichier joint  sprites.zip   30.52 Ko   11 téléchargement(s)

#7 Londoncalling

    Ceinture Blanche

  • Members
  • Pip
  • 5 messages

Posté 25 October 2011 - 15:45 PM

Désolé mais je suis complètement largué, ca fait 4 jours que je m'y suis mis seulement. Donc en bref, cela veut dire qu'un sprite regroupe plusieurs images en une seule? Quel est l'intérêt, l'avantage? Repos et survol, c'est en référence à la souris qui passe dessus ou pas?

merci et désolé de vous embêter

#8 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 25 October 2011 - 20:32 PM

Bonsoir.
L'avantage d'un sprite, c'est déjà de n'avoir à charger qu'une image pour plusieurs choses. Une fois dans le cache de l'internaute, elle s'affiche rapidement, même au rafraichissement ou changement de page dans laquelle l'image est également présente.
Le fait de travailler deux états avec une seule image permet lors du passage de la souris (survol) d'afficher le second état sans devoir recharger une nouvelle image, on déplace seulement l'image présente, réactivité au rendez-vous.

Bien entendu, si tu débutes, ce n'est pas la solution la plus facile à mettre en place.

Pour en savoir un peu plus, regarde cet article sur Alsacreations (attention au code indiqué, il contient une erreur, le "text-indent" ne fonctionne pas sur une balise span (inline)

#9 Londoncalling

    Ceinture Blanche

  • Members
  • Pip
  • 5 messages

Posté 26 October 2011 - 11:27 AM

Merci infiniment pour ces précisions qui m'éclairent sur le sens des explications précédentes.

Excellente journée



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP