28170 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement titre à gauche et du bouton "retour en haut&a

Bonjour,

J'ai un petit problème avec mon bouton de retour vers le haut.
En effet, j'aimerais que ce dernier se trouve à la même hauteur que mon titre, afin qu'il soit lui aussi souligné par la bordure basse du titre.

Tout d'abord, les codes :
[#green]CSS[/#]
 #texte {
 height: 295px;
 width: 552px;
 overflow: auto;
 margin: 1.6em 0 1em 0.9em;
 background-color: transparent;
 }

 #texte h2 {
 border-bottom: 0.07em solid #148;
 border-left: 0.2em solid #148;
 background-color:#fff;
 color: #148;
 margin: 2em 0.6em 0.65em 0.75em;
 padding: 0 0 0.1em 0.5em;
 font-size: 1.25em;
 clear: both;
 }

 #texte h2 a{
 float:right;
 font-size:80%;
 padding: 0 0 0.1em 0.5em;
 }


[#green]XHTML[/#]
  <div id="texte"> 
      <h2 id="salarie">2. Les objectifs du Bilan pour le salariés<a href="#haut">Retour</a></h2>
  </div>


Puis, un petit exemple du problème :
upload/3738-screen.jpg

Je suis déjà allée voir ce sujet-ci, mais cela ne fonctionne pas dans le cas présent.

Alors, si quelqu'un à une petite idée pour résoudre le problème, je suis toute ouïe Smiley murf !!!

Merci
Modifié par Cygnus (28 Nov 2005 - 16:05)
Hello,

en remplaçant une ou 2 balise et en simplifiant (tu remettras les marges et les bonnes dimensions), ça pourrait donner quelque chose comme ça :
#texte {
width: 552px;
height:1.5em;
border-bottom: 0.07em solid #148;
border-left: 0.2em solid #148;
background-color:#fff;
}
#texte #salarie {
float:left;
color: #148;
font-size: 1.25em;
}
#texte #droite{
float:right;
font-size:80%;
padding: 0.3em 0 0.1em 0.5em;
}
<div id="texte"> 
      <div id="salarie">2. Les objectifs du Bilan pour le salariés</div>
      <div id="droite"><a href="#haut">Retour</a></div>
</div>

Modifié par yyoupla (28 Nov 2005 - 14:51)
Administrateur
hmm, à ta place (mais je n'ai pas testé), je sortirais le lien du h2 (sémantiquement c'est mieux) et je tenterais
- soit de float:left le h2 puis float:right le lien retour
- soit d'essayer de positionner le lien retour en relatif (avec position:relative;top:-2.5em;) par exemple


#texte {
 width: 552px;
 overflow: auto;
 margin: 1.6em 0 1em 0.9em;
 background-color: transparent;
 }

 #texte h2 {
 border-bottom: 0.07em solid #148;
 border-left: 0.2em solid #148;
 background-color:#fff;
 color: #148;
 margin: 2em 0.6em 0.65em 0.75em;
 padding: 0 0 0.1em 0.5em;
 font-size: 1.25em;
 clear: both;
 }

 #texte a{
 float:right;
 font-size:80%;
 padding: 0 0 0.1em 0.5em;
 position:relative;
 top:-2.5em;
 text-decoration:none;
 }


  <div id="texte"> 
      <h2 id="salarie">2. Les objectifs du Bilan pour le salariés</h2>
      <a href="#haut">Retour</a>
  </div>

Modifié par dew (28 Nov 2005 - 15:26)
Bonjour,

Plus simplement, peut-être, pour la solution de Dew, en faisant flotter l'élément le plus facile à gérer :
<style type="text/css">
<!-- 
#texte {
 width: 552px;
 margin: 20px 5px 5px 8px;
 padding: 0 0 1px 5px;
 border-bottom: 1px solid #148;
 border-left: 5px solid #148;
 background-color:#fff;
 color: #148;
 }

 #texte h2 {
 margin: 0;
 font-size: 1.25em;
 }

 #texte a{
 font-size: 0.8em;
 text-decoration:none;
 float: right;
 margin-top: 0.4em;
 }
-->
</style>
</head>
<body>
  <div id="texte"> 
      <a href="#haut">Retour</a>
      <h2 id="salarie">2. Les objectifs du Bilan pour le salariés</h2>
  </div>
</body>


Au passage : les bordures, "petites" marges et paddings relèvent de ce que WCAG2.0 (Accessibilité) va recommander de fixer en unité fixes (pixels) et non relatives à la taille des caractères (em), afin d'améliorer la qualité de rendu en cas d'agrandissement ou de réduction des tailles de caractères par l'utilisateur. D'où la conversion (indicative) en pixels dans le code ci-dessus.
Modifié par Laurent Denis (28 Nov 2005 - 15:54)
Eh bien... Smiley sourire
Merci à tous les trois ! Smiley ravi

Concernant ta solution, yyoupla, cela fonctionne très bien, seulement dans ce cas-là, la bordure de mon titre n'occupe plus tout l'espace... et donc, lorsque je rentre le paragraphe de texte en-dessous, celui-ci s'intercale entre mon titre et mon bouton retour... C'est un peu embêtant... Smiley confus

Par contre, la solution de dew fonctionne très bien, tout comme la version revisitée par Laurent Denis... Smiley lol
Un petit [Résolu] et tout sera parfait ... Smiley smile

P.S.: Merci pour la précision concenant la conversion des petites marges
Smiley cligne
Modifié par Cygnus (28 Nov 2005 - 16:08)
Sujet clos
Aller à