overflow uniquement vertical

**Seidris** · 18/03/2009, 16h46

Bonjour à tous.

Je cherche un moyen de mettre un overflow, avec une scrollbar main uniquement en vertical. Il faudrait que le retour à la ligne se fasse automatiquement. Si quelqu'un connait un attribut ou autre, voire un truc en PHP, soyons fous...

**mdr_cedrick** · 18/03/2009, 18h01

en php c'est pas possible car il n'agit pas sur le code html
il te faut donc utiliser le côté css de la chose

essaye un truc du genre

Code :

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

.monBloc {overflow-y:auto;}

**Seidris** · 18/03/2009, 18h31

je vois pas de différence. Pas sous FF3 ou Opera 9 en tout cas...

Code :

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

1
2
3
4
5
6
7
8
div#contenu 
{
	float:left;
	left:20px;
	width:750px;
	height:650px;
	overflow : auto;
}

(pour info)

edit : Si vous trouvez pas, au pire je viens de me rendre compte qu'Opera le prend correctement, donc je pense qu'il n'y a pas possibilité. firefox me colle un scrollbar et IE... ben le site est pas opti pour IE pour l'instant donc bon...

**mdr_cedrick** · 19/03/2009, 09h05

http://www.brunildo.org/test/Overflowxy2.html
très pratique !

**Seidris** · 26/03/2009, 14h07

Bon, merci du tuyau, apres test ça me donne :

Sous IE7 : c'est ok. Même si le reste de ma CSS est pas opti (je jetterai un oeil pour des tutos la dessus) :

http://nsa06.casimages.com/img/2009/...2317919521.png

Sous firefox : C'est pas ok : J'ai pas de retour à la ligne quand il arrive à la limite de mon div :
http://nsa06.casimages.com/img/2009/...2446527485.png
(même si il prend pas trop mal la le reste de la CSS.)

Je vous met la CSS en entier (stylesheet.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
body
{
	background: url("images/background.jpg") repeat-x;
	text-align:center;
	font-family:verdana, sans-serif;
	margin-top:20px;
	margin-bottom:20px;
	white-space:pre;
}
 
a:link{text-decoration:underline;color:#000;}
a:visited{text-decoration:underline;color:#000;}
a:hover{text-decoration:underline;color:#000;}
 
 
div#page 
{
	background-color:#fff;
	width:990px;
	height : 1000px;
	margin:auto;
	border:1px #000 solid;
}
 
div#bandeau {
	width:990px;
	height:320px;
	}
div#menu {
	float:left;
	width:245px;
	height:650px;
	}
div#sous-menu
{
	width : 245px;
	height : 150px;
	background-image:url("images/background_menu.jpg");
}
 
div#sous-menu ul
{
	margin-left:40px;
	font-size:12px;
	font-weight:bold;
	list-style-type:none;
	text-align:left;
}
 
 
div#sous-menu h3
{
	text-align:center;
	font-weight:normal;
	font-size:22px;
}
div#contenu 
{
	float:left;
	left:20px;
	width:745px;
	height:650px;
	overflow-y: auto;
	overflow-x: visible;
}
 
div#contenu #lettrine
{
	float:right;
	margin-right : 5px;
}
 
div#pied_page {
	clear:both;
	width:990px;
	height:30px;
	background-image:url("images/barre_bas.jpg");
	}

Et voici ma page d'index (le reste des pages n'est qu'un include sur l'index.) : index.php

Code html :

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
<html>
<head>
	<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
	<link rel='stylesheet' type='text/css' href='stylesheet.css'>
	<title>Perignat-lès-Sarliève : Si t'es jeune</title>
</head>
<body>
 
<div id='page'><div id='bandeau'><embed width='990' height='320' src='flash/home.swf' /></div>
	<div id='menu'>
		<div id='sous-menu'>
		<h3>Découvrir</h3>
		<ul>
			<li><a href='index.php'>Présentation</a></li>
			<li><a href='index.php?page=organigramme'>Organigramme</a></li>
			<li><a href='index.php?page=but'>But/Objectifs</a></li>
			<li><a href='index.php?page=fonctionnement'>Fonctionnement</a></li>
		</ul>
		</div>
		<div id='sous-menu'>
		<h3>S'informer</h3>
		<ul>
			<li><a href='index.php?page=calendrier'>Programme des activités</a></li>
			<li><a href='index.php?page=projets'>Les projets</a></li>
			<li><a href='index.php?page=reunions'>Réunions</a></li>
		</ul>
		</div>
		<div id='sous-menu'>
		<h3>Contacter</h3>
		<ul>
		<li><a href='index.php?page=contact_stj'>Si T'es Jeune</a></li>
		<li><a href='index.php?page=contact_mairie'>Mairie de Pérignat</a></li>
		<li><a href='index.php?page=forum'>Forum/Tchat</a></li>
		</ul>
		</div>
	</div>
	<div id='contenu'>
	<!--contenu : inclusion d'une page -->
	</div>
	<div id='pied_page'>
		Association Si T'es Jeune (c) 2007 - Tous droits réservés.
	</div>
</div>
</body>
</html>

(J'ai réduit à ce qui nous interessait)

Pour ceux qui veulent voir le résultat en vrai : http://sitesjeune.fr.nf

(avec un zoli lorem ipsum pour qu'on voie bien le problème)

Voila, j'espère que j'ai explicité mon problème...

**Seidris** · 28/03/2009, 18h12

Bon, en fait j'ai repris ma CSS de zéro avec un pote, c'est réglé. Merci quand même pour l'aide.

overflow uniquement vertical

CSS

Vue hybride

Discussions similaires

Partager

Partager