High-Tech Santé Médecine Droit-Finances

Test

appareil photo

Samsung PL55

Rechercher : dans
Par :

Comment mettre texte sur une des images

Dernière réponse le 16 fév 2008 à 00:47:17 gauzhelm, le 15 fév 2008 à 03:41:18 
 Signaler ce message aux modérateurs

Bonjour,
J'ai cherché, cherché sur le web et par moi - même mais je n'y arrive pas. Je ne vois pas ce qui colle pas dans mes codes que voici : 

( codé en xhtml strict utf-8   sur Smultron ) :



<div id="image1" name="image1" ><p><img src="tele.jpg" alt="editorial"></p></div>

<div id="contenu2" name="contenu2"><p> il n’existe aucun livre-méthode sur les techniques de la peinture fluo et daniel Jègoû a eu le génie de créer deux méthodes (enfant et adulte) qu’il propose sur C.D. Ce ne sont d’ailleurs pas les seules méthodes que le Maître a créées.<br />Suite à son dernier passage Télévisuel Daniel Jègoû a reçu des milliers de demandes, ce qui prouve bien que ses méthodes étaient très attendues. Peindre de nuit dans le noir, n’est-ce pas génial ? L’effet fluo est vraiment féerique et ajouté au talent du Maître qui est très largement démontré par ses œuvres mondialement diffusées depuis longtemps.</p></div>



css externe :



div #image1 

	{ 

    margin: auto;

    width:580px; 

    height:516px;

    display: block;

    background-image: url(cours_fluo/tele.jpg);

    background-repeat: no-repeat;

    background-position: center;

    }

    div #contenu2

	{

         margin: auto;

         width:500px; 

	height: auto;

	text-align: justify;

	font-size:0.8em;

	color: #ff99ff;

	}



qui veux bien me corriger  SVP
Configuration: Mac OS X
Firefox 2.0.0.12
Meilleures réponses pour « Comment mettre texte sur une des images » dans :
 Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site.
Utilisation
Mettez les codes...
			
 Infographie VoirOn appelle infographie le domaine de l'informatique concernant la
création et la manipulation des images numériques. L'infographie regroupe de nombreux savoirs, parmi lesquels la représentation
des éléments graphiques (texte, image ou vidéo), ainsi...
			
Posez votre question Répondre
1 
croy, le 15 fév 2008 à 07:32:49
Il faut un autre div englobant le tout et en positionnement relatif :



<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://www.w3.org/YT/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

	<head>

		<title>essai</title>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<style>

			div #global

				{

				position: relative;

				width:580px;

				height:516px;

				background: yellow;

				}

			div #image1

				{

				position: absolute;

				top: 0px;

				left: 0px;

				margin: auto;

				width:580px;

				height:516px;

				//display: block;

				background-image: url(cours_fluo/tele.jpg);

				background-repeat: no-repeat;

				background-position: center;

				}

			div #contenu2

				{

				position: absolute;

				top: 0px;

				left: 0px;

				margin: auto;

				width:500px;

				height: auto;

				text-align: justify;

				font-size:0.8em;

				color: #ff99ff;

				}

		</style>

	</head>

	<body>

		<div id="global">

			<div id="image1" name="image1" >

				<p>

					<img src="images/btnNosCompetences.gif" alt="editorial">

				</p>

			</div>

			<div id="contenu2" name="contenu2">

				<p>

					blablabla

				</p>

			</div>

		</div>

	</body>

</html>
   
Répondre à croy
2 
Gihef, le 15 fév 2008 à 15:38:17
Bonjour,



Plus simplement, place des <p> dans ton #image1> avec du texte et ça écrit par dessus.



 --
   
Répondre à Gihef
3 
gauzhelm, le 15 fév 2008 à 19:11:01
Bonjour et merci beaucoup,



Il y a bien amèlioration mais, l'image et le texte se trouve maintenant à gauche de la fenêtre.



Sachant qu'il faut aussi que je place le texte sur la moitié inférieure de l'image et  que je lui suprime son fond noir.



amicalement
   
Répondre à gauzhelm
4 
croy, le 15 fév 2008 à 19:55:47
Pour positionner exactement les éléments, joue sur les paramètres top et left.
   
Répondre à croy
5 
gauzhelm, le 15 fév 2008 à 20:13:46
Merci beaucoup Croy,



Pour recentrer j'ai trouvé = j'ai rajouté  margin: auto   dans  #global  et  j'ai mis le texte à sa place avec  top.



Il me reste à trouver comment supprimer la couleur de fond du texte ?



Au cas où ?



Très grand merci.
   
Répondre à gauzhelm
6 
croy, le 15 fév 2008 à 22:24:28
Ajoute background-color:transparent; dans le style contenu2
   
Répondre à croy
7 
gauzhelm, le 15 fév 2008 à 22:46:43
Ha !  mince !    là,  ça ne marche pô !
   
Répondre à gauzhelm
8 
Gihef, le 16 fév 2008 à 00:20:34
Dans le code que tu as donné
div #image1 {
  margin: auto; 
  width:580px; 
  height:516px; 
  display: block; 
  background-image: url(cours_fluo/tele.jpg); 
  background-repeat: no-repeat; 
  background-position: center;
  } 
div #contenu2 {
  margin: auto; 
  width:500px; 
  height: auto; 
  text-align: justify; 
  font-size:0.8em; 
  color: #ff99ff;
  }
rien n'indique une couleur d'arrière-plan.



Alors, c'est ailleurs.

 



 --
   
Répondre à Gihef
9 
 gauzhelm, le 16 fév 2008 à 00:47:17
Merci  Beaucoup,  c'est effectivement ailleur = j'ai trouvé ! :



l'erreur est là :  ce   background-color: #000000;    que j'ai supprimé.





/* COMMUN */



	html



* {

  margin: 0;

  padding: 0;

  background-color: #000000;

	}



	



	body



	{



	background: #000;



	margin-left:50px;



	margin-right:50px;



	min-width:880px;



	}







Très grand merci, super site pour savoir Comment ça marche !
   
Répondre à gauzhelm

	

	
Posez votre question Répondre
Ils ont besoin de votre aide