[resolu]Aligné à gauche une partie et l'autre à droite!

bonjour,

je voudrais sur une meme ligne aligné une partie de mon text a gauche et l'autre a droite.
J'ai bien tenté cela, mais sans succès.

ma question est pour la deuxième ligne de code.
Je voudrais "bien a vendre ref n 1231" a gauche et le prix a droite

	<div id="bien">
		<h2>Bien à vendre ref n° 1231<span style="text-align:right"> 500 000 Euros</span> </h2>
		<div id="photo">
			<img src="../image/nathBdpV.JPG" alt="une photo du bien"  height="50px"  width="60px"/>
		</div>
			<p>
				Elitr fabulas mel ex. Sed admodum detracto an. In vel diam quas exerci, at velit aliquip denique cum. His ex altera definitionem, in sumo eloquentiam pro, nec ut posse reformidans. Nonumy aliquando vim at, in alterum torquatos consetetur vel. Viris habemus dolores nam ea, utinam option eu per, cu duo vidit modus deterruisset. Cum te diam persecuti. Iudico partiendo concludaturque pro ex, no quas natum volumus est, vis et dicunt scripta. Te ius feugiat euripidis reprehendunt, vocent aliquip nonummy per ea, te duis graeci conceptam nam. No nulla
				
			</p>
			<span >
				<a href="a_detail.html"style="text-align:right" >
					&nbsp;<img src="../image/application_view_detail.png" />D&eacute;tails...
				</a>

			</span>
			<h3>
				<img src="../image/printer.png" alt="Imprimer"  title="Imprimer cette fiche"/>&nbsp;
				<img src="../image/cart_put.png" height="18px"  width="18px" alt="Panier" title="Ajouter au panier"/>&nbsp;
				<img src="../image/email_go.png"  alt="E-mail" title="Envoyer &agrave; un ami"/>&nbsp;
			</h3>
	</div><!--bien -->

puis mon css

div#bien{
  border: 1px solid #0033FF;
  margin: 10px ;
  width:95%;
  text-align: left;
 
  }
  div#biendet{
  border: 1px solid #0033FF;
  width:100%;
  text-align: left;
 
  }
div#biendet h2
	{	
		height:1.5em;
		font-size: 1.2em;
		color: #FF9933;
		background-color:#0033FF;
		margin: 0px ;
	}
div#biendet h3
	{	
		height:1.5em;
		font-size: 1.2em;
		color: #FF9933;
		background-color:#0033FF;
		margin: 0px ;
		text-align:right;
	}

 
div#bien p{
 	margin: 5px ;
	text-indent: 0em;
}
div#bien h2
	{	
		height:1.5em;
		font-size: 1.2em;
		color: #FF9933;
		background-color:#0033FF;
		margin: 0px ;
	}
div#bien h3
	{	
		height:1.6em;
		font-size: 1.2em;
		color: #FF9933;
		background-color:#0033FF;
		margin: 0px ;
		text-align:right;
	}

merci pour toutes aides
Modifié par nath-0-0 (04 Nov 2005 - 16:44)

Bonjour nath-0-0.

nath-0-0 a écrit :

Je voudrais "bien a vendre ref n 1231" a gauche et le prix a droite

En gros ça peut ressembler à ça :

<p style="position: relative;">bien a vendre ref n 1231<span style="position: absolute; right: 0;">prix</span></p>

Slt,

j'avais déjà rencontré ce défi et j'avais codé un truc du genre :

.previouspage{

	height:1em;

	width:50%;

	margin-top:1em;

}





.nextpage{

	height:1em;

	text-align:right;

	width:50%;

	margin-left:50%;

	margin-top:1em;

}




.previouspage + .nextpage{

	position:relative;

	margin-top:-1em;

}

En gros, on a deux blocs (des <p/> dans ce cas) de même taille, un à gauche, un à droite. Celui de droite est 1em plus bas que celui de gauche, et donc on le remonte de 1em avec margin-top:-1em;

