Discussion :

[bambou]

Bonjour

J'ai un souci au niveau de l'alignement d'un bloc de texte.
Ma page est compose de fieldset, centres, dans un de ses fieldset j'ai un bloc qui centre deux blocs de texte, dont le texte est aligne a gauche, ce qui donne a peu pres ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
       <FIELDSET class="white" id="result">
          <LEGEND>Result Data</LEGEND>
<!-- le bloc centre re-centre les blocs blocL et blocR a 60% de la largeur du fieldset --->
          <DIV class="centre">
<!-- les blocs blocL et blocR sont aligne horizontalement et le texte a l'interieur est aligne sur la gauche -->
            <DIV class="blocL" id="left">
                blablabla
            </DIV>
            <DIV class="blocR" id="left">
                blablabla
            </DIV>
          </DIV>
<!-- Le bloc blocY a son texte centre -->
          <DIV class="blocY">
                blablabla
          </DIV>
        </FIELDSET>

Le texte des blocs blocL et blocR est aligne a gauche mais je souhaiterai egalement qu'il apparaisse au centre du bloc et non sur la gauche, ce que je n'arrive pas a faire.
Pouvez-vous m'aider?

[masu]

peu tu donner le css en rapport avec le code que tu donne stp.
sinon a vu de nez, je te dirai de mettre un width:50% sur blocL et blocR et de jouer apres sur le paddin et/ou le margin.

[bambou]

Voila le CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
..blocL 
{
  width: 50%;
  float: left;
}
 
.blocL#left
{
  text-align: left;
}
 
.blocR 
{
  width: 50%;
  float: right;
}
 
.blocR#left
{
  text-align:left;
}
 
.blocY 
{
  /*width: 5px;*/
  vertical-align: middle;
  margin-right: auto;
  margin-left:auto;
  text-align:center;
}
 
.centre
{
  width:60%;
  margin-right: auto;
  margin-left:auto;
}

j'ai teste avec des margin-left/margin-right:auto;, ca change rien

[fallais]

Le texte des blocs blocL et blocR est aligne a gauche mais je souhaiterai egalement qu'il apparaisse au centre du bloc et non sur la gauche, ce que je n'arrive pas a faire.
Pouvez-vous m'aider?

Tu les veux a gauche ou au centre ?

[bambou]

bah c'est ca le truc, je veux un alignement du texte a gauche, mais au centre du bloc...j'espere que c'est plus clair dis comme ca

[fallais]

bah c'est ca le truc, je veux un alignement du texte a gauche, mais au centre du bloc...j'espere que c'est plus clair dis comme ca

Peut tu faire un Sreen puis entourer en rouge la ou tu vroudrais que le texte soit ? Stp car le comprend pas (a gauche mais au centre )

De plus regarde ton code CSS au debut il y a 2 points .. Je les ai enlevé pour tester chez moi mais toi tu les as ? Si oui enleve en un

[fallais]

Ah je pense avoir trouvé ! va voir la : http://francallais.free.fr/ et dis moi si c'est ca Si oui je te file le code

PS : les couleurs c'etait pour m'y retrouver t'inquietes pas je les enleve si le code te conviens

[bambou]

alors non c'est pas tout a fait ca..

dans l'image suivante, le cadre rouge represente mon div, les boutons radios sont alignes a gauches les uns par rapports aux autres, mais l'ensemble du groupe de boutons radio + legende est colle a gauche du bloc div, alors que je souhaiterai qu'ils soient centres



erf c dur a expliquer

[fallais]

Et ben tu utilises deux DIV :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div style="width: 60%; border: 1px solid; border-color: red;" align="center">
<div style="width: 100px; text-align: left;">
<input type="radio" name=""> Yes<br />
<input type="radio" name=""> No<br />
<input type="radio" name=""> Untested<br />
<div>
</div>

[bambou]

j'ai ajoute un div dans mon code comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
            <DIV align="center">
              <DIV class="blocL" id="left">
                   blabla
              </DIV>
              <DIV class="blocR" id="left">
                   blabla
              </DIV>
            </DIV>

