[ résolue ] Décalage de div

Question

etouicmoi

21 Apr 2011 à 10:32

Bonjour à tous,

J'ai un problème de div qui se décale dans IE6. Je visualise bien dans Firefox, chrome IE 7 et 8.

Voici un screenshot de ce que j'ai.

Donc au dessus c'est mon header qui se place bien mais mon container est décalé de quelques pixels.

Voici mon code css:


body{
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size:11px;
	text-align: center;
	widht:100%;
	height:100%;}

#header{background:url(../images/frame/frame_top.jpg) no-repeat;
	height:152px;
	width:1010px;
	margin-left:auto;
	margin-right: auto;
	text-align:left;}

#container{background:url("../images/frame/frame_height.jpg") repeat;
	height: 380px;
	width: 1010px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;}

Je ne comprends pas ce qui se passe. Quelqu'un aurait il une solution à mon problème?

Merci d'avance,
Modifié par etouicmoi (21 Apr 2011 - 14:04)

boulaneige

21 Apr 2011 à 10:39

Salut,

Dans la déclaration de body tu as une erreur : widht => width

etouicmoi

21 Apr 2011 à 10:43

ha oui en effet, merci.

c'est modifié mais ca ne change pas mon décalage. Il est toujours présent! Smiley decu

Pour info mon image de container, est une image d'environ 3 px qui se répéte sur la hauteur.
Modifié par etouicmoi (21 Apr 2011 - 10:58)

silentauben

21 Apr 2011 à 12:25

tu as vérifié que ton image n'avait pas un décalage à la découpe?

etouicmoi

21 Apr 2011 à 12:45

J'avais déjà vérifié mon image fait bien : 1010x3 px

Le pire c'est que sous Firefox ou IE7 et 8 il n'y à pas de décalage...
Ca peux peut être venir de mon code qui n'est pas compatible avec IE6?

Je sais pu du tout ou chercher...
Modifié par etouicmoi (21 Apr 2011 - 12:47)

Mabelle

21 Apr 2011 à 12:47

Bonjour, une page en ligne nous permettrait de mieux cerner le problème en plus de nous donner le code html.

etouicmoi

