Mettre un padding avec un overflow

Bonjour,

Pour limiter l'affichage d'un texte, j'applique à une div un overflow, l'inconvénient est que le texte est coupé pile au niveau de la div.

J'aurais voulu ajouter un petit espace blanc avant la coupure mais même si j'applique un padding-left à ma div, il n'y a pas de blanc.

#colonneGauche {
	float: left;
	height: auto;
	width: 200px;
	margin: 10px 0px 30px 20px;
	padding: 0px;
	border: #b163aa 1px solid;
	overflow: hidden;
}

#colonneGauche h1{
	margin: 0px;
	padding: 0px 0px 0px 5px;
	background: #b163aa;
	color: #FFFFFF;
}

#colonneGauche ul{
	margin: 5px;
	padding: 0px;
	line-height: 1em;
}

#colonneGauche li {
	margin: 0px 5px 5px 0px;
	padding: 0px 0px 0px 15px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background: url(../images/puce.gif) no-repeat 0 1px;
	white-space: nowrap;
}

#colonneGauche  a {	
	color: #3b0328;
	font-size: 10px;	
	padding: 0px;
	}
	
#colonneGauche a:hover {
	color: #cc55a4;	
	text-decoration: none;
}

Auriez vous une astuce ?

Merci
Modifié par pan (12 Dec 2008 - 21:55)

[attention, question con]

Il est coupé à gauche ton texte ???

[/question con]

mistike a écrit :
[attention, question con]

Il est coupé à gauche ton texte ???

[/question con]

Non il est coupé à droite.
Le texte se présente sous la forme d'une liste à puce avec un padding à gauche 15px.
Donc c'est bien à droite qu'il dépasse.
Modifié par pan (12 Dec 2008 - 22:24)

J'ai du mal à visualiser le truc... tu aurais pas une page exemple en ligne, ou ton code html ?

page (site) en construction (la colonne de gauche) => www.clipdeco.com
Modifié par pan (12 Dec 2008 - 22:32)

Ok je vois mieux

Tu veux vraiment que ça soit coupé ? C'est pas mieux si ça va simplement à la ligne ?

le problème si je vais à la ligne c'est que la liste n'est plus régulière.
Je ne peux pas intervenir sur la fonction php pour limiter le nombre de caractères à afficher du coup, je me suis penché sur l'overflow

Salut,

pour faire ce que tu veux tu pourrais par exemple affecter l'overflow:hidden; à l'élément UL plutôt qu'au DIV :

#colonneGauche ul {
    overflow:hidden;
    width: 92%;
    margin: 0;
    padding: 5px;
}

+1 pour afficher le texte (en supprimant le white-space:nowrap).

Tu pourrais au minimum mettre overflow:auto; plutôt que hidden sur le UL.
Modifié par Heyoan (12 Dec 2008 - 23:00)

Heyoan t'a répondu avant moi

A ta place je ferais plutôt :

#colonneGauche li {
	margin: 0px 5px 5px 0px;
	padding: 0px 0px 0px 15px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	list-style: url(../images/puce.gif);
	text-align: justify;
        list-style-position: inside;}

(il faudra jouer sur les paddings)

Après c'est une question de goûts, mais le texte coupé, je trouve ça assez désagréable à lire !
Modifié par mistike (12 Dec 2008 - 23:06)

mistike a écrit :

Après c'est une question de goûts, mais le texte coupé, je trouve ça assez désagréable à lire !

Et c'est surtout inaccessible à moins de désactiver les css.

Bon effectivement c'est moche et c'est pas tellement conforme aux specs.

Du coup, j'ai tout viré

Merci à tous !