Alignement à droite
scribouille
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
Mickaël Wolff
> J'ai un soucis avec les alignements à droite :
Pourquoi parles-tu de float: right pour aligner ton texte à droite ?
<http://www.w3.org/TR/CSS21/text.html#propdef-text-align>
--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
scribouille
> scribouille a écrit :
>
>> J'ai un soucis avec les alignements à droite :
>
> Pourquoi parles-tu de float: right pour aligner ton texte à droite ?
> <http://www.w3.org/TR/CSS21/text.html#propdef-text-align>
>
Mickaël Wolff
> 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.
TJ
> 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
> 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
^ manque la virgule
> .global #globaly,
> .global #globalz {
> float: right;
> }
Promis la prochaine fois je me relis ;-)
SAM
> On 2008-11-06, scribouille <scrib...@free.fr> wrote:
>> Bonjour,
>>
>> J'ai un soucis avec les alignements à droite :
>
> 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) :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
--
sm
TJ
> Le 11/6/08 4:56 PM, TJ a écrit :
>> 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
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">
<a href="contact.html"><img src="./images/indien.jpg" alt="Indien"
class="im1" /></a>
<a href="pourquoi.html"><img src="./images/chinois.jpg"
alt="chinois" class="im2" /></a>
<a href="enjeux.html"><img src="./images/arabe.jpg" alt="arabe"
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
>
> Merci d'avoir pris le temps de répondre...
> Bon, je précise mon truc, par ce que je ne m'en sors pas...
> 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 :
<http://cjoint.com/?lkxI7f0bdX>
--
sm
scribouille
>> Et le html :
>
> Non ça n'est pas le html
> ce n'est que le body.
ok !
>
> Quel doc-type utilises-tu ?
>
XHTML 1.0 Strict
>> <body>
>
> c'eût mieux vallu mettre toute la page sur un serveur
> (on n'a pas les images !)
Va voir là : www.markotypo.com
Ca s'affiche exactement comme je le veux avec firefox 3.03 avec une résolution
de 1680*1050
> une fixette sur un bord droit que je ne vois pas
> (je n'ouvre jamais mes brouteurs en 1000px de large)
>
La réflexion est la suivante :
Vu le centrage de la page, je ne peux pas me fier aux bords de l'écran.
Vu la constitution de la page (image de fond alignée à droite, logo et menu
venant se positionner par rapport à cette image de fond) ça me semble la
meilleure solution...Mais peut-être me goure-je....
Ensuite, 1000px de large, je reconnais que c'est bcp...j'ai un écran wide avec
une bonne résolution et j'ai tendance à penser que tout le monde est comme moi !
je vais sans doute baisser ça...
>
> Déjà pour 'menu' :
> [...]
>
Merci pour le petit cours. Je reconnais que j'ai quelques lacunes sur les bases
! Mais bon, en général, je m'en sors, même si je ne suis pas un pro !
>
> Bon ... pour tes CSS, voici :
Ca ne marche pas pour moi. Mais bon, je crois que je vais prendre le temps de
potasser une bonne doc sur le sujet et reprendre ça tranquillement...
> Un peu modifié à ma sauce (et avec mes images témoins) ça donne ça :
> <http://cjoint.com/?lkxI7f0bdX>
Merci d'avoir pris le temps de regarder tout ça ! Bonne journée
Olivier Miakinen
Le 11/11/2008 11:12, scribouille a écrit :
>
> Va voir là : www.markotypo.com
> Ca s'affiche exactement comme je le veux avec firefox 3.03 avec une résolution
> de 1680*1050
Moi je vois « Marl » en noir sur fond jaune, avec une bande noire à
droite... mais un petit triangle à droite du « l » laisse deviner
qu'en fait ça devrait être un « k ». Bien sûr, en bougeant l'ascenseur
horizontal (beurk) j'arrive à lire « typo » en jaune sur fond noir :
<http://cjoint.com/data/llqTVOIixi.htm>.
J'ai aussi une résolution de 1680×1050, ce qui me permet d'afficher
plusieurs fenêtres côte à côte. J'aimerais bien avoir toujours deux
fenêtres complètes de moins de 840 pixels de large, mais hélas il y a
toujours des sites qui m'obligent à monter jusqu'à 900 ou 950 pixels.
> [...]
> Ensuite, 1000px de large, je reconnais que c'est bcp...j'ai un écran wide avec
> une bonne résolution et j'ai tendance à penser que tout le monde est comme moi !
> je vais sans doute baisser ça...
Si vraiment tu dois faire un design fixe, essaye de ne pas dépasser 800
pixels de large. L'idéal serait un design élastique pouvant aller de 700
à plus de 1000 pixels de large, voire de 700 à plus de 1600.
Cordialement,
--
Olivier.
SAM
> SAM a écrit :
>
>> Quel doc-type utilises-tu ?
>
> XHTML 1.0 Strict
Bon ... alors lâcher ce doc-type - d'ailleurs il est mal écrit et est
refusé (HTML au lieu de html) - qui est trop restrictif (tu n'as pas
autofermé les balises qui le demandent) (tu as glissé des names où ce
n'est pas permis)
> Va voir là : www.markotypo.com
> Ca s'affiche exactement comme je le veux avec firefox 3.03 avec une
> résolution de 1680*1050
Bon essseptionnellement j'agrandis mes fenêtres !
avec un view-port de 1320/811 voici ce que j'obtiens :
- Mac et Fx.3 : <http://cjoint.com/?llsGh6s1sI>
- Win XP et IE.6 : <http://cjoint.com/?llsGOL3zK2>
et en full screen Fx sur Mac 20" (soit 1680/1050), voici :
<http://cjoint.com/?llsIETpwRY>
... pas terrible ... !
>> (je n'ouvre jamais mes brouteurs en 1000px de large)
>>
> La réflexion est la suivante :
> Vu le centrage de la page, je ne peux pas me fier aux bords de l'écran.
Vu le centrage de 'global'
(qui pourrait être en dimensions relatives (en %) )
et qui devrait être positionné pour guider les contenus.
> Vu la constitution de la page (image de fond alignée à droite, logo et
> menu venant se positionner par rapport à cette image de fond) ça me
> semble la meilleure solution...Mais peut-être me goure-je....
Ben .... faut dire que tu cherches un peu la difficulté, non ?
> Ensuite, 1000px de large, je reconnais que c'est bcp...j'ai un écran
> wide avec une bonne résolution et j'ai tendance à penser que tout le
> monde est comme moi ! je vais sans doute baisser ça...
Limiter 'global' à 800px de large (pour Olivier et moi-même)
> Merci pour le petit cours. Je reconnais que j'ai quelques lacunes sur
> les bases ! Mais bon, en général, je m'en sors, même si je ne suis pas
> un pro !
On arrive parfois à s'en sortir avec les css
reste à savoir si c'est très élégamment ?
ou, à minima ?
> Merci d'avoir pris le temps de regarder tout ça ! Bonne journée
Voici une autre démo :
<http://stephane.moriaux.pagesperso-orange.fr/truc/marko/>
avec largeur adaptative mais limitée en minimale à 800px (sauf IE)
Le menu se modifie à cause de ses images trop grandes pour les 800px.
Passe à peu près pareil partout (et sans javascript, tant pis pour NC.4
ou IE.5).
Passe la validation w3c :
<http://validator.w3.org/check?uri=http%3A%2F%2Fstephane.moriaux.pagesperso-orange.fr%2Ftruc%2Fmarko%2F&charset=(detect+automatically)&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.591>
--
sm
scribouille
> Voici une autre démo :
> <http://stephane.moriaux.pagesperso-orange.fr/truc/marko/>
> avec largeur adaptative mais limitée en minimale à 800px (sauf IE)
> Le menu se modifie à cause de ses images trop grandes pour les 800px.
> Passe à peu près pareil partout (et sans javascript, tant pis pour NC.4
> ou IE.5).
> Passe la validation w3c :
> <http://validator.w3.org/check?uri=http%3A%2F%2Fstephane.moriaux.pagesperso-orange.fr%2Ftruc%2Fmarko%2F&charset=(detect+automatically)&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.591>
>
>
Alors ça c'est vraiment cool ! Merci !
J'ai un peu regardé et je vois que je suis vraiment à la ramasse sur certains
trucs !
Bon, je vais sans doute repartir de ta démo pour continuer mon dev...
Merci beaucoup d'avoir pris le temps de regarder tout ça !
Bonne journée
SAM
> SAM a écrit :
>
>> Voici une autre démo :
>> <http://stephane.moriaux.pagesperso-orange.fr/truc/marko/>
>
J'en ai profité pour réduire le poids de certaines images,
(qui seront à refaire car issues de jpeg)
celles pour le menu sont 4 fois moins lourdes.
(va pas plaire au graphiste qu'on lui pourrisse ses images comme ça !)
> J'ai un peu regardé et je vois que je suis vraiment à la ramasse sur
> certains trucs !
Comme d'utiliser des absolutes alors que ce n'est pas nécessaire
ou d'utiliser des polices que personne n'a
(je n'ai ni 'century gothic' ni 'Killiraphy' ni 'distro mix')
On doit certainement encore pouvoir simplifier la feuille de style.
> Bon, je vais sans doute repartir de ta démo pour continuer mon dev...
Je ne sais ce que ça pourra donner sur les autres pages.
(ni ce que donnera le menu quand il sera complet)
Pense à réduire le poids des images, là la page revue pèse déjà 190ko !
Pour les roll-overs utiliser les css et les "portes coulissantes"
Axium : ne jamais utiliser de positionnement absolute.
(sauf cas de force majeure quand on a épuisé tout le reste)
--
sm
SAM
> Le 11/12/08 9:09 AM, scribouille a écrit :
>> SAM a écrit :
>>
>>> Voici une autre démo :
>>> <http://stephane.moriaux.pagesperso-orange.fr/truc/marko/>
>>
>> Alors ça c'est vraiment cool ! Merci !
et voici qui devrait être plus conforme aux notions d'accessibilité, de
sémantique et syntaxe :
<http://stephane.moriaux.pagesperso-orange.fr/truc/marko/index_bis>
--
sm