21 Apr 2011 à 12:51

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><s:text name="label.title.index"/></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main">
	<div id="header">
		<div class="headertop">
			<div class="headermain">

				<div class="logo">
					<table width="720" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td width="223"><a href="menu.html"><img src="common/webportal/images/menu/logo.jpg" width="223" height="79" border="0" alt="" /></a></td>
							<td width="487" cellpadding="10"><span class="text">
								<s:text name="label"/> &nbsp;&nbsp;texte portail Web Dexia</span></td>
                        </tr>
					</table>

				</div>
			</div>
		</div>
		
		<div class="headerbottom">
			<table width="800" height="40" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td width="426">
                  		<div class="identification"><s:text name="hello.name"/>hello mon nom est</div>

					</td>
					<td width="374">
						<div class="login"><a href="login.html"><s:text name="logout"/>se connecter</a></div>
					</td>
				</tr>
			</table>		
		</div>
	</div>

	<div id="container">
	<div class="returnHeader"><p><a href="authoritiesDispatcher.action"><s:text name="label.return"/>retour</a></p></div>
		<div class="unityFormContainer">
        	<div id="loader"></div>
		<div class="unityFormHeader">

			<table border="0" align="center">
				<tr>
					<td width="68"><img src="common/webportal/images/page5/icon.jpg" alt="" /></td>

					<td width="558">
						<p class="textbold"><s:text name="label.agence.text1"/>Renvoi du numéro principal de l'agence</p>
						<p class="textbold"><span class="textblue"><s:text name="label.agence.text2"/>Gérer l'ouverture </span></p>
					</td>
				</tr>

			</table>      
		</div>
		<div class="unityForm">

			<div class="textblue" style="margin-left:10px"><s:text name="label.text.branch"/>Agence</div>
	        
			<form class="updateUnityStatus" name="updateUnityStatus" onsubmit="document.getElementById('loader').style.display='block';" action="/agile/updateUnityStatus.action" method="post" style="width:567px;border:0">
				<table class="wwFormTable" style="width:567px;border:0">
					<tr>
						<td colspan="4" class="textbold"><s:text name="label.text.branch"/>Agence</td>

					</tr>
					<tr>

						<td>&nbsp;</td>
						<td class="text"><input type="radio" name="branchStatus" id="branchStatus_open" value="open" onclick="openBranch(true);" /></td>
						<td colspan="2" class="textblueregular"><s:text name="branch.open"/>
						L'agence est ouverte et redirigée vers l'extension 1</td>
					</tr>
					<tr>
						<td>&nbsp;</td>

						<td><input type="radio" name="branchStatus" id="branchStatus_close" value="close" onclick="openBranch(false);" /></td>

						<td colspan="2" class="textblueregular"><s:text name="branch.close"/>L'agence est fermée</td>
					</tr>
					<tr>
			            <td colspan="4" class="textbold"><s:text name="if.closed"/>Si fermée, renvoyer vers</td>
					</tr>
					<tr>
						<td>&nbsp;</td>

						<td><span class="text"><input type="radio" checked="checked" id="forwardTo_closedMessage" name="forwardTo" value="closedMessage" /></span></td>
						<td colspan="2" class="textblueregular"><s:text name="directly"/>Directement vers le message de fermeture (Ex: Soir et week-end)</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td><span class="text"><input type="radio" id="forwardTo_forwardNoAnswer" name="forwardTo" value="forwardNoAnswer" /></span></td>
						<td colspan="2" class="textblueregular"><s:text name="after.seconds"/>Message après 40 secondes (Ex: A midi)</td>
					</tr>

					<tr>
						<td>&nbsp;</td>
						<td><span class="text"><input type="radio" id="forwardTo_alternateBranch" name="forwardTo" value="alternateBranch" /></span></td>
						<td class="textblueregular"><s:text name="another.branch"/>Vers un numéro principal d'agence</td>
						<td><input type="text" name="alternateBranchValue" id="alternateBranchValue" value=""/></td>
					</tr>
					<tr>
						<td colspan="4">

							<div style="margin:20px 0 0 150px">
								<a class="button" href="javascript:document.getElementById('loader').style.display='block';document.forms[0].submit();"><span>Valider</span></a>
								<a class="button" href="authoritiesDispatcher.action"><span>Annuler</span></a>
							</div>
						</td>
					</tr>
					<tr>

						<td colspan="4" ></td>

					</tr>
				</table>
			</form>	
		</div>
	</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">


	document.getElementById('branchStatus_close').checked='checked';
	openBranch(false);;


	document.getElementById('forwardTo_closedMessage').checked='checked';




</script>

	<div id="footer"></div>
</body>
</html>

Modifié par etouicmoi (21 Apr 2011 - 13:03)

silentauben

21 Apr 2011 à 12:54

tu peux nous filer ta css aussi?

Mabelle

21 Apr 2011 à 12:55

Oui, bon mais là, j'avoue que la mise en forme du code html ne me donne pas envie de m'y mettre...

Tu pourrais utiliser la balise code avec =html, on aurait au moins une meilleur vision et en plus, un peu de ménage et d'indentation dans celui-ci serait apprécié.

Ce n'est pas un caprice de ma part, simplement un avis si tu veux vraiment que quelqu'un ait le goût de t'aider. Smiley cligne

etouicmoi

21 Apr 2011 à 12:57

voilà le tout :


@charset "utf-8";

/*---------general---------*/

body{
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size:11px;
	text-align: center;
	width:100%;
	height:100%;}
	
.logo{
    height: 79px;
    margin: 0 0 0 31px;
    width: 223px;
	z-index:2;
	outline: none;}
	
.textLogo{
	z-index:3;
	}
	
#container{background:url("../images/frame/frame_height.jpg") repeat;
	height: 380px;
	width: 1010px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;}
	
