28173 sujets

CSS et mise en forme, CSS3

Problème d'alignement

Bonjour!

J'ai un problème tout simple, mais je viens de passer 4 heures dessus.

Voilà, j'aimerai créer une balise div avec à gauche un texte et à droite un autre.

J'ai donc fait ceci :
<h2 align="center"><font color="FF4A15"><u><mx:text id="HeadingTitle" />News</u></font></h2>
<mx:bloc id="NEBloc">
  <div>
	<h4><u><mx:text id="NewsTitle" />Titre de la news</u></h4>
    	
	
	

        	<div>
                "<mx:text id="NewsSummary" />Sommaire de la news"
        	</div>
			
			

        <div>
	 			<span>Par <a mXattribut="href:AuthorEmailMailto"><mx:text id=						"AuthorName" />Untel</a></span>
			<span style ="float :right">le <mx:text id="NewsDate" />mer. 21 novembre 2007.</span>
				
		</div>

	

			<div>
				<span>source :<mx:text id="NewsSource" /></span>
	

             	<span style="float :right">
				<a mXattribut="href:NewsToNextUrl">Lire la suite,</a>
	
                <a mXattribut="href:NewsToCommentUrl"><mx:text id="NewsNumComment" /> X commentaire(s)		</a></span>
				 </div>

        	</div>
  </div>


Le hic est que mes termes de droite sortent du div et vont à la ligne en dessous.
Je souhaiterai qu'ils restent alignés sur la même ligne.

J'ai lu beaucoup de choses sur la balise float, tantôt je comprends qu'elle sort du flux donc va à la suite (dans ce cas qu'elle est la solution pour résoudre mon problème?), tantôt le deuxième bloc prend l'espace resté libre dans le conteneur (et dans ces conditions pourquoi mon texte de droite n'est pas aligné?).

Je vous remercie par avance
Modifié par numero7 (21 Nov 2007 - 15:51)
respecte bien la semantique, a savoir utilises les balises adequates.
tu ve 2 paragraphes ds une div

<div>
<P style="float:right">blabla</P>
<p style="float:left">bblablblablba</p>


</div>
Je te remercie de répondre aussi vite, mais j'avais essayé cette solution puis abandonné.

Pour moi du moment où il n'y a que 2 termes, en utilisant la balise float ça ne devait pas poser de souci car l'espace imposé étant restreint (un div) les 2 éléments devaient prendre leur place respectivement à gauche et à droite.

Mais en utilisant malgré tout cette solution (avec des "span" plutôt que des "p"), les éléments de mes 2 div vont bien à gauche et à droite mais sur la même ligne. Comme tu peux le voir http://www.senecad.fr/ici

[/url].

Voici mon code renouvelé :
<div>
<div>
	 			<span style ="float :left">Par <a mXattribut="href:AuthorEmailMailto"><mx:text id=						"AuthorName" />Untel</a></span>
	 			<span style ="float :right">le <mx:text id="NewsDate" />mer. 21 novembre 2007.</span>
				
		</div>

	

			<div>
				<span style ="float :left">source :<mx:text id="NewsSource" /></span>
	

             	<span style="float :right">
				<a mXattribut="href:NewsToNextUrl">Lire la suite,</a>
	
                <a mXattribut="href:NewsToCommentUrl"><mx:text id="NewsNumComment" /> X commentaire(s)		</a></span>
				

        	</div>
</div>


Je souhaiterai avoir au final :
Par :Untel_____________________________________le :date
Source :machin________________________________suite,commentaire

Pourquoi les éléments sortent-ils de leurs div respectifs?
Modifié par numero7 (21 Nov 2007 - 16:48)
Administrateur
Bonjour,

dans le 1er message, les <mx: ...> font référence à un système de gabarits (Modelixe?) dont nous ne savons pas comment il est transformé en HTML: ce qu'il nous faudrait pour pouvoir t'aider, c'est le code HTML que reçoit le navigateur, pas ce que gère ton serveur.

Dans ton 2ème message, span est de type inline, p est de type block, leur comportement est très différent. Tout ceci est expliqué en détail dans ce tuto: http://css.alsacreations.com/Bases-et-indispensables/La-structure-des-balises-bloc-et-en-ligne

Par ailleurs, cet élément de FAQ pourra t'aider si c'est bien ce que tu veux faire: Aligner des éléments sans tableaux
Modifié par Felipe (21 Nov 2007 - 17:00)
Je te remercie felipe pour les liens que tu m'as donnés.

Ils m'ont éclairé (par contre je n'ai pas compris l'utilité fondamentale de "display" qui apparemment annule l'effet block ou inline je crois))et m'ont fait changer le code vers quelque chose de plus juste je pense.