mais ca ne marche pas, du moin sous firefox il n'y a pas de changement

[fallais]

T'as testé mon code ? Ca te conviens pas ?

[masu]

Je n'ai remarque que de menu erreurs, mais la construction semble bonne.

..blocL
{
width: 50%;
float: left;
}

..blockL -> .blockL

.blocL#left {
text-align: left;
}
[...]
.blocR#left {
text-align:left;
}

selecteur incorrecte il me semble : utilise seulement #left.
Normalement un id doit etre unique sur une page et tu utilise deux fois #left.

Sinon ca a l'air de marcher tu a bien un dix#center qui fait 60% de ton fieldset et dex block a l'intérier qui se partagent la place equitablement l'un a coté de l'autre.

Ton probleme était-il juste cette faute de frappe ..blocL? ou reste-il d'autres choses a résoudre ?

[bambou]

T'as testé mon code ? Ca te conviens pas ?

bah j'ai teste de rajoute un <div> avec un align="center" comme dans mon dernier message, mais ca n'a rien change...

selecteur incorrecte il me semble : utilise seulement #left.
Normalement un id doit etre unique sur une page et tu utilise deux fois #left.

ah vi, c'est fort possible, je vais corriger ca. Il y a un moyen de faire des "sous style"? par exemple un style "bloc" general avec ses attributs et un sous style "blocL' qui va reprendre les attributs du style bloc en ajoutant d'autres specifiques?

Sinon ca a l'air de marcher tu a bien un dix#center qui fait 60% de ton fieldset et dex block a l'intérier qui se partagent la place equitablement l'un a coté de l'autre.

pour le positionnement du bloc dans le reste de la page, tout est ok, pour l'aligment a gauche du texte, ok aussi, mais pour le positionnement du texte, non ca veut definitivement pas...

Ton probleme était-il juste cette faute de frappe ..blocL? ou reste-il d'autres choses a résoudre ?

la faute de frappe ete juste dans le forum, mon .css est correcte

[masu]

Elwyn > il ne me semble pas que la propriété float accepte la valeur middle

[bambou]

up pour l'edit ci dessus

[fallais]

Elwyn > il ne me semble pas que la propriété float accepte la valeur middle

Oups j'ai oublié de réedité, c'etait juste un test Mon coup des deux DIV marche bien chez moi ... Ca convenait pas a ton probleme ?

[masu]

ah vi, c'est fort possible, je vais corriger ca. Il y a un moyen de faire des "sous style"? par exemple un style "bloc" general avec ses attributs et un sous style "blocL' qui va reprendre les attributs du style bloc en ajoutant d'autres specifiques?

il est possible d'avoir plusieurs classes sur un element, il suffit de les séparer par un espace. Le bloc heritera des differentes propriétes venant des 2 class.

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="bloc left">dummy</div>

css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.block {
[...]
}
.left {
[...]
}

[masu]

pour le positionnement du bloc dans le reste de la page, tout est ok, pour l'aligment a gauche du texte, ok aussi, mais pour le positionnement du texte, non ca veut definitivement pas...

Peu-tu réexplique de facon précise, le comportement que to observe d'une part. Et le comportement que tu souhaiterai.

Car je ne suis plus sure de ce que tu souhaite. Le code que tu donne répond d'apres mes test a ta demande. Ou alors c'est qu'il y a peu etre dans ton css des element qui rentre en conflic par rapport a l'extrait que tu nous a donné.

[fallais]

Au debut je comprenez presque ton probleme mais alors la ...

[bambou]

oops, desole pour le retard, jave pa vu la 2eme page...

alors, sur le screen ci dessous, vous pouvez voir que mes boutons radios de "reproduced" et "diffraction limit" sont alignes a gauche, ca c'est bien, mais le bloc de texte entier aussi est aligne a gauche et ca c pas bien, ca fait pas joli, pas symetrique..par rapport au champs dataset, structure et upload...



j'ai essaye de mettre dans une balise <p> le texte et les radios avec un attribut text-align="left", et mettre un text-align=center daqns le div...mais ca marche pas