Souscis de positionnement vertical d'un logo dans du texte.

Luc Brunot · Message par **Luc Brunot** » 15 déc. 2006, 14:15

Bonjour,

J'utilise dans ma page de liens http://radioslb.c-webhosting.org/LiensRadiosLB.php des images/logos pour mes liens.

Dans Kpz, dans la commande Propriétés de l'Image / placement du texte, j'ai choisi "Au centre". Pourtant, quand je vois le résultat, les icones apparaissent trop basses.

Pourquoi donc et comment y remédier ?

Merci.

Luc

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Mongo Bob · Message par **Mongo Bob** » 15 déc. 2006, 17:23

Luc Brunot a écrit :Dans Kpz, dans la commande Propriétés de l'Image / placement du texte, j'ai choisi "Au centre"

Ce qui a créé par derrière dans ton code :

Code : Tout sélectionner

<img (...) align="middle">

Or l'attribut "align" avec la valeur "middle" pour <img> signifie ceci :

middle : le centre de l'objet sera aligné verticalement avec la ligne de base (baseline)

(source : http://www.laurent-bernat.com/html-bali ... 3?quoi=img)
Regarde bien, c'est exactement ce qui se passe : le centre exact de tes images est aligné avec la ligne imaginaire (ligne de base) qui passe par le bas de ton texte.
Choisis placement du texte "En bas"? Ca le fait?
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Luc Brunot · Message par **Luc Brunot** » 15 déc. 2006, 17:39

Oui, j'avais essayé. Je viens d'ailleurs de le remettre
http://radioslb.c-webhosting.org/LiensRadiosLB.php
mais je ne trouve pas ça génial. Est-il possible d'avoir une position verticale intrtmédiaire ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Mongo Bob · Message par **Mongo Bob** » 16 déc. 2006, 02:14

Luc Brunot a écrit :Oui, j'avais essayé. Je viens d'ailleurs de le remettre

Actuellement, tu n'as plus de "align", tu es donc en "bottom" (en bas) par défaut : le bas de l'image aligné avec la ligne de base.
Tu veux le centre vertical de l'image avec le centre vertical du texte, je suppose.
Aïe. Difficile, essaie "vertical-align" en css :
http://wiki.media-box.net/documentation ... ical-align
mais comme ils disent, IE6 ne suit pas toujours.
Ce serait

Code : Tout sélectionner

img{
  vertical-align: middle;
}

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Luc Brunot · Message par **Luc Brunot** » 18 déc. 2006, 09:25

Merci.
En effet ça fonctionne. Pour plus de finesse dans le positionnement, on peut utiliser les % en négatif (0% correspond au bas de l'image sur la ligne de base) dans vertical-align.
Luc

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Mongo Bob · Message par **Mongo Bob** » 18 déc. 2006, 09:47

Luc Brunot a écrit :En effet ça fonctionne

IE compris?

Luc Brunot a écrit :Pour plus de finesse dans le positionnement, on peut utiliser les % en négatif (0% correspond au bas de l'image sur la ligne de base) dans vertical-align.

Noté. Je mets ce "truc" dans mes mémos-tutos etc...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Luc Brunot · Message par **Luc Brunot** » 18 déc. 2006, 09:53

Ça fonctionne avec IE7.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Mongo Bob · Message par **Mongo Bob** » 18 déc. 2006, 09:59

Oui, et IE6 aussi, d'ailleurs, suffisait de vérifier.
Tu as bien fait d'insister, l'effet est super avec les logos alignés comme ça. Je garde le site en favoris pour le blues

.
A+

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Mongo Bob · Message par **Mongo Bob** » 18 déc. 2006, 10:13

Attention, supprime ça dans ton head, c'est un bug Nvu/Kpz :

Code : Tout sélectionner

<meta id="_moz_prolog" content="">
  <meta id="_moz_prolog" content="">
  <meta id="_moz_prolog" content="">

voir :
http://www.geckozone.org/forum/viewtopi ... highlight=

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Luc Brunot · Message par **Luc Brunot** » 18 déc. 2006, 10:32

Il est vrai que j'oublie souvent d'enlever ces <meta id="_moz_prolog" content=""> qui reviennent tout le temps.

Finalement, est-ce bien embêtant si ce n'est pour la lisibilité ?

À ce sujet, dans Kpz, je n'arrive pas à utiliser le validateur de code html. J'obtiens ce message "Sorry! This document can not be checked." Est-ce dû à l'extension php?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Mongo Bob · Message par **Mongo Bob** » 18 déc. 2006, 11:14

Luc Brunot a écrit :Finalement, est-ce bien embêtant si ce n'est pour la lisibilité ?

C'est embêtant parce que tu n'es pas aux normes W3C, du coup, à cause de balises <meta> incorrectes.
Pour valider W3C par Kpz, je crois qu'il te faut installer Validator en local, sinon, passe par FF et l'extension Webdevelopper et, bien sûr, une connexion internet!
http://joliclic.free.fr/mozilla/webdeveloper/
Dans la barre de Webdev, du coup : "Outils/Valider html"...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Invité · Message par **Invité** » 18 déc. 2006, 13:16

J'ai installé l'extension.
Ça commence bien, je teste la validité sur la page d'accueil http://radioslb.c-webhosting.org/index.php et paf 3 erreurs. Le soucis, c'est que je ne vois pas où sont les erreurs :

Code : Tout sélectionner

Error  Line 2 column 12: there is no attribute "STYLE".

<html style="direction: ltr;" lang="fr">

Code : Tout sélectionner

Error  Line 50 column 48: there is no attribute "TARGET".

<p>Les émissions sont membres du&nbsp;<a target="_blank"

Code : Tout sélectionner

# Error  Line 54 column 28: there is no attribute "ALIGN".

 src="Images/CRB.jpg" align="middle"></a>.&nbsp;</p>

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Mongo Bob · Message par **Mongo Bob** » 18 déc. 2006, 13:50

1ère erreur :
Si tu es en strict, c'est plus dur, mais 3 erreurs c'est pas la mort.
Il n'y a pas lieu d'appliquer "style" à html au-dessus de l'en-tête.
Je ne sais pas comment tu as obtenu ça, sans doute par l'interface de NVU, "style" introduit du style css dans l'en-tête ou dans le body avec les balises, comme tu l'as fait jusqu'ici.
Tu as ça :

Code : Tout sélectionner

<html style="direction: ltr;" lang="fr">

et n'a besoin que de ça :

Code : Tout sélectionner

<html lang="fr">

"direction" est une propriété css, qui avec les valeurs "ltr" ou "rtl" signale le sens de lecture, "rtl", de droite à gauche, est le sens de lecture pour un site en langue hébraïque, par exemple. Est-ce utile quand on a de toute façon "lang="fr", sais pas. Tu peux donner la propr "direction:ltr" à ton <body> et tous les blocs contenus dans <body> en héritent, si tu veux.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Mongo Bob · Message par **Mongo Bob** » 18 déc. 2006, 13:57

2ème erreur tu l'as déjà corrigée en supprimant "align", qui, en tant qu'attribut de <img> est déprécié depuis html 4.0.1.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Luc Brunot · Message par **Luc Brunot** » 18 déc. 2006, 13:57

ok.
Cette histoire de direction est dû au fait... que j'ai appliqué ce que j'ai lu dans le premier tutoriel que j'ai suivi !
Dans Kpz : Format / Titres et propriétés de la page / Sens d'écriture. Bon, si ça ne sert pas et que c'est "hors la loi", alors je vire !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Geckozone

Souscis de positionnement vertical d'un logo dans du texte.

Souscis de positionnement vertical d'un logo dans du texte.

Qui est en ligne ?