Comment mettre texte sur une des images

Résolu

gauzhelm Messages postés 40 Date d'inscription Statut Membre Dernière intervention -
gauzhelm Messages postés 40 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

Comment mettre texte sur une des images
Des images - Guide
Extraire texte d'une image - Guide
Comment mettre un texte en majuscule - Guide
Transcription audio en texte word gratuit - Guide
Excel cellule couleur si condition texte - Guide

9 réponses

Réponse 1 / 9

croy Messages postés 453 Date d'inscription Statut Membre Dernière intervention 114

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éponse 2 / 9

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

Bonjour,

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

--

Réponse 3 / 9

gauzhelm Messages postés 40 Date d'inscription Statut Membre Dernière intervention 2

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éponse 4 / 9

croy Messages postés 453 Date d'inscription Statut Membre Dernière intervention 114

Pour positionner exactement les éléments, joue sur les paramètres top et left.

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

Posez votre question

Réponse 5 / 9

gauzhelm Messages postés 40 Date d'inscription Statut Membre Dernière intervention 2

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éponse 6 / 9

croy Messages postés 453 Date d'inscription Statut Membre Dernière intervention 114

Ajoute background-color:transparent; dans le style contenu2

Réponse 7 / 9

gauzhelm Messages postés 40 Date d'inscription Statut Membre Dernière intervention 2

ha ! mince ! là, ça ne marche pô !

Réponse 8 / 9

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

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éponse 9 / 9

gauzhelm Messages postés 40 Date d'inscription Statut Membre Dernière intervention 2

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 !

Discussions similaires

[Word] je veux savoir comment justifier un texte

Votre réponse

Discussions similaires