Version complète: sur le forum Webmaster Hub : problème affichage firefox
Webmaster Hub > Création et exploitation de Sites Internet > Les fondations d'un site > Le Webdesign
pylane22
vendredi 20 juin 2008 à 09:33
bonjour,

Je suis en train de créer un site internet pour une structure, et j'ai choisis le logiciel dreamweaver 8 pour le faire.
Jusqu'à présent, pas de soucis, tout marchait très bien.
J'utilise la technique des calques imbriqués pour le créer, pour un centrage plus "facile" du calque "père".

Mais le problème est que je viens de m'appercevoir que sous FIREFOX, l'affichage de ma page change complètement !
Tous les calques sont les uns en dessous des autres, sur la gauche, mon fond de page a la couleur du calque père (blanc) et aucune trace de jaune de mon fond de page habituel, créer sous dreamweaver...
Sous IE, il n'y a aucun soucis, tout marche, tout s'affiche comme sur dreamweaver.

Comment faire ??

Cordialement,

Elodie.
captain_torche
vendredi 20 juin 2008 à 09:43
Nous sommes actuellement en panne de boule de cristal; tu pourrais nous donner un lien, qu'on puisse constater ? wink.gif
pylane22
vendredi 20 juin 2008 à 09:53
rolleyes.gif désolé, c'est vrai que si vous ne voyez pas.... !!!
le site n'est pas encore hébergé, je suis encore en construction, donc c'est juste quand je fais le test F12 sous dreamweaver pour le voir sous firefox que sa bug..

vous voulez une copie d'écran?
captain_torche
vendredi 20 juin 2008 à 10:01
Une capture ne suffirait pas, on ne pourrait pas voir la structure.
Tu ne peux pas héberger une maquette sur un serveur temporaire ?
pylane22
vendredi 20 juin 2008 à 10:10
je vais voir tout de suite wink.gif

comment fait-on pour héberger sur un serveur temporaire.. ??!!
et oui, je suis une pauvre petite débutante... smile.gif

