mettre en place des fenêtres

**franco12** · 10/11/2006, 12h03

salut

voici ce que j'essaie de réaliser en CSS :

voici mon code CSS associé :

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
40
41
42
43
44
45
46
47
48
49
50
51
   #region_menu {
      width: 16%;
      height:50%;
      float: left;
      margin: 0px;
      padding: 0px;
      min-width: 180px;
   }
 
   #region_ariane {
 
      margin: 0 0 0 10%;
      padding: 0;
      width: 83%;
   }
 
   #region_gauche {
     position:absolute;
     margin: 0 0 0 17%;
     width: 42%;
     left :0;
   }
 
   #region_droite {
     margin: 0 0 0 58%;
     width: 42%;
     left :0;
   }
 
   #region_central-bas {
      margin: 0 0 0 17%;
      padding: 0;
      width: 83%;
   }
 
 
   #footer-container {
      text-align: center;
      width: 99.5%;
   }
 
      /* used to clear float in regionA,B,C divs so that
 footer spans bottom of page */
   hr.cleaner {
      clear: both;
      height: 1px;
      margin: -1px 0 0 0;
      padding: 0;
      border: none;
      visibility: hidden;
   }

J'ai vraiment beaucoup de soucis pour faire cohabiter les contenus 1 et 2 ensemble cote à cote.

La seule parade que j'ai trouvé à été de mettre le contenu 1 en absolute mais ça ne marche que si le contenu 1 et 2 sont de la même taille car les éléments suivants (contenu 3 et footer) s'affichent après le contenu2 relativement et empiètent sur le contenu 1.

merci pour votre aide.

**franco12** · 10/11/2006, 14h11

autre essai non concluant

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
 
   #region_menu {
      width: 16%;
      height:50%;
      position:absolute;
      left:0;
      margin: 0px;
      padding: 0px;
      min-width: 180px;
   }
 
   #region_ariane {
      margin: 0 0 0 17%;
      padding: 0;
      width: 83%;
   }
 
   #region_gauche {
     	margin: 0 0 0 17%;
     	width: 42%;
			float:left;
   }
 
   #region_droite {
     margin: 0 0 0 58%;
     width: 42%;
     float:right;
   }
 
   #region_central-bas {
      margin: 0 0 0 17%;
      padding: 0;
      width: 83%;
      float:right;
   }

je voudrais avoir les contenus 1 et 2 cote à cote.
merci d'avance

**franco12** · 10/11/2006, 14h34

j'ai réussi

pour ceux que ça intéresse :

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
   #region_menu {
      width: 16%;
      height:50%;
      position:absolute;
      left:0;
      margin: 0px;
      padding: 0px;
      min-width: 180px;
   }
 
   #region_ariane {
      margin: 0 0 0 17%;
      padding: 0;
      width: 83%;
   }
 
   #region_gauche {
     	margin: 0 0 0 17%;
     	width: 42%;
			float:left;
   }
 
   #region_droite {
     margin: 0 0 0 58%;
     width: 42%;
   }
 
   #region_central-bas {
      margin: 0 0 0 17%;
      padding: 0;
      width: 83%;
      float:left;
   }

a+

**MasterOfChakhaL** · 10/11/2006, 15h12

Salut,

Juste une petite précision pour commencer, c'est bien de nous filer le code css, mais sans l'html, c'est totalement inutile vu qu'on ne connait pas l'imbrication de tes éléments html et qu'on ne peut donc pas comprendre ce qui se passe dans la cascade (le 'C' de CSS)

Ceci étant dit, je te propose ce petit squelette d'HTML:

Code html :

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
 
...
<body>
	<div id="header">
		header
		<div id="nav">
			nav
		</div>
	</div>
	<div id="menu">
		menu<br />
		avec plusieurs éléments
	</div>
	<div id="fil">
		fil d'ariane
	</div>
	<div id="content" >
		<div id="content1" >
			content 1
		</div>
		<div id="content2" >
			content2
		</div>
		<div id="content3">
			content3
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</body>
...

