28172 sujets

CSS et mise en forme, CSS3

[Résolu] Quand le float right s'affiche en-dessous du float left

Bonjour à tous
J'avais posté il y a quelques semaines un message lié à du positionnement droite et gauche, et on m'avait tout de suite donné la solution au problème. C'est super Smiley smile
Mais il reste un petit souci, moins important, mais un souci quand même.

Je m'explique : sur une même ligne. j'ai un élément à droite et un élément à gauche. Si on réduit la largeur de la fenêtre, l'élément de droite passe sous l'autre, ce qui fait que le tout est affiché sur 2 lignes. Jusque là, parfait.
Mais si on réduit encore, de sorte que le texte de gauche n'ait plus la place d'être affiché sur une seule ligne, alors il passe sur 2 lignes, et le texte de droite passe encore une ligne en-dessous, ce qui fait 3 lignes au total. C'est là que ça ne va plus. On voudrait que le texte de droite soit affiché sur la même ligne que la fin du texte de gauche. Deux lignes doivent suffire pour afficher le tout.
Un exemple vaut mieux que tous les longs discours :


<html>
<head>
<style>
.boite {
	background-color: #b0b0b0;
	position: relative;
}

.gauche {  
  float:left; 
}  

.droite {
	float: right;
}

</style>
</head>
<body>

<div class="boite">
	<span class="gauche">Patience et longueur de temps font plus que force ni que rage</span>
	<span class="droite">La Fontaine</span>
	<div style="clear: both;"></div>
</div>

</body>
</html>


Si on réduit la largeur de la fenêtre, le texte "La Fontaine" passe sur une deuxième ligne, c'est correct. Si on réduit encore, on obtient 3 lignes. La 2ième ligne contient "rage" aligné à gauche, et la 3ème ligne contient "La Fontaine" aligné à droite. Je veux que ces 2 textes soient affichés sur une même ligne, la 2ème.

Possible?
Merci d'avance pour votre aide
Modifié par sudrak (16 Jun 2011 - 14:39)
Salut sudrak,

Je pense que la meilleure solution serait d'utiliser les media queries pour pour adapter le css lorsque la taille de l'écran est trop petite pour que tout tienne sur deux lignes.
Je découvre les media queries. Pas mal ce truc. Mais ça ne peut pas convenir pour moi, car le texte de gauche et le texte de droite n'ont pas une longueur connue à l'avance.
bonsoir,

il y a aussi le min-width qui peut te servir a déterminé une largeur minimale pour body par exemple (ou tout autre élément).
White-space est aussi une autre piste ...
De nombreuses autre pistes et solutions peuvent exister : de la pire (100% adapté a ton pc et navigateur) a la moins pire (la mieux adapté au différent navigateur, media, ecran, etc ...et ton resultat voulu : 1 mixed de float ou pas et de inline block ou pas ?, de text-align ?, etc? ...).

Enfin la question des 3 lignes est-elle susceptible de survenir "souvent" et de détruire la mise en page au point de rendre le site illisible ? Le min-width est le plus simple ...perso je ne m'amuse pas a reduire la fenêtre de mon navigateur a 3Xrien et les smartphone se multiplient a une vitesse vertigineuse.

en raccourcie, je me contenterai en premier lieu de tester un body {min-width:590px} et ensuite revenir sur le probleme si il y a en a réellement un important.
GC
Il manque une largeur a ta <div> conteneur "Boite"
Boite n'ayant pas de largeur, elle prend donc la largeur de ton premier <span> (ici "gauche")
la hauteur étant toujours fluide, le <span> "droite" se positionne donc en dessous, car il y a
pas assez de place en largeur pour la placer à côté de la <span> "gauche".

De plus ton " position:relative " est inutile pour ta <div> "Boite".
Un conseil, remplace tes <span> par des balises <p> car tu y mets du texte.

Sinon de rien, c'est un plaisir d'aider (et je ne vois pas où sont partis les autres dans leurs réponses lol)
Modifié par Vipear (15 Jun 2011 - 03:13)
Vipear a écrit :


