Alignement à droite

Le
scribouille
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
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 ?

Merci
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Mickaël Wolff
Le #22065881
scribouille a écrit :

J'ai un soucis avec les alignements à droite :



Pourquoi parles-tu de float: right pour aligner ton texte à droite ?

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
scribouille
Le #22065871
Mickaël Wolff a écrit :
scribouille a écrit :

J'ai un soucis avec les alignements à droite :



Pourquoi parles-tu de float: right pour aligner ton texte à droite ?



Parce que ce n'est pas du texte que je veux aligner....
Mickaël Wolff
Le #22065861
scribouille a écrit :

Parce que ce n'est pas du texte que je veux aligner....



Ah ben forcément, si tu ne dis pas tout, on ne peut pas deviner. Ne
connaissant pas MSIE, je laisse aux autres le choix des armes.

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
TJ
Le #22065851
On 2008-11-06, scribouille
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 :

.global {
clear: both; /* <- ne pas oublier */
height: 768px;
width: 1280px;
margin-right: auto;
margin-left: auto;
border: thin solid #000000;
}

.global * {
float: right;
}

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
Le #22065841
On 2008-11-06, TJ
On 2008-11-06, scribouille .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 :

.global #globalx
.global #globaly,
.global #globalz {
float: right;
}

En supposant que tu donnes les id que j'ai utilisé pour les fils de
.global que tu veux faire flotter.

.global à mon avis il sera unique, autant lui donner un id et utiliser
les règles avec #global.
TJ
Le #22065831
On 2008-11-06, TJ
.global #globalx


^ manque la virgule
.global #globaly,
.global #globalz {
float: right;
}



Promis la prochaine fois je me relis ;-)
SAM
Le #22065821
Le 11/6/08 4:56 PM, TJ a écrit :
On 2008-11-06, scribouille
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)

height: 768px;
width: 1280px;
margin-right: auto;
margin-left: auto;
border: thin solid #000000;
}

.global * {
float: right;
}

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) :

--
sm
TJ
Le #22065801
On 2008-11-06, SAM
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.
scribouille
Le #22065271
TJ a écrit :
On 2008-11-06, SAM 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...

.global {
height: 620px;
width: 1024px;
border: thin solid #000000;
margin-right: auto;
margin-left: auto;
}
.global .fondroit { /*image de 400x620px*/
margin: 0px;
position: relative;
float: right;
clear:right;
width: 400px;
z-index: 1;
height: 615px;
left: 0px;
top: 0px;
}
.global .logo { /*texte composé de 3 blocs span précisant polices,
taille...etc */
position: absolute;
width: 800px;
z-index: 10;
top: 100px;
float: right;
}

.global .menu { /*composé d'une serie d'image*/
position: absolute;
z-index: 10;
width:800px;
top: 400px;
float: right;
}

Et le html :
<body>
<div class="global">
<div class="fondroit"><img alt="fond chinois"
src="images/Fondchinois.jpg"/></div>

<div class="bandeau">Un blabla</div>

<div class="logo">
<span class="maj">B</span>
<span class="minblack">la </span>
<span class="min"> bla</span> </div>

<div class="menu">
class="im1" /></a>
alt="chinois" class="im2" /></a>
class="im3" /></a>
..etc...(il y a 6 images...)
</div>
</div>
</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...

Merci d'avance
SAM
Le #22065261
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 {
position: relative; /* pour être le parent repère */
width: 1024px;
height: 620px;
border: thin solid #000000;
margin-right: auto;
margin-left: auto;
}
.global .fondroit { /*image de 400x620px*/
margin: 0px;
text-align: right;
height: 615px;
}
.global .logo { /*texte composé de 3 blocs span précisant polices,
taille...etc */
position: absolute;
width: 800px;
top: 100px;
}

.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 :


--
sm
Publicité
Poster une réponse
Anonyme