Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP Alignement à droite

Alignement à droite

16 réponses
Avatar
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
Signaler un problème avec ce contenu

6 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
scribouille
SAM a écrit :

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
Avatar
Olivier Miakinen
Bonjour,

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.
Avatar
SAM
Le 11/11/08 11:12 AM, scribouille a écrit :
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
Avatar
scribouille
SAM a écrit :

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
Avatar
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 !



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
Avatar
SAM
Le 11/12/08 10:42 AM, SAM a écrit :
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
1 2