Bien sur il y a sans doute plus simple

a+

Edit : Stephan, le position:absolute; ne fonctionne-t-il pas que quand le bloc parent est lui même en absolute ?
Modifié par SirWam (03 Nov 2005 - 20:37)

SirWam a écrit :

Edit : Stephan, le position:absolute; ne fonctionne-t-il pas que quand le bloc parent est lui même en absolute ?

Non. L'élément positionné en « absolute » se positionne par rapport à son plus proche parent positionné, « relative », « absolute » ou même « static ».
Modifié par Stephan (03 Nov 2005 - 21:47)

C'est bon à savoir

Cya all

Peut-être on peut commencer par expliquer à Nath que l'attribut text-align:right s'applique à des balises de type bloc et que c'est pour cela qu'il ne fonctionne pas avec une balise <span> de type inline.

Ceci dit les solutions proposées à savoir more or less 1 bloc à gauche et un à droite positionnés en absolu ou en relatif est une solution qui fonctionne sur l'exemple donné (à savoir couper une ligne en 2). on pourrait d'ailleurs faire quelque chose comme ça :

<div>Bien à vendre ref n° 1231</div><div style="text-align:right"; "margin-top:-1em">500 000 Euros</div>

ou encore

<p>Bien à vendre ref n° 1231</p><p style="text-align:right; margin-top:-2em">500 000 Euros</p>

ou n'importe quel autre bidouille de même style.

Ceci dit, il doit y avoir quelque chose de plus élégant à faire, non ?
Modifié par Merlin (03 Nov 2005 - 22:56)

Merlin a écrit :

Ceci dit, il doit y avoir quelque chose de plus élégant à faire, non ?

Et ma solution, elle n'est pas élégante ?

Stephan a écrit :

Non. L'élément positionné en « absolute » se positionne par rapport à son plus proche parent positionné, « relative », « absolute » ou même « static ».

Tu es sûr pour static ? Ça me parait curieux car static est la valeur par défaut, et l'élément n'est alors pas considéré comme "positionné" (je peux me tromper)

Raphael a écrit :

Tu es sûr pour static ? Ça me parait curieux car static est la valeur par défaut, et l'élément n'est alors pas considéré comme "positionné" (je peux me tromper)

J'ai aussi un doute, mais mes tests tendent à dire que oui

<edit />
En fait, c'est quand on omet la propriété top (comme je l'ai fait plus haut) que l'élément se positionne (verticalement) par rapport à son conteneur. L'élément positionné « static » n'est donc pas considéré comme positionné.
Modifié par Stephan (04 Nov 2005 - 00:36)

j'ai appliqué la solution de stephan et cela marche du moins sous firefox, on verra pour la suite .

et merci aussi a merlin pour sa explication!!

Merci

J'utilise cela (sur les conseil du chef je crois )

<h3><span>6.0</span>02/09/2005</h3>

h3 {
    font-size: 1.5em; margin-left: 0px; text-decoration: none; text-align: left;
}
h3 span { float: right; font-size: 1.65em; } /* pour placer  une info à droite, écrire  <h3><span>Version</span>Date</h3>
*/

et c'est utilisé là http://www.frobar.info/mcms/nouveaux.php

Facile, propre, élégant (frotte, frotte, frotte...)

nath-0-0 a écrit :

j'ai appliqué la solution de stephan et cela marche du moins sous firefox, on verra pour la suite .

Ne pas oublier de mettre une espace entre les deux items, parce que sans feuille de style le résultat va être :

« bien a vendre ref n 1231prix ».

Donc :

<p>bien a vendre ref n 1231 <span>prix</span></p>

Modifié par Stephan (04 Nov 2005 - 17:11)

Dans ce que rapporte Bob il n'y a pas de margin -Xem, et cela me plait plus, car j'ai une sorte de phobie avec les margin entre FF et IE.

Conclusion : Le chef est de bon conseil (mais qui en aurait douter)