.returnHeader{
    float: left;
    font-size: 12px;
    font-weight: bold;
    height: 25px;
    padding-right: 82px;
	padding-top: 10px;
    text-align: right;
    width: 940px;}
.returnHeader a {text-decoration:none; color: #0F288F; outline: none;}
.returnHeader a:hover {text-decoration:none; color:#3fa3df;}
	
#footer{background:url("../images/footer/footer.jpg") no-repeat;
	height:19px;
	width:1010px;
	margin-left:auto;
	margin-right:auto;}

	
.textbold {color: #0f288f;
	font-weight: bold;
	font-size: 12px;}
	
.textblue {color: #3fa3df;
	font-weight: bold;
	font-size: 12px;}
	
.textblueregular {color: #3fa3df;
	font-size: 11px;}
	
.text {color: #0f288f;
	font-weight: regular;
	font-size: 12px;}

.textwhitelogin {color: #ffffff;
	font-weight: regular;
	font-size: 14px;}
	
	
/*---------index---------*/

#loginmain{background-color: #16327F;
	position:absolute;
	width: 1010px;
	margin-left:-505px;
	left:50%;
	height:580px;
	margin-top: -290px;
	top:50%; 
	text-align: left; }
	
.logincontainer{background: url("../images/login/login.jpg") no-repeat scroll 0 0 transparent;
    color: #FFFFFF;
    font-size: 14px;
    height: 198px;
	width: 544px;
	top: 193px;
    left: 240px;
    padding: 18px 0 0;
    position: relative;}

.languagelogin{
	color:ffffff;
	padding-right: 20px;
	width:500px;
	float:right;
	text-align:right;}
.languagelogin a {color:#FFFFFF;text-decoration:none;}
.languagelogin a:hover {text-decoration:underline;}
	
	
.loginTitle{
	margin:15px 0px 30px;
	padding-left:210px;
	float:left;}
	
.identifiant{
	margin-left:53px;
	widht:300px;
	height:70px;
	clear:both;}

/*---------menu---------*/
#header{background:url(../images/frame/frame_top.jpg) no-repeat;
	width:1010px;
	height:152px;
	margin-left:auto;
	margin-right: auto;
	text-align:left;}

.headertop{background:url(../images/header/header_top.jpg) no-repeat;
	top:11px;
	left:29px;
	width:966px;
	height:96px;
	position:relative;
}

.headermain{
	width:966px;
	height:103px;}

.headerbottom{background:url(../images/header/header_bottom.jpg) no-repeat;
	width:966px;
	height:35px;
	left:29px;
    position: relative;
    top: 14px;
	outline: none;}

.identification{
	color: #FFFFFF;
    float: left;
    font-size: 12px;
    height: 35px;
    padding: 10px 0 0 70px;
    width: 346px;
}


.login{    
	color: #FFFFFF;
    float: right;
    font-size: 12px;
    height: 35px;
    padding: 10px 70px 0;
    text-align: right;
    width: 430px;}