ou bien, j'envoi le code de la page ?
Dan
vendredi 20 juin 2008 à 10:48
Si ton code n'est pas trop long, tu peux le copier en l'entourant d'une balise CODEBOX wink.gif
pylane22
vendredi 20 juin 2008 à 10:51
Voici le code (je ne sais pas ce qu'est une balise CODEBOX..) :



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">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<title>Page d'accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="mm_health_nutr.css" type="text/css" />
<script language="JavaScript" type="text/javascript">
<!--
//--------------- LOCALIZEABLE GLOBALS---------------
var d=new Date();
monthname= new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
//--------------- END LOCALIZEABLE ---------------

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_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_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">
<!--
body (
background-color: #FFFFFF;
background-image: url();
background-repeat: repeat;
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 304px;
top: 8px;
}
#Layer2 {
position:absolute;
width:660px;
height:106px;
z-index:2;
left: 497px;
top: 137px;
}
#Layer3 {
position:absolute;
width:200px;
height:115px;
z-index:3;
left: 304px;
top: 7px;
}
#Layer4 {
position:absolute;
width:102px;
height:102px;
z-index:3;
left: 3px;
top: 23px;
}
#Layer5 {
position:absolute;
width:200px;
height:79px;
z-index:4;
left: 152px;
top: 226px;
background-color: #FFFFFF;
}
#Layer6 {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 364px;
top: 226px;
background-color: #FFFFFF;
}
#Layer7 {
position:absolute;
width:172px;
height:165px;
z-index:6;
left: 364px;
top: 521px;
}
#Layer8 {
position:absolute;
width:86px;
height:92px;
z-index:7;
left: 586px;
top: 225px;
background-color: #FFFFFF;
}
#Layer9 {
position:absolute;
width:784px;
height:97px;
z-index:8;
left: 6px;
top: 30px;
}
#Layer10 {
position:absolute;
width:222px;
height:86px;
z-index:1;
left: -91px;
top: 126px;
}
#Layer11 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 6px;
top: 392px;
}
#Layer12 {
position:absolute;
width:259px;
height:109px;
z-index:9;
left: 355px;
top: 12px;
}
#Layer13 {
position:absolute;
width:200px;
height:263px;
z-index:10;
left: 21px;
top: 180px;
}
#Layer14 {
position:absolute;
width:200px;
height:115px;
z-index:11;
left: 871px;
top: 207px;
}
#Layer15 {
position:absolute;
width:200px;
height:115px;
z-index:11;
left: 503px;
top: 169px;
}
#Layer16 {
position:absolute;
width:471px;
height:130px;
z-index:1;
left: 486px;
top: 172px;
}
#Layer17 {
position:absolute;
width:85px;
height:115px;
z-index:11;
left: 77px;
top: 379px;
}
#Layer18 {
position:absolute;
width:727px;
height:49px;
z-index:12;
left: 376px;
top: 294px;
}
#Layer19 {
position:absolute;
width:561px;
height:115px;
z-index:13;
left: 133px;
top: 40px;
}
#Layer20 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 864px;
top: 84px;
}
#Layer21 {
position:absolute;
width:200px;
height:115px;
z-index:14;
left: 13px;
top: 252px;
}
#Layer22 {
position:absolute;
width:78px;
height:115px;
z-index:15;
left: 1005px;
top: 61px;
}
#Layer23 {
position:absolute;
width:733px;
height:48px;
z-index:16;
left: 95px;
top: 450px;
}
#Layer24 {
position:absolute;
width:24px;
height:115px;
z-index:17;
left: 343px;
top: 43px;
}
#Layer25 {
position:absolute;
width:31px;
height:115px;
z-index:18;
left: 524px;
top: 36px;
}
#Layer26 {
position:absolute;
width:25px;
height:129px;
z-index:19;
left: 679px;
top: 37px;
}
#Layer27 {
position:absolute;
width:25px;
height:115px;
z-index:20;
left: 846px;
top: 35px;
}
#Layer28 {
position:absolute;
width:26px;
height:115px;
z-index:21;
left: 940px;
top: 30px;
}
#Layer29 {
position:absolute;
width:200px;
height:104px;
z-index:1;
left: -162px;
top: 8px;
}
#Layer30 {
position:absolute;
width:752px;
height:170px;
z-index:22;
left: 5px;
top: -13px;
}
#Layer31 {
position:absolute;
width:88px;
height:81px;
z-index:23;
left: 875px;
top: 112px;
}
#Layer32 {
position:absolute;
width:511px;
height:45px;
z-index:24;
left: 182px;
top: -5px;
}
#Layer33 {
position:absolute;
width:497px;
height:51px;
z-index:25;
left: 126px;
top: 112px;
}
#Layer34 {
position:absolute;
width:22px;
height:122px;
z-index:26;
left: 338px;
top: 34px;
}
#Layer35 {
position:absolute;
width:25px;
height:115px;
z-index:1;
left: 181px;
top: 2px;
}
#Layer36 {
position:absolute;
width:22px;
height:115px;
z-index:27;
left: 674px;
top: 38px;
}
#Layer37 {
position:absolute;
width:28px;
height:115px;
z-index:28;
left: 841px;
top: 38px;
}
#Layer38 {
position:absolute;
width:30px;
height:115px;
z-index:29;
left: 731px;
top: 26px;
}
#Layer39 {
position:absolute;
width:200px;
height:115px;
z-index:30;
top: 236px;
left: 13px;
}
#Layer40 {
position:absolute;
width:200px;
height:115px;
z-index:30;
left: 770px;
top: 278px;
}
#Layer41 {
position:absolute;
width:200px;
height:56px;
z-index:30;
left: 592px;
top: 430px;
background-color: #FFFFFF;
}
#Layer42 {
position:absolute;
width:158px;
height:115px;
z-index:31;
top: 148px;
left: -9px;
}
#Layer43 {
position:absolute;
width:200px;
height:115px;
z-index:32;
left: -3px;
top: 380px;
}
#Layer44 {
position:absolute;
width:200px;
height:67px;
z-index:33;
left: 140px;
top: 140px;
}
#Layer45 {
position:absolute;
width:138px;
height:53px;
z-index:34;
left: 185px;
top: 150px;
}
#Layer46 {
position:absolute;
width:141px;
height:57px;
z-index:35;
left: 313px;
top: 151px;
}
#Layer47 {
position:absolute;
width:118px;
height:55px;
z-index:36;
left: 570px;
top: 151px;
}
#Layer48 {
position:absolute;
width:138px;
height:43px;
z-index:37;
left: 441px;
top: 152px;
}
#Layer49 {
position:absolute;
width:200px;
height:115px;
z-index:38;
}
body {
background-color: #FFFF00;
background-image: url();
}
#père {
position:absolute;
left:67px;
top:-1px;
width:857px;
height:1490px;
z-index:34;
background-color: #FFFFFF;
}
#Layer50 {
position:absolute;
left:102px;
top:4px;
width:850px;
height:348px;
z-index:1;
}
#fils {
position:absolute;
width:200px;
height:115px;
z-index:35;
left: 139px;
top: 84px;
}
#Layer51 {
position:absolute;
width:775px;
height:115px;
z-index:1;
left: 145px;
top: -1px;
}
#Layer52 {
position:absolute;
width:318px;
height:115px;
z-index:2;
left: 732px;
top: 245px;
}
#Layer53 {
position:absolute;
width:200px;
height:115px;
z-index:35;
left: 144px;
top: 238px;
}
#Layer54 {
position:absolute;
width:200px;
height:115px;
z-index:35;
}
#Layer55 {
position:absolute;
width:162px;
height:87px;
z-index:3;
left: 17px;
top: 7px;
}
#Layer56 {
position:absolute;
width:795px;
height:62px;
z-index:4;
left: 192px;
top: -2px;
}
#Layer57 {
position:absolute;
width:174px;
height:415px;
z-index:5;
left: 2px;
top: 171px;
background-color: #CCFFFF;
}
#Layer58 {
position:absolute;
width:169px;
height:115px;
z-index:1;
left: -13px;
top: 1px;
}
#Layer59 {
position:absolute;
width:173px;
height:115px;
z-index:2;
left: -4px;
top: 126px;
}
#Layer60 {
position:absolute;
width:200px;
height:115px;
z-index:6;
left: 510px;
top: 36px;
}
#Layer61 {
position:absolute;
width:104px;
height:82px;
z-index:7;
left: 874px;
top: 56px;
}
#Layer62 {
position:absolute;
width:918px;
height:34px;
z-index:5;
left: 5px;
top: 0px;
background-color: #99FFCC;
}
#Layer63 {
position:absolute;
width:200px;
height:115px;
z-index:8;
}
#Layer64 {
position:absolute;
width:200px;
height:115px;
z-index:9;
top: 31px;
left: -18px;
}
#Layer65 {
position:absolute;
width:200px;
height:115px;
z-index:10;
left: 865px;
top: 296px;
}
#Layer66 {
position:absolute;
width:200px;
height:172px;
z-index:11;
top: 208px;
left: 350px;
}
#Layer67 {
position:absolute;
width:147px;
height:76px;
z-index:1;
left: 848px;
top: 321px;
}
#Layer68 {
position:absolute;
width:180px;
height:115px;
z-index:35;
left: 906px;
top: 95px;
}
#Layer69 {
position:absolute;
width:200px;
height:146px;
z-index:12;
left: 919px;
top: 198px;
}
#Layer70 {
position:absolute;
width:200px;
height:115px;
z-index:12;
}
#Layer71 {
position:absolute;
width:699px;
height:104px;
z-index:6;
left: 298px;
top: 278px;
}
#Layer72 {
position:absolute;
width:924px;
height:115px;
z-index:1;
left: -29px;
top: 8px;
}
#Layer73 {
position:absolute;
width:200px;
height:115px;
z-index:7;
left: 559px;
top: 185px;
}
#Layer74 {
position:absolute;
width:200px;
height:115px;
z-index:8;
left: 752px;
top: 4px;
}
#Layer75 {
position:absolute;
width:200px;
height:115px;
z-index:9;
left: 533px;
top: 182px;
}
#Layer76 {
position:absolute;
width:90px;
height:83px;
z-index:10;
left: 653px;
top: 262px;
}
#Layer77 {
position:absolute;
width:200px;
height:41px;
z-index:11;
left: 1px;
top: 11px;
}
#Layer78 {
position:absolute;
width:200px;
height:115px;
z-index:12;
left: 323px;
top: 250px;
}
#Layer79 {
position:absolute;
width:117px;
height:68px;
z-index:13;
left: 286px;
top: 334px;
}
#Layer80 {
position:absolute;
width:701px;
height:33px;
z-index:14;
left: 156px;
background-color: #FFFF00;
}
#Layer81 {
position:absolute;
width:614px;
height:117px;
z-index:1;
left: 2px;
top: -235px;
}
#Layer82 {
position:absolute;
width:200px;
height:115px;
z-index:15;
left: 1px;
top: 1px;
}
#Layer83 {
position:absolute;
width:200px;
height:68px;
z-index:16;
left: 485px;
top: 199px;
}
#Layer84 {
position:absolute;
width:119px;
height:21px;
z-index:17;
left: 444px;
top: 208px;
}
#Layer85 {
position:absolute;
width:109px;
height:8px;
z-index:18;
left: 408px;
top: 259px;
}
#Layer86 {
position:absolute;
width:141px;
height:21px;
z-index:19;
left: 613px;
top: 222px;
}
#Layer87 {
position:absolute;
width:200px;
height:3px;
z-index:20;
left: 320px;
top: 219px;
}
#Layer88 {
position:absolute;
width:50px;
height:49px;
z-index:21;
left: 20px;
top: 212px;
}
#Layer89 {
position:absolute;
width:177px;
height:417px;
z-index:21;
left: 8px;
top: 210px;
}
#Layer90 {
position:absolute;
width:200px;
height:80px;
z-index:22;
left: -20px;
top: 104px;
}
#Layer91 {
position:absolute;
width:200px;
height:11px;
z-index:23;
left: 413px;
top: 337px;
}
#Layer92 {
position:absolute;
width:200px;
height:26px;
z-index:24;
left: 511px;
top: 277px;
}
#Layer93 {
position:absolute;
width:200px;
height:23px;
z-index:25;
left: 552px;
top: 364px;
}
#Layer94 {
position:absolute;
width:141px;
height:37px;
z-index:26;
left: 709px;
top: 319px;
}
#Layer95 {
position:absolute;
width:867px;
height:40px;
z-index:27;
left: -13px;
top: 102px;
}
#Layer96 {
position:absolute;
width:200px;
height:4px;
z-index:27;
left: 76px;
top: -22px;
}
#Layer97 {
position:absolute;
width:200px;
height:43px;
z-index:28;
left: 254px;
top: 221px;
}
#Layer98 {
position:absolute;
width:200px;
height:56px;
z-index:29;
left: 0px;
top: 111px;
}
#Layer99 {
position:absolute;
width:200px;
height:138px;
z-index:30;
left: 681px;
top: 171px;
}
#Layer100 {
position:absolute;
width:49px;
height:58px;
z-index:31;
left: 3px;
top: 0px;
}
#Layer101 {
position:absolute;
width:46px;
height:33px;
z-index:32;
left: 180px;
top: 125px;
}
#Layer102 {
position:absolute;
width:33px;
height:26px;
z-index:33;
left: 359px;
top: 125px;
}
#Layer103 {
position:absolute;
width:33px;
height:35px;
z-index:34;
left: 529px;
top: 124px;
}
#Layer104 {
position:absolute;
width:200px;
height:115px;
z-index:35;
left: 358px;
top: 201px;
}
#Layer105 {
position:absolute;
width:45px;
height:43px;
z-index:1;
}
#Layer106 {
position:absolute;
width:43px;
height:35px;
z-index:35;
left: 677px;
top: 124px;
}
#Layer107 {
position:absolute;
width:104px;
height:24px;
z-index:36;
left: 234px;
top: 127px;
}
.Style3 {
font-size: 12px;
font-weight: bold;
}
#Layer108 {
position:absolute;
width:101px;
height:21px;
z-index:37;
left: 471px;
top: 132px;
}
#Layer109 {
position:absolute;
width:79px;
height:22px;
z-index:38;
left: 577px;
top: 129px;
}
#Layer110 {
position:absolute;
width:103px;
height:22px;
z-index:39;
left: 728px;
top: 132px;
}
#Layer111 {
position:absolute;
width:152px;
height:155px;
z-index:40;
left: 73px;
top: 176px;
visibility: visible;
}
#Layer112 {
position:absolute;
width:98px;
height:99px;
z-index:41;
left: 18px;
top: 195px;
}
#Layer113 {
position:absolute;
width:200px;
height:68px;
z-index:42;
left: -1px;
top: 1413px;
}
#Layer114 {
position:absolute;
width:200px;
height:54px;
z-index:43;
left: 291px;
top: 1413px;
}
#Layer115 {
position:absolute;
width:200px;
height:57px;
z-index:44;
left: 556px;
top: 1413px;
}
#Layer116 {
position:absolute;
width:200px;
height:18px;
z-index:45;
left: 342px;
top: 1454px;
}
.Style4 {
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
}
#Layer117 {
position:absolute;
width:164px;
height:115px;
z-index:46;
left: 10px;
top: 354px;
}
#Layer118 {
position:absolute;
width:96px;
height:35px;
z-index:47;
left: 1px;
top: 365px;
}
#Layer119 {
position:absolute;
width:149px;
height:53px;
z-index:48;
left: -48px;
top: 411px;
}
#Layer120 {
position:absolute;
width:202px;
height:45px;
z-index:49;
left: -2px;
top: 457px;
}
#Layer121 {
position:absolute;
width:200px;
height:19px;
z-index:50;
left: -49px;
top: 506px;
}
#Layer122 {
position:absolute;
width:200px;
height:15px;
z-index:51;
left: -58px;
top: 547px;
}
#Layer123 {
position:absolute;
width:200px;
height:29px;
z-index:52;
left: -49px;
top: 589px;
}
#Layer124 {
position:absolute;
width:119px;
height:115px;
z-index:35;
left: 9px;
top: 676px;
}
#Layer125 {
position:absolute;
width:96px;
height:19px;
z-index:35;
left: 431px;
top: 591px;
}
#Layer126 {
position:absolute;
width:200px;
height:43px;
z-index:36;
left: 10px;
top: 687px;
}
.Style10 {
font-family: Arial;
font-weight: bold;
color: #FFFFFF;
}
#Layer127 {
position:absolute;
width:232px;
height:21px;
z-index:35;
left: 233px;
top: 186px;
}
.Style11 {
font-family: Arial;
font-size: 11px;
}
#Layer128 {
position:absolute;
width:200px;
height:115px;
z-index:35;
left: 365px;
top: 276px;
}
#Layer129 {
position:absolute;
width:564px;
height:71px;
z-index:35;
left: 253px;
top: 517px;
}
.Style13 {font-family: Arial; font-size: 12px; }
#Layer130 {
position:absolute;
width:49px;
height:45px;
z-index:35;
left: 244px;
top: 218px;
}
#Layer131 {
position:absolute;
width:132px;
height:27px;
z-index:35;
left: 309px;
top: 228px;
}
.Style14 {
font-size: 20px;
font-family: Arial;
color: #CC0000;
font-weight: bold;
}
#Layer132 {
position:absolute;
width:310px;
height:115px;
z-index:35;
left: 362px;
top: 655px;
}
#Layer133 {
position:absolute;
width:56px;
height:44px;
z-index:35;
left: 242px;
top: 601px;
}
#Layer134 {
position:absolute;
width:233px;
height:31px;
z-index:35;
left: 305px;
top: 610px;
}
#Layer135 {
position:absolute;
width:561px;
height:32px;
z-index:35;
left: 259px;
top: 887px;
}
#Layer136 {
position:absolute;
width:51px;
height:48px;
z-index:35;
left: 246px;
top: 965px;
}
#Layer137 {
position:absolute;
width:200px;
height:24px;
z-index:35;
left: 313px;
top: 975px;
}
#Layer138 {
position:absolute;
width:44px;
height:38px;
z-index:35;
left: 554px;
top: 966px;
}
#Layer139 {
position:absolute;
width:200px;
height:6px;
z-index:35;
left: 620px;
top: 976px;
}
#Layer140 {
position:absolute;
width:192px;
height:35px;
z-index:35;
left: 637px;
top: 1014px;
}
#Layer141 {
position:absolute;
width:107px;
height:43px;
z-index:35;
left: 349px;
top: 1010px;
}
#Layer142 {
position:absolute;
width:176px;
height:22px;
z-index:35;
left: 636px;
top: 1074px;
}
#Layer143 {
position:absolute;
width:200px;
height:11px;
z-index:35;
left: 635px;
top: 1100px;
}
#Layer144 {
position:absolute;
width:200px;
height:19px;
z-index:35;
left: 636px;
top: 1119px;
}
#Layer145 {
position:absolute;
width:200px;
height:84px;
z-index:35;
left: 636px;
top: 1142px;
}
#Layer146 {
position:absolute;
width:200px;
height:133px;
z-index:35;
left: 318px;
top: 1071px;
}
.Style17 {
font-family: Arial;
font-size: 12px;
}
.Style18 {font-size: 12px}
.Style20 {
font-size: 16px;
font-weight: bold;
}
.Style21 {font-size: 16px; font-weight: bold; font-family: Arial; }
#Layer147 {
position:absolute;
width:50px;
height:47px;
z-index:35;
left: 263px;
top: 1107px;
}
#Layer148 {
position:absolute;
width:55px;
height:43px;
z-index:35;
left: 262px;
top: 1194px;
}
#Layer149 {
position:absolute;
width:36px;
height:37px;
z-index:35;
left: 263px;
top: 1268px;
}
#Layer150 {
position:absolute;
width:212px;
height:243px;
z-index:34;
left: 617px;
top: 1014px;
background-color: #CCCCCC;
}
#Layer151 {
position:absolute;
width:200px;
height:115px;
z-index:35;
left: 498px;
top: 1254px;
}
#Layer152 {
position:absolute;
width:200px;
height:115px;
z-index:35;
left: 611px;
top: 1259px;
}
#Layer153 {
position:absolute;
width:123px;
height:38px;
z-index:36;
left: 684px;
top: 1294px;
}
.Style22 {font-size: 14px}
#Layer154 {
position:absolute;
width:200px;
height:1307px;
z-index:35;
left: -2px;
top: 164px;
}
#Layer155 {
position:absolute;
width:200px;
height:115px;
z-index:35;
left: 119px;
top: 577px;
}
#Layer156 {
position:absolute;
width:153px;
height:115px;
z-index:40;
left: 15px;
top: 189px;
}
#Layer157 {
position:absolute;
width:125px;
height:139px;
z-index:40;
left: 6px;
top: 163px;
visibility: inherit;
}
#Layer158 {
position:absolute;
width:145px;
height:119px;
z-index:50;
left: 19px;
top: 194px;
visibility: inherit;
}
#Layer159 {
position:absolute;
width:167px;
height:60px;
z-index:40;
left: 146px;
top: 117px;
}
#Layer160 {
position:absolute;
width:200px;
height:87px;
z-index:35;
left: 687px;
top: 97px;
}
#Layer161 {
position:absolute;
width:200px;
height:73px;
z-index:35;
left: 515px;
top: 97px;
}
#Layer162 {
position:absolute;
width:200px;
height:75px;
z-index:35;
left: 369px;
top: 97px;
}
#Layer163 {
position:absolute;
width:200px;
height:69px;
z-index:35;
left: 174px;
top: 97px;
}
#Layer164 {
position:absolute;
width:200px;
height:115px;
z-index:35;
left: 241px;
top: 178px;
}
#Layer165 {
position:absolute;
width:200px;
height:115px;
z-index:35;
left: 149px;
top: 215px;
}



