28172 sujets

CSS et mise en forme, CSS3

bonjour à tous,
J'ai un petit soucis au niveau d'un div. j'aimerais que le ce div devienne scrollable si son contenu est trop long.
Mais bizarrement l'overflow ne marche pas et à la place j'ai un retour à la ligne tout ce qu'il y'a de plus propre.

Voici le div qui me pose problème :
<div class="gauche">
	<span id="0" class="bg_menu_cam_on" onclick="insertCam(this.id)">Nom très long pour overflow</span>
	<input type="hidden" value="0" name="etat_0" id="etat_0" /><br />
	<span id="1" class="bg_menu_cam_off" onclick="insertCam(this.id)">Nom</span><input type="hidden" value="0" name="etat_1" id="etat_1" /><br />
	<span id="2" class="bg_menu_cam_off" onclick="insertCam(this.id)">nom assez long</span>
	<input type="hidden" value="0" name="etat_2" id="etat_2" /><br />
</div>


Et le style associé :

.gauche
{
	float:left;
	height:300px; 
	width:120px;
	margin-left:10px;
	overflow:auto;
	background-color: #fff;
	text-align: left;
	
}
.bg_menu_cam_on
{
	background:#dcf0fd;
	background-position:center center;
	display:block;
	width:100%;
	height:12px;
	cursor:pointer;
}
.bg_menu_cam_off
{
	display:block;
	width:100%;
	height:12px;
	cursor:pointer;
}


Ai je oublié quelque chose ?

merci
Modifié par grunky (29 Feb 2008 - 14:19)
Rien n'empeche le texte de repasser à la ligne... le texte à un place spécifique en largeur et il la respecte.

Il existe une propriété CSS qui dit :"Ne saute pas de ligne entre les mots"

white-space : no-wrap;


Qui bien entendu ne doit pas fonctionner sur tout les navigateurs mais qui a peut etre un equivalent Smiley confus

Sinon tu as aussi la possibilité d'encapsuler le texte dans une div plus grande que celle dans la quelle il est contenu. Le texte qui sera donc contenu dans cette div bénéficiera d'un plus grand espace que la div qui est visible et cette dernière deviendra donc scrollable.

J'espère avoir au moins pu te donner une piste Smiley smile
Parfait merci , ca semble compatible FF , IE6/7 donc ca me suffit étant donner que c'est une appli intranet.