span dans un H3

Version imprimable

span dans un H3

Bonjour

sans trop toucher au css, je dois faire une petite intervention toute bete
mais je n'y arrive pas !
il faudrait que le 1er span aligne le texte à gauche(ce qui est le cas)
et (ce que j'ai du mal à faire) aligner le texte du 2eme span à droite
voici le code :
Code:

1 2 3 4 5 6 7 <div id="bloc-contenu"> <h3> <span>ALAIN SONNET</span> <span>E64</span> </h3> </div>
et le css :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #bloc-contenu{ width: 650px; float:right; position : relative; margin-right:20px; } H3 { background-color:#66CCFF; line-height: 20px; color: #795b91; margin: 8px 0 10px 0; font: bold 13px arial; text-indent: 10px; border-left: #795b91 3px solid; margin-left:10px; }
j'ai tenté pleins de choses sans obtenir le bon resultat

Merci de votre aide

Code:

1
2
3
4
5
6
<div id="bloc-contenu">
		<h3>
		<div align=left><span>ALAIN SONNET</span></div>
		<div align=right><span>E64</span></div>
		</h3>
</div>

Normalement ça fonctionne.

08/07/2008, 18h28
nicerico

merci

c'est presque ça sauf que tout doit rester sur une ligne
ça fait :

Citation:

ALAIN SONNET
___________________________________________E64

au lieu de :

Citation:

ALAIN SONNET_______________________________E64

avec les underscores en moins :)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
#bloc-contenu{
width: 650px;
height: 20px;
}
 
#gauche{
height: 20px;
width: 325px;
float: left;
text-align: left;
}
 
#droite{
height: 20px;
width: 325x;
float: left;
text-align: right;
}

Code:

1
2
3
4
5
6
7
8
9
 
<body>
<div id="bloc-contenu">
		<h3>
		<div id="gauche">ALAIN SONNET</div>
		<div id="droite">E64</div>
		</h3>
</div>
</body>

09/07/2008, 10h43
nicerico

merci mais même resultat que precedement
avec les propriété du "H3" en moins

je suis deseperé de bloqué sur un truc pareil !
09/07/2008, 10h48
FraK

En supprimant ton h3 et en rentrant ses attributs dans le div conteneur ca ne marche pas non plus ?

Code:

1
2
3
4
5
6
<div id="bloc-contenu">
   <h3>
      <span style="float:left">ALAIN SONNET</span>
      <span style="float:right">E64</span>
   </h3>
</div>

Je te laisse le soin de mettre le CSS dans la feuille de style.

merci encore

Citation:

En supprimant ton h3 et en rentrant ses attributs dans le div conteneur ca ne marche pas non plus ?

je perd la mise en page du H3 meme en le rajoutant à bloc-contenu

solution de bisounours : idem , c'est comme si H3 n'existait pas
je pense qu'il faut modifier le H3 :
avec :
Code:

1 2 3 4 5 6 7 8 9 10 H3 { color: #795b91; margin: 8px 0 10px 0; font: bold 13px arial; text-indent: 10px; border-left: #795b91 3px solid; margin-left:10px; display:inline; }
au lieu de
Code:

1 2 3 4 5 6 7 8 9 10 H3 { line-height: 20px; color: #795b91; margin: 8px 0 10px 0; font: bold 13px arial; text-indent: 10px; border-left: #795b91 3px solid; margin-left:10px; }
et
Code:

1 2 3 4 5 6 7 8 9 10 <div id="bloc-contenu"> <h2>Fiche Exposants</h2><p> </p> <h3> <div align=left><span> ALAIN SONNET</span></div> <div align=right><span>E64</span></div> </h3> <p> </p> <div id="bloc-contenu-info"> <p><span>Nom : </span>ALAIN SONNET</p>
c'est presque bon sauf que le "E64" se trouve à ligne du dessous (mais aligner à droite comme je le veux)

merci encore pour vos aides

09/07/2008, 11h09
Bisûnûrs
Si par "c'est comme si le h3 n'existait pas" tu entends qu'il ne prend pas en compte la taille de son contenu, c'est normal. Ses deux éléments enfants sont hors du flux normal (utilisation du float), donc le h3 n'en tient pas compte pour calculer sa hauteur totale.
Pour corriger le tir, il faut créer un nouveau contexte de formatage sur le h3, en lui rajoutant overflow:hidden par exemple.
Une liste des propriétés CSS créant un nouveau contexte de formatage est disponible ici :
http://www.blog-and-blues.org/articl..._formatage_.3F

Au final, on aurait un code comme suit :
Code:

1 2 3 4 5 6 <div id="bloc-contenu"> <h3 style="overflow:hidden"> <span style="float:left">ALAIN SONNET</span> <span style="float:right">E64</span> </h3> </div>
09/07/2008, 11h34
nicerico

c'est bon
C EST BON

MERCI BISOUNOURS
MERCI FRAK
:P:P:P:P:P:P:P:P:P