#Layer166 {
position:absolute;
width:111px;
height:34px;
z-index:37;
left: 55px;
top: 704px;
}
.Style24 {font-family: Arial; font-weight: bold; color: #FFFFFF; font-size: 16px; }
</style></head>
<body onload="MM_preloadImages('comm-comm-bouton-2.gif','pr&eacute;sentation 2.gif','mot du pr&eacute;sident2.gif','comm comm2.gif','communes2.gif','commissions2.gif','personnel2.gif','loupe.html','bouton sortir et decou2.gif','vivre et habiter2.gif','communaut&eacute; comm 2.gif')">
<div id="p&egrave;re">
<div id="Layer82"><img src="gif-accueil.gif" width="857" height="137" /></div>
<div id="Layer96"><img src="comm comm titre.gif" width="441" height="86" /></div>
<div id="Layer98"><img src="jaune haut copie copie.gif" width="858" height="62" /></div>
<div id="Layer100"><img src="globe tournant.gif" width="75" height="75" /></div>
<div class="Style3" id="layer"></div>
<div class="Style3" id="layer2"></div>
<div class="Style13" id="Layer144">22110 ROSTRENEN </div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="Layer166">
<div align="center"><span class="Style24">M&eacute;t&eacute;o</span></div>
</div>
<div id="Layer164"></div>
<div id="Layer163"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image34','','communaut&eacute; comm 2.gif',1)"><img src="communaut&eacute; comm 1.gif" name="Image34" width="200" height="100" border="0" id="Image34" /></a></div>
<div id="Layer162"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image33','','vivre et habiter2.gif',1)"><img src="vivre et habiter 1.gif" name="Image33" width="200" height="100" border="0" id="Image33" /></a></div>
<div id="Layer161"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image32','','entreprendr et cr&eacute;er2.gif',1)"><img src="entreprendre et cr&eacute;er1.gif" name="Image32" width="200" height="100" border="0" id="Image32" /></a></div>
<div id="Layer160"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image31','','bouton sortir et decou2.gif',1)"><img src="sortir et d&eacute;cou1.gif" name="Image31" width="200" height="100" border="0" id="Image31" /></a></div>
<div id="Layer158"><a id="thumb2" href="carte cckb communes.gif" class="highslide" onclick="return hs.expand(this)"> <img src="accueil-bretagne2112 copie.gif" alt="Highslide JS"
title="Click to enlarge" height="123" width="147" /></a></div>
<div id="Layer157"><img src="cadre bleu.gif" width="177" height="192" /></div>
<div id="Layer154"><img src="vagues rouges.gif" width="222" height="1307" /></div>
<div class="Style17" id="Layer153">
<div align="center" class="Style22">Kreiz-Breizh signifie &quot;Centre Bretagne&quot; </div>
</div>
<div id="Layer152"><img src="bulle.gif" width="255" height="131" /></div>
<div id="Layer151"><img src="../../../CCkreiz breizh/fcys14-tux-breton-1668.png" width="204" height="189" /></div>
<div id="Layer150"></div>
<div id="Layer149"><img src="fleche rouge.gif" width="54" height="49" /></div>
<div id="Layer148"><img src="fleche rouge.gif" width="54" height="49" /></div>
<div id="Layer147"><img src="fleche rouge.gif" width="54" height="49" /></div>
<div id="Layer146">
<div>
<div><strong>
</strong></div>
<div class="Style18">
<p class="Style17"><strong>&nbsp; La CCKB regroupe </strong>: </p>
<p class="Style17"><span class="Style20">4</span> cantons du Sud-Ouest des C&ocirc;tes d&rsquo;Armor
</p>
</div>
<div class="Style13">&nbsp;
<p><span class="Style20">21 607</span> habitants r&eacute;partis sur
</p>
<p>&nbsp;</p>
</div>
<div class="Style18"></div>
<div class="Style21">&nbsp; 741 Km&sup2;
</div>
<div></div>
</div>
</div>
<div id="Layer145">
<p class="Style13"><strong>T&eacute;l</strong> : 02 96 29 18 18</p>
<p class="Style13"><strong>Fax</strong> : 02 96 29 33 13</p>
<p class="Style13"><strong>E-mail</strong> : cckb_AT_wanadoo.fr </p>
</div>
<div class="Style13" id="Layer143">B.P. 34 </div>
<div class="Style13" id="Layer142">6, rue Joseph Pennec </div>
<div id="Layer141"><img src="chiffres.gif" width="106" height="59" /></div>
<div id="Layer140">
<div class="Style13">
<p>Communaut&eacute; des Communes du Kreiz-Breizh</p>
</div>
</div>
<div class="Style14" id="Layer139">Contact</div>
<div id="Layer138"><img src="fleur rouge.gif" width="57" height="46" /></div>
<div class="Style14" id="Layer137">Quelques chiffres... </div>
<div id="Layer136"><img src="fleur rouge.gif" width="57" height="46" /></div>
<div id="Layer135">
<div>
<div class="Style13">Le si&egrave;ge de la CCKB est situ&eacute; &agrave; Rostrenen, au sein d&rsquo;une Cit&eacute; Administrative enti&egrave;rement r&eacute;nov&eacute;e en 2001, &agrave; 20 Km de Carhaix et 58 Km de St Brieuc
</div>
<div></div>
</div>
</div>
<div class="Style14" id="Layer134">Situation g&eacute;ographique </div>
<div id="Layer133"><img src="fleur rouge.gif" width="57" height="46" /></div>
<div id="Layer132"><a id="thumb1" href="rostrenen1.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="rostrenen1.jpg" alt="Highslide JS"
title="Click to enlarge" height="202" width="280" /></a></div>
<div class="Style14" id="Layer131">Pr&eacute;sentation</div>
<div id="Layer130"><img src="fleur rouge.gif" width="57" height="46" /></div>
<div id="Layer129">
<div>
<div class="Style13">La Communaut&eacute; de Communes du Kreiz Breizh est heureuse de vous accueillir sur son site Internet.
</div>
<div></div>
<div class="Style13">Cr&eacute;&eacute;e en 1993, elle se composait alors de 14 communes.
</div>
<div class="Style13">En un peu plus de 10 ans son territoire a doubl&eacute;, faisant de la &laquo;&nbsp;CCKB&nbsp;&raquo; (Communaut&eacute; de Communes du Kreiz Breizh&nbsp;&raquo;, la plus vaste intercommunalit&eacute; du d&eacute;partement des C&ocirc;tes d&rsquo;Armor.
</div>
<div></div>
</div>
</div>

<div id="Layer128"><img src="../../../CCkreiz breizh/photos1 (1).jpg" width="304" height="229" /></div>
<div class="Style11" id="Layer127">La Communaut&eacute; des Communes - Pr&eacute;sentation </div>
<div id="Layer126">
<div align="center" class="Style10"></div>
<div align="center"><img src="cadre bleu.gif" width="178" height="46" /></div>
<script type="text/javascript">var MeteoRnVille='22266'</script>
<script type="text/javascript" src="http://meteo.region-nord.com/webmestre/ville.js"></script>
<noscript>
<a href="http://meteo.region-nord.com">m&eacute;t&eacute;o en france</a>
</noscript>
</div> <div id="Layer123"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','personnel2.gif',1)"><img src="personnel1.gif" name="Image20" width="288" height="68" border="0" id="Image20" /></a></div>
<div id="Layer122"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','commissions2.gif',1)"><img src="commissions1.gif" name="Image19" width="288" height="68" border="0" id="Image19" /></a></div>
<div id="Layer121"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','communes2.gif',1)"><img src="communes1.gif" name="Image18" width="288" height="68" border="0" id="Image18" /></a></div>
<div id="Layer120"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','comm comm2.gif',1)"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image35','','comm comm2.gif',1)"><img src="comm comm1.gif" name="Image35" width="176" height="65" border="0" id="Image35" /></a></div>
<div id="Layer119"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','mot du pr&eacute;sident2.gif',1)"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','mot du pr&eacute;sident2.gif',1)"><img src="mot du pr&eacute;sident1.gif" name="Image16" width="288" height="68" border="0" id="Image16" /></a></div>
<div id="Layer118"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','pr&eacute;sentation 2.gif',1)"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','pr&eacute;sentation 2.gif',1)"><img src="pr&eacute;sentation1.gif" name="Image15" width="146" height="68" border="0" id="Image15" /></a></div>
<div id="Layer117"><img src="colone rouge.gif" width="169" height="319" /></div>
<div id="Layer116">
<div align="center" class="Style4">Nous Contacter </div>
</div>
<div id="Layer115"><img src="herbe.gif" width="299" height="74" /></div>
<div id="Layer114"><img src="herbe.gif" width="274" height="74" /></div>
<div id="Layer113"><img src="herbe.gif" width="295" height="74" /></div>
</div>
</div>
<div align="center"></div>












