Décalage Dreamweaver / navigateurs

Fermé
windsurfer00 Messages postés 16 Date d'inscription jeudi 29 novembre 2007 Statut Membre Dernière intervention 7 septembre 2009 - 18 juin 2009 à 17:21
Chabanus Messages postés 978 Date d'inscription dimanche 23 décembre 2007 Statut Membre Dernière intervention 11 novembre 2011 - 19 juin 2009 à 23:49
Bonjour,

j'ai un petit peu de métier dans le web design mais là je sèche... j'ai un décalage par rapport à mon aperçu dans Dreamweaver (CS4) et le rendu sur navigateur: décalage à gauche par rapport à l'aperçu dans Dreamweaver. Sinon là pour le coup j'ai pareil sur IE et firefox donc ça va.
Je pense que mon CSS a un souci mais visiblement pas (validé par le W3C CSS validator...) donc dites-moi s'il vous plaît si c'est le programme qui a un bug ou pas je sais pas...

J'ai un décalage de 2 div: menu et le slideshow javascript
Voici le html:

<!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>
<title>Design_ladeveze</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
<!--
function slideSwitch() {
var $active = $('#diapo IMG.active');

if ( $active.length == 0 ) $active = $('#diapo IMG:last');

var $next = $active.next().length ? $active.next()
: $('#diapo IMG:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}

$(function() {
setInterval( "slideSwitch()", 5000 );
});
//-->
</script>
<script type="text/javascript" src="javascript/jquery.tabs.js"></script>
<script type="text/javascript" src="javascript/menu.js"></script>
<link href="style/css_ladeveze.css" rel="stylesheet" type="text/css" />
<link href="style/menu.css" rel="stylesheet" type="text/css" />
</head>
<body >
<div id="container">
<div id="header"><!-- end #header !-->
<div id="soho_solo"><a href="https://www.soho-solo-gers.com/"><img src="images/soho_solo.jpg" /></a></div>
<div id="val_d_adour"><a href="http://www.val-adour.com"><img src="images/paysduvaldadour.gif" /></a></div>
</div>
<div id="diapo">
<img src="images/fetes.jpg" alt="" class="active" />
<img src="images/village.jpg" alt="" />
<!-- end #diapo !--></div>
<div id="menu">
<div id="onglets">
<ul class="navonglets">
<li class="actif"><a href="#onglet_1">Accueil</a></li>
<li><a href="#onglet_2">Vie municipale</a></li>
<li><a href="#onglet_3">Vie locale</a></li>
<li><a href="#onglet_4">Animations</a></li>
<li><a href="#onglet_5">Tourisme</a></li>
</ul>
<div class="onglet" id="onglet_1">
<div class="sous_lien">
<div align="left"> <a href="#"><strong>Mot du maire</strong></a><a href="#"><strong>Actu</strong></a></div>
</div>
</div>
<div class="onglet" id="onglet_2">
<div class="sous_lien">
<div align="left"><a href="#"><strong>Conseil</strong></a><a href="#"><strong>Commissions</strong></a> <a href="#"><strong>Syndicats</strong></a><a href="#"><strong>Bulletins d'informations</strong></a><a href="#"><strong>Horaires</strong></a><a href="#"><strong>Compte-rendus du conseil</strong></a></div>
</div>
</div>
<div class="onglet" id="onglet_3">
<div class="sous_lien">
<div align="left"><a href="#"><strong>Associations</strong></a><a href="#"><strong>Artisanat</strong></a><a href="#"><strong>Agriculture</strong></a><a href="#"><strong>Santé</strong></a></div>
</div>
</div>
<div class="onglet" id="onglet_4">
<div class="sous_lien">
<div align="left"><a href="#"><strong>Fêtes</strong></a></div>
</div>
</div>
<div class="onglet" id="onglet_5">
<div class="sous_lien">
<div align="left"><a href="#"><strong>Patrimoine</strong></a><a href="#"><strong>Où dormir ?</strong></a><a href="#"><strong>Où manger ?</strong></a><a href="#"><strong>Liens utiles</strong></a><a href="#"><strong>Historique</strong></a></div>
</div>
</div>
</div>
</div>
<div id="mainContent">
<div id="contenu">
<div class="cornerBox">
<div class="corner TL"></div>
<div class="corner TR"></div>
<div class="corner BL"></div>
<div class="corner BR"></div>
<div class="cornerBoxInner">
<h1>Titre 1</h1>
<p>Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe</p>
<p>Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragrapheCeci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragrapheCeci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe Ceci est le premier paragraphe </p>
</div>
</div>
</div>
<!-- end #mainContent !--></div>
<div id="footer">
<p align="center">Mentions légales - Copyright Commune de Ladevèze - A propos</p>
<!-- end #footer !--></div>
<!-- end container !--></div>
</body>
</html>

Et le CSS, associé à mes problemes (j'ai une autre feuille CSS pour le menu).

@charset "utf-8";
/* CSS Document */

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background:#FFF;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
}

#container {
width:900px;
height:auto;
background:#4e8432;;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
}

#header {
height:156px;
background-image:url(../images/header.jpg);
}

