Superposer du texte sur une image

Question

Pages :

crealex

31 May 2007 à 19:53

Est-ce que c'est mieux comme ça ?

<body bgcolor="#333333" onLoad="MM_preloadImages('../medias/bommerang_r3_c2.gif','../medias/bommerang_r5_c2.gif','../medias/bommerang_r7_c2.gif','../medias/bommerang_r9_c2.gif')">
<div class="Style1" id="apDiv1">
  <p align="left" class="Style4">Contact : </p>
  <p align="left" class="Style4">Boomerang</p>
  <p align="left" class="Style3"><strong>Responsable du d&eacute;veloppement</strong><br>
    Alexis Mathieu<br>
  107 Boulevard Murat<br>
  75016 Paris<br>
  T&eacute;l. : 06 19 08 26 18</p>
  <p align="left" class="Style3">Mail. : <a href="mailto:alexis.mathieu@agenceboomerang.fr" class="Style5">alexis.mathieu@agenceboomerang.fr</a></p>
</div>

Modifié par crealex (31 May 2007 - 20:09)

fvsch

31 May 2007 à 20:04

Bonjour,

Pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance. Smiley smile

crealex

31 May 2007 à 20:42

Florent, pas de réponses… Smiley decu

fvsch

31 May 2007 à 21:39

Tu as édité ton premier message pour mettre en forme le code... mais supprimé le descriptif de ton problème. Difficile d'obtenir de l'aide dans ces conditions.

crealex a écrit :
Florent, pas de réponses…

Heu... oui, effectivement. Et donc ?

crealex

1 Jun 2007 à 02:27

Oups lol…
Voilà donc mon problème …
J'ai inséré un div au dessus de mon image mais le problème qui se pose est que le div en question ne suit pas le reste de mon site, il reste figé au même endroit.

Voilà, j'espère avoir été assez clair.

Merci pour votre aide.
Smiley cligne

crealex

1 Jun 2007 à 03:19

PS. :
j'ai oublié, je viens de créer un div avec une image dedans mais cette fois ci je voudrais créer un lien sur l'image en question qui renvoie sur une page.

Merci pour vos réponses.

Smiley cligne

crealex

2 Jun 2007 à 09:16

Pas de réponse… Smiley decu

CPascal

2 Jun 2007 à 09:26

vraiment pas beaucoup de precision. mais où est donc le css? et le reste
nous ne sommes pas voyants extra-lucide ici.

je tente une prediction ( sans boule de crystal en plus ):
si ton div reste a sa place c'est un peut-être car il est en position absolute.
Modifié par CPascal (02 Jun 2007 - 09:33)

Heyoan

2 Jun 2007 à 09:28

Salut crealex,

Désolé de te dire ça mais la façon dont tu présentes ton problème est incompréhensible Smiley biggol

Je te suggères de le reformuler clairement (en prenant tout ton temps Smiley cligne

) et de donner le maximum d'infos (ton css et le html concernés bien balisés avec des code)

A+ Smiley biggrin

Modifié par Heyoan (02 Jun 2007 - 09:28)

niuxe

Modérateur

2 Jun 2007 à 09:28

Salut,

pfiou, c'est pas très claire tout ça ! S'il te plait, réédite complètement ton sujet pour être plus explicite.

Ce que j'ai pu comprendre, tu as mi une image en fond de ton div et que tu voudrais qu'elle soit cliquable ? Ce n'est pas possible Smiley ohwell

.

fais plutôt ceci :


<p><a href="http://www.google.com" target="_blank"><img src="mon_chemin/mon_image.jpg" alt="mon_image" height="32" width="32" border="0"></a></p>

++

crealex

2 Jun 2007 à 09:30

ça marche, je vais essayer de faire mieux.
Smiley cligne

crealex

2 Jun 2007 à 09:40

