18041 sujets

Questions générales et questions de débutants

Problème de mise en forme avec <div>

Bonjour,

Comme le dit le titre du topic, j'ai un problème de mise en page sous ie6, sous mozilla, ça marche très bien. Et je vois pas du tout d'où peut venir le problème. Quand je suis en plein écran, ma page s'affiche correctement sous ie6 (résolution de l'écran : 1680*1050), mais quand je réduit la fenêtre, mon affichage perd toute sa forme. Mon objectif est de garder ma mise en forme en ayant n'importe quelle taille de fenêtre.
Je précise d'avance pourquoi ie6... parce que dans mon entreprise, il n'utilise que ce navigateur ^^. Je suis en train de chercher partout et je n'ai rien trouvé. J'espère trouvé la réponse ici Smiley lol

voici mon code : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN:la" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
	
		<script type="text/javascript">
				function scrollTwin()
				{
				 document.getElementById("boite").onscroll = function(){
				  document.getElementById("haut").scrollLeft = document.getElementById("boite").scrollLeft;
				 document.getElementById("menu").scrollTop = document.getElementById("boite").scrollTop;
				 }
				 
				}
		</script>
		<style type="text/css">
		
			body 
			{
				
			}
			
			div.container
			{
			width: 3000px;
			}
			
			div.boite
			{
				padding : 0px 0px 0px 0px;
				height: 500px; 
				width: 1000px;
				overflow: auto;
				
			}
			div.menu
			{
				height: 480px; 
				width: 150px;
				overflow: hidden;
				float : left;
				
			
			}
			
			div.haut
			{
				width: 985px;
				margin-left : 153px;
				overflow: hidden;
				
			}
		</style>
	</head>
	
	<body onLoad="scrollTwin()">
		<div class="haut" id="haut">
	              <table>
        	              beaucoup de contenu
                      </table>
			
		</div>
    <div id="container">
		<div class="menu" id="menu">
			<table>
            // Beaucoup de contenu
            </table>
		</div>
		
		<div class="boite" id="boite" >
			<table>
            //beaucoup de contenu
            </table>
		</div>
	</div>
</body>
</html>


Par contre, je suis désolé d'enlever les informations des différents tableaux. Car j'utilise de véritables données sur mes test et je ne peux les communiquer.

upload/37040-petiteimag.JPG upload/37040-pleinepage.PNG

j'ai mis les deux affichage que j'ai. Et bien sûre, le résultat que je veux obtenir est la deuxième image ^^.

Merci beaucoup.
Modifié par sam291 (25 Mar 2011 - 14:18)
Modérateur
Bonjour,

Dans le code fourni, je ne sais pas si c'est une erreur de frappe, mais le dernier <table> n'est pas fermé correctement.

Vérifie donc d'abord que ton code HTML est valide.
j'ai vérifié dans mon code, et il s'agit bien d'une faute de frappe qui a dû se produire pendant mon copié-collé. Mon problème vient pas de là. J'ai eu de l'espoir pendant au moins 3ms ^^. Malheureusement non :'(
Salut,

La fonction position a mon avis est t'as solution...

essaye ceci:
div.boite
{
padding : 0px 0px 0px 0px;
height: 500px;
width: 1000px;
overflow: auto;
position:fixed;
margin-left:150px;
}

Bon travail

Spirou
Tous les retour chariots m'ont donné mal à la tete... ^^

tien essais ca:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN:la" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html>
<head>
	<script type="text/javascript">
			function scrollTwin(){
				document.getElementById("boite").onscroll = function(){
					document.getElementById("haut").scrollLeft = document.getElementById("boite").scrollLeft;
					document.getElementById("menu").scrollTop = document.getElementById("boite").scrollTop;
				}
			}
	</script>

	<style type="text/css">
		body{}
		
		.site{
			margin:0 auto; 
			width: 1151px;
		}
		
		#container{	
		}

		#boite{
			padding :0px;
			height: 500px; 
			width: 1000px;
			overflow: auto;
			float:left;
		}

		#menu{
			height: 480px; 
			width: 150px;
			overflow: hidden;
			float : left;
		}

			

		#haut{
			width: 985px;
			margin-left:153px;
			float:left;
			overflow: hidden;
		}

		</style>

	</head>

	

	<body onLoad="scrollTwin()">

	<div class="site">
		<div id="haut">
			<table>
				beaucoup de contenu
			</table>
		</div>
		
		<div style="clear:both"></div>

		<div id="container">
			<div id="menu">
				<table>
				// Beaucoup de contenu
				</table>
			</div>

			<div id="boite" >
				<table>
				//beaucoup de contenu
				</table>
			</div>
		</div>
		
		<div style="clear:both"></div>
		
	</div>

</body>

