propriété Overflow : Scroll

Version imprimable

21/05/2007, 15h46
calagan99

propriété Overflow : Scroll

Otez moi d'un doute svp,

si je fais quelquechose de ce style:

Code:

#TV{height:200px; width:130px;overflow:scroll}

en cas de depassement des 200px, je devrais voir s'afficher une scrollbar qui me permette de caller correctement mes elements et de ne pas les voir depasser de 15km sous le footer?

Je me trompe ou visual studio se fout de moi?

MERCI D'AVANCE
21/05/2007, 16h33
Strix

Salut.

Mets overflow:auto; plutôt. Si tes éléments prennent moins de 200px, tu n'aura pas de scroll, si plus grand, il apparaîtra

Mais sinon ton code est bon. Ah non il te manque un ; après [I]scroll[/b]
21/05/2007, 16h50
calagan99

Merci pour ta réponse, mais tant avec le scroll que le auto je n'ai pas de scroll bar.
J'en deduis donc que le probleme ne dois pas venir de mon css mais de mon appli, je ne sais pas pourquoi, je ne sais où, mais ca a tendance a me prendre vite le choux.
21/05/2007, 17h00
Strix

C'est possible d'avoir le morceau de code html concerné ?

IL est situé dans une page aspx mais pas de soucis, je simplifie cependant le code:

Code:

1
2
3
4
5
6
7
8
9
10
11
div id="MainMenu">
        <p class="Titre">titre de ce secteur</p>
        <p class="MainMenuTV">
            <asp:TreeView>
Ici un treeview qui me permet d'afficher un menu arborescent
            </asp:TreeView>
            <asp:TreeView>
Un second Treeview vie lequel j'affiche des données en fonction du noeud selectionné dans le treeview precedent
</asp:TreeView>       
        </p>
    </div>

et le css:

Code:

.MainMenuTV{height:260px;width:160px;overflow:auto;}

cette classe est appellée sur les deux treeviews

Edit :
Je t'ai dit des bétises... :mrgreen: donc j'ai supprimé la partie inutile de mon post

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style>
	.MainMenuTV	 {
		height:200px;
		width:130px;
		overflow:auto;}	
	</style>
</head>
<body>
	<div id="MainMenu">
	        <p class="Titre">titre de ce secteur</p>
                <p class="MainMenuTV">
                        test<br>test<br>test<br>test<br> 
                        test<br>test<br>test<br>test<br> 
                        test<br>test<br>test<br>test<br>      
                        test<br>test<br>test<br>test<br> 
                        test<br>test<br>test<br>test<br> 
                        test<br>test<br>test<br>test<br> 
                        test<br>test<br>test<br>test<br> 
	        </p>
	    </div>
</body>
</html>

Ça, ça marche

21/05/2007, 18h10
calagan99

Nous sommes d'acord, cela fonctionne, sauf dans ma page. Et je pense que le vb.net y est pour quelque chose.
Merci pour ton aide, je vais devoir chercher la connerie qui fait que mon CSS n'est pas pris en compte sur cette partie de la page

Je reviens a la charge car j'ai résolu une partie du problème mais tout n'est pas fonctionnel.

J'ai donc un treeview a gauche, qui reagit au clic en en ouvrant un second positionné juste en dessous

or, impossible de conserver ce 2e treeview sous le premier et d'avoir en mode temps overflow:auto qui fonctionne.

Je met mon projet tel quel pour le moment, mais le but est que les deux treeviews soient scrollables et le 2e sous le 1er, c'est ce que je ne parviens pas a faire

Avez vous une idée?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div id="content"> <div id="MainMenu"> <p class="Titre3"><asp:Literal ID="Literal3" runat="server" Text="TEXT" EnableViewState="false"></asp:Literal></p> <p> <asp:TreeView id="TVMenu" runat="server" EnableViewState="true" OnTreeNodePopulate="populateTVMenu" </asp:TreeView> </p> <p> <asp:TreeView ID="TV" runat="server" EnableViewState="true"></asp:TreeView> </p> </div> </div>
et le 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 #content { width:870px; float:left; background:url(Images/VLine.gif); background-position:top left; background-repeat:no-repeat; margin-left:3px; } #MainMenu { background:url(Images/VLine.gif); background-position:top right; background-repeat:no-repeat; float:left; width:215px; height:520px; margin:-4px 8px 0px 3px; padding:4px 0px 0px 5px; font-family:Garamond, Times New Roman; font-weight:bold; font-size:14px; color:#000000; overflow:auto; }