Comment mettre texte sur une des images

Résolu/Fermé
gauzhelm Messages postés 40 Date d'inscription jeudi 13 avril 2006 Statut Membre Dernière intervention 1 septembre 2008 - 15 févr. 2008 à 03:41
gauzhelm Messages postés 40 Date d'inscription jeudi 13 avril 2006 Statut Membre Dernière intervention 1 septembre 2008 - 16 févr. 2008 à 00:47
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

9 réponses

croy Messages postés 453 Date d'inscription samedi 19 janvier 2008 Statut Membre Dernière intervention 23 octobre 2012 114
15 févr. 2008 à 07:32
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>
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 776
15 févr. 2008 à 15:38
Bonjour,

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

 --
0
gauzhelm Messages postés 40 Date d'inscription jeudi 13 avril 2006 Statut Membre Dernière intervention 1 septembre 2008 2
15 févr. 2008 à 19:11
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
0
croy Messages postés 453 Date d'inscription samedi 19 janvier 2008 Statut Membre Dernière intervention 23 octobre 2012 114
15 févr. 2008 à 19:55
Pour positionner exactement les éléments, joue sur les paramètres top et left.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
gauzhelm Messages postés 40 Date d'inscription jeudi 13 avril 2006 Statut Membre Dernière intervention 1 septembre 2008 2
15 févr. 2008 à 20:13
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.
0
croy Messages postés 453 Date d'inscription samedi 19 janvier 2008 Statut Membre Dernière intervention 23 octobre 2012 114
15 févr. 2008 à 22:24
Ajoute background-color:transparent; dans le style contenu2
0
gauzhelm Messages postés 40 Date d'inscription jeudi 13 avril 2006 Statut Membre Dernière intervention 1 septembre 2008 2
15 févr. 2008 à 22:46
ha ! mince ! là, ça ne marche pô !
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 776
16 févr. 2008 à 00:20
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.
 

 --
0
gauzhelm Messages postés 40 Date d'inscription jeudi 13 avril 2006 Statut Membre Dernière intervention 1 septembre 2008 2
16 févr. 2008 à 00:47
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 !
0