Comment mettre texte sur une des images
Résolu
gauzhelm
Messages postés
40
Statut
Membre
-
gauzhelm Messages postés 40 Statut Membre -
gauzhelm Messages postés 40 Statut Membre -
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
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
9 réponses
-
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> -
Bonjour,
Plus simplement, place des <p> dans ton #image1> avec du texte et ça écrit par dessus.
-- -
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 -
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 -
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. -
Ajoute background-color:transparent; dans le style contenu2
-
-
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.
-- -
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 !