</script>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:525px;
	top:273px;
	width:442px;
	height:212px;
	z-index:1;
	background-color: #FFFFFF;
}
.Style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.Style3 {
	font-size: 12px;
	color: #999999;
}
.Style4 {font-size: 14px; color: #CC0000; font-weight: bold; }
body,td,th {
	color: #999999;
}
.Style5 {
	color: #999999
}
-->
</style>
</head>
<body bgcolor="#333333" onload="MM_preloadImages('../medias/bommerang_r3_c2.gif','../medias/bommerang_r5_c2.gif','../medias/bommerang_r7_c2.gif','../medias/bommerang_r9_c2.gif')">
<div class="Style1" id="apDiv1">
  <p align="left" class="Style4">Contact : </p>
  <p align="left" class="Style4">Boomerang</p>
  <p align="left" class="Style3"><strong>Responsable du développement</strong><br>
    Alexis Mathieu<br>
  107 Boulevard Murat<br>
  75016 Paris<br>
  Tél. : 06 19 08 26 18</p>
  <p align="left" class="Style3">Mail. : <a href="mailto:alexis.mathieu@agenceboomerang.fr" class="Style5">alexis.mathieu@agenceboomerang.fr</a></p>
</div>

Est-ce que c'est mieux comme ça…
le problème qui se passe dans ce cas précis, c'est que j'ai mon div qui ne suit pas le reste de mon site. Il reste figé et malgré l'essai des différentes positions, rien ne marche.
Smiley cligne

Heyoan

2 Jun 2007 à 09:51

re-Salut,

c'est normal que ton div soit fixe puisque tu l'as défini en position absolute. Tu devrais peut-être relire ce tutoriel Smiley cligne

*Edit: et également celui-ci que je viens de voir sur un autre post
Modifié par Heyoan (02 Jun 2007 - 09:55)

crealex

3 Jun 2007 à 19:29

J'ai beau essayé, je n'arrive à rien…
Mon problème maintenant est le suivant. :
lorsque je scroll vers la gauche, le div se décentre de l'endroit où il doit rester.
Si je ne scroll pas, no problemo par contre dès que je scroll vers la gauche c'est la merde !
Malgré les tutos, je n'arrive à rien.
Merci pour votre aide

Voilà le code. :

</script>
<style type="text/css">
<!--
#apDiv1 {
	position:relative;
	top:330px;
	width:442px;
	height:212px;
	z-index:1;
	background-color: #FFFFFF;
	left: 40px;
	margin-left: auto;
	margin-right: auto;
}
.Style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.Style3 {
	font-size: 12px;
	color: #999999;
}
.Style4 {font-size: 14px; color: #CC0000; font-weight: bold; }
body,td,th {
	color: #999999;
}
.Style5 {
	color: #999999
}
-->
</style>
</head>
<body bgcolor="#333333" onload="MM_preloadImages('../medias/bommerang_r3_c2.gif','../medias/bommerang_r5_c2.gif','../medias/bommerang_r7_c2.gif','../medias/bommerang_r9_c2.gif')">
<div align="center" class="Style1" id="apDiv1">
  <p align="left" class="Style4">Contact : </p>
  <p align="left" class="Style4">Boomerang</p>
  <p align="left" class="Style3"><strong>Responsable du développement</strong><br>
    Alexis Mathieu<br>
  107 Boulevard Murat<br>
  75016 Paris<br>
  Tél. : 06 19 08 26 18</p>
  <p align="left" class="Style3">Mail. : <a href="mailto:alexis.mathieu@agenceboomerang.fr" class="Style5">alexis.mathieu@agenceboomerang.fr</a></p>
</div>

crealex

3 Jun 2007 à 19:36

Comme ça c'est mieux, je pense.
Désolé si je suis une cruche lol…
Merci pour votre aide.
Smiley cligne

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Contact de Boomerang</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!--Fireworks MX 2004 Dreamweaver MX 2004 target.  Created Fri Dec 24 19:10:43 GMT-0800 ( ) 2004-->
<script language="JavaScript" type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
#apDiv1 {
	position:relative;
	top:330px;
	width:442px;
	height:212px;
	z-index:1;
	background-color: #FFFFFF;
	left: 40px;
	margin-left: auto;
	margin-right: auto;
}
.Style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.Style3 {
	font-size: 12px;
	color: #999999;
}
.Style4 {font-size: 14px; color: #CC0000; font-weight: bold; }
body,td,th {
	color: #999999;
}
.Style5 {
	color: #999999
}
-->
</style>
</head>
<body bgcolor="#333333" onload="MM_preloadImages('../medias/bommerang_r3_c2.gif','../medias/bommerang_r5_c2.gif','../medias/bommerang_r7_c2.gif','../medias/bommerang_r9_c2.gif')">
<div align="center" class="Style1" id="apDiv1">
  <p align="left" class="Style4">Contact : </p>
  <p align="left" class="Style4">Boomerang</p>
  <p align="left" class="Style3"><strong>Responsable du développement</strong><br>
    Alexis Mathieu<br>
  107 Boulevard Murat<br>
  75016 Paris<br>
  Tél. : 06 19 08 26 18</p>
  <p align="left" class="Style3">Mail. : <a href="mailto:alexis.mathieu@agenceboomerang.fr" class="Style5">alexis.mathieu@agenceboomerang.fr</a></p>
</div>

<table width="720" border="0" align="center" cellpadding="0" cellspacing="0">
  <!-- fwtable fwsrc="bommerang.png" fwbase="bommerang.gif" fwstyle="Dreamweaver" fwdocid = "1932994967" fwnested="0" -->
  <tr>
    <td><img src="../medias/spacer.gif" width="21" height="1" border="0" alt=""></td>
    <td><img src="../medias/spacer.gif" width="112" height="1" border="0" alt=""></td>
    <td><img src="../medias/spacer.gif" width="587" height="1" border="0" alt=""></td>
    <td><img src="../medias/spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>
    
  <tr>
    <td colspan="3"><div align="center"><a href="../index.html"><img name="bommerang_r1_c1" src="../medias/bommerang_r1_c1.gif" width="720" height="69" border="0" alt=""></a></div></td>
    <td><img src="../medias/spacer.gif" width="1" height="69" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="2"><img name="bommerang_r2_c1" src="../medias/bommerang_r2_c1.gif" width="133" height="18" border="0" alt=""></td>
    <td rowspan="9"><img src="../medias/contact.gif" alt="contacts de l'agence boomerang" width="587" height="292" border="0"></td>
    <td><img src="../medias/spacer.gif" width="1" height="18" border="0" alt=""></td>
  </tr>
  <tr>
    <td rowspan="9"><img name="bommerang_r3_c1" src="../medias/bommerang_r3_c1.gif" width="21" height="313" border="0" alt=""></td>
    <td><a href="agence.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image29','','../medias/bommerang_r3_c2.gif',1)"><img src="../medias/bommerang_r3_c2_survol.gif" name="Image29" width="112" height="57" border="0"></a></td>
    <td><img src="../medias/spacer.gif" width="1" height="57" border="0" alt=""></td>
  </tr>
  <tr>
    <td><img name="bommerang_r4_c2" src="../medias/bommerang_r4_c2.gif" width="112" height="13" border="0" alt=""></td>
    <td><img src="../medias/spacer.gif" width="1" height="13" border="0" alt=""></td>
  </tr>
  <tr>
    <td><a href="domaines.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image30','','../medias/bommerang_r5_c2.gif',1)"><img src="../medias/bommerang_r5_c2_survol.gif" name="Image30" width="112" height="57" border="0"></a></td>
    <td><img src="../medias/spacer.gif" width="1" height="57" border="0" alt=""></td>
  </tr>
  <tr>
    <td><img name="bommerang_r6_c2" src="../medias/bommerang_r6_c2.gif" width="112" height="10" border="0" alt=""></td>
    <td><img src="../medias/spacer.gif" width="1" height="10" border="0" alt=""></td>
  </tr>
  <tr>
    <td><a href="references.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image31','','../medias/bommerang_r7_c2.gif',1)"><img src="../medias/bommerang_r7_c2_survol.gif" name="Image31" width="112" height="57" border="0"></a></td>
    <td><img src="../medias/spacer.gif" width="1" height="57" border="0" alt=""></td>
  </tr>
  <tr>
    <td><img name="bommerang_r8_c2" src="../medias/bommerang_r8_c2.gif" width="112" height="11" border="0" alt=""></td>
    <td><img src="../medias/spacer.gif" width="1" height="11" border="0" alt=""></td>
  </tr>
  <tr>
    <td><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image32','','../medias/bommerang_r9_c2.gif',1)"><img src="../medias/bommerang_r9_c2_survol.gif" name="Image32" width="112" height="57" border="0"></a></td>
    <td><img src="../medias/spacer.gif" width="1" height="57" border="0" alt=""></td>
  </tr>
  <tr>
    <td rowspan="2"><img name="bommerang_r10_c2" src="../medias/bommerang_r10_c2.gif" width="112" height="51" border="0" alt=""></td>
    <td><img src="../medias/spacer.gif" width="1" height="12" border="0" alt=""></td>
  </tr>
  <tr>
    <td><img name="bommerang_r11_c3" src="../medias/bommerang_r11_c3.gif" width="587" height="39" border="0" alt=""></td>
    <td><img src="../medias/spacer.gif" width="1" height="39" border="0" alt=""></td>
  </tr>
</table>
</body>
</html>

[/i][/i][/i][/i][/i][/i]

CPascal

3 Jun 2007 à 21:02

Salut,

bon pas trés glop glop mais comme on est là avec notre div toute seule au milieu de toutes ces cellules de tableau. donnons lui une amie la div#conteneur qui la contient et possede

#conteneur {
	margin-left:133px;
}

