page web et mise en page

**redoran** · 25/07/2012, 14h12

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!DOCTYPE html>
<html>
<head>
	<!--Pour forcer le navigateur à afficher en mode IE9, sans quoi il peut passer en mode quirks.-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
	<meta charset="utf-8" />
	<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <!-- application dynamique  -->
	<link rel="shortcut icon" href="image/favs3g.ico" />
	<link rel="stylesheet" media="screen" type="text/css" href="../css/tab.css">
	<title>S 3 G</title>
</head>
<body class="body">
 
      <div class="contenu">   <!--  place pour insérer les pages selon le menu -->
             <div class="general"> // page insérée
 
                       <div class="cont_tablo"> // partie 1 gauche de la page insérée
                          objet tablo
                      </div>
 
                      <div class="contgraph"> // partie 2 droite de la page insérée
                          objet graphe
                      </div>
 
                     <div class="aff_dat_an"> // partie 3 au dessous des deux premières de la page insérée
                            objet  tableau affichage
                     </div>
              </div>
      </div>
 
</body>
</html>

a l'affichage plein écran j'ai la disposition que je veux.
le problème que j'ai:
quand je minimise la fenêtre de firefox , j'ai les div qui se mélange.
comment faire en sorte que la forme reste stable ?
code css3

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
35
36
37
38
39
 
.body{
font-family: "times new roman",Arial, Helvetica,Verdana,serif;
background:#FFF;  
height:100%;
}			
 
.contenu{
	width: auto;
	height:532px;
	margin-left:  5px;
	margin-right: 5px; 	
	background-color: #E6ECFF; 
 
}
.general{
 
background-color: #E6ECFF; 
margin:auto;
 
}
 
.cont_tablo{
float:left;
position: absolute;
top:130px;
width: auto;
 
}
 
.contgraph{
background-color: #92c3e8; 
float: right;
margin-right: 70px;
}
.aff_dat_an{
float:left;
 
}

voila le code css , a noter que
class="contenu"

**Muchos** · 25/07/2012, 14h15

Vous avez oublié de donner le css

PS : les balises html doivent être en minuscules.

**NoSmoking** · 25/07/2012, 19h01

Bonjour,
il te faut modifier le comportement de la DIV droite qui en float right suit le mouvement et décale le reste.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.contgraph{
  background-color: #92c3e8;
  /*float: right;*/
  /*margin-right: 70px;/**/
  margin-left: 350px;  /* à adapter */
}

c'est un minimum

**redoran** · 26/07/2012, 12h42

NoSmoking : ta résolution marche , mais un autre problème surgi !!!
A l'affichage plein écran j'ai la disposition que je veux.
le problème que j'ai:
quand je minimise la fenêtre de firefox , j'ai le deuxième div contenant le graphe et le troisième DIV contenant un tableau , tous deux dépasse le DIv principale ( <div class="contenu"> )!!!!!!

**NoSmoking** · 26/07/2012, 18h58

lorsque l'on fait flotter les éléments ils flottent et s'adapte à leur contenu, les parents aussi.

Il faut que tu disciplines cela en imposant une largeur minimum pour tes différents éléments et ce fonction du résultat que tu souhaites.

page web et mise en page

CSS

Vue hybride

Discussions similaires

Partager

Partager