28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je travaille en CSS2 et j'ai une mise en forme que je n'arrive pas à réaliser.
Peut être n'est elle pas réalisable ...

Est-il possible d'avoir un rendu tableau avec la première colonne qui s'adapte au contenu (sans retour à la ligne) et une seconde colonne qui prend le reste de la largeur sans retour à la ligne et un ellipsis si le texte dépasse.

Rien de mieux qu'une image pour expliquer :
http://www.wdgp.com/images/exemple_2_colonnes.jpg

J'ai essayé avec un tableau et des div flottantes mais sans résultat.
Le meilleur résultat obtenu est avec un tableau avec la propriété table-layout:fixed mais la première colonne prend 50% au lieu de s'adapter, la seconde colonne coupe bien le contenu avec ellipsis.

Pensez-vous que c'est possible ?
Si oui je suis ouvert à toute proposition table ou div flottantes ...

Merci d'avance.
Bonjour à toi,

Je te propose la solution suivante :


<div id="tableau">
	<div class="sidebar">
		<div>30 Septembre</div>
		<div>10 Aout</div>
	</div>
	<div class="content">
		<div>Colonne prenant le reste mais coupé si trop long</div>
		<div>avec Ellispis</div>
	</div>
</div>



*{margin:0;padding:0;border:0 none;}

#tableau .sidebar{float:left;}

#tableau .sidebar div, #tableau .content div{
	padding:5px;
	border:1px solid #fff;
}
#tableau .sidebar div{
	background:#c4c4c4;
}
#tableau .content div{
	background:#dadada;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}


Sauf erreur de ma part, cette technique est compatible sur tous les navigateurs Smiley cligne
En espérant t'avoir aider.

A bientôt !
Merci beaucoup shadox17.

C'est parfait, ça fonctionne comme je le souhaite.
Je n'avais pas pensé à ce système: mettre en colonne avant de mettre en ligne.

Bonne continuation.