[Css]Soucis avec des div

**nebule** · 19/05/2006, 15h19

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

Voici ce que j'ai :

Et voici ce que je voudrai :

Mon code 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
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 :

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
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

Merci.

**nebule** · 19/05/2006, 15h33

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 ?

**masu** · 19/05/2006, 17h03

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 :

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
 
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 :

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
<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>

[Css]Soucis avec des div

CSS

Discussions similaires

Partager

Partager