Galere avec des DIV

**furtif1** · 05/07/2007, 11h02

Bonjour,

Je suis dans la gelere !! Comme beaucoup surement ^^

Mes DIV m'embete. Voici mon "template":

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
<body>
 
<div id="conteneur2">
!-- On affiche la banniere du haut -->
<div id="banniere2">
<?php require("$Banniere"); ?>
</div>
 
<!-- On affiche le menu de gauche -->
<div id="MenuGauche2">
<?php require("$MenuGauche"); ?>
 
<div id="MenuBasGauche">
</div>
 
</div>
 
<!-- On affiche le contenu -->
<div id="contenu2">
<?php require("$Contenu"); ?>
</div>
 
<div id="MenuDroite">
<?php require("$MenuDroite"); ?>
</div>
 
</div>
 
</body>

Et voici mon CSS :

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
52
53
54
55
56
57
58
59
60
/* TEMPLATE 2 */
 
#conteneur2 {
    margin:1px auto;
    width:900px;
	height:1000px;
 
}
 
#banniere2 {
	width:900px;
	height:136px;
	text-align:left;
	background-color:#FFF;
 
}
 
 
#MenuGauche2 {
	width:187px;
	height:80%;
	background-image:url(../Images/cote_gauche.PNG);
	background-repeat:repeat;
	text-align:left;
	position:absolute;	
}
 
#MenuBasGauche {
 
height:178px;
width:187px;
position:absolute;
margin-top:80%;
background-image:url(../Images/bas_gauche.PNG);
background-repeat:no-repeat;
}
 
#MenuDroite {
	width:187px;
	height:100%;
	margin-left:713px;
	position:absolute;
	background-image:url(../Images/cote_droit.PNG);
	background-repeat:repeat;
 
	text-align:left;
 
}
 
#contenu2 {
	width:526px;
	height:100%;
	margin-left:187px;
	margin-right:187px;
	position:absolute;
 
	text-align:left;
 
 
}

Je galere enormement avec les DIV/CSS. Mais est ce que quelqu'un aurait une idée de pourquoi sa donne : Le menu du bas qui supporpose le menu du haut. Et sous IE, sa donne n'importe quoi :s

bref, auriez vous des conseils pour que je puisse rendre mon site.. visible ^^

Merci

**Damouille** · 05/07/2007, 12h50

Décris précisément la mise en page que tu souhaites réaliser afin d'avoir des conseils sur la technique à utiliser

**Xann_71** · 05/07/2007, 12h52

C'est pas super clair ton code, tu pourrais pas faire des espaces quand tu es dans une balise pour qu'on se repère mieux? Du genre:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<html>
     <head>
     </head>
     <body>
          <div>
               <ul>
                    <li><a href="">lien</a>
               </ul>
        </div>
      </body>
</html>

Et encore mieux si tu as peur que se soit pas assez clair:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<html>
|     <head>
|     </head>
|     <body>
|     |     <div>
|     |     |   <ul>
|     |     |   |     <li><a href="">lien</a>
|     |     |   </ul>
|     |     </div>
|     </body>
</html>

La je te garanti que se sera plus clair pour toi déjà et pour nous, parce que pour le moment faut déchiffrer ton code pour repérer où se ferment les balises que tu as ouvertes et sa fait perdre trop de temps, désolé mais je rejeterai un coup d'oeil quand tu aura modifier.
J'ai pas trop le temps sinon.

**furtif1** · 05/07/2007, 13h04

Ok alors la mise en page ce présenterai ainsi :
900px large, centré
une banniere en haut
Un menu a droite, un menu a gauche et un centre
Le menu gauche divisé en deux partie. Dans la partie du bas une image
Le menu de droite divisé en deux aussi. Avec en bas une image aussi
Tout cela doit etre extensible

Voila le code en plus clair :

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
<div id="conteneur2">
 
	<!-- On affiche la banniere du haut -->
	<div id="banniere2">
		<?php require("$Banniere"); ?>
	</div>
 
 
	<!-- On affiche le menu de gauche -->
	<div id="MenuGauche2">
		<?php require("$MenuGauche"); ?>
 
 
		<div id="MenuBasGauche">
		</div>
 
 
	</div>
 
	<!-- On affiche le contenu -->
	<div id="contenu2">
		<?php require("$Contenu"); ?>
	</div>
 
	<div id="MenuDroite">
		<?php require("$MenuDroite"); ?>
	</div>
 
</div>

**Xann_71** · 05/07/2007, 13h28

Ok je te passe un exemple pour le positionnement de tes div parce que j'ai pas trop de temps (sa aurait été mieux avec des décalages comme j'ai fait pour les balises mais c'est deja plus clair comme sa

):

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
 
...
<body>
 
<div id="Page">
|
|     <div id="header">    <!-- La tu met ta banniere ou met la dans le CSS c'est encore mieux mais c'est dans la partie header qui faut la déclarer -->
|     </div>
|
|     <div id="MenuLeft">
|     |
|     |     <div id="ElementTop">
|     |     </div>
|     |
|     |     <div id="ElementBottom">
|     |     |     <img src="TonImage.jpg"> <!-- Une autre solution pour les image consiste les déclarer dans le CSS ce qui rend bien mais je crois qu'il faut utiliser un div à la place de <img> et déclarer l'image en background-image je te montre ça dans le CSS -->
|     |     </div>
|     |
|     </div>
|
|     <div id="main">
|     </div>
|
|     <div id="MenuR">
|     |     <div id="ElementTop">
|     |     </div>
|     |
|     |     <div id="ElementBottom">
|     |     |     <img src="TonImage.jpg">
|     |     </div>
|     |
|     </div>
|
|     <div id="footer">
|     </div>
<div>
</body>
...

(La dans mon code tu vois du premier coup d'oeil où s'arrete les balises que j'ai ouvert. C'est sa que je voulais dire par plus clair. Avoue que sa gagne du temps pour se repérer

)

Ton CSS donnera ça

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
 
#Page
{
 margin: auto;    /* C'est sa qui permet de centrer ta page */
}
#MenuL
{
 float: left;
}
 
#main
{
 float: left;
}
 
#MenuR
{
 float: left;      /*Ou float: right; c'est comme tu veux pour celui la */ 
}

PS: Je fais mes id en anglais c'est plus court.

J'ai pas fini le message, mais je dois faire autre chose la, je reprend dés que j'ai du temps mais sa sera peut etre pas avant demain. J'espere que sa a deja pu t'aider sa

**Damouille** · 05/07/2007, 14h15

Envoyé par Xann_71

(La dans mon code tu vois du premier coup d'oeil où s'arrete les balises que j'ai ouvert. C'est sa que je voulais dire par plus clair. Avoue que sa gagne du temps pour se repérer

)

moi je met des commentaires à la fin des div du genre

<div id="content">
</div> 

Pour les grosses pages ca rend de bons services

**Xann_71** · 05/07/2007, 15h03

y'a pas de souci demande si tu as besoin d'autre chose

.
Les commentaires aussi sa va bien oui. Apres c'est une question d'habitude

**furtif1** · 05/07/2007, 16h34

Grâce à vos conseils, sous FF c'est nickel maintenant;

Mais je suppose que IE n'aime pas les height:100% quand il n'y a rien dans la page. Il me met donc tout en mini. y a t'il une commande CSS miracle pour que IE et FF soient amis ?

Merci

**Damouille** · 05/07/2007, 13h31

Ok assez basique alors

Voici une mise en page sans tab de compass design trouvé sur joomla.org

Ca n'utilise que les float et pourcentage. Idéale pour la mise en page que tu souhaite réaliser

Voici le html

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head>
 
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="wrap">
 
<div id="header">
le header
</div>
 
<div id="main-body">
 
<div id="content">
<div class="inside">
Le content
</div></div>
 
<div id="sidebar">
<div class="inside">
menu de gauche
</div></div>
 
</div> <!--end of main-body-->
 
<div id="sidebar-2">
<div class="inside">
menu de droite
</div></div>
 
<div id="footer">
le footer
</div>
 
</div> <!--end of wrap-->
 
</body> </html>

et le CSS

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
/*Compass Design Customize.css file */
 
/*Ici pour la mise en page générale */
 
body {
text-align:center; /*center hack*/
}
#wrap {
width:80%; /*center hack*/
margin:0 auto; /*center hack*/
text-align:left;
}
#header {
text-align:left;
}
#footer {
clear:both;
}
#main-body {
float:left;
width:75%;
}
#sidebar-2 {
float:right;
width:25%;
overflow:hidden;
margin-left:-3px;
}
#content {
float:right;
width:66.5%;
overflow:hidden;
}
#sidebar {
float:left;
width:33.5%;
overflow:hidden;
}
.inside {
padding:10px;
}
 
/*La pour customiser */
 
* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
body {
font-size:76.1%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3em;
}
#header {
background:#0099FF;
}
#footer {
background:#0099FF;
}
#main-body {
background: #CC0000;
}
#sidebar-2 {
background:#009933;
}
#content {
background: #999999;
}
#sidebar {
background: #009933;
}

**furtif1** · 05/07/2007, 14h09

Merci beaucoup a vous deux. Avec tout sa je pense pouvoir m'en sortir.

Galere avec des DIV

CSS

Vue hybride

Discussions similaires

Partager

Partager