.login a {color:#FFFFFF;text-decoration:none;}
.login a:hover {text-decoration:underline;}
	
.password a {
	background: url("../images/menu/menu_1.jpg") no-repeat scroll 0 0 transparent;
    display: block;
    float: left;
    height: 90px;
    line-height: 14px;
    margin: 10px 0 0 13px;
    padding-left: 30px;
	padding-top:25px;
    text-align: center;
    text-decoration: none;
    width: 425px;
filter:alpha(opacity=40);   
-moz-opacity:0.4;   
-khtml-opacity: 0.4;    
opacity: 0.4;}

.configuregreetings a {
	background: url("../images/menu/menu_2.jpg") no-repeat scroll 0 0 transparent;
    display: block;
    float: left;
    height: 90px;
    line-height: 14px;
	margin: 10px 0 0 39px;
    padding-left: 30px;
	padding-top:25px;
    text-align: center;
    text-decoration: none;
    width: 425px;
	outline: none;
filter:alpha(opacity=40);   
-moz-opacity:0.4;   
-khtml-opacity: 0.4;    
opacity: 0.4;}
/*.configuregreetings a:hover {
background:url(../images/menu/menu_rollover_2.jpg) no-repeat; outline: none;
}*/

.configurebuttons a {
	background: url("../images/menu/menu_3.jpg") no-repeat scroll 0 0 transparent;
    display: block;
    float: left;
    height: 90px;
    line-height: 14px;
    margin: 5px 0 0 13px;
    padding-left: 30px;
	padding-top:25px;
    text-align: center;
    text-decoration: none;
    width: 425px;
	outline: none;
filter:alpha(opacity=40);   
-moz-opacity:0.4;   
-khtml-opacity: 0.4;    
opacity: 0.4;}
/*.configurebuttons a:hover {
background:url(../images/menu/menu_rollover_3.jpg) no-repeat;outline: none;
}*/

.configureforward a {
	background: url("../images/menu/menu_4.jpg") no-repeat scroll 0 0 transparent;
    display: block;
    float: left;
    height: 90px;
    line-height: 14px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    width: 425px;
	margin: 5px 0 0 39px;
    padding-left: 30px;
	padding-top:25px;
	outline: none;
filter:alpha(opacity=40);   
-moz-opacity:0.4;   
-khtml-opacity: 0.4;    
opacity: 0.4;}
/*.configureforward a:hover {
background:url(../images/menu/menu_rollover_4.jpg) no-repeat;outline: none;
}*/

.unity a {
	background: url("../images/menu/menu_5.jpg") no-repeat scroll 0 0 transparent;
    display: block;
    float: left;
    height: 90px;
    text-decoration: none;
    width: 425px;
	line-height: 14px;
    margin: 5px 0 0 13px;
    padding-left: 30px;
    padding-top: 25px;
    text-align: center;
	outline: none;}
		
.unity a:hover {
	background:url(../images/menu/menu_rollover_5.jpg) no-repeat; outline: none;}

.administrator a {
	background: url("../images/menu/menu_6.jpg") no-repeat scroll 0 0 transparent;
    display: block;
    float: left;
    height: 90px;
	text-decoration: none;
    width: 425px;
    line-height: 14px;
    margin: 5px 0 0 39px;
	padding-left:30px;
	padding-top:25px;
	text-align: center;
	outline: none;
filter:alpha(opacity=0);   
-moz-opacity:0.4;   
-khtml-opacity: 0.4;    
opacity: 0.4;}
/*.administrator a:hover {
background:url(../images/menu/menu_rollover_5.jpg) no-repeat;outline: none;
}*/	



/*---------page5---------*/

	
.unityFormContainer{    
    background: url("../images/page5/image1.jpg") no-repeat scroll 0 0 transparent;
    clear: both;
    height: 336px;
    line-height: 8px;
    margin: 30px 0 0 30px;
    padding: 10px;
    width: 948px;
	}
	
.unityFormHeader{
    height: 75px;
    line-height: 14px;
    width: 844px;}

.unityForm{background: url("../images/page5/image2.jpg") no-repeat scroll 0 0 transparent;
    clear: both;
    float: left;
    height: 253px;
    margin: 0px 0 0 10px;
    padding-left: 40px;
    width: 870px;}
	
.updateUnityStatus{
    line-height: 19px;
    margin: 40px 0 0 30px;}
	


	
a.button {
    background: transparent url("../images/page5/bg_button_a.gif") no-repeat scroll bottom right;
    color: #0f288f;
    display: block;
    float: left;
    font: bold 12px arial, sans-serif;
    height: 26px;
    margin-right: 20px;
    padding-right: 25px; /* sliding doors padding */
    text-decoration: none;
    outline: none; /* hide dotted outline in Firefox */
}
a.button span {
    background: transparent url("../images/page5/bg_button_span.gif") no-repeat scroll bottom left;
    display: block;
    line-height: 14px;
    padding: 7px 0 5px 29px;
} 
a.button:active {
    background-position: top right;
    outline: none; /* hide dotted outline in Firefox */
}
a.button:active span {
    background-position: top left;
    padding: 7px 0 5px 18px; /* push text down 1px */
}

#loader{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 10000;
	background: url(../images/loader.gif) no-repeat;
	background-position: center center;
	background-color: #EEE;
	display: none;
	opacity : 0.5;
    -moz-opacity : 0.5;
    -ms-filter: "alpha(opacity=50)"; /* IE 8 */
    filter : alpha(opacity=50); /* IE < 8 */
}

