Ajouter div texte sur image sous Dreamweaver
inana
Messages postés
1124
Date d'inscription
Statut
Membre
Dernière intervention
-
tryan44 Messages postés 1288 Date d'inscription Statut Membre Dernière intervention -
tryan44 Messages postés 1288 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
j'ai réalisé une page modèle sur Dreamweaver, dans la div container il y a une image de fond qui occupe toute la place.
Par dessus, je voudrais superposer ma div de texte.
Pour le moment ma div de texte se place sous l'image, impossible de la mettre par dessus l'image ou alors si je la déplace dans le container elle se met carrément audessus de l'image et l'image en dessous mais pas l'une sur l'autre...
J'aimerais pouvoir superposer mon texte sur mon image, comment faire ? J'ai essayé des positions absolues, relative etc. dans ma CSS mais rien n'y fait :(
Merci de m'aider je suppose que c'est possible...
Merci pour votre aide :)
j'ai réalisé une page modèle sur Dreamweaver, dans la div container il y a une image de fond qui occupe toute la place.
Par dessus, je voudrais superposer ma div de texte.
Pour le moment ma div de texte se place sous l'image, impossible de la mettre par dessus l'image ou alors si je la déplace dans le container elle se met carrément audessus de l'image et l'image en dessous mais pas l'une sur l'autre...
J'aimerais pouvoir superposer mon texte sur mon image, comment faire ? J'ai essayé des positions absolues, relative etc. dans ma CSS mais rien n'y fait :(
Merci de m'aider je suppose que c'est possible...
Merci pour votre aide :)
A voir également:
- Ajouter div texte sur image sous Dreamweaver
- Extraire texte d'une image - Guide
- Image iso - Guide
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
- Insérer une image dans word sans bouger le texte - Guide
5 réponses
Question bête mais pourquoi ne pas utiliser une seul "div" pour l'image et le texte en mettant l'image en image de fond?
Bonjour mocoye
Pour le gabarit voici le code de la page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="google-site-verification" content="sudYfdpg_YNfkRcP1mtzUKcxX-5Or3LobWDOwtiIg8w" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Graffissimo</title>
<link href="../newgraffissimo.css" rel="stylesheet" type="text/css" />
<link href="../menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container"> <a href="../newexp.php"><img src="../images/fond2.jpg" width="886" height="627" usemap="#Map" border="0" /></a>
<map name="Map" id="Map">
<area shape="rect" coords="10,119,109,148" href="../newform.php" />
<area shape="rect" coords="127,107,243,136" href="../newexp.php" />
<area shape="rect" coords="252,95,408,125" href="../newoutil.php" />
<area shape="rect" coords="422,79,552,109" href="../newsavoir.php" />
<area shape="rect" coords="566,67,661,98" href="../newportfolio.php" />
<area shape="rect" coords="673,59,724,86" href="../newdevis.php" />
<area shape="rect" coords="743,53,779,77" href="../CVGraffissimo2012.pdf" target="_blank" />
<area shape="rect" coords="792,45,866,69" href="../newcontact.php" />
</map>
<div id="container">
</div>
<!-- TemplateBeginEditable name="contenu" -->
<div id="contenu">
<!-- Texte-->
sdfsdfsdfsdf</div>
<!-- TemplateEndEditable -->
<!-- fin contenu-->
<div id="pied">
<center>
<p class="pied"><span class="pied">Maison des Artistes : P699713 | siret : 499 745 115 00018
| NAF : 923A</span><a href= "CGV.pdf" style="color:#CCC; font-size: small" target="_blank"> | conditions générales de vente</a></p>
</center>
</div>
<center>
<!-- TemplateBeginEditable name="xiti" -->
<div id="xiti"><a href="http://www.xiti.com?xtor=AD-1----%5B460165%5D" title="WebAnalytics" target="_top">
<script type="text/javascript">
<!--
Xt_param = 's=460165&p=';
try {Xt_r = top.document.referrer;}
catch(e) {Xt_r = document.referrer; }
Xt_h = new Date();
Xt_i = '<img width="80" height="15" border="0" alt="" ';
Xt_i += 'src="https://logv11.xiti.com/g.xiti?fh=1&Rdt=On
Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
if(parseFloat(navigator.appVersion)>=4)
{Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Internet Audience">');
-->
</script>
<noscript>
Mesure d'audience ROI statistique webanalytics par <img width="80" height="15" src="https://logv11.xiti.com/g.xiti?fh=1&s=460165&p=&Rdt=On" alt="WebAnalytics" />
</noscript>
</a> </div><!-- fin de fond -->
<!-- TemplateEndEditable --></center></div></body>
</html>
Et pour la CSS :
@charset "utf-8";
/* CSS Document */
body {
background-color: #333;
}
#contenu {
position:absolute;
padding-top: 100px;
padding-left: 50px;
width: 786px;
height: 620px;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #D4600B;
}
#fond {
margin-top:0px;
width: 886px;
height:620px;
margin-left:auto;
margin-right:auto;
background-image:url(images/fond2.jpg);
background-position:center;
}
#pied {
padding-top:20px;
margin-bottom:15px;
top:630px;
width:886px;
text-align:center;
}
a:link {
color: #CCC;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
a:hover {
color: #39C;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
a:visited {
color: #999;
text-decoration: none;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #FFF;
background-color: #d5600c;
font-size: large;
}
p {
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-weight: bold;
font-size: medium;
}
.surligné {
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: bold;
color: #FF0;
font-size: medium;
}
.noirgras {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-style: normal;
font-weight: bold;
color: #000;
}
.pied {
color: #D6D6D6;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
}
--
Merci pour votre aide :)
Pour le gabarit voici le code de la page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="google-site-verification" content="sudYfdpg_YNfkRcP1mtzUKcxX-5Or3LobWDOwtiIg8w" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Graffissimo</title>
<link href="../newgraffissimo.css" rel="stylesheet" type="text/css" />
<link href="../menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container"> <a href="../newexp.php"><img src="../images/fond2.jpg" width="886" height="627" usemap="#Map" border="0" /></a>
<map name="Map" id="Map">
<area shape="rect" coords="10,119,109,148" href="../newform.php" />
<area shape="rect" coords="127,107,243,136" href="../newexp.php" />
<area shape="rect" coords="252,95,408,125" href="../newoutil.php" />
<area shape="rect" coords="422,79,552,109" href="../newsavoir.php" />
<area shape="rect" coords="566,67,661,98" href="../newportfolio.php" />
<area shape="rect" coords="673,59,724,86" href="../newdevis.php" />
<area shape="rect" coords="743,53,779,77" href="../CVGraffissimo2012.pdf" target="_blank" />
<area shape="rect" coords="792,45,866,69" href="../newcontact.php" />
</map>
<div id="container">
</div>
<!-- TemplateBeginEditable name="contenu" -->
<div id="contenu">
<!-- Texte-->
sdfsdfsdfsdf</div>
<!-- TemplateEndEditable -->
<!-- fin contenu-->
<div id="pied">
<center>
<p class="pied"><span class="pied">Maison des Artistes : P699713 | siret : 499 745 115 00018
| NAF : 923A</span><a href= "CGV.pdf" style="color:#CCC; font-size: small" target="_blank"> | conditions générales de vente</a></p>
</center>
</div>
<center>
<!-- TemplateBeginEditable name="xiti" -->
<div id="xiti"><a href="http://www.xiti.com?xtor=AD-1----%5B460165%5D" title="WebAnalytics" target="_top">
<script type="text/javascript">
<!--
Xt_param = 's=460165&p=';
try {Xt_r = top.document.referrer;}
catch(e) {Xt_r = document.referrer; }
Xt_h = new Date();
Xt_i = '<img width="80" height="15" border="0" alt="" ';
Xt_i += 'src="https://logv11.xiti.com/g.xiti?fh=1&Rdt=On
Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
if(parseFloat(navigator.appVersion)>=4)
{Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Internet Audience">');
-->
</script>
<noscript>
Mesure d'audience ROI statistique webanalytics par <img width="80" height="15" src="https://logv11.xiti.com/g.xiti?fh=1&s=460165&p=&Rdt=On" alt="WebAnalytics" />
</noscript>
</a> </div><!-- fin de fond -->
<!-- TemplateEndEditable --></center></div></body>
</html>
Et pour la CSS :
@charset "utf-8";
/* CSS Document */
body {
background-color: #333;
}
#contenu {
position:absolute;
padding-top: 100px;
padding-left: 50px;
width: 786px;
height: 620px;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #D4600B;
}
#fond {
margin-top:0px;
width: 886px;
height:620px;
margin-left:auto;
margin-right:auto;
background-image:url(images/fond2.jpg);
background-position:center;
}
#pied {
padding-top:20px;
margin-bottom:15px;
top:630px;
width:886px;
text-align:center;
}
a:link {
color: #CCC;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
a:hover {
color: #39C;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
a:visited {
color: #999;
text-decoration: none;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #FFF;
background-color: #d5600c;
font-size: large;
}
p {
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-weight: bold;
font-size: medium;
}
.surligné {
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: bold;
color: #FF0;
font-size: medium;
}
.noirgras {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-style: normal;
font-weight: bold;
color: #000;
}
.pied {
color: #D6D6D6;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
}
--
Merci pour votre aide :)
quand tu as placé tes div en absolue, tu as donné une valeur au z-index pour hiérarchisés leur position (premier plan - arrière plan) ??
si les c'est la div #container que tu souhaite mettre en arrière plan, pour le moment elle n'est pas designer dans la css ?
Quelle sont les div concernées ??
si les c'est la div #container que tu souhaite mettre en arrière plan, pour le moment elle n'est pas designer dans la css ?
Quelle sont les div concernées ??
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Non je ne sais pas mettre en arrière plan, premier plan :(
Je ne connais pas la formule pour ça ni comment la mettre en place dans mon code.
En effet la div #container que tu vois sur le modèle n'est pas dans ma CSS et l'autre balise concernée qui devrait se placer dessus est #contenu.
La div #pied aussi s'est déplacée elle ne se tient plus sous le container comme avant mais remonte jusqu'en haut :(((
Merci pour ton aide en tout cas je n'ai que quelques rudiments, j'ai voulu tout changer mon site qui allait jusque là et c'est tout parti en live !
Je ne connais pas la formule pour ça ni comment la mettre en place dans mon code.
En effet la div #container que tu vois sur le modèle n'est pas dans ma CSS et l'autre balise concernée qui devrait se placer dessus est #contenu.
La div #pied aussi s'est déplacée elle ne se tient plus sous le container comme avant mais remonte jusqu'en haut :(((
Merci pour ton aide en tout cas je n'ai que quelques rudiments, j'ai voulu tout changer mon site qui allait jusque là et c'est tout parti en live !