</html>
Merci beaucoup, ça marche nickel ^^. Je vais travailler le code que tu m'a donné pour éviter ce genre d'erreur à l'avenir. Encore merci beaucoup.
Je remercie toutes les personnes qui sont intervenus sur mon problème.
Je sais pas vraiment si je dois utiliser un sujet séparé ou pas ? Mais je me relance ^^
J'ai un autre problème que je trouve étrange, peut-être que vous saurez pourquoi ?
Je pense que le problème est lié au css. Puisque j'essaie d'aligner les colonnes du corp avec la partie du haut mais je n'y arrive. Bien que le haut et le corp aient les cellules de même taille (soit 12px).
Voici le résultat que j'ai :

upload/37040-alignement.JPG

j'ai beau essayer de modifier les valeurs de la taille des cellules, j'ai l'impression que le navigateur ne les lis pas.

Voici mon code, tout d'abord le css : 


body {
		 background-color: #FFFFFF;
			color: #565C5E;
			font-family: verdana,sans-serif;
			font-size: 10px;
			line-height: 1.35em;
			margin: 0;
		}
		h1, h2, h3 {
			color: #554295;
			font-family: trebuchet MS;
		}
		h1 {
			background: url("media/ui/bgrd_tabs_top.gif") repeat-x scroll left top transparent;
			border: 1px solid #DDDDDD;
			font-size: 1.5em;
			margin: 4px;
			padding: 6px 6px 7px;
		}
		
		table {
			border: 0 none;
			border-collapse: collapse;
			font-size: 1em;
			margin: 0 0 0 0px;
		}
		tr.hdr {
			color: black;
			font-weight: bold;
		}
		tr.odd {
			background-color: lightgrey;
			color: black;
			cursor: default;
		}
		tr.even {
			background-color: #E9E8DE;
			color: black;
			cursor: default;
		}
		tr.even:hover, tr.odd:hover {
			background-color: #F0F0C0;
		}
		td {
			border-bottom: 1px solid white;
			border-right: 1px solid white;
			padding: 2px 6px;
		}
		td.error {
			color: red;
			font-weight: bold;
		}
		td.cal01 {
			background-color: #123456;
			color: white;
			white-space: nowrap;
		}
		td.cal02 {
			background-color: #234567;
			color: white;
			width: 10px;
		}
		td.cal03 {
			background-color: #E0E0E0;
			color: black;
			width: 12px;
		}
		td.e {
			background-color: #E0E0E0;
			color: #C8C8C8;
			width: 12px;
		}
		td.r0 {
			background-color: #FF5050;
			color: blue;
			white-space: nowrap;
		}
		td.r1 {
			background-color: #F0F0C0;
			color: black;
			white-space: nowrap;
		}
		td.r2 {
			background-color: #C0C0F0;
			color: black;
			white-space: nowrap;
		}
		td.r3 {
			background-color: #F0E0B0;
			color: black;
			white-space: nowrap;
		}
		td.r4 {
			background-color: #D0C0E0;
			color: red;
			white-space: nowrap;
		}
		td.r5 {
			background-color: #C0F0F0;
			color: black;
			white-space: nowrap;
		}
		td.r6 {
			background-color: #C0F0D0;
			color: black;
			white-space: nowrap;
		}
		td.r7 {
			background-color: #C0C0C0;
			color: black;
			white-space: nowrap;
		}
		td.per0 {
			background-color: #E566FF;
			color: black;
			cursor: default;
		}
		td.per2 {
			background-color: #7F7F99;
			color: black;
			cursor: default;
		}
		td.per5 {
			background-color: #6600FF;
			color: white;
			cursor: default;
		}
		td.per3 {
			background-color: #66FFF0;
			color: black;
			cursor: default;
		}
		td.per6 {
			background-color: #4C334C;
			color: white;
			cursor: default;
		}
		td.per13 {
			background-color: #4C4C4C;
			color: white;
			cursor: default;
		}
		td.per7 {
			background-color: #00F0E5;
			color: red;
			cursor: default;
		}
		td.per4 {
			background-color: #3300CC;
			color: red;
			cursor: default;
		}
		td.per8 {
			background-color: #6600FF;
			color: black;
			cursor: default;
		}
		td.per9 {
			background-color: #3366FF;
			color: black;
			cursor: default;
		}
		td.per10 {
			background-color: #0066FF;
			color: red;
			cursor: default;
		}
		td.per11 {
			background-color: #0066FF;
			color: white;
			cursor: default;
		}
		td.per12 {
			background-color: #BB99FF;
			color: black;
			cursor: default;
		}
		td.per14 {
			background-color: #3300CC;
			color: white;
			cursor: default;
		}
		td.ofr0 {
			background-color: #88FF88;
			color: black;
			cursor: default;
			white-space: nowrap;
		}
		td.ofr1 {
			background-color: #AAFF00;
			color: red;
			cursor: default;
			white-space: nowrap;
		}
		td.ofr2 {
			background-color: #AAFF00;
			color: black;
			cursor: default;
			white-space: nowrap;
		}
		td.ofr3 {
			background-color: #339900;
			color: white;
			cursor: default;
			white-space: nowrap;
		}
		td.ofr4 {
			background-color: #88FF88;
			color: black;
			cursor: default;
			white-space: nowrap;
		}
		td.olap0 {
			background-color: #FF0066;
			color: blue;
			cursor: default;
			white-space: nowrap;
		}
		td.lms8 {
			background-color: #FF6600;
			color: white;
			cursor: default;
			white-space: nowrap;
		}
		td.lms10 {
			background-color: #FF3F3F;
			color: black;
			cursor: default;
			white-space: nowrap;
		}
		td.lms11 {
			background-color: #FFFF00;
			color: black;
			cursor: default;
			white-space: nowrap;
		}
		td.lms12 {
			background-color: #FFFF00;
			color: red;
			cursor: default;
			white-space: nowrap;
		}
         
                .site{ 
                        margin:0 auto;  
                        width: 1151px; 
                } 
         
                #container{     
                } 
 
                #wrap{ 
                         padding :0px; 
                         height: 500px;  
                         width: 1000px; 
                         overflow: auto; 
                         float:left; 
                } 
 
                 #menu{ 
                         height: 480px;  
                         width: 150px; 
                         overflow: hidden; 
                         float : left; 
                } 
 
             
 
                 #top{ 
                        width: 1000px; 
                        margin-left:150px; 
                        float:left; 
                        overflow: hidden; 
                 }