Sinon de rien, c'est un plaisir d'aider (et je ne vois pas où sont partis les autres dans leurs réponses lol)


bonjour,
je laisserai un ou deux exemple possible ce soir Smiley smile (il existe aussi des balise comme q, cite ou blockquote )
GC
@gc-nomade : se serait sympa Smiley cligne

J'ai oublié de préciser qu'il faut également une largeur a chaque <span> dont la somme des deux largeurs doit être égal ou inférieur à la balise <div>
bonsoir,

Quelques exemples qui ne sont pas forcement la solution.


<p class="boite float">
<q class="gauche" cite="#un">Patience et longueur de temps font plus que force ni que rage</q>
<span  id="un" class="droite">La Fontaine</span>
</p>

<p class="boite un">
<cite class="gauche">Patience et longueur de temps font plus que force ni que rage</cite>
<span class="droite">La Fontaine</span>
</p>

<div class="boite">
<blockquote  cite="#deux" class="gauche">
<p>Patience et longueur de temps font plus que force ni que rage</p>
</blockquote>
<p class="droite" id="deux" >La Fontaine</p>
</div>

et css (considérant un document avec un doctype valide).
/* reset de complaisance */
html, body ,.boite , blockquote , div  p , div {width:100%;margin:0;padding:0;}
p {margin:1em 0 ;padding:0;}
/* contenuer de la citation */
.boite {
background-color: #b0b0b0;
min-width:400px;
width:100%;
overflow:hidden;
margin-top:1em;
}
/* width + overflow : modifient le contexte de formatage -> gestion des flottants */
/* un flottant */
.float .gauche {float:left;}  
/* commun */
.gauche {width:76%;padding:3px;vertical-align:top;display:inline-block;}
.droite {width:20%; text-align:right;padding:3px;display:inline-block;}
/* gauche + droite = width 96% de base , absorbent le word-spacing entre les elements inline-block et les padding
inline-block influe aussi sur les contextes de formatages interaction des deux elements dans "boite float" */

/* variations */
.un .gauche  {vertical-align:bottom;/* on descend l'auteur sur la dernière ligne de la citation par exemple}


Cordialement,
GC

<edit> pour le retour du vendrdij , c'est dans 2 jours ils me semble ... Smiley smile </edit>
C'est exactement ça que je voulais, merci! Donner une largeur aux 2 spans, c'est ça qu'il me manquait. Merci à vous 2, Vipear et gc-nomade.
C'est pas une solution parfaite toutefois, car les tailles de ces 2 textes ne sont pas connues à l'avance. Mais je m'en sortirais avec ça.
Bonsoir à toutes et à tous,

je pense que la solution exposé est contraignante, si l'on applique une largeur aux span. Donc je suis parti du premier post et j'ai essayé de résoudre le problème du passage du float:right systématiquement sur la ligne suivante sans qu'il passe à la troisième ligne. Ce cas se passe normalement s'il y a suffisamment de place sur la deuxième ligne !

Donc sans width j'ai pu résoudre le problème :

<html>
<head>
<style>
.boite {
	background-color	: #b0b0b0;
}

.gauche {
	float				: left;
}  

.droite {
	float				: right;
}

.clear {
	clear				: both;
}
</style>
</head>

<body>
<div class="boite">
	<span class="gauche">Patience et longueur de temps font plus que force ni que rage
		<span class="droite">La Fontaine</span>
	</span>
	<span class="clear"></span>
</div>
</body>
</html>


Pour ce faire, j'ai imbriqué le deuxième span dans le premier ! Maintenant, est-ce que cela répond à ton attente ?

@+
Modifié par Artemus24 (16 Jun 2011 - 20:53)
Cool, c'est encore mieux!
Pour que ça marche, j'ai ajouté un width:100% au span englobant, sinon il ne prenait pas toute la largeur possible.

Merci !
Sujet clos
Aller à