Aligner une image à droite

Bonjour,

J'ai plusieurs images cote-à-cote, mais je voudrais aligner la toute dernière à droite (images FILE), le souci, c'est que dès que je l'aligne sur la droite j'ai un saut de ligne, je ne sais pas comment faire.

Voici l'extrait de mon code :

 <div id="banniere_menu_horizon">   
	 <div id="meteo"> </div>
	 <div id="barre_menu_horizon">

       <div align="left"><a href="index.html"><img src="pictures/HOME.png" title="Accueil" alt="Accueil" hspace="20" vspace="3" ></a>

         <a href="01/01_0001_010112_01a.html"><img src="pictures/INFO.png" title="Information général" alt="Information général" hspace="20" vspace="3" /></a>

         <a href="mailto:danieldhaese@hotmail.fr"><img src="pictures/MAIL.png" title="Envoyer un email au club" alt="Mail Club" hspace="20" vspace="3" /></a>

         <a href="02/02_0001_010112_01a.html"><img src="pictures/FILE.png" alt="Archives" hspace="20" vspace="3" title="Archives" /></a>
</div></div>
</div>

Modifié par sebdev (05 Dec 2011 - 18:25)

Salut,

Déjà je mettrais tout cela dans une liste non ordonnée et j'appliquerais des margin sur le dernier enfant (last-child).

De plus mettre des class aux div et gérer la mise en forme via CSS est bien plus indiqué que les "div align=left" c'est déprécié ce codage !

Voici un code à adapter:

<div id="banniere_menu_horizon"> 
<div id="meteo"> </div>
<div id="barre_menu_horizon">
<ul class="menu_horizontal">

<li><a href="index.html"><img src="pictures/HOME.png" title="Accueil" alt="Accueil" hspace="20" vspace="3" ></a></li>

<li><a href="01/01_0001_010112_01a.html"><img src="pictures/INFO.png" title="Information général" alt="Information général" hspace="20" vspace="3" /></a></li>

<li><a href="mailto:danieldhaese@hotmail.fr"><img src="pictures/MAIL.png" title="Envoyer un email au club" alt="Mail Club" hspace="20" vspace="3" /></a></li>

<li><a href="02/02_0001_010112_01a.html"><img src="pictures/FILE.png" alt="Archives" hspace="20" vspace="3" title="Archives" /></a></li>
</ul>
</div>
</div>

Modifié par jmlapam (04 Dec 2011 - 19:27)

Merci,

Pour la procédure et le code.

Aucun problème,

Ah oui le centrage s'effectue avec la ul et des margin.

Re-bonsoir,

Par-contre, il m'est impossible de centre en horizontal mon menu, comment faire.

voici mon code :

<div id="banniere_menu_horizon">   
<div id="meteo"> </div>
<div id="barre_menu_horizon" >
	<ul>
<li><a href="index.html"><img src="pictures/HOME.png" alt="Accueil" hspace="30"  title="Accueil"  ></a></li>
<li><a href="01/01_0001_010112_01a.html"><img src="pictures/INFO.png" title="Information général" alt="Information général" hspace="30"  /></a></li>
<li><a href="mailto:danieldhaese@hotmail.fr"><img src="pictures/MAIL.png" title="Envoyer un email au club" alt="Mail Club" hspace="30"  /></a></li>
<li><a href="02/02_0001_010112_01a.html"><img src="pictures/FILE.png" alt="Archives" hspace="20"  title="Archives" /></a>
</li>
    </ul></div>
	 </div></div>

Et le CSS associé:

#banniere_menu_horizon {background-color: #ffffff;
		background-position: center center;
		background-repeat: no-repeat;
		position: relative; 
		left: 50%;
		width : 920px; height : 62px;
		margin-left: -460px; 
		 }		 
#meteo {background-color: #000000; background-image: url(http://perso0.free.fr/cgi-bin/meteo.pl?dep=27);
		background-position: center center;
		background-repeat: no-repeat;
		position: relative; 
		top: 3px;
		left: 10px; 
		width : 140px; height : 56px;
		float: left; 
		 }
#barre_menu_horizon {background-color: #752060;
		position: relative; 	
		top: 3px;
		width : 750px; height : 50px;
		left: 20px;
		margin-bottom: 10px; 
		float: left; 		 
		 }
ul {
		list-style-type : none;
		padding : 0px;
}
#barre_menu_horizon li:last-child{
margin-left:220px
}
#barre_menu_horizon li{
display: inline;
}
#barre_menu_horizon li a {
text-decoration : none;
padding: 5px;
margin: 5px;
}

Modifié par sebdev (05 Dec 2011 - 18:26)

et encore un probleme : au code CSS j'ai ajouté :
#barre_menu_horizon li a:hover {
color:#000000;
text-decoration: underline;
}

et rien par contre si je mets background à la place de color, je vois bien le gros trait noir, mais moi je veux un soulignement, que faire.

donne un lien vers ton site ce sera plus pratique
Parce que là c'est crazy margin et je comprends pas ce que tu veux centrer: la ul avec les images ou la barre du menu?
Modifié par jmlapam (05 Dec 2011 - 00:10)

Voici le lien, http://tclyrois.free.fr/test donc j'ai deux soucis :

1 - les images ne sont pas centrées dans la barre violet en horizontale, j'arrive à les descendre mais pas à les monter.

2- Et ensuite lorsque je passe la souris sur les images, je n'arrive pas à faire apparaitre un surlignement.
Modifié par sebdev (05 Dec 2011 - 19:29)

1. mets

ul li {display:inline;}

Essaie ensuite avec un

vertical-align:middle; 

sur le ul li a img puisque là il s'agit de centrer l'image. Et mieux vaut donner une class à ton ul.

2. Tu veux souligner l'image? je mettrais plutôt un:

ul li a img:hover{
-webkit-box-shadow:0 0 45px white;
	-moz-box-shadow:0 0 45px white;
	box-shadow:0 0 45px white;
}

EDIT: vérifie que la hauteur des images ne dépasse pas celle de leur conteneur sinon tu pourras pas centrer verticalement.
Modifié par jmlapam (05 Dec 2011 - 00:40)

Bonjour sebdev et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Bonsoir,

Merci pour l'effet (sous-ligner), extra par contre ne fonctionne pas sous IE tous comme le last-child, par contre je n'arrive toujours pas centre les images dans la barre.

No problemo.

TU as vérifié que les images ne sont pas plus hautes (height) que leur conteneur?
Pour IE :

<!--[if lte IE 8]>
  <style type="text/css">
ul li a img:hover{
    filter:progid:DXImageTransform.Microsoft.Shadow(color='#ffffff, 
Direction=135, Strength=12);
    zoom: 1;
  } 
  </style>

Modifié par jmlapam (05 Dec 2011 - 19:25)

Merci,
fonctionne sous IE.
Pour les images, elles sont bien plus petites que le conteneur.