Décalage image et texte

Bonjour tout le monde et bonnes fêtes à tous !

J'ai un souci bête en css et en même temps très énervant. J'essaie de centrer verticalement du texte avec une image mais je n'y arrive pas. Le texte est centré à la base verticalement à l'aide des propriétés des margin. Quand je rajoute l'image là, je ne sais pas pourquoi, le texte a un alignement vertical baucoup plus bas (il s'aligne suivant le bas de l'image en fait). Alors, je me suis dit c'est pas grave je vais jouer à nouveau sur les margin...
Le problème c'est que ça ne marche pas ! Alors je viens vous demander votre aide .

Voici mon code php :

echo "<div id=\"bandeau_droit\">";
echo "<a href=\"suppr_session.php\"><img src=\"images/deconnexion.png\" alt=\"Déconnexion !\" /></a>";
echo "&nbsp;<span class=\"bleu\">Bienvenue ".$_SESSION["login"]."</span>";
echo "</div>";

Et voici mon css :

#bandeau_droit a:visited, #bandeau_droit a:link  
{
	color:black;
}
#bandeau_droit, #bandeau_gauche, #bandeau_milieu
{
	float:left;
}
/*bandeau droit -> connexion en temps qu'administrateur*/
#bandeau_droit 
{
	position:relative;
	right:-30px;
	width:20%;
	text-align:right;
}
/*déconnexion*/
#bandeau_droit a img
{
	padding-top:0.5%;
}
.bleu
{
	color:blue;
}

Pour l'instant seule l'image est centrée verticalement (grâce à la règle #bandeau_droit a img) mais le texte je n'y arrive pas.

Merci pour votre aide !
Modifié par rom117 (29 Dec 2009 - 15:34)

Hello oh oh oh,
Joyeuses fêtes à toi aussi.

Pas le temps de me pencher sur ton problème pour l'instant mais en passant : ton code php est moyen.

Plutôt que d'utiliser des guillemets (") comme délimiteurs, tu devrais songer à employer des apostrophes (') : quand ton code est interprété, à chaque fois que le moteur reçoit du contenu entre guillemet, il va lancer une procédure de scan (souvent inutile et gourmande en ressources) afin de vérifier si oui ou non des variables sont présentes de façon à récupérer directement la valeur qui leur est associée. Ca permet aussi - dans un contexte de déploiement web - d'éviter d'échapper sans cesse les guillemets.

Donc pour ton exemple, ça donnerait :

echo '<div id="bandeau_droit">'; 
echo '<a href="suppr_session.php"><img src="images/deconnexion.png" alt="Déconnexion !" /></a>'; 
echo '&nbsp;<span class="bleu">Bienvenue ' . $_SESSION['login'] . '</span>'; 
echo '</div>';

PS. Je repasse dès que j'ai un moment pour ton CSS
En attendant, pourrais-tu héberger et/ou fournir un lien vers ta page en ligne ?
Ça permettrait de t'aider plus aisément.
Modifié par Akhilleus (30 Dec 2009 - 02:26)

Salut Akhilleus !
Merci pour l'astuce sur les apostrophes et surtout pour l'explication car je ne savais pas du tout qu'il y avait une différence. En fait, les guillemets, je peux ne les mettre que pour le html c'est ça ?? Et dans une requete, comment je différencie une variable php texte d'une variable php numérique si on utilise pas les guillemets ??
Exemple :

$requete="SELECT login,mdp FROM gens where login='".$login."' and mdp='".$mdp."'";

Pour mon 1er problème voici l'adresse du site : http://dis.univ-lyon2.fr/~rlalande/prog_web/index.php

Une fois sur la page d'accueil clique sur "Connexion" (en rouge en haut à droite). On demande ensuite de se connecter. Tapes "vis1" et "vis1" comme identifiants. Ce dont je parlais apparaîtra au même endroit que "Connexion" : lorsqu'on est connecté le mot "Connexion" n'apparaît plus mais à la place on a une image qui est en fait une croix de déconnexion et un texte qui est un texte de bienvenue.

J'ai un peu modifié le CSS alors je le redonne :

