[résolu]Alignement d'images en CSS....

....j'y arrive pas...

tout d'abord, bonjour @ toutes et @ ceux qui pourront m'aider (aux autres alsacréationautes aussi

je vous explique mon problème...

je veux afficher 3 images de dimensions différentes (respctivement 300*300px, 300*230 et 150*230 ) alignées , et centrées sur la pages quelque soit la résolution du visiteur.
j'arrive à les aligner avec "display: inline;" mais pas à ce que les marges soient proportionnelles.

et sous chaques images, je veux mettre des liens images de la même façon et idem, je n'y arrive pas. quelle que soit la solution que j'utilise, soit elle sont centrées sur la pages mais toujours sous forme de liste, soit elle sont alignées au centre sans marge ou alignées à gauche sans marge.

j'avoue que je désespère, je lacherai pas, mais je voudrais juste comprendre comment faire.

voici mon code html

<ul id="logos">
<li><img id="nyd" alt="..." title="...." src="images/logo1.png" /></li>
<!-- dimension 300*300px -->
<li><img id="gbl" alt="..." title="..." src="images/logo2.png" /></li>
<!-- 300*230px -->
<li><img id="gfx" alt="..." title="..." src="images/logo3.png" /></li>
<!-- 150*230px -->
</ul>

et en CSS je posterai ce soir car je l'ai pas en tête (me suis beaucoup servi du bouquin de raphaël) et je suis au boulot

je précise que je ne demande pas forçemment un CSS tout fait, j'arrive à centrer les images verticalement avec margin-bottom.
il y a aussi la solution du tableau qui pourrait etre plus simple, mais apres lecture de CSS2, j'avoue préférer apprendre tout de suite à respecter les standards.
merci d'avance pour votre aide où vos indice/orientation.
Modifié par MaTriXxX (09 Nov 2008 - 18:50)

peut-être un

#logos { margin-left:auto; margin-right:auto;} 

Modifié par scott54 (31 Oct 2008 - 17:14)

Bonjour et bienvenue , MaTriXxX

As-tu jeter un petit coup d'oeil vers la FAQ, on y parle des problèmes et solutions de centrage d'éléments

Une image de ce que tu souhaites réaliser ne serait pas de trop.

alors voila ce que je veux obtenir

et voila ce que j'ai

les couleurs sont juste pour avoir des repères visuels.

mon code html

<h1>Welcome</h1>
 
<p>Texte de la page.
</p>  
  
<ul id="logos">
    <li><img id="nyd" alt="logo du site du noyau dur" title="site et forum du noyau dur" src="images/logo-nyd.png" /></li>
    <li><img id="gbl" alt="logo globe lovers" title="mon carnet de voyage" src="images/globe_lovers.png" /></li>
    <li><img id="gfx" alt="logo Graf-X créations"title="créations graphiques"  src="images/logo_graf-X_creations1.png" /></li>   
</ul>
  	     
<ul id="menu">
	<li><a href="noyau_dur.html" id="btnyd"></a></li>
	<li><a href="globelovers.html" id="btgbl"></a></li>
	<li><a href="graf-x_design.html" id="btgfx"></a></li>
</ul>

et donc le css

body  {
text-align: center;
margin: 0;
padding: O; }

h1 {
font-variant: small-caps;
font-style: "Comic Sans MS", Verdana, Arial, Serif;
color: gray;
margin-bottom: O.8em;
border-bottom: 3px red solid;
background: black;
height: 80px;
line-height: 80px; }

p {
text-align: center;
color: black;
border-bottom: 2px black inset;
font-style: "Comic Sans MS", Verdana, Arial, Serif; 
 }

ul {
list-style-type: none;
margin: 0 auto;
padding:0;
position: relative;
width: 80% ;
text-align: center; }

li { 
float: left; }

#logos {
display: inline;
width: 300px;
height: 300px;
margin: 0 auto;
text-decoration: none;
text-align: center; }

#gbl {
width: 300px;
height: 230px;
margin-top: 2em; }

#gfx {
width: 150px;
height: 230px;
margin-top: 3em;
margin-left: 50px; }

#menu li {
float:left; }

#menu {
display: inline;
width: 150px;
height: 50px;
margin: 0 auto;
text-decoration: none; }

#btnyd {
background: url(images/bouton_communaute.gif) top left no-repeat; }

#btgbl  {
background: url(images/bouton_voyages.gif) top left no-repeat; }

#btgfx {
background: url(images/bouton_webdesign.gif) top left no-repeat; }

Modifié par MaTriXxX (01 Nov 2008 - 11:42)

je n'ai pas édité mon post précédent volontairement car je voudrais etre sur de bien comprendre la théorie.

si j'applique "text-align: center" sur body, on est d'accord que cette propriété s'applique aux enfants sauf indications contraire.

"ul" est un élément de type bloc, enfant de "body" et est donc centré si je lui applique un taille définie.
"li" et "img"sont également des élément de type bloc.edit: img est de type inline
"a" est de type inline.

si je crée un "div" (avec une taille fixe)englobant mes deux "ul", les listes seront donc centrées dans mon "div", lui-meme centré sur la page (body)

j'aurai donc 3 éléments freres ("h1", "p" et "div") et div sera donc parent des deux "ul", l'ensemble centré.

si je defini la propriété "diplay: inline" à tous les éléments "li", je devrai donc avoir mes deux séries "li" (3 images et 3 boutons liens) affichés de façon horizontale l'une sous l'autre.

edit : je penses avoir trouver, je test et je vois ce que ça donne
Modifié par MaTriXxX (04 Nov 2008 - 12:38)

bon j'arrive à aligner mes images, mais pas à faire apparaitre mes images liens , et conséquent l'effet hover non plus...

MaTriXxX a écrit :
bon j'arrive à aligner mes images, mais pas à faire apparaitre mes images liens , et conséquent l'effet hover non plus...

C'est le résultat que l'on peut voir sur le lien cité plus haut ?

Au passage, "l'effet hover" sur un gif animé je trouve cela assez moyen au niveau du "rendu"

Cdt,
Sylvain

oui en gros, parce que je fais des tonnes de test en local, et la conclusion à laquelle je suis arrivée c'est que visuellement c'est un peu chargé et pas super ésthétique.

je penses que je vais refaire les boutons avec juste un bouton "accéder au site" statique, et sans hover (peut etre un :active), je garderai les hover pour les menus de chaque site que je ferai plus classique pour plus d'accessibilité mais merci @ tous et aux tutos et FAQ qui m'ont permis d'arriver à cette conclusion

j'ai finalement opté pour une solution avec moins de chichi et mon problème est résolu !
encore quelque points de détail à régler mais pour l'instant c'est bon merci @ tous
je pense que j'aurais encore besoin d'aide pour la suite mais pour l'instant, je suis sur la création graphique.