Ensuite le code de ma page : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN:la" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  
<html>
	<title>
	</title> 
	<head> 
		<script type="text/javascript"> 
				function scrollTwin(){ 
					document.getElementById("wrap").onscroll = function(){ 
						document.getElementById("top").scrollLeft = document.getElementById("wrap").scrollLeft; 
						document.getElementById("menu").scrollTop = document.getElementById("wrap").scrollTop; 
					} 
				} 
		</script> 
	 

		<!--[if IE 7]> <-->
			<link href="mozilla_style.css" rel="stylesheet" type="text/css" />
		<!--> <![endif]-->


		<!--[if lte IE 6]>
			<link href="ie_style.css" rel="stylesheet" type="text/css" />
		<![endif]-->
 
    </head> 
 
     
 
    <body onLoad="scrollTwin()"> 
 
		<div class="site"> 
			<div class="top" id="top"> 
				<table id="data">
					<tr>
						<td classe="cal02">
						</td>
					</tr>
				</table>
			</div> 
			 
			<div style="clear:both"></div> 
	 
			<div id="container"> 
				<div id="menu"> 
					<table id="name">
							<tr>
								<td class="r1">
									//contenu
								</td>
							</tr>
						</table>
					</div>
	 
				<div class="top" id="wrap" > 
				   <table>
					   <tr>
							<td class="e">
								//contenu
							</td>
					   </tr>
				   </table>
				</div> 
			</div> 
			 
			<div style="clear:both"></div> 
			 
			</div> 
	 
</body> 
 
</html>


Voilà ^^, si je devais afficher tout le contenu de la page ^^, surtout que c'est en dur pour le moment dans le code. Je risquerais de remplir le forum entier avec ses sections.
Donc j'espère que vous pourrez encore m'aider. Et je vous remercie encore.
Modifié par sam291 (25 Mar 2011 - 14:19)
Bah le vrai soucis c'est que tu utilises 2 tableaux, alors que tu en utilise qu'un, c'est donc normal que tes entêtes de colonnes soient décalé.

Allé je te met sur une piste:

<tr></tr> = une ligne
<td></td> = une colonne
<th></th> = l'entete d'une colonne

colspan = fusions de cellule horizontal
rowspan = fusion de cellule vertical

donc:


<table>
 <tr>
<th>xxx</th><th>yyy</th>
</tr>
<th colspan="2">uuuu</th>
</tr>
<tr>
<td>ddd</td><td>eeee</td>
</tr>
<tr>
<td>ffff</td><td>gggg</td>
</tr>
<tr>
<td>cccc</td><td>hhhh</td>
</tr>
</table>


Tu auras donc 2 ligne de titre, la deuxième serra fusionné en une seul cellule et l'ensemble sera parfaitement aligné.

Az
bah le problème c'est que je peux pas réunir dans un même tableau les informations, j'ai un script qui permet de faire bouger les deux ascenceurs du tableau de droite et de celui du haut.
Donc je sais pas vraiment si ca arrangerait mon problème.
Sujet clos
Aller à