#bandeau_droit a:visited
{
	/*color:black;*/
	border:1px solid transparent;
}
#bandeau_droit, #bandeau_gauche, #bandeau_milieu
{
	float:left;
}
/*bandeau droit -> connexion en temps qu'administrateur*/
#bandeau_droit 
{
	position:relative;
	right:-30px;
	width:20%;
	text-align:right;
}
/*connexion / déconnexion*/
#bandeau_droit a
{
	color:red;
}

/*déconnexion*/
#bandeau_droit a img
{
	padding-top:0.5%;
}
.bleu
{
	color:blue;
}

Il y a un autre problème toujours au même endroit : l'îcone de déconnexion est entourée d'une bordure rouge que je ne veux pas. Si dans la règle #bandeau_droit a:visited je décommente /*color:black;*/, alors cette bordure disparaît mais le mot "Connexion" qui était en rouge devient noir et du coup on ne le voit plus !!

Merci d'avance pour ton aide, que ce soit aujourd'hui, demain, ou après-demain !!

Petite chose que j'ai oublié : le code php est appelé lorsqu'on est connecté.
Si on ne l'est pas le mot "Connexion apparaît grâce à ce code :

echo '<a class="rouge" href="login.php">'.$connexion.'</a>';

(la classe rouge permet de mettre le texte en rouge)

Si, dans mes css, j'enlève la propriété :

#bandeau_droit a 
{ 
    color:red; 
} 

Alors rien ne change pour le mot "Connexion" qui est toujours en rouge en revanche l'icône de déconnexion est toujours encadrée, mais en violet cette fois-ci !! Je crois qu'il y a un rapport avec les liens activés, ou visités mais j'avoue que je suis un peu dans le brouillard là...

Chose promise ..

Pour aligner un élément verticalement, avant les marges, il y a la propriété "vertical-align" (qui prend dans ce cas la valeur "middle"). Appliquer ce style à l'image liée au texte "Bienvenue $username" devrait régler le problème.

Pour ce qui est de la bordure rouge autour de l'image, un simple :

a img { border: 0; }

.. te débarrassera des bordures inutiles (à toi ensuite de les ajouter lorsqu'elle sont opportunes).

Par ailleurs, il me semblerait plus judicieux de remplacer ce "Bienvenue" par un "Déconnexion" accompagné d'un symbole de sortie en background plutôt qu'une image directement dans la page.

a#logout {
  background: url('image-exit.format') #couleur-de-fond center left no-repeat;
  text-decoration: none;
}

Au niveau du layout général, bien qu'on ne soit pas dans la partie du forum "Critiques de vos sites: code et design", je ne peux que te conseiller de faire un tour du côté des gabarits d'alsacreations (dans ton cas, le 10ème semblerait convenir), cela te permettra de démarrer sur des bases saines et d'accommoder le tout à ta sauce
Modifié par Akhilleus (30 Dec 2009 - 02:35)

... chose due ! Merci !
Pour la bordure j'ai fait ce que tu m'as dit et ça a marché pas de souci (c'était si bête... pourquoi n'y avais-je pas pensé plus tôt ??).
Après pour l'alignement, j'ai fait avec ce que tu m'as dit + de l'"improvisation" (rajout de margin, position absolute... de la bidouille quoi !) et ça a marché aussi !
J'ai laissé le "Bienvenue" car ça ne me choque pas (s'il faut je le changerai plus tard).

Voici le code modifié :
-le php :

echo '<a href="suppr_session.php" id="deconnexion"></a>';
echo '<div id="bienvenue"><span class="bleu">Bienvenue '.$_SESSION['login'].'</span></div>';

-le css :

#bienvenue
{
	position:absolute;
	margin-top:-9.5%;
	margin-left:48%;
}
#deconnexion
{
	display:block;
	background: url("../images/deconnexion.png"); 
	background-repeat:no-repeat;
	background-position:center;
	width:18px;
	height:18px;
	margin-left:37%;
}

Voilà pourquoi le css ça m'énerve : j'y passe des heures, j'arrive à faire à peu près ce que je veux mais sans vraiment savoir comment j'ai fait ! (car là tu l'auras vu c'est de la bidouille !)

En tout cas ça marche alors un grand merci à toi et bonnes fêtes encore une fois .

rom117

PS : le lien vers les gabarits d'alsacreations, c'est parce que tu as vu des choses qui ne vont pas ??