<script type="text/javascript" src="highslide/highslide.js"></script>


<script type="text/javascript">


hs.registerOverlay(
{
thumbnailId: null,
overlayId: 'controlbar',
position: 'bottom left',
hideOnMouseOut: true,
opacity: 0.75
}
);

hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
window.onload = function() {
hs.preloadImages(5);
}
</script>

<style type="text/css">
* {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid white;
}

.highslide-image {
border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;

border: 2px solid white;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: white;
}
.highslide-loading {
display: block;
color: white;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: black;

}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}

.highslide-move {
cursor: move;
}

.highslide-overlay {
display: none;
}

.controlbar {
margin-left: 60px;
background: url(highslide/graphics/controlbar2.gif);
width: 210px;
height: 32px;
}
.controlbar a {
display: block;
float: left;
margin: 0 0 0 5px;
height: 30px;
width: 42px;
}


.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
</style>

</head>


<div id="highslide-container"></div>



<div class='highslide-caption' id='caption-for-thumb1'>

</div>

<div id="controlbar" class="highslide-overlay controlbar">
<a href="java script:void(0)" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
<a href="java script:void(0)" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
<a href="java script:void(0)" class="highslide-move" title="Click and drag to move"
style="margin-left: 10px"></a>
<a href="java script:void(0)" onclick="hs.close(this)" title="Close"></a>

