Déclage à l'aperçu (dreamweaver)

Résolu
lolo2b82 -  
 rmz -
Bonjour,

Je débute sur dreamweaver cs3 et j'ai un probleme d'alignement lorsque j'insère "DIV pour élément PA"... Il est en position absolue et le texte est aligné à gauche, seulement à l'aperçu sur IE7 le texte est décalé en X et Y...

voici le code : 

<!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"><!-- InstanceBegin template="/Templates/modele.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>BIA - Accueil</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body {
	background-color: #23282a;
	background-image: url(images/fond.gif);
	background-repeat: repeat-x;
}
.Titre {
	font-size: 24px;
	color: #FFFFFF;
	font-family: "Fawn Script";
}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="CSS/Level2_Arial_Text.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Style9 {color: #FFFFFF}
body,td,th {
	color: #FFFFFF;
}
a:link {
	color: #FFFFFF;
}
a:visited {
	color: #666666;
}
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:911px;
	top:477px;
	width:375px;
	height:434px;
	z-index:1;
}
-->
</style>
<!-- InstanceEndEditable -->
<script 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>
</head>

<body onload="MM_preloadImages('images/Bouton_over_06.gif','images/Bouton_over_07.gif','images/Bouton_over_08.gif','images/Bouton_over_09.gif','images/Bouton_over_10.gif','images/Bouton_over_11.gif','images/Bouton_over_12.gif')">
<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2"><img src="images/ht_01.png" width="293" height="141" alt="Logo" /></td>
    <td width="146" rowspan="2"><img src="images/ht_02.png" width="146" height="190" alt="Logo contact" /></td>
    <td colspan="4" rowspan="2"><img src="images/ht_03.png" width="585" height="190" alt="Logo contact 2" /></td>
  </tr>
  <tr>
    <td colspan="2"><img src="images/ht_04.png" width="293" height="49" alt="Logo reflet" /></td>
  </tr>
  <tr>
    <td width="147"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Accueil','','images/Bouton_over_06.gif',1)"><img src="images/bouton_06.gif" alt="Accueil" name="Accueil" width="147" height="55" border="0" id="Accueil" /></a></td>
    <td width="146"><a href="depannage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Dépannage','','images/Bouton_over_07.gif',1)"><img src="images/bouton_07.gif" alt="Dépannage" name="Dépannage" width="146" height="55" border="0" id="Dépannage" /></a></td>
    <td width="146"><a href="internet.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Internet','','images/Bouton_over_08.gif',1)"><img src="images/bouton_08.gif" alt="Internet" name="Internet" width="146" height="55" border="0" id="Internet" /></a></td>
    <td width="146"><a href="materiel.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Matériel','','images/Bouton_over_09.gif',1)"><img src="images/bouton_09.gif" alt="Matériel" name="Matériel" width="146" height="55" border="0" id="Matériel" /></a></td>
    <td width="146"><a href="reseau.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Réseau','','images/Bouton_over_10.gif',1)"><img src="images/bouton_10.gif" alt="Réseau" name="Réseau" width="146" height="55" border="0" id="Réseau" /></a></td>
    <td width="146"><a href="formation.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Formation','','images/Bouton_over_11.gif',1)"><img src="images/bouton_11.gif" alt="Formation" name="Formation" width="146" height="55" border="0" id="Formation" /></a></td>
    <td width="147"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/Bouton_over_12.gif',1)"><img src="images/bouton_12.gif" alt="Contact" name="Contact" width="147" height="55" border="0" id="Contact" /></a></td>
  </tr>
  <tr bgcolor="#23272a">
    <td height="511" colspan="7" valign="top"><!-- InstanceBeginEditable name="corps" -->
      <div id="apDiv1">
        <div align="left">c'est là que ça marche plus !!</div>
      </div>
      <p> </p>
      <p align="center" class="Style10"><span class="Style7"><img src="images/probleme.png" alt="un problème avec votre ordinateur ?" width="448" height="232" /></span></p>
      <p align="center" class="Style7"> </p>
      <p align="center" class="Style7"> </p>
      <p align="center" class="Style7"> </p>
      <p align="center" class="Style7"> </p>
      <p align="center" class="Style7"> </p>
      <p align="center" class="Style7"> </p>
      <p align="center" class="Style7"> </p>
      <p align="center" class="Style7"> </p>
      <p align="center" class="Style7"> </p>
      <p align="center" class="Style7"> </p>
      <p align="center" class="Style7"> </p>
    <!-- InstanceEndEditable --></td>
  </tr>
  <tr bgcolor="#23272a">
    <td height="20" colspan="7"><p align="center" class="Style9"><img src="images/trait.gif" alt="trait" width="1024" height="10" /> <a href="index.html">Accueil</a> - Infos légales - <a href="contact.html">Contact</a></p>    </td>
  </tr>
</table>
</body>
<!-- InstanceEnd --></html>

5 réponses

Réponse 1 / 5
ckikiahdisa Messages postés 41 Date d'inscription   Statut Membre Dernière intervention   2
 
je trouve pas ton div element PA, faudrais le mettre en gras.
sinon a tu mis le padding et margin à 0px ?
0
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
C'est vrai, il est un peu noyé dans le code. Mais
#apDiv1 {
	position:absolute;
	left:911px;
	top:477px;
	width:375px;
	height:434px;
	z-index:1;


et

      <div id="apDiv1">
        <div align="left">c'est là que ça marche plus !!</div>
      </div>

--
0
Réponse 2 / 5
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
Bonjour,

Ce qui serait intéressant de savoir, c'est en quoi “le texte est décalé” ?
Par rapport à quoi “le texte est décalé” ?
Avec un positionnement comme ça, forcément, c'est “décalé”.

Sais-tu comment on se sert de l'“absolute” ?

