18041 sujets

Questions générales et questions de débutants

[Résolu] CSS lien double alignés

Bonjour,
J'avances dans mon nouveau site .. reste a résoudre j'espère un lien avec ceci

<div class="lien_mail_facebook" >
 <a href="mailto:jules&#64;lesite&#45;avantage&#46;fr"> CONTACTEZ-MOI</a>
 <a href="https://www.facebook.com/pages/cmon_face/355555006055235" title="Rejoignez  moi sur Facebook">
 <img src="images/bouton-facebook-petit.png" alt="Lien Facebook" title="Lien Facebook"  /></a>
</div>


mais je souhaiterais l'image faisant 200*200 avoir le premier lien a peut prés au centre (en hauteur) mais pas grave si impossible. Le principal c'est alignés sur une seule ligne !

Merci d'avance
Christele a écrit :
Bonjour,
J'avances dans mon nouveau site .. reste a résoudre j'espère un lien avec ceci

mais je souhaiterais l'image faisant 200*200 avoir le premier lien a peut prés au centre (en hauteur) mais pas grave si impossible. Le principal c'est alignés sur une seule ligne !

Merci d'avance

Bonjour,
en l'état, ta phrase n'est pas très compréhensible (formulation incorrecte).
Modifié par Hermann (16 Apr 2013 - 13:16)
Mille excuses Smiley decu

Je croyais que c'était clair,
je veux en fait obtenir

a écrit :


xxxxxxxxxxx le lien simple xxxxxxxxxxxxxxx LE LIEN IMAGE


merci d'avance Smiley cligne
Modifié par Christele (16 Apr 2013 - 12:21)
Bonjour,

essayez ça pour commencer (la bordure est là pour info):


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style>
*{
padding:0;
margin:0;	
}
.lien_mail_facebook{
	width:800px;
	border:1px solid red;
	display:table;
}
.link1{
	display:table-cell;
	padding-top:0;
	vertical-align:top;
	text-align:right;
	line-height:200px;
}
.link2{
	display:table-cell;
	text-align:right;
}
</style>
</head>

<body>
<div class="lien_mail_facebook" >
 <a href="mailto:jules&#64;lesite&#45;avantage&#46;fr" class="link1"> CONTACTEZ-MOI</a>
 <a href="https://www.facebook.com/pages/cmon_face/355555006055235" title="Rejoignez  moi sur Facebook" class="link2">
 <img src="http://lorempixel.com/200/200" alt="Lien Facebook" title="Lien Facebook"></a>
</div>
</body>
</html>

Modifié par rodolpheb (16 Apr 2013 - 13:22)
L'alignement vertical des éléments inline (a,span, stong, img...) se fait via la propriété CSS vertical-align :

<a href="mailto:jules&#64;lesite&#45;avantage&#46;fr" style="vertical-align:middle"> CONTACTEZ-MOI</a>
 <a href="https://www.facebook.com/pages/cmon_face/355555006055235" title="Rejoignez moi sur Facebook">
 <img src="images/bouton-facebook-petit.png" alt="Rejoignez moi sur Facebook" style="vertical-align:middle"  /></a>


Attention le title ne doit se trouver que dans le lien et doit reprendre le contenu du alt (et inversement dans le cas d'une image lien). Le title de l'image sert uniquement à afficher des metadonnées (infos supplémentaires absentes par exemple d'une légende mais non essentielles).
Penser à ajouter les attribut de tailles de l'image.
Modifié par Hermann (16 Apr 2013 - 13:28)
rodolpheb a écrit :
Bonjour,

essayez ça pour commencer (la bordure est là pour info):

Whaou tu m'a fait du sur-mesure !
Mille mille mercis Smiley smile
rodolpheb a écrit :
Bonjour,

essayez ça pour commencer (la bordure est là pour info):

Le display:table-x n'est pas nécessaire ici (à moins que j'aie pas vu quelque chose).
Modifié par Hermann (16 Apr 2013 - 14:18)
6l20 a écrit :

@Hermann : Altruisme ne rime pas forcément avec reconnaissance Smiley lol

Oui d'ailleurs ça peut malheureusement se vérifier trop souvent IRL.
Hermann a écrit :

Oui d'ailleurs ça peut malheureusement se vérifier trop souvent IRL.

Arhhhh l'Ami, je donne beaucoup aussi (articles, etc.) , et te concernant
dommage que comme sur bien des forums il n'y ait un clic +1 .... Smiley smile
Bien sûr, tu y aurais eu droit ...
6120 oui je te dirais que je suis plus a l'aise en PHP/JAVA/AJAX/PDO etc.
que dan ces fichues mises en pages Smiley fache

Peut-être pour vous c'est limpide, mais imagine même en lisant toute une matinée,
comment s'y retrouver dans la manipulation des margin et autres...
Pas un navigateur ne me répond la même image Smiley rolleyes
Tu sais lorsque je gère ma PDO client au moins la machine est docile,
et si le résultat n'est pas bon c'est bien moi qui ai fait une erreur ...

Bon allez j'arrête le Troll en attendant merci a vous trois Smiley confused
Modifié par Christele (16 Apr 2013 - 14:35)
Ça a débattu sec Smiley smile
Hermann a écrit :
Le display:table-x n'est pas nécessaire ici (à moins que j'aie pas vu quelque chose).

C'est un exemple que j'ai trouvé rapidement pour régler horizontalement les éléments. Smiley smile
@Christele Ok pas de problème, du moment que tu t'expliques Smiley cligne

rodolpheb a écrit :
Ça a débattu sec Smiley smile

C'est un exemple que j'ai trouvé rapidement pour régler horizontalement les éléments. Smiley smile

Disons que ça permet de répartir les largeurs de manière élastique oui, mais ça n'a pas l'air de correspondre à sa demande, bref c'est sans grande importance. Smiley cligne
Modifié par Hermann (16 Apr 2013 - 15:26)
Sujet clos
Aller à