28172 sujets

CSS et mise en forme, CSS3

Centrer un text horitalement et verticalement.

bonsoir,

Je voudrais centre un text dans une images.

Le HTML


	        <footer>
			<div class="pied">
	        <p1>Copyright TC Lyrois @2012 - Tous droits réservés</p1>
			</div>
           </footer>


et le CSS

p1 {
	font-family: Arial;
	font-size: 11px;
	color: white;
	  	   	   }	   
.pied {
	background-color: #ffffff;
	background-image: url(pictures/banniere_bas_popup.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
	left: 50%;
	width : 420px;
	height : 37px;
	margin-left: -210px;
	text-align: center;
		 }
.pied p1 {
   vertical-align: middle; display: inline;
}
Bonjour,

Je n'ai pas la réponse vu que j'ai jamais essayer.

Mais pense a économiser le plus de place possible. Et ton code comporte des erreurs Smiley cligne 


background-image: url(pictures/banniere_bas_popup.jpg);
background-position: center center;
background-repeat: no-repeat;


Deviens aisément :


background: url([#red][b]'[/b][/#]pictures/banniere_bas_popup.jpg[#red][b]'[/b][/#]) center center no-repeat;


Attention tu as oublié les apostrophe dans la parenthèse de l'image.


font-family: Arial;
font-size: 11px;


Pense a mettre d'autre police au cas où, comme serif. De plus évite de mettre une taille défini pour le texte. Mais plutôt en % ou em. Et met comme pour background une super propriété:

font: 1.3em "Arial Black", Arial, Verdana, serif;


Si tu veux en apprendre un peu plus sur ces super propriété pour savoir comment elle fonctionne tu peux voir sa ici : http://www.siteduzero.com/tutoriel-3-13639-memento-des-proprietes-css.html

De plus dans ton code html la balise <p1> n'existe pas ! Je pense que tu voulais mettre <h1></h1> pour indiquer un titre important, sinon <p></p>. Smiley cligne
Modifié par azledev (07 Dec 2011 - 17:56)
Bonsoir,

Il n'y a pas besoin d'apostrophe dans le fichier CCS pour charger les images (elles se chargent bien)

P1 est bien defini dans mon fichier CSS et ceci fonctionne.

Sinon pour position mon text en hauteur j'ai utilisé la commande : line-height: faute de trouver une solution pour le centrer.
"Si vous voulez avoir différents types de paragraphes (p1, p2...), il faut qualifier avec des classes, soit <p class="p1">"

donc en css pour les styliser p.p1 et non simplement p1 ou avec un point devant référant a la classe.

Je suis sous linux est si je regarde ton site en mode texte la balise p ne sera pas mise en forme par mon navigateur il en va de même pour les personne ayant des navigateurs spéciaux pour leur handicap par exemple
Modifié par nux02160 (08 Dec 2011 - 07:53)
Sujet clos
Aller à