28221 sujets

CSS et mise en forme, CSS3

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

Pages :
Modérateur
(reprise du message précédent)

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
solution finale convenable (bien que pas logique au niveau du HTML)

HTML :

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


CSS :

h4 {
        height: 1%;
}
.date {			
	float: right;
}


merci Raphael, je ne connaissais pas ce bug de IE et pas encore ton blog à cette époque Smiley cligne

2 bugs ds IE découverts ds la journée... vive IE \o/ et joyeux Noël
Et ma solution, elle n'est pas "convenable" ? Smiley sweatdrop
Puis elle est logique ? Smiley decu
Pas besoin de hack !

Anyway !

Si tu utilises le "holly hack", il faut le cacher aux autres navigateurs.
http://www.positioniseverything.net/articles/hollyhack.html


/* Hides from IE5-mac \*/
* html .buggybox {height: 1%;}
/* End hide from IE5-mac */


Mais pourquoi utiliser un hack si on peut faire proprement avec la solution que j'ai proposé ?
http://forum.alsacreations.com/topic.php?fid=4&tid=1000&p=1#p10038
Modifié le 21 Dec 2004 - 17:55
Alors, si bien sûr ta solution est convenable Smiley smile et je t'en remercie
pk prendre le hack ? ça me fait éliminer le margin-right, et il vient se positionner exactement au bon endroit (j'ai un background sur le h4)

pourquoi le cacher aux autres navigateurs ? J'ai pas vu de pb sur FF...

Enfin je sais pas, je vais y réfléchir
Puis en jouant sur width et/ou right, tu arrives à positionner exactement ou tu veux.

h4 {
position: relative;
width: 66%;
}
h4 span {
position: absolute;
right: 9px;
}


À la limite, tu peux même sortir ton span de ton <h4> :

h4 {
position: relative;
width: 50%;
}
h4 span {
position: absolute;
right: -200px;
}

C'est fou, tout le monde se casse le bicycle à faire des layouts en absolu, et puis devant un simple et bête cas de positionnement absolu (absolument relatif), ce sont les floats, le hack et compagnie ! Smiley nut

C'est le monde à l'envers ! Smiley rdm

À moins que j'ais rien compris ? Smiley confuse
Modifié le 21 Dec 2004 - 18:38
beh je sais pas, mais logiquement le float devrait servir à ça non ? enfin je me trompe peut-être...

Et pk un hack ? par ce que IE est con... Smiley sweatdrop

Les marges, positionnement négatif j'aime pas ça, pour moi c'est pire qu'un hack...

Enfin si d'autre personne ont un avis sur le sujet et/ou des propositions je suis preuneur Smiley smile

Bonnes fêtes

@+
Bon, j'ai pas l'habitude d'insister, mais je pense que tu n'as pas saisi toutes les subtilités du positionnement absolu dans le cas présent. Smiley decu

Anyway ! Smiley ohwell

Je poste un autre exemple ici pour enrichir le sujet :

<!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: 33%; 
}
h4 span { 
   position: absolute; 
   top: 0.5em; 
   right: 9px; 
}
h4, span { 
   color: #000000; 
   background-color: #efefef; 
   border: 1px solid #000000; 
   padding: 1px 9px; 
   margin: 0; 
}
  </style>
 </head>
 <body>
  <h4>titre <span>date</span></h4> <!-- il doit y avoir une espace entre le titre et la date -->
 </body>
</html>
J'ai pas le temps de tester et de regarder tout ça en détail (pas mal de trucs qui me tombent dessu et c'était pour mon site web perso Smiley rolleyes )

Mais je le ferais Smiley cligne
Pages :
Sujet clos
Aller à