28172 sujets

CSS et mise en forme, CSS3

Plus de retour a la ligne dans un DIV

Bonjour,

Je cherche une astuce valable pour eviter les retour a la ligne dans un DIV contenant des DIV
j'ai cette structure
<div BOX>
<div LIGNE><div ICONE>xxx</div><div LABEL>xxx x xxxx xxxx</div></div>
</div>
Le DIV BOX a une largeur definie
Je ne veux pas de retour a la ligne dans le DIV LIGNE, meme si il depasse le DIV BOX
Exemple sur cette photo:
upload/16613-jaijeveux.gif

mon code html contenant les styles
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
.line .label,
.line .icon {
	float: left;
	white-space: nowrap;
		margin: 2px

}
.label{ background-color:#FFFF00 }
.icon { background-color:#FF00FF }
.box {
	height: 200px;
	width: 200px;
	overflow: auto;
	border: 1px solid #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	background-color: #00CC00;
}
.line {
	height:20px;
	background-color: #3366CC;
	margin: 2px;
	width: 100%;
}
-->
</style>
</head>

<body>
<div class="box">
	<div class="line">
		<div class="icon">&copy;</div>
		<div class="label">sdjhdsjfdsf dsfjsdhfj hsdjfsd fsdjfhdsjhfjsdhf dfsdjkhfjsdfhsd fsdjkfhsdjkfsdh</div>
	</div>
	<div class="line">
		<div class="icon">&copy;</div>
		<div class="label">sdjhdsjfdsf dsfjsdhfj hsdjfsd fsdjfhdsjhfjsdhf dfsdjkhfjsdfhsd fsdjkfhsdjkfsdh</div>
	</div>
</div>
</body>
</html>


Merci d'avoir pris le temps de me lire.. Thierry
Tu pourrais tester avec des span, des elements en ligne? Car les div par définition, c'est un bloc qui retourne à la ligne.

<div class="line">
	<span class="icon">&copy;</span>
	<span class="label">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vel tortor nec odio aliquet elementum.</span>
</div>


Dans ce code tu n'a même pas besoin d'utiliser de float.
Et je n'ai pas de retour à la ligne moi Smiley cligne
Oui mais si tu met le tout dans un <div> qui a une largeur (style="width:200px") inferieur a la longueur de la ligne, alors tu te retrouve avec des retours a la ligne.
Alors que moi je voudrais qu'il adapte la taille de "l'ascenseur" au texte et non pas que mon texte s'adapte a la taille de la boite.

J'ai essayé aussi <SPAN LINE><SPAN ICON></SPAN><SPAN LABEL></SPAN></SPAN>

Ca marche pas non plus...
Ca fonctionne chez moi.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
.box {
	overflow: auto;
	width: 200px;
	height: 200px;
	border: 1px solid #000;
	background: #0c0;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
}
.icon {
	background: #f0f;
	width: 11px;
	height: 15px;
	margin: 2px;
}
.label {
	background: #ff0;
	white-space: nowrap;
}
.line {
	height: 20px;
}
</style>
</head>

<body>
	<div class="box">
		<div class="line">
			<span class="icon">©</span><span class="label">kfldsqmj mlqk mlqj kdmlqjdfklmqj dfkqj ksdfm jsdqmlf jksmq jfdklmq jkdfmqjfd mlqjdk lmqfd sqf q fsdq</span>
		</div>
		
		<div class="line">
			<span class="icon">©</span><span class="label">kfldsqmj mlqk mlqj kdmlqjdfklmqj dfkqj ksdfm jsdqmlf jksmq jfdklmq jkdfmqjfd mlqjdk lmq</span>
		</div>
	</div>
</body>
</html>

Par contre, tu veux aussi que la div line prenne la taille de tes span ?
lilycoeur a écrit :
Par contre, tu veux aussi que la div line prenne la taille de tes span ?

Auquel cas on pourra tenter de faire flotter div.line (div.line {float: left; clear: left;}).
Modifié par Florent V. (07 May 2008 - 12:44)
Sujet clos
Aller à