DIV qui se balladent dans la page

Version imprimable

12/07/2007, 14h59
mattyeux

3 pièce(s) jointe(s)

DIV qui se balladent dans la page

Bonjour à tous !

Je suis confronté à un problème de mise en page. J'ai mis en page mon site avec des DIV (DIV de l'entete, DIV du menu, DIV su corp de la page (avec des DIV a l'interieur pour le contenu)).

Jusque la sur mon poste c'est parfait.

Cependant selon les postes sur lesquels est visualisé mon intranet, le div changent de place. Ceci est du à des changements de résolution. Ou par exemple, si je rétrécis la fenètre de mon navigateur, les DIV qui se trouve dans le corp se balladent et passent d'à gauche du menu a en dessous le menu (cf fichiers joins).

Je pense que cela est du a des propriétés CSS (float) qui mettent le bazard ....

Y'aurais t'il un moyen de contrer ca ? en gardant la mise en page avec les div et les float ?

Merci
13/07/2007, 08h50
SpaceFrog

encore faudrait il voir le code avec les positions ?

Comme ya beaucoup de code dispatch é un peu partout, j'ai simplifié un peu

Alors :

le CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
/**le div du menu de gauche*/
div.menuG{
	color:#D70563;/*couleur des texte dans le div sous menu*/
	font-size:10pt;/*taille de la police*/
	background-color:#FFDD00;
	float: left;
	border: 1px 1px 1px 1px solid #005AAA;
	height:500px;
}
 
/**Le div général de la gestion utilisateur/groupe*/
div.menuPrinc{
	margin: 45px 45px 45px 100px;/*marge*/
	width : 70%x;
}
 
/**le div des formulaires*/
div.menuForm{
	background-color:#A8D8F6;
	border: 1px 1px 1px 1px solid #005AAA;
	height:500px;
	width: 600px
}
 
 
div.menu{
	float: left;
             color: #F37021;
	font-size: 20px;
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	background-color: #005BAA;
	text-align: center;
}

L'HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 
<div class="menu">
 
	<div><a href="index.asp">-Accueil-</a></div>
	<div><a href="./GDC_Reporting/">GDC Reporting</a></div>
             <!-- ETC pour tous les liens du menu belu a gauche -->
 
</div>
 
<!-- Pour la partie au centre de la page>
<div class="menuPrinc">
	<div class="menuG">
	       <a href="gestionUtilisateur.asp">Gestion des utilisateurs</a><br/>
 
	       <a href="gestionGroupe.asp">Gestion des groupes</a><br/>
	</div>
      <div class="menuForm">
             <!-- Ajout des formulaires ! -->
	</div>
</div>

13/07/2007, 11h17
Candygirl

Au vu de ton image, je dirais de rajouter un conteneur principal de la taille de tes différents éléments flottants mis côtés à côtes. De cette manière, tu verras apparaître la scroll-bare horizontale plutôt que tes flottants qui apssent les uns au dessous des autres.
13/07/2007, 11h39
mattyeux

Arf, ouai toutes mes pages sont dans ce cas la ... et aucune n'a les mêmes éléments et les mêmes tailles (sans compter les pages dynamiques ...).

Ca sent mauvais tout ca ...