Décalage Dreamweaver / navigateurs
windsurfer00
Messages postés
18
Statut
Membre
-
Chabanus Messages postés 1026 Statut Membre -
Chabanus Messages postés 1026 Statut Membre -
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 !
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 !
A voir également:
- Décalage Dreamweaver / navigateurs
- Iptv decalage son image ✓ - Forum Gravure
- Décalage audio vlc android - Forum Lecteurs et supports vidéo
- Ce paramètre est désactivé sur les navigateurs gérés - Forum Réseaux sociaux
- Recaler le son d'une vidéo avec VLC. - Astuces et Solutions
- Décalage son image youtube - Forum Téléchargement
4 réponses
Peut être qu'il y a un div en trop ou un en moins, copie colle sur nodpad++ et vérifie leurs extensions ;)
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...
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...
