J'ai un soucis avec les alignements à droite :
J'ai un div global sur ma page :
.global {
height: 768px;
width: 1280px;
margin-right: auto;
margin-left: auto;
border: thin solid #000000;
}
Dans ce div, je souhaite aligner des éléments à droite, le long de la
bordure...
Avec firefox, un float:right fait l'affaire, mais avec IE6, ça ne marche
pas...
J'ai vu des histoires de display:inline; mais soit j'ai pas tout
compris, soit ça ne fonctionne pas ici...
Y a-t-il une solution purement css ou faut-il passer par la case
javascript avec calcul de la largeur d'écran ?
J'ai un soucis avec les alignements à droite : J'ai un div global sur ma page : .global { height: 768px; width: 1280px; margin-right: auto; margin-left: auto; border: thin solid #000000; }
Dans ce div, je souhaite aligner des éléments à droite, le long de la bordure...
Au vu des précisions que tu as apportées par la suite, je pense comprendre que ce que tu veux est :
Ce n'est pas .global qu'il faut faire flotter, mais les éléments contenus dedans. Ne pas oublier de mettre une width à ces derniers (sinon l'élément flottera bien mais tu ne le verras pas).
On 2008-11-06, scribouille <scribouille@free.fr> wrote:
Bonjour,
J'ai un soucis avec les alignements à droite :
J'ai un div global sur ma page :
.global {
height: 768px;
width: 1280px;
margin-right: auto;
margin-left: auto;
border: thin solid #000000;
}
Dans ce div, je souhaite aligner des éléments à droite, le long de la
bordure...
Au vu des précisions que tu as apportées par la suite, je pense
comprendre que ce que tu veux est :
Ce n'est pas .global qu'il faut faire flotter, mais les éléments
contenus dedans. Ne pas oublier de mettre une width à ces derniers
(sinon l'élément flottera bien mais tu ne le verras pas).
J'ai un soucis avec les alignements à droite : J'ai un div global sur ma page : .global { height: 768px; width: 1280px; margin-right: auto; margin-left: auto; border: thin solid #000000; }
Dans ce div, je souhaite aligner des éléments à droite, le long de la bordure...
Au vu des précisions que tu as apportées par la suite, je pense comprendre que ce que tu veux est :
Ce n'est pas .global qu'il faut faire flotter, mais les éléments contenus dedans. Ne pas oublier de mettre une width à ces derniers (sinon l'élément flottera bien mais tu ne le verras pas).
TJ
On 2008-11-06, TJ <tj+ wrote:
On 2008-11-06, scribouille wrote: .global * { float: right; }
Cela dit je ne te recommande pas cette règle, mais plutôt d'identifier précisément (id) ceux que tu veux faire flotter :
Ce n'est pas .global qu'il faut faire flotter, mais les éléments contenus dedans. Ne pas oublier de mettre une width à ces derniers
C'est quoi ce b...l ? IE ne règle pas automatiquement la largeur du truc flotté à celle de son contenu ? Je croyais que 'float' réagissait conne 'absolute' à ce propos ?
(sinon l'élément flottera bien mais tu ne le verras pas).
Bon ... curieusement mon IE6 fait comme mon Fx3 : il règle bien la largeur des flottés tout seul.
Maintenant, si le truc est de les avoir tous supperposés à droite, ce sera raté. (sauf à ce que la somme de la largeur de 2 trucs consécutifs ne soit supérieure à la largeur du div principal de class 'global').
Pour cela il faut :
.global * { float: right; clear: right;; }
Mettre en favori (et boutton de barre d'outils persos) : <http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
-- sm
Le 11/6/08 4:56 PM, TJ a écrit :
On 2008-11-06, scribouille <scribouille@free.fr> wrote:
Bonjour,
J'ai un soucis avec les alignements à droite :
Au vu des précisions que tu as apportées par la suite, je pense
comprendre que ce que tu veux est :
.global {
clear: both; /* <- ne pas oublier */
Tiens ? et pourquoi ?
C'est l'élément suivant le div .global qui doit arreter la flottaison.
(enfin ... IE6 n'en a pas besoin ! les autres navigateurs si)
Ce n'est pas .global qu'il faut faire flotter, mais les éléments
contenus dedans. Ne pas oublier de mettre une width à ces derniers
C'est quoi ce b...l ?
IE ne règle pas automatiquement la largeur du truc flotté à celle de son
contenu ?
Je croyais que 'float' réagissait conne 'absolute' à ce propos ?
(sinon l'élément flottera bien mais tu ne le verras pas).
Bon ...
curieusement mon IE6 fait comme mon Fx3 :
il règle bien la largeur des flottés tout seul.
Maintenant, si le truc est de les avoir tous supperposés à droite, ce
sera raté.
(sauf à ce que la somme de la largeur de 2 trucs consécutifs ne soit
supérieure à la largeur du div principal de class 'global').
Pour cela il faut :
.global * {
float: right;
clear: right;;
}
Mettre en favori (et boutton de barre d'outils persos) :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
Ce n'est pas .global qu'il faut faire flotter, mais les éléments contenus dedans. Ne pas oublier de mettre une width à ces derniers
C'est quoi ce b...l ? IE ne règle pas automatiquement la largeur du truc flotté à celle de son contenu ? Je croyais que 'float' réagissait conne 'absolute' à ce propos ?
(sinon l'élément flottera bien mais tu ne le verras pas).
Bon ... curieusement mon IE6 fait comme mon Fx3 : il règle bien la largeur des flottés tout seul.
Maintenant, si le truc est de les avoir tous supperposés à droite, ce sera raté. (sauf à ce que la somme de la largeur de 2 trucs consécutifs ne soit supérieure à la largeur du div principal de class 'global').
Pour cela il faut :
.global * { float: right; clear: right;; }
Mettre en favori (et boutton de barre d'outils persos) : <http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
-- sm
TJ
On 2008-11-06, SAM wrote:
Le 11/6/08 4:56 PM, TJ a écrit :
.global { clear: both; /* <- ne pas oublier */
Tiens ? et pourquoi ?
C'est l'élément suivant le div .global qui doit arreter la flottaison. (enfin ... IE6 n'en a pas besoin ! les autres navigateurs si)
Merci de m'avoir relu, je crois que j'aurai du m'abstenir de poster aujourd'hui :-). J'ai tout fait de tête sans vérifier, je pensais plutôt à ça :
.global:after { clear: both; }
Ce n'est pas .global qu'il faut faire flotter, mais les éléments contenus dedans. Ne pas oublier de mettre une width à ces derniers
C'est quoi ce b...l ? IE ne règle pas automatiquement la largeur du truc flotté à celle de son contenu ? Je croyais que 'float' réagissait conne 'absolute' à ce propos ?
(sinon l'élément flottera bien mais tu ne le verras pas).
Bon ... curieusement mon IE6 fait comme mon Fx3 : il règle bien la largeur des flottés tout seul.
Maintenant, si le truc est de les avoir tous supperposés à droite, ce sera raté.
Effectivement ça dépend si l'OP les veut superposés ou flottés.
(sauf à ce que la somme de la largeur de 2 trucs consécutifs ne soit supérieure à la largeur du div principal de class 'global').
Pour cela il faut :
.global * { float: right; clear: right;; }
Effectivement.
Ou si l'OP se satisfait d'éléments inline, le text-align: right; suffira peut-être.
On 2008-11-06, SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
Le 11/6/08 4:56 PM, TJ a écrit :
.global {
clear: both; /* <- ne pas oublier */
Tiens ? et pourquoi ?
C'est l'élément suivant le div .global qui doit arreter la flottaison.
(enfin ... IE6 n'en a pas besoin ! les autres navigateurs si)
Merci de m'avoir relu, je crois que j'aurai du m'abstenir de poster
aujourd'hui :-). J'ai tout fait de tête sans vérifier, je pensais plutôt à
ça :
.global:after {
clear: both;
}
Ce n'est pas .global qu'il faut faire flotter, mais les éléments
contenus dedans. Ne pas oublier de mettre une width à ces derniers
C'est quoi ce b...l ?
IE ne règle pas automatiquement la largeur du truc flotté à celle de son
contenu ?
Je croyais que 'float' réagissait conne 'absolute' à ce propos ?
(sinon l'élément flottera bien mais tu ne le verras pas).
Bon ...
curieusement mon IE6 fait comme mon Fx3 :
il règle bien la largeur des flottés tout seul.
Maintenant, si le truc est de les avoir tous supperposés à droite, ce
sera raté.
Effectivement ça dépend si l'OP les veut superposés ou flottés.
(sauf à ce que la somme de la largeur de 2 trucs consécutifs ne soit
supérieure à la largeur du div principal de class 'global').
Pour cela il faut :
.global * {
float: right;
clear: right;;
}
Effectivement.
Ou si l'OP se satisfait d'éléments inline, le text-align: right;
suffira peut-être.
C'est l'élément suivant le div .global qui doit arreter la flottaison. (enfin ... IE6 n'en a pas besoin ! les autres navigateurs si)
Merci de m'avoir relu, je crois que j'aurai du m'abstenir de poster aujourd'hui :-). J'ai tout fait de tête sans vérifier, je pensais plutôt à ça :
.global:after { clear: both; }
Ce n'est pas .global qu'il faut faire flotter, mais les éléments contenus dedans. Ne pas oublier de mettre une width à ces derniers
C'est quoi ce b...l ? IE ne règle pas automatiquement la largeur du truc flotté à celle de son contenu ? Je croyais que 'float' réagissait conne 'absolute' à ce propos ?
(sinon l'élément flottera bien mais tu ne le verras pas).
Bon ... curieusement mon IE6 fait comme mon Fx3 : il règle bien la largeur des flottés tout seul.
Maintenant, si le truc est de les avoir tous supperposés à droite, ce sera raté.
Effectivement ça dépend si l'OP les veut superposés ou flottés.
(sauf à ce que la somme de la largeur de 2 trucs consécutifs ne soit supérieure à la largeur du div principal de class 'global').
Pour cela il faut :
.global * { float: right; clear: right;; }
Effectivement.
Ou si l'OP se satisfait d'éléments inline, le text-align: right; suffira peut-être.
scribouille
TJ a écrit :
On 2008-11-06, SAM wrote: Effectivement ça dépend si l'OP les veut superposés ou flottés.
(sauf à ce que la somme de la largeur de 2 trucs consécutifs ne soit supérieure à la largeur du div principal de class 'global').
Pour cela il faut :
.global * { float: right; clear: right;; }
Effectivement.
Ou si l'OP se satisfait d'éléments inline, le text-align: right; suffira peut-être.
Merci d'avoir pris le temps de répondre... Bon, je précise mon truc, par ce que je ne m'en sors pas...
Je n'arrive pas à aligner les div logo et menu sur le border-right du div global...ou alors ça marche sous firefox et pas sous IE...Bref, je rame et j'ai du mal à saisir le pourquoi du comment...
Merci d'avance
TJ a écrit :
On 2008-11-06, SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
Effectivement ça dépend si l'OP les veut superposés ou flottés.
(sauf à ce que la somme de la largeur de 2 trucs consécutifs ne soit
supérieure à la largeur du div principal de class 'global').
Pour cela il faut :
.global * {
float: right;
clear: right;;
}
Effectivement.
Ou si l'OP se satisfait d'éléments inline, le text-align: right;
suffira peut-être.
Merci d'avoir pris le temps de répondre...
Bon, je précise mon truc, par ce que je ne m'en sors pas...
Je n'arrive pas à aligner les div logo et menu sur le border-right du
div global...ou alors ça marche sous firefox et pas sous IE...Bref, je
rame et j'ai du mal à saisir le pourquoi du comment...
Je n'arrive pas à aligner les div logo et menu sur le border-right du div global...ou alors ça marche sous firefox et pas sous IE...Bref, je rame et j'ai du mal à saisir le pourquoi du comment...
Merci d'avance
SAM
Le 11/10/08 8:50 PM, scribouille a écrit :
Merci d'avoir pris le temps de répondre... Bon, je précise mon truc, par ce que je ne m'en sors pas...
(snip css)
Et le html :
Non ça n'est pas le html ce n'est que le body.
Quel doc-type utilises-tu ?
et pourquoi celui-là ?
<body>
c'eût mieux vallu mettre toute la page sur un serveur (on n'a pas les images !)
(...)
</body>
Je n'arrive pas à aligner les div logo et menu sur le border-right du div global...ou alors ça marche sous firefox et pas sous IE...Bref, je rame et j'ai du mal à saisir le pourquoi du comment...
Pas trop compris pourquoi une fixette sur un bord droit que je ne vois pas (je n'ouvre jamais mes brouteurs en 1000px de large)
Merci d'avance
Déjà pour 'menu' : - position:absolute; et - float:right; ça ne fonctionne pas ensemble.
Si c'est en absolute il n'y a rien à faire flotter (faire couler à côté) c'est sorti du flux normal, plus aucune relation avec le reste sauf avec le plus proche conteneur parent qui sera positionné.
Le premier parent de 'menu' est 'global' qui n'est pas positionné, donc 'menu' se calera relativement au grand parent soit ici : 'body' (du moins selon la logique W3C)
Ensuite, les z-index ça ne sert à rien (personne n'y comprend quoi que ce soit, d'autant que le brouteur attribue lui-même un z-index suivant le flux). Donc on range les div dans le flux (la succession des lignes) pour avoir le div du dessus (recouvrant les précédents) après les autres.
Et pour finir, éviter absolument, sauf réelle cause majeure, d'utiliser le positionnement absolu. On ne met en absolute que lorsqu'on a épuisé toutes les autres possibilités pour parvenir à la présentation voulue.
Et comme tu es perdu ... il faut bien comprendre que les styles servent à plusieurs choses : - arranger le contenu - padding, color, text-align, font, overflow ... - arranger l'élément - width, height, background, ... (top, left, right, bottom pour position:absolute) - arranger ce qui entoure l'élément - float, margin, border, ... - modifier le comportement d'un élément - positionné ou non - block, table, inline, table-cell ...
Et qu'en plus les balises ont déjà leurs propres styles - block : div, p, h1, h... hn, ... - inline : span, em, tt, a, ... - spéciaux : img, table, ...
Qu'un block, - non positionné ou relatif prend en largeur celle de son parent (ou conteneur). - en float ou absolute prend la largeur de ses enfants (ou contenus)
Que IE a sa manière à lui de comprendre les choses :-( (il faut souvent jouer d'artifices pour qu'il accepte d'appliquer un style à un élément dont on ne lui aura pas explicitement assuré qu'il doit s'en occuper, comme par exemple mettre un background ou un overflow complètement inutiles)
Bon ... pour tes CSS, voici : (vu que je ne sais trop ce que tu veux exactement j'ai gardé des absolute des fois que ...)
.global .menu { /*composé d'une serie d'image*/ position: absolute; top: 400px; right: 0; width: 800px; text-align: right; /* pour mettre les images à droite */ }
Un peu modifié à ma sauce (et avec mes images témoins) ça donne ça : <http://cjoint.com/?lkxI7f0bdX>
-- sm
Le 11/10/08 8:50 PM, scribouille a écrit :
Merci d'avoir pris le temps de répondre...
Bon, je précise mon truc, par ce que je ne m'en sors pas...
(snip css)
Et le html :
Non ça n'est pas le html
ce n'est que le body.
Quel doc-type utilises-tu ?
et pourquoi celui-là ?
<body>
c'eût mieux vallu mettre toute la page sur un serveur
(on n'a pas les images !)
(...)
</body>
Je n'arrive pas à aligner les div logo et menu sur le border-right du
div global...ou alors ça marche sous firefox et pas sous IE...Bref, je
rame et j'ai du mal à saisir le pourquoi du comment...
Pas trop compris pourquoi
une fixette sur un bord droit que je ne vois pas
(je n'ouvre jamais mes brouteurs en 1000px de large)
Merci d'avance
Déjà pour 'menu' :
- position:absolute;
et
- float:right;
ça ne fonctionne pas ensemble.
Si c'est en absolute
il n'y a rien à faire flotter (faire couler à côté)
c'est sorti du flux normal,
plus aucune relation avec le reste
sauf avec le plus proche conteneur parent qui sera positionné.
Le premier parent de 'menu' est 'global' qui n'est pas positionné,
donc 'menu' se calera relativement au grand parent soit ici : 'body'
(du moins selon la logique W3C)
Ensuite,
les z-index ça ne sert à rien (personne n'y comprend quoi que ce soit,
d'autant que le brouteur attribue lui-même un z-index suivant le flux).
Donc on range les div dans le flux (la succession des lignes) pour avoir
le div du dessus (recouvrant les précédents) après les autres.
Et pour finir,
éviter absolument, sauf réelle cause majeure, d'utiliser le
positionnement absolu.
On ne met en absolute que lorsqu'on a épuisé toutes les autres
possibilités pour parvenir à la présentation voulue.
Et comme tu es perdu ...
il faut bien comprendre que les styles servent à plusieurs choses :
- arranger le contenu
- padding, color, text-align, font, overflow ...
- arranger l'élément
- width, height, background, ...
(top, left, right, bottom pour position:absolute)
- arranger ce qui entoure l'élément
- float, margin, border, ...
- modifier le comportement d'un élément
- positionné ou non
- block, table, inline, table-cell ...
Et qu'en plus les balises ont déjà leurs propres styles
- block : div, p, h1, h... hn, ...
- inline : span, em, tt, a, ...
- spéciaux : img, table, ...
Qu'un block,
- non positionné ou relatif prend en largeur celle de son parent
(ou conteneur).
- en float ou absolute prend la largeur de ses enfants
(ou contenus)
Que IE a sa manière à lui de comprendre les choses :-(
(il faut souvent jouer d'artifices pour qu'il accepte d'appliquer un
style à un élément dont on ne lui aura pas explicitement assuré qu'il
doit s'en occuper, comme par exemple mettre un background ou un overflow
complètement inutiles)
Bon ... pour tes CSS, voici :
(vu que je ne sais trop ce que tu veux exactement
j'ai gardé des absolute des fois que ...)
Merci d'avoir pris le temps de répondre... Bon, je précise mon truc, par ce que je ne m'en sors pas...
(snip css)
Et le html :
Non ça n'est pas le html ce n'est que le body.
Quel doc-type utilises-tu ?
et pourquoi celui-là ?
<body>
c'eût mieux vallu mettre toute la page sur un serveur (on n'a pas les images !)
(...)
</body>
Je n'arrive pas à aligner les div logo et menu sur le border-right du div global...ou alors ça marche sous firefox et pas sous IE...Bref, je rame et j'ai du mal à saisir le pourquoi du comment...
Pas trop compris pourquoi une fixette sur un bord droit que je ne vois pas (je n'ouvre jamais mes brouteurs en 1000px de large)
Merci d'avance
Déjà pour 'menu' : - position:absolute; et - float:right; ça ne fonctionne pas ensemble.
Si c'est en absolute il n'y a rien à faire flotter (faire couler à côté) c'est sorti du flux normal, plus aucune relation avec le reste sauf avec le plus proche conteneur parent qui sera positionné.
Le premier parent de 'menu' est 'global' qui n'est pas positionné, donc 'menu' se calera relativement au grand parent soit ici : 'body' (du moins selon la logique W3C)
Ensuite, les z-index ça ne sert à rien (personne n'y comprend quoi que ce soit, d'autant que le brouteur attribue lui-même un z-index suivant le flux). Donc on range les div dans le flux (la succession des lignes) pour avoir le div du dessus (recouvrant les précédents) après les autres.
Et pour finir, éviter absolument, sauf réelle cause majeure, d'utiliser le positionnement absolu. On ne met en absolute que lorsqu'on a épuisé toutes les autres possibilités pour parvenir à la présentation voulue.
Et comme tu es perdu ... il faut bien comprendre que les styles servent à plusieurs choses : - arranger le contenu - padding, color, text-align, font, overflow ... - arranger l'élément - width, height, background, ... (top, left, right, bottom pour position:absolute) - arranger ce qui entoure l'élément - float, margin, border, ... - modifier le comportement d'un élément - positionné ou non - block, table, inline, table-cell ...
Et qu'en plus les balises ont déjà leurs propres styles - block : div, p, h1, h... hn, ... - inline : span, em, tt, a, ... - spéciaux : img, table, ...
Qu'un block, - non positionné ou relatif prend en largeur celle de son parent (ou conteneur). - en float ou absolute prend la largeur de ses enfants (ou contenus)
Que IE a sa manière à lui de comprendre les choses :-( (il faut souvent jouer d'artifices pour qu'il accepte d'appliquer un style à un élément dont on ne lui aura pas explicitement assuré qu'il doit s'en occuper, comme par exemple mettre un background ou un overflow complètement inutiles)
Bon ... pour tes CSS, voici : (vu que je ne sais trop ce que tu veux exactement j'ai gardé des absolute des fois que ...)