</div>
</body>
captain_torche
vendredi 20 juin 2008 à 10:53
Une balise CODEBOX est une balise qui te permet d'entourer ton code, et de ne pas déformer de trop la mise en page, comme tu peux le voir.
Tu l'utilises comme ceci :
CODE
[codebox]ton texte[/codebox]
pylane22
vendredi 20 juin 2008 à 10:57
ah, d'accord. merci ! smile.gif

Y a-t-il des choses qui clochent dans mon code ?
captain_torche
vendredi 20 juin 2008 à 11:02
Il manque le contenu d'un fichier CSS (J'imagine que c'est mm_health_nutr.css), mais en l'état, ton code est malheureusement beaucoup trop complexe, la faute à Dreamweaver, j'imagine : je liste 166 blocs différents, positionnés en absolute; on peut en utiliser énormément moins !

Le mieux serait de le reprendre de zéro, car à ce que j'en vois pour l'instant, ça n'a pas l'air trop compliqué à obtenir, comme résultat.
Pourrais-tu malgré tout poster un screenshot de ce que tu obtiens ?
pylane22
vendredi 20 juin 2008 à 11:10
j'obtiens ceci :

j'obtiens ceci :

tout change : la taille des images par rapport à la taille de la police... sad.gif

je met tous mes objets, textes... dans des calques, parce que niveau déplacement, c'est très facile..
captain_torche
vendredi 20 juin 2008 à 11:10
Oui, il y a par conséquent moyen de faire BEAUCOUP plus propre wink.gif
Le problème du placement "à main levée", comme proposé par Dreamweaver, c'est qu'il peut finir par générer un code source excessivement complexe !

Pour finir, si tu as du temps et de la volonté, un petit tour par les tutoriaux du site du Zéro, très pédagogues, ne pourrait être que bénéfique.
pylane22
vendredi 20 juin 2008 à 11:17
merci beaucoup, je vais allez faire un tour sur le lien.
mais du coup, pourquoi est-ce que ça ne marche pas sur firefox ?
pylane22
vendredi 20 juin 2008 à 13:31
j'ai trouvé le probleme !!! Il n'y avait en fait que 3 lignes à supprimer, qui faisaient bugger tout... smile.gif
LTA
vendredi 20 juin 2008 à 14:02
Ne sois pas trop rapide, si je puis me permettre de te donner un conseil que tu ne demande pas :
si tu as eu un problème entre Firefox et IE, il est tout à fait possible que cela te fasse des surprises avec d'autres navigateurs...
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.