Par contre ça ne marche toujours pas,comme tu peux le voir ici http://www.senecad.fr/ [/url]. La date (première ligne) et "lire la suite,X commentaire(s)" (pour la deuxième) ne sont pas à droite de leur ligne respective.

Voici mon nouveau code :
<div>
		<p><span style ="float :left">Par <a mXattribut="href:AuthorEmailMailto"><mx:text id="AuthorName" /></a>,</span>
<span style ="text-align :right">le <mx:text id="NewsDate" />.</span></p>
            
	</div>

	

	<div>
	     <p>
                  <span style ="float :left">source :<mx:text id="NewsSource"       /></span>
	

                   <span style="text-align :right">
		<a mXattribut="href:NewsToNextUrl">Lire la                suite,</a>
	
                <a mXattribut="href:NewsToCommentUrl"><mx:text id="NewsNumComment" /> commentaire(s)</a>
	           </span>
               </p>

        </div>


Par contre pour le code interprété par mon navigateur (Firefox pour moi), ou est-ce que je le trouve? Par la fonction "affichage code source"?

Si oui, voici ce que ça donne :
<div>
		<p><span style ="float :left">Par <a href="mailto:">yannick</a>,</span>

<span style ="text-align :right">le mar. 20 nov. 2007.</span></p>
            
	</div>

	

	<div>
	     <p>
                  <span style ="float :left">source :<mx:text id="NewsSource"       /></span>
	

                   <span style="text-align :right">
		<a href="suite.php?newsid=10">Lire la                suite,</a>

	
                <a href="commentaire.php?newsid=10">0 commentaire(s)</a>
	           </span>
               </p>

        </div>


Merci
Salut Felipe!

En effet le script de news (news evolution ne3) que j'utilise dans mon site se sert de ModeliXe.

Ces variables sont pourtant bien interprétées sur dreamweaver, puisque j'ai l'affichage que je désire (mais pas sur le site)

Quand tu parles du "code html que reçoit le navigateur", il s'agit bien du code interprété puis renvoyé par le serveur?

Donc en affichant le code source de ma page, je réponds bien à ta demande?
Sinon je ne sais pas où on le trouve.

Au final je ne vois pas de différence et je ne comprends pas pourquoi mes termes restent collés l'un à l'autre plutôt que de s'installer à gauche et à droite de la ligne.

Aurais-tu plus d'infos?
Merci
Modifié par numero7 (27 Nov 2007 - 14:31)
numero7 a écrit :
Donc en affichant le code source de ma page, je réponds bien à ta demande?

Oui.

Et en donnant le lien vers la page si elle est disponible, ça marche encore mieux. Smiley cligne
Edit: avais pas vu que lien déjà donné.
Modifié par Florent V. (28 Nov 2007 - 23:20)
<span style="text-align :right">

Le texte dans le span sera aligné à droite, par contre le span fera pile la largeur du texte, donc ça ne sert pas à grand chose...

Rappel: span est un élément de type en-ligne (inline), pas un élément de type bloc (block).
Merci Florent!

Pour le lien, je le redonne si tu veux Smiley url http://www.senecad.fr/ [/url] (bien qu'il se trouve déjà dans le 3ème et 5ème message).

Ensuite, je crois comprendre ton histoire de spam, mais par quoi devrais-je les remplacer alors?

Il s'agit de 2 termes d'une même phrase, le premier doit se trouver à gauche et le second à droite.

Donc je pense que les 2 se trouvent entre des balises <p> mais comment leur attribuer chacun un attribut de position (à gauche pour l'un et en bout de ligne pour l'autre)?

Merci
Modifié par numero7 (28 Nov 2007 - 20:29)
numero7 a écrit :
Il s'agit de 2 termes d'une même phrase, le premier doit se trouver à gauche et le second à droite.

Tu ne peux pas obtenir cela avec text-align seulement.
Tu peux faire flotter deux éléments (par exemple deux span), le premier sera flottant à gauche et le second sera flottant à droite. Il peut être utile de leur donner une largeur (par exemple width: 45%).
Bonjour Florent.

Suite à tes remarques j'ai changé mon code et vois le résultat : http://www.senecad.fr/ [/url].

Comme tu peux le constater, j'ai obtenu ce que je voulais concernant les termes placés à gauche et à droite, par contre je ne m'explique pas qu'ils soient décalés et pas sur la même ligne.

Voici mon code :
<div>	
<h4><u><mx:text id="NewsTitle" /></u></h4>
    	
	
	<div>
		<mx:image id="NewsHeadingImage" />
	</div>

        <div>
                "<mx:text id="NewsSummary" />"
        </div>

        <div>
		<p>