Desolé pour le code j’étais passé par un bloc note basique qui avait complètement enlevé l'implémentation...
Merci beaucoup pour votre aide!
Modifié par etouicmoi (21 Apr 2011 - 13:02)

silentauben

21 Apr 2011 à 13:09

et en specifiant un width de 1010px à ton main div et 100% pour le header et container?

etouicmoi

21 Apr 2011 à 13:19

En effet en faisant comme tu dis silentauben, ca fonctionne sous IE6. Merci

Mais comme vous pouvez le voir sur le screenshot mon image dépasse encore, il ne devrait pas avoir une bordure.

C'est drole parce que mon image original n'as pas ca! En faite c'est comme si j'avais des marges à droite sur le container...
Modifié par etouicmoi (21 Apr 2011 - 13:26)

silentauben

21 Apr 2011 à 13:38

ok, j'ai compris.

met un background-repeat: no-repeat; sur la css de ton container

à mon avis ton image ne fait pas 1010px mais un peu moins donc elle est dupliquée.

etouicmoi

21 Apr 2011 à 14:03

Super!!! ca fonctionne je devais mettre un background:url (......) repeat-y;

Je savais pas qu'on pouvais faire ca!!! on en apprends tout les jours!

Merci beaucoup beaucoup.

Bonne après midi à tous!
Modifié par etouicmoi (21 Apr 2011 - 14:03)

silentauben

21 Apr 2011 à 14:07

de rien, bonne continuation Smiley cligne

etouicmoi

21 Apr 2011 à 14:33

Petite question...

Le fait de mettre un width de 1010px à mon main me génère un scroll sur le coté (car c'est une page qui doit être vu en 1024x768 sous IE6 .... )

Et donc nous ne voulons pas de scrolls... je ne sais pas comment faire pour eviter ca... donc oui le problème est résolu mais je ne devrais pas declarer mon main en width. Car je ne veux pas de scroll....

Comment faire?

silentauben

21 Apr 2011 à 14:55

reduit la taille du contenu.

vérifie qu'il n'y a pas un margin qui pousse trop le contenu

etc.

un bon outil pour vérifier en direct ta CSS : Firefox + firebug

tu pourras voir la place que prend les éléments et tu pourras tester ta CSS en direct.

petite précision, les navigateurs peuvent rajouter du margin en plus, dans ces cas la test un margin: 0; sur le body.

pour ma part, je bosse plutot en 980px pour plus de sécurité.
Modifié par silentauben (21 Apr 2011 - 14:59)

etouicmoi

21 Apr 2011 à 15:01

Oui je connais firebug, je l'utilise c'est super pratique d'ailleurs.

Mais je n'ai pas ce problème sur firefox, uniquement dans IE.

Et lorsque je réduis la taille de mon container ca ne change rien dans IE...

silentauben

21 Apr 2011 à 15:23

en fait c'est la taille de l'ensemble des tes éléments qui peut gêner, un div qui sortirait du cadre par exemple.

as tu essayé le margin à 0 pour le body?

etouicmoi

21 Apr 2011 à 16:04

oui le margin 0 ne donne rien... comment je peux vérifier si j'ai un margin? qui fait en sorte que sous IE et 7 j'ai des scrolls?

Et sous IE6 uniquement j'ai en effet ma div container qui déborde de 2 px sur la droite. Je le vois avec border: 1px solid

Mais que faire?

Sujet clos