Problème Dreamweaver

Fermé
Sumator - Modifié par Sumator le 14/09/2011 à 16:08
 thong - 14 sept. 2011 à 20:18
Bonjour,

Je viens d'arriver a mon travail et je dois mettre a jour un site déjà existent. Cependant j'aimerais ajouter une image sur une page, après avoir entrer mes lignes de codes(identiques a celles des autres images), mon image n'est pas aligne. Je trouve ensuite une partie du code qui devrait me permettre de régler cela, seulement il est impossible de la modifier. Voici la partie du code en question:


<!-- InstanceBegin template="/Templates/evenement.dwt" codeOutsideHTMLIsLocked="false" --> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<!-- InstanceBeginEditable name="doctitle" --> 
<title>Titre</title> 
<!-- InstanceEndEditable --> 
<style type="text/css"> 
<!-- 
#fond { 
 position:absolute; 
 width:875px; 
 height:550px; 
 background-color:#FFFFFF; 
 layer-background-color:#FFFFFF; 
 border:1px none #000000; 
 z-index:1; 
 margin-top: -275px; 
 margin-left: -437.5px; 
 left: 50%; 
 top: 50%; 
 visibility: visible; 
} 
#pad { 
 position:absolute; 
 visibility:visible; 
 left:0px; 
 top:0px; 
 width:285px; 
 height:20px; 
 background-color:#FFFFFF; 
 layer-background-color:#FFFFFF; 
 border:1px none #000000; 
 z-index:1; 
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 9pt; 
 color: #999999; 
} 
#photo00 { 
 position:absolute; 
 visibility:visible; 
 left:0px; 
 top:40px; 
 width:285px; 
 height:440px; 
 background-color:#FFFFFF; 
 layer-background-color:#FFFFFF; 
 border:1px none #000000; 
 z-index:2; 
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 8.5pt; 
 color: #999999; 
 line-height: normal; 
} 
#menu { 
 position:absolute; 
 visibility:visible; 
 left:0px; 
 top:500px; 
 width:875px; 
 height:40px; 
 background-color:#FFFFFF; 
 layer-background-color:#FFFFFF; 
 border:1px none #000000; 
 z-index:3; 
} 
#copyright { 
 position:absolute; 
 visibility:visible; 
 left:0px; 
 top:540px; 
 width:100px; 
 height:10px; 
 background-color:#FFFFFF; 
 layer-background-color:#FFFFFF; 
 border:1px none #000000; 
 z-index:4; 
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 7pt; 
 color: #999999; 
} 
#copyright2 { 
 position:absolute; 
 visibility:visible; 
 left:0px; 
 top:540px; 
 width:650px; 
 height:10px; 
 background-color:#FFFFFF; 
 layer-background-color:#FFFFFF; 
 border:1px none #000000; 
 z-index:5; 
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 7pt; 
 color: #999999; 
} 
#text { 
 position:absolute; 
 left:305px; 
 top:40px; 
 width:570px; 
 height:440px; 
 layer-background-color:#FFFFFF; 
 border:1px none #000000; 
 z-index:6; 
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 0.65em; 
 color: #999999; 
 visibility: visible; 
 background-color: #FFFFFF; 
} 
#photo01 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:7; 
 left: 0px; 
 top: 40px; 
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 8.5pt; 
 color: #999999; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo02 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:8; 
 left: 0px; 
 top: 40px; 
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 8.5pt; 
 color: #999999; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo03 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:9; 
 left: 0px; 
 top: 40px; 
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 8.5pt; 
 color: #999999; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo04 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:10; 
 left: 0px; 
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 8.5pt; 
 color: #999999; 
 top: 40px; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo05 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:11; 
 left: 0px; 
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 8.5pt; 
 color: #999999; 
 top: 40px; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo06 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:12; 
 left: 0px; 
 top: 40px; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo07 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:13; 
 left: 0px; 
 top: 40px; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo08 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:14; 
 left: 0px; 
 top: 40px; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo09 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:15; 
 left: 0px; 
 top: 40px; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo10 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:16; 
 left: 0px; 
 top: 40px; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo11 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:17; 
 left: 0px; 
 top: 40px; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo12 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:18; 
 left: 0px; 
 top: 40px; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo13 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:19; 
 left: 0px; 
 top: 40px; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo14 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:20; 
 left: 0px; 
 top: 40px; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo15 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:21; 
 left: 0px; 
 top: 40px; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo16 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:22; 
 left: 0px; 
 top: 40px; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo17 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:23; 
 left: 0px; 
 top: 40px; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo18 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:24; 
 left: 0px; 
 top: 40px; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo19 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:25; 
 left: 0px; 
 top: 40px; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
