Une meme ligne = centrer & aligner à droite

Une meme ligne = centrer & aligner à droite - HTML/CSS - Programmation

Marsh Posté le 17-03-2006 à 17:15:42    

Salut,
 
 
Voilà je cherche betement à avoir sur la meme ligne un mot (par exemple), centré au milieu de la page, et un autre mot aligné complètement à droite.
 
J'ai essayé desesperement avec une table, mais rien à faire :/
 
quelqu'un sait si c'est possible?

Reply

Marsh Posté le 17-03-2006 à 17:15:42   

Reply

Marsh Posté le 17-03-2006 à 17:22:57    

englobe chacun des ses mots avec des <span style="text-align: center;"> et right pour l'autre

Reply

Marsh Posté le 17-03-2006 à 17:23:34    

text-align:center
 
text-align:right

Reply

Marsh Posté le 17-03-2006 à 17:24:40    

ouais ben nan en fait, ça marche pas :/

Reply

Marsh Posté le 17-03-2006 à 17:27:11    

normal, les deux spans ne sont pas des elements blocks, aucune raison qu'ils prennent chacun la bonne taille qui va bien...
 
Perso je verrais plus un truc comme ça:

Code :
  1. <div id="truc1"></div>
  2. <div id="truc2">Mot1</div>
  3. <div id="truc3">Mot2</div>


Et la css qui va bien

Code :
  1. #truc1{
  2. float: left;
  3. width: 25%;
  4. }
  5. #truc2{
  6. float: left;
  7. width: 50%;
  8. text-align: center;
  9. }
  10. #truc1{
  11. float: left;
  12. width: 25%;
  13. text-align: right;
  14. }


 
edit: et si vous vous demandez pourquoi 25/50/25, ça n'a strictement aucune importance tant que les deux divs du bord ont la même largeur ( pour s'assurer que la div du milieu est ... bin ... au milieu )


Message édité par anapajari le 17-03-2006 à 17:28:30
Reply

Marsh Posté le 17-03-2006 à 17:33:26    

ah c'est malin, je vais devoir me plonger dans les css ! :(
(bon faut bien que je le fasse de tte facon :p )
merci :jap:

Reply

Marsh Posté le 17-03-2006 à 17:34:12    

au passage, quelqu'un connait un bon site qui explique ca? ;)
allhtml répond mal chez moi :/

Message cité 1 fois
Message édité par _Roland_ le 17-03-2006 à 17:34:19
Reply

Marsh Posté le 17-03-2006 à 17:35:08    

_Roland_ a écrit :

au passage, quelqu'un connait un bon site qui explique ca? ;)
allhtml répond mal chez moi :/


 
 
www.alsacreations.com
www.openweb.eu.org
www.zengarden.com

Reply

Marsh Posté le 17-03-2006 à 17:53:00    

haha miracle ca marche  :D  
 
merci  :bounce:

Reply

Marsh Posté le 24-09-2009 à 20:27:53    

Ca marche mais comment "truc3" peut-il fonctionner correctement vu qu'il n'y a pas de #truc3 (et deux #truc1) ??
 
Je suis sur le cul, j'ai essayer mes variables mais après ca marche plus.
 
J'ai du mal a comprendre le fonctionnement. Mais sinon ca marche...


---------------
The Force Will be With You, Always.
Reply

Marsh Posté le 24-09-2009 à 20:27:53   

Reply

Marsh Posté le 24-09-2009 à 20:35:03    

Code :
  1. <div class="pouet">
  2.     <span class="left">my left text</span>
  3.     <span class="right">my right text</span>
  4.     <span class="centered">mycentered text</span>
  5. </div>


Code :
  1. .pouet {
  2.    text-align:center;
  3. }
  4. .pouet .right {
  5.   float:right;
  6. }
  7. .pouet .left {
  8.   float:left;
  9. }


 
voila une réponse ultra allégée pour répondre à ton pb.  
PS : la réponse donnée en 2006 était potable mais nulle, celle que je donne ce soir est sure de fonctionner correctement.  
 
Après tout dépend de ton besoin


---------------
Blablaté par Harko
Reply

Marsh Posté le 24-09-2009 à 20:53:09    

ben ca repond pas vraiment a ma question (y a pas de centered ??)...
 
par contre, avec l'autre ce qui est bien c'est qu'on peut régler la position du texte situé a droite et a gauche.
 
J'ai 3 photos sur ma page assez bien reparti disons, pas optimise au mieux mais pas trop mal (d'ailleurs si tu sais comment faire en sorte qu'elles le soient, je prends. j'ai fouiné pas mal de fonction mais doit y avoir plus simple) et le texte se retrouvaient juste en dessous pas mal centré avec la photo correspondante (ce que ne propose pas ton code ou alors il est à modifier).
 
merci pour ton assistance


---------------
The Force Will be With You, Always.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed