28221 sujets

CSS et mise en forme, CSS3

[résolu] Alignement à droite d'un texte dans un hn

Pages :
Bonjour,

j'ai le code suivant :

<h4>Titre<span class="date">21/12/2004</span></h4>


et le css suivant :

.date {
  float: right;
}


La date s'aligne bien à droite, mais sous le titre Smiley decu
Existe-il un moyen simple de l'aligner à droite sur la même ligne auquel je n'ai pas pensé ?
Toutes les propositions sont les bienvenues.

Merci et joyeuses fêtes Smiley biggrin
Modifié le 21 Dec 2004 - 17:06
arf j'ai pas du tout pensé à clear... pas l'habitude encore de cette balise, je vais aller me flageller avec des orthies fraîches Smiley sweatdrop

J'ai essayé plusieures combinaisons avec clear et je n'arrive toujours pas à que ce soit sur la même ligne Smiley confus
doomer a écrit :
Un lien qui peut t'interesser, je crois qu'il y a un exemple pour ton cas :

POMPAGE.NET


dans l'exemple de cette page le conteneur est un div (donc un élément block) moi c'est un h4 (donc en ligne) et ça n'a pas l'air de marcher avec.

Donc ma question est quel est la solution la plus propre :
- faire marcher avec h4 + span 
<h4>titre<span>date</span></h4>
?
- utiliser div qui contien h4 et span 
<div><h4>titre</h4><span>date</span></div>

Modifié le 21 Dec 2004 - 11:28
arf oui tien.... c'est pas logique, enfin je trouve Smiley biggol autant pour moi.
En tout cas, ça ne marche pas quand même Smiley decu 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
span{
float: right;
top: -20px;
position:relative}
</style>
</head>

<body>
</body>
<h4>titre <span>date</span></h4>
</html>

Modifié le 21 Dec 2004 - 13:03
Je relance ! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr-ca" xml:lang="fr-ca" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Un header absolument relatif</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="content-style-type" content="text/css" />
  <style type="text/css" media="all">
h4 {
position: relative;
width: 100%;
}
h4 span {
position: absolute;
right: 0;
}
  </style>
 </head>
 <body>
  <h4>titre<span>date</span></h4>
 </body>
</html>
je prend la solution de stephan Smiley smile
j'aime pas trop les positions négatives. en plus ça ne donne pas le même résultat sur IE que sur FF

sinon pour le right à 0 et la position en absolute, j'avais déjà essayé, mais avec un right à 10px ce qui n'a aucun effet. Donc j'ai gardé le right: 0px et j'ai mis un padding en plus.

Merci à tous les participants Smiley smile
Administrateur
Poire a écrit :

La date s'aligne bien à droite, mais sous le titre Smiley decu

Oui bien sûr, puisque les flottants influent sur le contenu en flux qui les suit mais pas celui qui les précède.

Poire a écrit :

Existe-il un moyen simple de l'aligner à droite sur la même ligne auquel je n'ai pas pensé ?

Oui, mettre ton span au début dans le code Smiley cligne 

<h4><span>date</span>titre</h4>


Je n'ai rien pour tester, mais logiquement ça devrait marcher Smiley langue
Raphael a écrit :

Oui bien sûr, puisque les flottants influent sur le contenu en flux qui les suit mais pas celui qui les précède.


Oui, mettre ton span au début dans le code Smiley cligne 

<h4><span>date</span>titre</h4>


Je n'ai rien pour tester, mais logiquement ça devrait marcher Smiley langue


moi j'ai testé Smiley cligne
ça marche au poil sur FF mais pas sur IE ou la date n'apparait pas du tout, ou est très bien caché Smiley lol

donc si tu as une id pour IE (j'ai testé 2/3 trucs mais sans succes Smiley biggol )
Modifié le 21 Dec 2004 - 16:30
Administrateur
Poire a écrit :

donc si tu as une id pour IE (j'ai testé 2/3 trucs mais sans succes Smiley biggol )

Ah les joies d'IE Smiley rolleyes
Humm c'est quand-même assez bizarre que ça ne fonctionne pas. Ça ne met pas en jeu des propriétés très complexes à gérer pourtant.

Je ne peux toujours rien tester donc je te propose une autre piste, en aveugle :

<h4><span>titre</span>date</h4>

h4 {
text-align: right
}

h4 span {
float: left;
}
Modérateur
As-tu testé les propositions dans un document vierge ? Tu vas te faire gronder... Smiley eek
Modifié le 21 Dec 2004 - 16:56
Merkel a écrit :
As-tu testé les propositions dans un document vierge ? Tu vas te faire gronder... Smiley eek

ds un doc vierge, tout marche tjs trés bien Smiley langue
Modérateur
La prochaine fois, essaye toujours les propositions dans un document vierge, sinon ca rend la chose bien compliquée pour t'aider. Si tu l'aurais fais dès le départ, on aurait constaté que le problème venait d'ailleurs. Je te gronde fort vilain coquin !

Smiley sm
Pages :
Sujet clos
Aller à