#photo20 { 
 position:absolute; 
 width:285px; 
 height:440px; 
 z-index:26; 
 left: 0px; 
 top: 40px; 
 visibility: hidden; 
 background-color: #FFFFFF; 
} 
h1 { 
 font-size: 9pt; 
 color: #666666; 
} 
a:link { 
 color: #999999; 
 text-decoration: none; 
} 
a:visited { 
 color: #999999; 
 text-decoration: none; 
} 
a:hover { 
 color: #666666; 
 text-decoration: none; 
} 
a:active { 
 color: #666666; 
 text-decoration: none; 
} 
#projet { 
 position:absolute; 
 visibility:visible; 
 left:775px; 
 top:530px; 
 width:100px; 
 height:20px; 
 z-index:27; 
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 9pt; 
 color: #999999; 
} 
#apDiv1 { 
 position:absolute; 
 visibility:visible; 
 left:246px; 
 top:448px; 
 width:108px; 
 height:100px; 
 background-color:#FFFFFF; 
 layer-background-color:#FFFFFF; 
 border:1px none #000000; 
 z-index:28; 
} 
p { 
 margin-top: 6px; 
 margin-bottom: 0px; 
} 
#projetbureau { 
 position:absolute; 
 visibility:visible; 
 left:775px; 
 top:530px; 
 width:100px; 
 height:20px; 
 background-color:#FFFFFF; 
 layer-background-color:#FFFFFF; 
 border:1px none #000000; 
 z-index:27; 
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 9pt; 
 color: #999999; 
} 
--> 
</style> 
<script type="text/javascript"> 
<!-- 
function MM_reloadPage(init) {  //reloads the window if Nav4 resized 
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { 
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} 
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); 
} 
MM_reloadPage(true); 
//--> 
</script> 
<!-- InstanceBeginEditable name="head" --> 


Comment puis-je ajouter mon image dans cette liste? Merci d'avance.

1 réponse

Up svp
0
Salut,
C'est le css(les styles graphiques de la page) et le problème des logiciels d'édition graphique de type WYSIWYG comme dreamweaver: dès qu'on veut modifier quelque chose et que l'on ne sait pas ça prendras autant de temps qu'apprendre le html et le css à la main ce qui est bien mieux, propre et juste que n'importe quel code généré automatiquement.

Vous pouvez essayer(plutôt bidouille comme solution):
_supprimer l'attribut class ou l'id de votre balise image(<img ...> et voir ce que ça donnes.
_ajoutez votre propre style css directement sur la balise plutôt qu'en appel class ou id, comme ceci par exemple:

<img src="PAS CHANGER L'ADRESSE" style="position:relative;top:-10px;right:8px;" />

Va décaler par rapport à sa position originale dans le bloc de -10px à partir du haut et 8px sur la droite. Vous pouvez indiquer une valeur pour right(décalage à partir de la droite), utiliser bottom:LA VALEUR; ou left:LA VALEUR; pour un décalage compté à partir du bas et de la gauche éventuellement.

Les unités utilisés pour le positionnement(avec leur symbole utilisé) sont le pixel(px) le quadratin(em) qui correspond à la hauteur de ligne de texte et le pourcentage(%).
Il existe d'autres méthodes de positionnement moins hasardeuse(les propriétés float CSS mais mieux vaut un code CSS que l'on connait sur les bouts des doigts car on l'as fait) ou moins respectueuse des standards (créer un tableau au cadres invisibles et changer la taille des cellules périphériques pour aligner une centrale).

A vous de voir.
0