et le css qui va avec:

Code css :

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
 
* {
	margin: 0;
	pading: 0;
}
 
#header { background-color: #F00; }
#nav { background-color: #0F0; }
#menu { background-color: #00F; }
#fil { background-color: #F0F; }
#content1 { background-color: #FF0; }
#content2 { background-color: #0FF; }
#content3 { background-color: #999; }
#footer { background-color: #333; }
 
#menu {
	width: 20%;
}
 
#fil, #content {
	width: 80%;
}
 
#menu, #fil, #content {
	float: left;
}
 
#content1, #content2 {
	width: 50%;
	float: left;
}
#content3 {
	clear: both;
}
 
#footer {
	clear: both;
}

Quelques petites remarques:

Tu noteras que j'ai fait en sorte que le menu soit sur deux lignes, ceci afin que le menu soit plus long que le fil d'ariane. Sinon, le contenu s'alignera à gauche. Il me semble qu'il est logique qu'un menu soit plus loin que le fil d'ariane.
En effet, je vois le menu avec des éléments les uns sous les autres, et le fil d'ariane avec les éléments à la suite. Si ce n'est pas le cas, une modification minime du html et du css et possible pour arriver au résultat escompté

Dans le css que je te propose, il n'y a aucune bordure et c'est important.
Je suis parti sur un design qui va s'adapter en largeur à la fenêtre du navigateur, j'utilise donc les pourcentages. Vu qu'il n'est pas possible d'utiliser les pourcentages pour définir la largeur des bordures, et que le bordures se rajoutent à la largeur, tu ne pouras pas arriver à 100% en mixant poucentage et largeur des bordures en px (ou une autre unité)

Si tu veux ajouter quand même des bordures, je te suggère de ne pas toucher au code que je te donne mais plutot de rajouter des éléments dans l'html.

Par exemple, pour ajouter des bordures au contenu2, tu peux faire cela:

Code html :

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

1
2
3
4
5
6
7
8
 
...
<div id="content2">
	<div>
		content2
	</div>
</div>
...

et dans le css:

Code css :

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

1
2
3
4
 
#content2 div {
	border: 5px solid red;
}

Ca peut aussi te permettre d'ajouter des margin sans casser ton design.

Si tu crains que ton utilisateur utilise une résolution de 320x200px et que cela renvoie certains éléments à la ligne. Il te suffit de régler la propriété overflow sur tes div.
La valeur par défaut est visible et permet d'adapter le conteneur à son contenu. Toutes les autres valeurs (hidden, scroll ou auto, ca dépend du résultat que tu souhaites) te permettront de conserver les dimensions que tu as défini

Pour agir sur la taille globale de ta page, tu peux régler les propriétés css du body
par exemple:

Code css :

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

1
2
3
4
body {
	margin: 0 auto;
	width: 760px;
}

te permettra d'avoir une page de 760 px centrée dans la fenêtre du navigateur (il faudra rajouter une petite feinte pour que ca marche dans IE, mais normalement, c'est comme ça qu'on fait)

J'espère que ceci te permettra de résoudre tes soucis...

NB: je te serais reconnaissant de ne pas critiquer les couleurs, je les trouve très jolies

EDIT:
Ah ben si j'avais vu que tu avais déjà résolu ton problème, je ne me serais pas embêté...

**franco12** · 10/11/2006, 15h22

hey ben j'ai parlé trop vite

l'affichage part trop en vrille dans IE.. sacré IE!
donc je vais lire ce que tu as mis avec beaucoup d'attention et faire des essais
et si je ne trouve pas, je reviens te voir
merci beaucoup MasterOfChakhaL

**MasterOfChakhaL** · 10/11/2006, 15h27

N'oublie pas de placer un doctype au début de ton document html, sinon, mon code pourra aussi poser probème dans IE

mettre en place des fenêtres

CSS

Discussions similaires

Partager

Partager