28172 sujets

CSS et mise en forme, CSS3

Bonjour,
J'ai réussi tant bien que mal à comprendre un minimum pour adapter un template gratuit à ce que je voulais en tirer, après des années d'utilisation de Frontpage et de tableaux, mais là, je cale sur une toute bête (je pense) histoire de centrage, ne maîtrisant pas encore assez la syntaxe des CSS.
Mes images se collent invariablement à gauche, alors que je veux les centrer.
Dans le layout.css, j'ai ça:
img{display:block; margin:0; padding:0; border:none;}
.justify{text-align:justify;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.nostart{list-style-type:none; margin:0; padding:0;}
.clear{clear:both;}
br.clear{clear:both; margin-top:-15px;}

a{outline:none; text-decoration:none;}

.fl_left{float:left;}
.fl_right{float:right;}

.imgl, .imgr{border:1px solid #999999; padding:5px;}
.imgl{float:left; margin:0 8px 8px 0; clear:left;}
.imgr{float:right; margin:0 0 8px 8px; clear:right;}

mais que je fasse ça:
<p><img class="center" src="histo/1925.jpg" width="488" height="216"></p>

ou ça:
<p style="text-align: center">
		<img border="0" src="histo/logov.jpg" width="130" height="184">

j'y trouve même à d'autres essais des "style="padding:5px; border:1px solid #808000; margin:5px;"...que je ne vois définis nulle part dans le css...d'ù ça vient?...aidez-moi à y voir clair, je tâtonne encore entre les class, les style et leur syntaxe entre le css et le html...
Merci de m'aider à débroussailler.
Michel

PS: c'est en me relisant que j'ai déniché les 5px, attributs de imgl, mais je ne veux pas imgl, mais img tout court...coment lui donner la propriété center?
Modifié par sugaku (04 Jul 2013 - 13:54)
il faut choisir .
ou image en display:block + margin:auto;
ou img en display par defaut (inline-block) et text-align sur le parent .
++
Excuse-moi, je débute...donc, en clair, si je garde le css tel qu'il est, comment, dans ma page, j'introduis mon image pour qu'elle puisse coller avec le display:block et ne pas récupérer les attributs de imgleft?...je ne comprends pas la différence entre les lignes de class du haut (img) et celles du bas (imgl) et ce que ça change dans la syntaxe.
Merci

PS: ok, ça y est: quand je fais juste:
<p align="center">
		<img border="0" src="histo/logov.jpg" width="130" height="184">

ça marche!
Modifié par sugaku (04 Jul 2013 - 20:11)