28173 sujets

CSS et mise en forme, CSS3

Pages :
Bonjour,
J'ai un petit souci nécessitant vos lumières.
J'ai un div #conteneur de taille variable (je peut le rendre fixe si cela simplifie) et à l'intérieur un div dont j'aimerais que la position soit en bas à droite.
J'ai l'impression que c'est quelque chose d'assez compliqué de fixer un div dans un autre.

Si vous avez des idées.
Salut, Smiley smile

Sans informations supplémentaires, ça paraît plutôt simple : il suffit d'utiliser le positionnement statique.
[b]HTML[/b]
<div id="conteneur">
	Pouet
	<div>Coin</div>
</div>

[b]CSS[/b]
#conteneur {background: red;}
#conteneur div {background: blue; margin-left: 200px;}


<edit>Pourquoi as-tu créé ce sujet ? Il ressemble beaucoup au dernier que tu as créé, non ?
Modifié par Julien Royer (18 Apr 2007 - 14:52)
Oups en effet, j'ai tellement écopé de forum que j'ai zappé que j'avais déjà posté ici. Encore dsl.
Je continu ici où sur l'autre ?
Modifié par TechnoGreg (18 Apr 2007 - 14:56)
Il suffit de définir ton div contenreur en position relative (sans mettre de valeurs pour top ou left, donc ça ne changera pas sa position). Ton conteneur sera dans ce cas là "positionné".
Ensuite, pour ton div à placer en bas à droite, tu utilises position absolute, avec bottom et right à 0px.

Là ou ça devient plus difficile, c'est éviter que le reste du contenu de ton conteneur ne se mélange avec ton div en bas à droite. Pour résoudre ce problème, il faudrait savoir ce qu'il y a d'autre dans ce div, et ca peut aider aussi de savoir ce qu'il y a dans le div en bas à droite, en particulier si ca a une taille fixe ou non...
yahrou > ce div en bas à droite serais de taille fixe avec une petite image
l'autre div contient du texte ou des listes ou encore des photos

raphael > j'y suis allé, mais j'y retourne quand même, au cas ou
yahrou a écrit :
Ensuite, pour ton div à placer en bas à droite, tu utilises position absolute, avec bottom et right à 0px.
Comme je l'ai indiqué et comme le dit la FAQ, l'idéal est d'utiliser le positionnement statique, qui sera bien plus robuste. Il faudrait en savoir plus sur le besoin exact.
TechnoGreg a écrit :
Oups en effet, j'ai tellement écopé de forum que j'ai zappé que j'avais déjà posté ici. Encore dsl.
Je continu ici où sur l'autre ?
Comme il y a des réponses fraiches ici, je ferme l'ancien sujet.
TechnoGreg a écrit :
yahrou > ce div en bas à droite serais de taille fixe avec une petite image
Dans ce cas, il suffit d'écrire :
[b]HTML[/b]
<div id="conteneur">
	Pouet

	<div>Coin</div>
</div>

[b]CSS[/b]
#conteneur div {text-align: right;}
Si ça ne suffit pas, c'est sans doute que nous as oublié de nous donner des informations. Dans ce cas, un exemple en ligne nous aiderait.
Julien > ton exemple positionneras le Coin à droite, mais dans le cas d'un div avec une hauteur minimale, cela ne marche que si le contenu fait s'agrandir le conteneur.
Je peut vous mettre un exemple en ligne mais il faudra attendre ce soir car c'est pour un site commercial et je ne veux pas vous divulger d'infos Smiley langue

EDIT : Au passage sous IE ce div disparait, je le soupçonne de disparaitre sous un autre div, si quelqu'un peut me conseiller par rapport à mes choix CSS je lui serais grandement reconnaissant.
Je met en ligne se soir.
Modifié par TechnoGreg (18 Apr 2007 - 15:32)
TechnoGreg a écrit :
Julien > ton exemple positionneras le Coin à droite, mais dans le cas d'un div avec une hauteur minimale, cela ne marche que si le contenu fait s'agrandir le conteneur.
Voilà le genre de précisions qui sont utiles pour te répondre. Smiley cligne
TechnoGreg a écrit :
Et puis, cela marche t-il sous IE ?
Oui, heureusement. Smiley smile

S'il en s'agit que d'une image, il faut se poser la question suivante : fait-elle partie du contenu ?
- Si ce n'est pas le cas, il suffit de la placer en background en bas à droite de ta div.
- Si c'est le cas, je suppose qu'il faudra la placer en absolu dans ton conteneur, avec le conteneur en position relative, comme il t'a déjà été suggéré.
Administrateur
TechnoGreg a écrit :
Démo ici :
http://mrgreg.diboo.net/test/pbcss/

Ouch, on a ici affaire à un autre gros problème : dès que l'on agrandit la taille de texte, le conteneur ne suit plus Smiley decu
Le texte sort et s'affiche sur le fond beige.
Pourquoi avoir figé la hauteur du conteneur ? Smiley ohwell
Parce que graphiquement parlant, le client ne veut pas qu'il y ai un espace blanc sous le phare du menu Smiley ohwell
Mais pour ce qui est du drapeau, sous IE ildisparait complétement, je n'y comprends rien.
TechnoGreg a écrit :
Parce que graphiquement parlant, le client ne veut pas qu'il y ai un espace blanc sous le phare du menu Smiley ohwell

