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
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
A voir également:
- Comment mettre texte sur une des images
- Des images - Guide
- Mettre un texte en majuscule - Guide
- Excel cellule couleur si condition texte - Guide
- Transcription audio en texte word gratuit - Guide
- Insérer une image dans word sans bouger le texte - Guide
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
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>
<!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>
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
15 févr. 2008 à 15:38
Bonjour,
Plus simplement, place des <p> dans ton #image1> avec du texte et ça écrit par dessus.
--
Plus simplement, place des <p> dans ton #image1> avec du texte et ça écrit par dessus.
--
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
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
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
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
15 févr. 2008 à 19:55
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
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
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.
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.
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
15 févr. 2008 à 22:24
Ajoute background-color:transparent; dans le style contenu2
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
15 févr. 2008 à 22:46
ha ! mince ! là, ça ne marche pô !
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
16 févr. 2008 à 00:20
Dans le code que tu as donné
Alors, c'est ailleurs.
--
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.
--
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
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 !
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 !