Mettre un texte dans le coin droit en bas d'un div ?

Mettre un texte dans le coin droit en bas d'un div ? - HTML/CSS - Programmation

Marsh Posté le 09-02-2005 à 20:38:38    

Ca doit être tout con mais je trouve pas. :heink:  
 
Je souhaite placer la date dans le coin en bas à droite de mon en-tête. J'ai réussi à le placer à droite avec "text-align" mais je sais pas le mettre sur la dernière ligne.
 
De plus, je veux que l'alignement à droite ne soit pas collé avec le bord. Mais si je met un padding:5px; ca me décale également la bordure de mon <body>
 

Code :
  1. #en_tete
  2. {
  3. width:800px; /* taille de l'image */
  4. height:128px;
  5. background-image: url("bandeauhead.png" );
  6. background-position: center;
  7. background-repeat:no-repeat;
  8. border-bottom: 1px solid black;
  9. text-align:right;
  10. font-size:0.9em;
  11. }


 
En rajoutant  line-height:230px;
j'ai réussi à le placer à peu près verticalement, mais je trouve ca pas top comme solution, il a fallu que je règle pixels par pixels... etc

Reply

Marsh Posté le 09-02-2005 à 20:38:38   

Reply

Marsh Posté le 09-02-2005 à 20:39:42    

essaye vertical-align: bottom;

Reply

Marsh Posté le 09-02-2005 à 20:40:54    

Il faudrait utiliser le positionnement absolu pour placer le texte là où tu veux. (avec bottom et right).


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 09-02-2005 à 20:41:07    

Reply

Marsh Posté le 09-02-2005 à 20:47:50    

d'après les plusieurs posts que j'ai lu sur divers forums, quand on a une seule ligne à aligner, ce qui est mon cas (ma date :D ) la technique avec line-height semble être la meilleure. Donc je vais la garder.
 
Je compte remplacer la date par le code PHP correspondant pour un affichage automatique, ca devrait pas poser problème si ?
 
PS : comment décaler le texte un peu du bord droit ? l'image de fond vient avec... avec le padding..


Message édité par Profil supprimé le 09-02-2005 à 20:52:20
Reply

Marsh Posté le 09-02-2005 à 20:54:25    

jeep05 a écrit :


Je compte remplacer la date par le code PHP correspondant pour un affichage automatique, ca devrait pas poser problème si ?


Non pas de problème.

jeep05 a écrit :


PS : comment décaler le texte un peu du bord droit ? l'image de fond vient avec... avec le padding..


Ben avec le positionnement absolu tu places le texte où tu veux :o


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 09-02-2005 à 21:27:32    

pour faire un positionnement absolu, il me faut le mettre entre des balises <p> alors et attribuer un id à la balise ?
 
J'ai fait comme ca:
 

Code :
  1. <div id="en_tete">
  2. <!-- bannière appelée dans le CSS-->
  3. <span class="date"><? $date = date("d/m/Y" );
  4. echo $date; ?></span>
  5. <!-- ancre #haut -->
  6. </div>


 

Code :
  1. .date
  2. {
  3. position:absolute;
  4. bottom: 5px;
  5. right: 5px;
  6. }


 
j'ai du mal à différencier relative et absolu. On pouvait arriver au meme résultat avec les 2 non ?


Message édité par Profil supprimé le 09-02-2005 à 21:37:39
Reply

Marsh Posté le 09-02-2005 à 21:59:47    

jeep05 a écrit :

pour faire un positionnement absolu, il me faut le mettre entre des balises <p> alors et attribuer un id à la balise ?


 
Pour mettre un élément en position absolu il faut utiliser "position: absolute" comme tu l'as fait. Peu importe que ce soit un <div>, un <p> ou un <blockquote> et peu importe comment on le sélectionne.
 

jeep05 a écrit :

J'ai fait comme ca:


C'est très bien, mais il faut que l'élément qui contient l'élément en positionnement absolu soit lui même positionné. Car là, ton span sera à 5px du bord inférieur droit de ta page et pas du DIV.
 
Il faut donc positionner le DIV, et un simple  
 

div#en_tete {
  position: relative;
}


 
suffira.
 
Cf http://incongru.webdynamit.net/PositionnementCss
 

jeep05 a écrit :

j'ai du mal à différencier relative et absolu. On pouvait arriver au meme résultat avec les 2 non ?


Ce serait beauoup plus compliqué avec le positionnement relatif.


Message édité par gm_superstar le 09-02-2005 à 22:00:12

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 09-02-2005 à 22:34:38    

merci pour tes réponses claires, nettes et précises :) j'apprécie.
 
 
Je peux mettre un "id" au lieu du "class" ca suffit pour date ?
Donc au final :

Code :
  1. <div id="en_tete">
  2. <span id="date">
  3. <? $date = date("d/m/Y" );
  4. echo $date; ?>
  5. </span>
  6. </div>


 

Code :
  1. span#date
  2. {
  3. font-size:0.9em;
  4. text-align: right;
  5. position:absolute;
  6. bottom: 5px;
  7. right: 5px;
  8. }


Message édité par Profil supprimé le 09-02-2005 à 22:49:11
Reply

Sujets relatifs:

Leave a Replay

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