À ce moment là, le professionnel de la conception web pourra produire l'argumentaire suivant :
1 - je comprends et partage votre souci d'esthétique et de maitrise de votre image de marque, mais...
2 - le Web est un média spécifique avec ses propres opportunités et ses propres contraintes. Par exemple, réaliser un site complètement figé en hauteur, c'est manquer une opportunité essentielle du Web : permettre à chaque utilisateur d'avoir une vue satisfaisante du contenu qu'on veut lui présenter, et notamment un rendu qui s'adapte à sa configuration, à ses préférences et à ses besoins.
3 - Saisir cette opportunité demande donc quelques aménagements. Je vous propose donc une solution mixte, qui prend en compte ces aménagements.

Dans ce cas précis, la solution mixte serait :
- un conteneur avec une hauteur minimale plutôt qu'une hauteur fixe, et qui garderait donc la capacité de s'allonger en fonction de son contenu ;
- un soin apporté à la maitrise du contenu pour éviter qu'avec les paramètres par défaut de la plupart des navigateurs, le texte ne vienne agrandir le conteneur ;
- une gestion intelligente des images de fond, de sorte qu'en cas d'agrandissement du conteneur au-delà de la hauteur «idéale», le résultat reste propre.
Je lis et comprends bien ce que tu veux dire. Sache néanmoins que je suis stagiaire, et donc que je ne puis m'imposer de la façon que tu préconise.
De plus je suis tout à fait d'accord avec toi en terme de solutions pour la hauteur de ce conteneur, mais ce n'est pas un problème pour moi.
Si j'ai posté c'est pour ce petit problème d'image en bas à droite. Je ne vois pas vraiment pourquoi vous prenez tant à coeur cette histoire de taille verticale de div...
Modifié par TechnoGreg (19 Apr 2007 - 14:56)
TechnoGreg a écrit :
Je lis et comprends bien ce que tu veux dire. Sache néanmoins que je suis stagiaire, et donc que je ne puis m'imposer de la façon que tu préconise.
De plus je suis tout à fait d'accord avec toi en terme de solutions pour la hauteur de ce conteneur, mais ce n'est pas un problème pour moi.
Si j'ai posté c'est pour ce petit problème d'image en bas à droite. Je ne vois pas vraiment pourquoi vous prenez tant à coeur cette histoire de taille verticale de div...


un geek ne laisse jamais un travail non terminé Smiley biggol
Je ne suis pas un geek.
Et ce n'est pas un travail non terminé, c'est un travail sous contraintes, ce qui est différent.
J'ai trouvé d'où vient le bug d'ie. Il n'aime pas ton float left sur ton contenu (par contre, je ne sais pas pourquoi il ne l'aime pas, c'est ie6 et ses caprices...)
Pour contourner ça, tu n'es pas obligé de mettre ton contenu en float left, il suffit de ne pas lui spécifier de largeur et de lui mettre une margin-left de la taille de ton menu.
En plus (oh miracle), ca regle le problème de l'agrandissement du texte, qui ne venait pas de tes heigh mais du fait que tout était en float.

Tu n'es pas obligé de dire à ton client que quand on agrandit le texte, il y a du blanc sous l'image. Par contre, tu pourrais spécifier la taille de ton texte en em; comme ca tout le monde peut agrandir le texte...
TechnoGreg a écrit :
Je ne suis pas un geek.

Lol faut pas te vexer hein... Smiley murf

TechnoGreg a écrit :
Et ce n'est pas un travail non terminé, c'est un travail sous contraintes, ce qui est différent.

Tout travail est sous contraintes. Ensuite, il y a les travaux sous contrainte où «ça ira bien comme ça, et tant pis si c'est pas terrible pour l'accessibilité/l'ergonomie/la robustesse du code» et les travaux sous contraintes où on fait quelques efforts sur ces points là.

Bien sûr il faut souvent transiger, faire des compromis, ne pas viser la surqualité... mais de là à excuser chacun de mes manquements par «y avait des contraintes», c'est un pas que je me garde de franchir. Smiley cligne


Pour en revenir à ton problème, utiliser le positionnement absolu est effectivement la meilleure solution. Ça semble être bien en place. Il s'agit juste de corriger le bug d'IE6 (pas de bug dans IE7).
Est-ce que tu as joué sur les z-index du conteneur positionné en relatif et de l'élément positionné en absolu, pour bien mettre l'un au dessus de l'autre ?


À propos de «Je ne vois pas vraiment pourquoi vous prenez tant à coeur cette histoire de taille verticale de div... », je dirai juste ceci : Alsacréations est un repère de gens pointilleux ayant à coeur la qualité de la conception web (ce qui inclue en autres un travail sur l'accessibilité), et qui n'hésiteront pas à soulever les problèmes posés par un site alors qu'on leur demande de l'aide sur un bête problème technique qui n'a rien à voir. C'est comme ça. Le petit miracle de cette communauté de bénévoles, c'est que l'on arrive souvent à gérer les deux de front :
- être une communauté d'entraide et apporter des solutions à des problèmes soulevés ;
- faire de l'initiation aux problématiques d'accessibilité, proposer des solutions alternatives à des problèmes non spécifiquement soulevés, etc.

Elle est pas belle, la vie. Smiley lol
Pages :