[Css]Soucis avec des div

Version imprimable

Bonjour,

Alors voila, j'ai un petit soucis avec les div!
Comme vous pouvez le constater ci-dessous, j'aimerai que ma div Verte soit à droite du menu et de la news (div orange) et sur toute la hauteur mais j'y arrive pas :(

Pareil, j'aimerai que ma div global (en blanche) soit d'une taille en hauteur qui varie suivant le contenue de la div verte ...

J'espére être claire :aie:

Voici ce que j'ai :
http://marie.montigny.free.fr/essai.JPG

Et voici ce que je voudrai :
http://marie.montigny.free.fr/essai2.JPG

Mon code HTML :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>      Accueil |
    </title>
    <meta name="authors" content="Marie Montigny pour " />
    <meta name="Copyright" content="Copyright - Marque déposée">
    <meta name="Description" content="..." />
    <meta name="Expires" content="never" />
    <meta name="Keywords" content="..." />
    <meta name="Rev" content="..." />
    <meta name="Revisit-after" content="15" />
    <meta name="Robots" content="all" />
    <meta name="Subject" content="| Accueil" />
    <meta name="Date-Creation-yyyymmdd" content="20030501">
    <meta name="Date-Revision-yyyymmdd" content="20060519">
    <meta name="Category" content="Loisir">
    <meta name="Category" content="Hobbies">
    <meta http-equiv="Robots" content="all" />
    <link rel="stylesheet" type="text/css" href="./Css/style.css" />
  </head>
  <body>
 
 
 
          <div class="global"> 
 
              <div class="affichage"> 
              <div class="menu"> Menu  </div>
              <div class="news">Placez ici le contenu de  class "news"</div>
 
              <div class="texte">Placez ici le contenu de  class "texte"</div>
 
              </div>
 
              <!-- Pied de page -->  
            <div class="footertop">
              <p class="footerp">          ©2006
                <a href="#" title="L'Octogone" class="footera">Copyright L'Octogone</a>
                <br />
                <a href="#" title="A Propos" class="footera">A Propos</a>          |
                <a href="mailto:contact@.fr" title="Contact L'" class="footera">Contact</a>          |
                <a href="http://marie.montigny.free.fr/" title="Site by pour " class="footera">pour </a></p>
 
      <!-- Fin Pied de Page -->
        </div>
  </div>
 
 
  </body>
</html>

Et mon code 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
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
body {
    margin: 0px 0px 40px 0px;
    background-color: #FFFFCC;
    background-repeat: repeat-x;
    background-image: url(../Images/bkgd2.jpg);
}
 
/* ************* DIV ************* */
 
.global {
    width: 730px!important;
    padding: 0px;
    background-color: #FFFFFF;
    text-align: left;
    font-family: "Monotype Corsiva";
    top: 58px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    position: absolute;
    left: 93px;
    vertical-align: middle;
    height: 506px;
    bottom: 10px;
}
 
 
.footertop {
    width:660px;
    padding:20px 0 0 0;
    margin:0 0 0 7px;
    text-align:center;
    background-position: center;
    position: absolute;
    bottom: 10px;
    left: 20px;
}
.affichage {
    font-family: "Monotype Corsiva";
    background-color: #CCCCCC;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}
.menu {
    background-image: url(file:///C|/Documents%20and%20Settings/mmontigny/Bureau/test/images/menu.JPG);
    position: relative;
    height: 300px;
    width: 170px;
    left: 2px;
    top: 2px;
}
.news {
    background-color: #FFCC66;
    width: 170px;
    position: relative;
    left: 2px;
    top: 10px;
}
.texte {
    background-color: #99FF99;
    width: 550px;
    position: relative;
    float: right;
    top: 2px;
    left: 10px;
}
 
.navGauche{
    width: 200px;
}

Pfff, désolée, ca fait bcp de choses à mettre et à lire :?

En espérant avoir vos lumiéres :idea:

Merci.

19/05/2006, 15h33
nebule

re,

en utilisant les propriétés Float, je m'en débrouilleà peu prés mais j'ai toujours une question.

Dans mon code Css j'ai remplacé les positions : relative par float : left
mais pour ma div orange, je fais comment pour la repasser à la ligne ?

Je fais comment pour avoir ma div verte qui prenne toute la hauteur ?

ton css etait un peu confus avec des trucs qui se contrairiaient un peu.
Voila di moi si ca corrspond a ce que tu veu

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
35
36
37
38
39
40
41
42
43
44
 
body {
    margin: 0;
    margin-bottom: 40px;
    background: url(../Images/bkgd2.jpg) repeat-x #ffc;
    font-family: "Monotype Corsiva";
}
 
/* ************* DIV ************* */
 
.global {
    width: 730px;
    height: 506px;
    padding: 0;
    margin: auto auto;
    text-align: left;
    background: #fff;
}
 
.affichage {
    background-color: #ccc;
    overflow:auto;
    height: 430px;
}
.gauche {
    float:left;
    width: 170px;
}
.menu {
    background-image: url(file:///C|/Documents%20and%20Settings/mmontigny/Bureau/test/images/menu.JPG);
}
.news {
    background-color: #fc6;
}
.texte {
    background-color: #9f9;
    margin-left: 170px;
}
.footertop {
    height: 80px;
}
.footertop p {
text-align: center;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="global">
  <div class="affichage">
        <div class="gauche">
    <div class="menu">Menu</div>
    <div class="news">Placez ici le contenu de class "news"</div>
        </div>
    <div class="texte">Placez ici le contenu de class "texte"</div>
  </div>
  <!-- Pied de page -->
  <div class="footertop">
    <p class="footerp">©2006 <a href="#" title="L'Octogone" class="footera">Copyright L'Octogone</a> <br />
      <a href="#" title="A Propos" class="footera">A Propos</a> | <a href="mailto:contact@.fr" title="Contact L'" class="footera">Contact</a> | <a href="http://marie.montigny.free.fr/" title="Site by pour " class="footera">pour </a></p>
    <!-- Fin Pied de Page -->
  </div>
</div>
</body>