28173 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement texte et image

Bonjour,
Nouveau sur le site, j'ai un petit problème en CSS. J'ai beau chercher dans la FAQ et dans l'historique, je n'y trouve pas ma réponse. Faut dire que je suis nouveau et que je débute en CSS.

Voilà mon problème. Je suis en train de remodeler mon site. J'ai fait la page suivante en CSS qui servira de page modèle pour la suite : http://maquette72.free.fr/essai/modele3.php

Malgré tout, j'ai un souci. Dans la zone article, y-a-t-il un moyen en CSS pour aligner le texte à gauche et les images centrées ? Pour l'instant, je n'arrive qu'à avoir soit tout centré, soit tout à gauche. J'ai essayé en redefinissant la balise img et en essayant un text_align dessus mais sans succés.
Inutile de dire que je souhaite le faire en CSS, et ne pas mettre de balises à l'intérieur du texte. Mais est-ce possible ?

Merci d'avance pour vos réponses.
Alain.
Modifié par colossusfr (30 Mar 2006 - 22:46)
Tu étais bien parti et en très bonne voie !

Bravos ton code est propre ( ce qui est rare)

Voici une solution ( il y en a d’autre) baser sur ton code

code CSS

.article h1 {
	text-align:left;
	padding-bottom: 10px;
	font-size: 36px;
}
.article h2 {
	text-align:left;
	font-size: 18px;	
}
.article h3 {
	text-align:left;
	font-size: 14px;	
}


code HTML

<div class="article">
        <h1>F4U-5 Corsair Honduras</h1>
	<h2> FAH-609 - Maj (FAH) Henriquez - Circa 1969</h2>
	<h2> Italeri 1/72 - Decals Aztec "Latin Eagles IV"</h2>
	<p><img src="forum2_fichiers/101_0186.JPG" height="600" width="800"></p>
	<h3>Il s'agit d'un F4U-5 Corsair acheté par le Honduras aux Etas-Unis.</h3>
	<p><img src="forum2_fichiers/101_0157.JPG" height="434" width="700"></p>
</div>
Bonsoir,
.article img {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

Ne centrera que les images contenues dans .article

Il faut que IE soit en mode de rendu standard (pas en mode quirks) pour que ça prenne effet.

A+
Modifié par Alan (28 Mar 2006 - 22:44)
Merci à vous deux de m'avoir répondu et d'avoir résolu mon problème.

J'ai testé les deux solutions.
Pour l'instant, j'ai mis en oeuvre celle d'Alan mais celle de gege71 m'a permis de penser à d'autres possibilités que j'ai mis en oeuvre pour la mise en page.

Concernant celle d'Alan, j'ai un peu cherché pour savoir à quoi correspondait le mode de rendu standard.
J'ai finalement compris que cela avait un rapport avec les doctype.
Je n'ai pas tout compris, loin de là, mais j'ai rajouté ça dans mon entete : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Du coup, cela marche. J'espère que c'était cela qu'il fallait faire.

Merci encore. ALain.
Sujet clos
Aller à