#soho_solo{
position:absolute;
left:17px;
top:83px;
width:80px;
height:47px;
}

#val_d_adour{
position:absolute;
left: 10px;
top: 17px;
}

a img{
border:none;
}

#diapo{
position:absolute;
width:400px;
height:80px;
left: 52px;
top: -23px;
z-index:10px;
}

#diapo IMG {
position:absolute;
top:148px;
left:322px;
z-index:18;
}

#diapo IMG.active {
z-index:20;
}

#diapo IMG.last-active {
z-index:19;
}

#mainContent {
position:relative;
background-image:url(../images/main_repeat.jpg);
background-repeat:repeat-y;
height:auto;
padding-left: 38px;
padding-top: 150px;
}

#menu {
position:absolute;
width:810px;
height:402px;
background-image:url(../images/menu.jpg);
left: 160px;
top: 224px;
z-index: 20;
overflom:hidden;
}

#boutons_langue{
position:absolute;
left: 904px;
top: 104px;
}

#contenu {
width:825px;
top:180px;
}

#footer {
position:absolute;
width:900px;
height:60px;
background-image:url(../images/footer.jpg);
}

/*Cadre arrondi*/
.cornerBox {
position: relative;
width: auto;
background-color:#ffffff;
}
.corner {
position: absolute;
width: 10px;
height: 10px;
background:url(../images/coin.jpg) no-repeat;
font-size: 0%;
}
.cornerBoxInner {
padding: 10px;
}
.TL {
top: 0;
left: 0;
background-position: 0 0;
}
.TR {
top: 0;
right: 0;
background-position: -10px 0;
}
.BL {
bottom: 0px;
left: 0;
background-position: 0 -10px;
}
.BR {
bottom: 0px;
right: 0px;
background-position: -10px -10px;
}


Merci d'avance !

4 réponses

Chabanus Messages postés 978 Date d'inscription dimanche 23 décembre 2007 Statut Membre Dernière intervention 11 novembre 2011 70
18 juin 2009 à 17:28
Peut être qu'il y a un div en trop ou un en moins, copie colle sur nodpad++ et vérifie leurs extensions ;)
0
windsurfer00 Messages postés 16 Date d'inscription jeudi 29 novembre 2007 Statut Membre Dernière intervention 7 septembre 2009
18 juin 2009 à 17:31
Salut,

comme je travaille sur dreamweaver, j'ai accès à la fonction validation de page du logiciel et il m'a rien trouve. En général, quand j'ai une div en trop ou en moins il me le dit et là rien du tout...
0
Chabanus Messages postés 978 Date d'inscription dimanche 23 décembre 2007 Statut Membre Dernière intervention 11 novembre 2011 70
18 juin 2009 à 17:35
Ben ce décalage c'est tout a fait normal, car la résolution accorder a dreamweaver et au browser sont différents, ça m'arrive a moi aussi
0
windsurfer00 Messages postés 16 Date d'inscription jeudi 29 novembre 2007 Statut Membre Dernière intervention 7 septembre 2009
18 juin 2009 à 17:43
C'est quand même bizarre car mon site fait 900px de large et tient tout à fait dans la fenêtre de vue de Dreamweaver donc même si les résolutions sont réduites sur le logiciel, il devrait m'afficher ça au bon endroit dans mon cas non ?
0
Chabanus Messages postés 978 Date d'inscription dimanche 23 décembre 2007 Statut Membre Dernière intervention 11 novembre 2011 70
19 juin 2009 à 23:49
mmm 900 px c'est pas la norme du web c'est 800px de largeur ou 100 % penses-y
0