Discussion :

[Msieurduss]

Bonjour à tous,

Je suis en train de travailler à une nouvelle version du site d'un ami (www.actifmicro.com/v2/ pour voir ça), et j'ai un petit souci.
Comme vous le verrez sur le lien, la page, après le menu, se divise en deux (une partie gauche et une partie droite). Si la partie gauche est plus longue que la droite, le blanc du fond ne descend pas jusqu'en bas, et vice-versa. Pour pallier à ce problème, j'ai rajouté la ligne suivante dans mon code CSS :

Code :

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

html,body,div#contenant,div#gauche,div#droite{height:100%;}

Problème : les pages sont maintenant "trop grandes", pas adaptées au contenu quoi... Ce problème a l'air assez récurrent, et malgré des recherches sur les sites et forums de CSS, je n'arrive pas à résoudre mon problème... Notez au passage qu'il y a un système de sous-menu, un peu foireux sur Firefox d'ailleurs (pas collé au menu initial).

Je suis preneur de toute idée
En attendant, voici les codes sources (j'ai enlevé ce qui ne sert à rien, c'est plus facile à lire) :

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
 
 
<div id="contenant">
        <div id="haut"><a href="index.php?p=accueil" alt="Revenir &agrave; la page d'accueil"><div id="zone_clic"></div></a></div>
        <div id="menu">
                <dl>
                        <dt><img src="images/menu_gauche.gif" /></dt>   
                </dl>   
                <dl>
                        <dt><a href="index.php?page=accueil"><img src="images/accueil.gif" /></a></dt>  
                </dl>
                <dl>
                        <dt><a href="index.php?page=societe"><img src="images/societe.gif" /></a></dt>  
                </dl>
                <dl onmouseout="montre('');" onmouseover="javascript:montre('smenu1');">                        
                        <dt><img src="images/services.gif" /></dt>
                        <dd id="smenu1">
                                <a href="index.php?page=prestations">Prestations</a><br />
                                <a href="index.php?page=contrat">Contrat PME/PMI</a>
                        </dd>
                </dl>
                <dl onmouseout="montre('');" onmouseover="javascript:montre('smenu2');">                        
                        <dt><img src="images/experience.gif" /></dt>
                        <dd id="smenu2">
                                        <a href="index.php?page=informatique">Informatique</a><br />
                                        <a href="index.php?page=sites">Sites Internet</a>
                        </dd>
                </dl>
                <dl>
                        <dt><a href="index.php?page=livre_or"><img src="images/livre_or.gif" /></a></dt>        
                </dl>
                <dl>
                        <dt><a href="index.php?page=contact"><img src="images/contact.gif" /></a></dt>  
                </dl>
                <dl>
                        <dt><img src="images/menu_droite.gif" /></dt>   
                </dl>   
        </div>
        <div id="gauche">       
blabla , partie de gauche, le texte, la page quoi... Bref la partie dynamique 
        </div>
        <div id="droite">
                <div class="titre">Nos comp&eacute;tences</div>
                <div class="cadre">
blabla de droite (premiere case)
                </div>
 
                <div class="titre">O&ugrave; sommes-nous ?</div>
                <div class="cadre" style="padding:0;"><a href="index.php?page=carte"><img src="images/googlemaps.jpg" /></a></div>
        </div>
        <div style="clear:both;"></div>
        <div id="footer">
</div> <!-- fin #contenant -->

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
 
html, body, h1, h2 {margin:0; padding:0;}
body {background:#ccc;}
html,body,div#contenant,div#gauche,div#droite{height:100%;}
 
#contenant { width:721px; margin-left:auto; margin-right:auto;}
 
#haut { width:721px;height:163px;background-image: url(images/bandeau.gif);}
 
#zone_clic {
        top:0;
        left:0;
        width:200px;
        height:140px;
        cursor:pointer;
}
 
#menu { width:721px; height:27px; } #menu a img {border:0;} #menu li {list-style-type:none;margin:0;padding:0;}
#menu dl {
        float: left;
}
#menu dl, #menu dt {
        margin: 0;
        margin-bottom:-4px;
        padding: 0;
        list-style-type: none;
}
#menu dd {position: absolute;margin:0;}
 
#gauche { width:540px; float:left; background-image: url(images/barre_gauche.gif);background-repeat:repeat-y;} 
 
#droite { width:181px; float:left; background-image: url(images/barre_droite.gif); background-repeat:repeat-y; }
#droite .titre {width:158px; height:25px;margin-top:12px;margin-left:3px; 
                                text-align:center;font-weight:bold;line-height:24px;}
#droite .cadre {border:1px solid #404040; width:156px; margin-left:3px; padding-top:5px; padding-bottom:5px;line-height:19px;}
 
#footer {width:721px; height:27px; background-image: url(images/barre_bas.gif); background-repeat:no-repeat;}

(pour l'avoir en complet : <lien url="http://www.actifmicro.com/v2/styles.css">www.actifmicro.com/v2/styles.css</lien> )

J'ai uploadé une version sans le height:100%, visible ici : http://www.actifmicro.com/v3
Ca vous donnera une idée du problème... Allez voir la page prestations notamment, et regardez la partie de droite...

Merci d'avance

[Dan_A]

As-tu essayé la méthode décrite ci-dessous :
http://www.search-this.com/2007/02/2...olumns-in-css/

[Msieurduss]

Bonjour et merci pour la réponse,
Oui j'ai tout essayé, rien n'y fait. Le CSS rencontre encore quelques lacunes, notamment cette histoire de taille... Résultat : j'utilise un tableau pour cette partie du site. Plus simple, plus vite fait, moins joli mais finalement plus gérable et moins prise de tête.