ca va empecher le div de se rabattre sur le contenu de tes 2 premieres colonnes.

sinon normal que la div bouge vu qu'elle se centre toute seule en auto.

je me demande si ça irais pas mieux si tu mettais ta div dans la cellule du tableau adéquat...... avec d'autre valeurs de CSS bien sur.

tu es en train de tenter un passage progressif aux css?

pascal

crealex

3 Jun 2007 à 22:18

Merci pascal pour ta réponse.
Effectivement je me mets aux css petit à petit.
Mais pour mon problème concernant la balise conteneur,
je ne sais pas où la mettre.
Sorry, je sais j'abuse…

CPascal

3 Jun 2007 à 22:21

autour de l'autre tous simplement

<div id="conteneur">
<div align="center" class="Style1" id="apDiv1">
.....
</div>
</div>

c'est pas la solution miracle juste un garde fou.

crealex

3 Jun 2007 à 22:35

ça me prends la tête…
je comprends rien lol
ça marche toujours pas !
Smiley decu

Mais je vais y arriver !
merci pour ton aide pascal
Smiley cligne

CPascal

3 Jun 2007 à 22:49

bien sur ca bouge encore un peu.
comme moi j'ai testé sans les images 133px ça semblait suffisant.
Tu peux peut-être encore augmenter un peu. le risque c'est que sa pourrait ressortir de l'autre coté avec une resolution de ouf ( 1900*1200 ou plus )

une autre idée qui me vient ...valable ou pas. fixer la taille du div#conteneur avec une largueur equivalente a celle du tableau width:720px. centrer le container (margin:0 auto, ou margin:330px auto 0 auto).

puis placer ta div apDiv1 a l'interieur de conteneur avec des margin et padding appropié.

ca me parait pas une mauvaise piste. mais j'espere que les autres vont t'aider aussi
Modifié par CPascal (03 Jun 2007 - 22:52)

Pages :

Sujet clos

Sémantique web et HTML

Superposer du texte sur une image