<span style ="float :left">Par <a mXattribut="href:AuthorEmailMailto"><mx:text id="AuthorName" /></a></span>,
<span style ="float :right">le <mx:text id="NewsDate" />.</span>
                </p>
            
	        <p>
                  <span style ="float :left">source :<mx:text id="NewsSource" /></span>
	

                   <span style="float :right">
		<a mXattribut="href:NewsToNextUrl">Lire la suite,</a>
	<a mXattribut="href:NewsToCommentUrl"><mx:text id="NewsNumComment" /> commentaire(s)</a>
	           </span>
               </p>

        </div>


<br>  
</div>


J'ai gardé les span, car je pense qu'il me faut des balises en ligne, mais si je me trompe, par quoi devrais-je les remplacer?

Merci
Je réactualise ce post car je ne vois vraiment pas la solution.

Il me semble que le code est propre (pas très compliqué en tous cas),mais ça ne répond pas comme je veux.

Déjà sur dreamweaver, l'affichage est bien aligné et les termes à gauche et à droite, cependant il me semble qu'ils sortent de leur div respectif.

A l'affichage sur firefox, par contre les termes sont à gauche et à droite mais pas sur la même ligne (la date est décalée par rapport au terme "par Untel" et "lire,commentaires" est décalé par rapport à "source" alors qu'ils devraient être sur la même ligne (2 par 2)).

Je ne vois pas.

A vous .
Merci
numero7 a écrit :
A l'affichage sur firefox, par contre les termes sont à gauche et à droite mais pas sur la même ligne (la date est décalée par rapport au terme "par Untel" et "lire,commentaires" est décalé par rapport à "source" alors qu'ils devraient être sur la même ligne (2 par 2)).

Les flottants ne se mettent côte-à-côte que s'ils se suivent dans le code HTML. S'ils sont séparés par du contenu non flottant (en dehors des espaces, tabulations et retours à la ligne), il y a forcément un passage à la ligne du deuxième flottant.

J'ai surligné le contenu non flottant en gras et en rouge:
<p>
	<span style ="float :left">Par Machin</span>[b][#red],[/#][/b]
	<span style ="float :right">le tant.</span>
</p>
Merci Florent, je comprends mieux.

Par contre même sans les ponctuations entre les span, j'ai toujours des soucis qui ne sont pas tout à fait les mêmes d'ailleurs sous FF et sous IE.

http://www.senecad.fr/[/url].

Sous FF: le terme "source" (du deuxième paragraphe dans le code), vient se caler juste à côté du premier terme "par Machin" (du premier paragraphe).
Donc problème.

Sous IE :idem mais en plus le deuxième terme "lire,(X)commmentaires" du deuxième paragraphe, vient suivre "source" à la deuxième news.

Je ne comprends plus.

Non seulement l'affichage n'est pas bon mais en plus il n'est pas bon différement sous les 2 navigateurs.
numero7 a écrit :

Non seulement l'affichage n'est pas bon mais en plus il n'est pas bon différement sous les 2 navigateurs.

Ah, les joies de l'intégration… bienvenue dans le monde merveilleux des CSS! Smiley ravi
Voici une parade que j'ai trouvée mais qui ne me satisfait pas : je rajoute <br> à chaque fin de ligne.

ça résoud les problèmes d'alignement mais forcément ça me rajout un saut de ligne (fonction de la balise <br>) que je ne souhaite pas.

Voici le code :
<h2 align="center"><font color="FF4A15"><u><mx:text id="HeadingTitle" /></u></font></h2>
<mx:bloc id="NEBloc">
  
<div>	
<h4><u><mx:text id="NewsTitle" /></u></h4>
    	
	
	<div>
		<mx:image id="NewsHeadingImage" />
	</div>

        <div>
                "<mx:text id="NewsSummary" />"
        </div>

        <div>
		<p>
<span style ="float :left">Par <a mXattribut="href:AuthorEmailMailto"><mx:text id="AuthorName" /></a></span>
<span style ="float :right">le <mx:text id="NewsDate" /></span>
                </p><br>

            
	        <p>
                  <span style ="float :left">source :<mx:text id="NewsSource" /></span>
	

                   <span style="float :right">
		<a mXattribut="href:NewsToNextUrl">Lire la                suite,</a>
	<a mXattribut="href:NewsToCommentUrl"><mx:text id="NewsNumComment" /> commentaire(s)</a>
	           </span>
               </p>

        </div>
<br>
 <HR width="80%" size="2" align="center" color="FF4A15">  
  
</div>


On voit un <br> à la fin du premier paragraphe car sinon le terme "source" vient se coller juste à côté du terme "Par" au lieu d'être à la ligne en dessous (dans le deuxième paragraphe).

J'ai mis un deuxième <br> en fin de code sinon le titre de la news vient se mettre à côté du terme "source".

Avez-vous une solution pour faire un code propre svp?
Sujet clos
Aller à