--
0
lolo2b82
 
je ne connais pas grand chose à dreamweaver ni à la programmation web :-(

Ce que je recherche avec cette fonction de dreamweaver (si c'est celle là qu'il faut que j'utilise), c'est de travailler un peu comme sur word avec l'insertion de zone de texte et pouvoir ainsi placer mon texte exactement où je le souhaite...
0
Réponse 3 / 5
ckikiahdisa Messages postés 41 Date d'inscription   Statut Membre Dernière intervention   2
 
pour commencer enleve ton div align left, ca ne sert a rien puisque la position de ton block Div est réalisé grace a ton css (absolute..)
en plus, tu a mis 2 block "Div" inutilement.

par contre essaye de rajouter dans ton css :

margin:0px;
padding:0px;

cela permettra d'enlever les marges interieurs et exterieusr au block DIV qui sont mis automatiquement.
0
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
Les <div> n'ont pas de marges par défaut.

Compare
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body {
      background-color: #b0c4de;
      }
    .conteneur {
      margin: 0;
      padding: 0;
      width: 560px;
      height: 200px;
      border : 1px dotted #f0ffff;
      }
    </style>
</head>
<body>
  <div class="conteneur"></div>
  <div class="conteneur"></div>
  <div class="conteneur"></div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body {
      background-color: #b0c4de;
      }
    .conteneur {
/*      margin: 0;
      padding: 0;*/
      width: 560px;
      height: 200px;
      border : 1px dotted #f0ffff;
      }
    </style>
</head>
<body>
  <div class="conteneur"></div>
  <div class="conteneur"></div>
  <div class="conteneur"></div>
</body>
</html>

--
0
lolo2b82 > Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention  
 
J'ai utilisé ça pour mon graphisme, c'est un tableau en faite... je ne peut pas bouger les cadres. Désolé pour ma méthode qui ne doit pas être très digne d'un webmaster lol...
0
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779 > lolo2b82
 
Ne te pique pas.
Nous avons compris que tu débutes.
Cette intervention ne s'adresse pas à toi. Elle répond simplement à ckikiahdisa pour rectifier une erreur.

Et nous avons vu que c'est un tableau (-;

--
0
Réponse 4 / 5
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
… Suite du #6

Avant de continuer, réunis tes styles.
Supprime
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--

Pour voir ce qui se passe sur ta page, modifie temporairement tes styles
#apDiv1 {
	position:absolute;
	left:0;
	top:0;
	width:375px;
	height:434px;
	z-index:1;
	border : 1px dashed #f00;
  }
#apDiv1 div {
	border : 1px dotted #ff0;
  }
td {
	border : 1px solid #fff;;
  }
Ça te premettras de voir ce que tu définis.

Tu ne t'expliques pas clairement, mais on peut supposer que tu voudrais que ton bloc reste dans le tableau, et même, dans cette cellule précise du tableau, tout en étant positionné précisément.

Le positionnement en “absolute” permet de faire ça.
Mais, il faut prendre quelques précautions.
Un bloc positionné en absolute se place en fonction de son 1er bloc parent positionné en “relative” (hé, c'est comme ça).
Dans ton contexte, ce 1er bloc est la page.
Ta <div> se place donc en fonction du coin haut gauche de la page (tu as dû le voir en changeant les 0).
Et donc, si tu veux placer ton bloc précisément dans la cellule, il faut que tu ajoutes à l'intérieur une <div> positionnées en “relative” avec une autre dedans, elle en “absolute”.
Essaye
    <td height="511" colspan="7" valign="top"><!-- InstanceBeginEditable name="corps" -->

      <div style="position:relative;">
        <div id="apDiv1">c'est là que ça marche plus !!</div>
      </div>

      <p> </p>


++
Un exemple qui compare 2 manières de faire.

--
0
lolo2b82
 
j'ai compris le pb ;-)

le text se place en absolu par rapport au point en haut à gauche de la page, alors que mon tableau se centre au milieu de la page et donc en fonction de la taille de la page ( de la résolution ) le tableau est plus ou moins loin du point haut gauche... Je c pas si je me fais comprendre lol...

Pour résoudre la chose faudrait que mon texte soit en absolu par rapport au coin haut gauche de ma cellule de tableau... mais comment faire ???

En tt cas merci pour ton aide ;-)
0

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

Posez votre question
Réponse 5 / 5
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
Tu comprends.

Mais, relis.

“Et donc, si tu veux placer ton bloc précisément dans la cellule, il faut que tu ajoutes à l'intérieur une <div> positionnées en “relative” (1) avec une autre dedans, elle en “absolute” (2).
Essaye”
    <td height="511" colspan="7" valign="top"><!-- InstanceBeginEditable name="corps" -->

/* (1) */      <div style="position:relative;">
/* (2) */        <div id="apDiv1">c'est là que ça marche plus !!</div>
      </div>

      <p> </p>
avec
#apDiv1 {
	position:absolute;

--
0
lolo2b82
 
ça marche !!

merci bcp.
0
rmz > lolo2b82
 
bonjour lolo2b82,

excuse moi, j'ai la meme problème que toi mais je n'arrive pas à trouver la sorti, si tu peux me donner un coup de mais ce serai très gentil de ta part, si tu me montre le code qui fonctionne peut tetre que je pourrai trouver une sorti,
merci d'avance
0

Discussions similaires

Word - aperçu avant impression différent du document de base
Charley_5989 -
m@rina -

3 réponses
Prévisualisation des images/photos en miniature sous Windows 11
Pitomba -
jpel60000 -

23 réponses
impression différente de l'affichage
pantoun -
C-Claire -

3 réponses
affichage illustrator
clair -
madmyke -

1 réponse
problème d'aperçu
quadrette -
quadrette -

4 réponses