28172 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement flottant.

Bonsoir la populace.

J'aimerais un peu d'aide pour obtenir le positionnement suivant :

http://img208.imageshack.us/img208/7936/expcss.jpg

J'ai a peu près ce que je souhaite, mais lorsque j'ajoute une div à Explications, celle ci se calque sur Contenu, et se positionne sous mon Canvas.

Voici le squelette de mon document HTML :


<body onload='javascript:OnloadInit();'>
      <div id="Main-Conteneur">
            <canvas></canvas>
            <div id="Explications">
                  <form>
                        <div id="A_Positionner"></div>
                  </form>
            </div>
      </div>
</body>


Et le CSS associé :


body
{
      margin:0;padding:0;
}

#Main-Conteneur
{
      width : 1000px;
      height : 100%;
      padding:0;
      margin : 0px auto;
}

canvas
{
      width : 600px;
      height : 400px;
      margin:0;padding:0;
      vertical-align: middle;
      margin : 5px;
      float : left;
}

#A_Positionner
{
}


Lorsque j'intègre un paragraphe, titre, formulaire.... dans Explications, pas de problème, mon Canvas est évité.
Par contre, l'intégration d'une div vient se positionner sous (à la même abscisse que mon Canvas, l'ordonnée est correcte) mon Canvas.

Une idée pour que ma div reste dans Explications?

Merci Smiley smile
Modifié par The_Moye (18 Jan 2011 - 00:33)
Bonsoir,

Si tu place ton DIV à la fin du flux de ton Explications, il est normal que ce DIV se retrouve entre les zones marquées Contenu et Canvas sur ton image, puisque le flux de Explications va partir d’en haut à droite, pour s’écouler vers le bas.

Mais il est possible que je n’ai pas bien compris la question.

À moins que ton DIV n’ai des propriétés spéciales qui l’amènent à faire des choses inattendues : il faudrait les les propriétés de ce DIV là également.

Sinon une remarque : un teste avec l’extrait de source que tu fourni, ne donne pas vraiment ce que tu présente à l’image. En effet, tu donne une largeur fixe de 1000 pixels à Main-Conteneur, mais pas de largeur à Canvas, ce qui fait que si la fenêtre d’affichage du navigateur est plus large que 1000 pixels, le Canvas, qui va prendre toute la largeur disponible étant donné qu’il n’est pas contraint en largeur, va être plus large que le Contenu (et donc également plus large que Explications), ce qui n’est pas du meilleur effet.
Modifié par hibou57 (17 Jan 2011 - 21:38)
Salut hibou75, merci pour ta réponse!

Oui désolé, la largeur de Canvas étant donnée via JavaScript, je n'ai pas pensé de l'indiquer (je vais éditer mon premier post).
Pour être plus précis, je place un formulaire (correctement placé à droite de mon Canvas) contenant une div (qui elle même contient 3 div, correspondant à des sliders permettant de renvoyer 3 valeurs en JavaScript).

C'est cette div qui me pose problème.

Ci-dessous ce que j'obtiens :

http://img600.imageshack.us/img600/548/expcss3.jpg

Et ce que j'aimerais obtenir :

http://img831.imageshack.us/img831/5080/expcss2.jpg
Hello,
Tu n'aurais pas spécifier une dimension fixe trop grande par rapport à la place qu'il reste à droite par hasard ? Ou alors les rows/col des formulaires qui font passer le tout en dessous dans le flux ?
Hello oliviadox,

Non, j'obtiens ce que j'ai pondu plus haut lorsque je ne spécifie aucune largeur pour la div présente dans mon form.
Si je lui donne une largeur (strictement inférieur à la place restante à droite), celle ci va se plaquer à gauche, sous mon Canvas.

A noter qu'avec le CSS posté au début de la discussion, ce n'est pas ma div Explications qui évite le Canvas, mais simplement son contenu.
Si j'affiche une bordure autour d' Explications, la div est de la largeur de mon Contenu.

Peut être y a t'il quelque chose d'autre à faire à ce niveau là?
The_Moye a écrit :
[…]

Oui désolé, la largeur de Canvas étant donnée via JavaScript, je n'ai pas pensé de l'indiquer (je vais éditer mon premier post).
Pour être plus précis, je place un formulaire (correctement placé à droite de mon Canvas) contenant une div (qui elle même contient 3 div, correspondant à des sliders permettant de renvoyer 3 valeurs en JavaScript).

C'est cette div qui me pose problème.

Ci-dessous ce que j'obtiens :

[…]


Ton formulaire ainsi que les DIV qui y sont inclus, sont tous display:block par défaut. Ce qui s’écoule autour d’un flottant, ce sont les display:inline (dans un premier temps), ce qui explique effectivement, le contenu texte contenu dans le formulaire s’écoule bien, ne passe pas sous le flottant, tandis que le formulaire lui-même passe pourtant sous le flottant.

Voir : Test (1)

Mais il n’y a pas que les display:inline qui peuvent couler autour des flottants, … il y aussi, les display:inline-block.

Voir : Test (2)

Est-ce que le Test (2) correspond à l’effet que tu recherche ?

Note : il faudra tenir compte de la compatibilité avec les navigateurs. Pour IE6, il existe des petits trucs pour lui faire accepter display:inline-block (je ne sais plus ce qu’il en était avec IE7, mais c’est OK avec IE8).

Juste un petit moment, et je te poste les références concernées. Smiley cligne

-- EDIT -- KO avec IE7. Je vais voir pour un hack (je te posterai les références CSS concernées en même temps).
Modifié par hibou57 (17 Jan 2011 - 23:35)
bonsoir,

recherche du conté des contextes de formatages.

Par exemple pour que ta div explication se demarque de ton flottant, il te faudra justement modifié ce contexte de formatage, display:inline-block; a cet effet entre autre.

Le plus simple est generalement de modifier ce comportement a l'aide de : overflow:hidden; si cet element ne reçoit aucune dimension il restera fluide.Pour les vieux IE, zoom:1; utilisé conjointement rendra le même comportement sans perturbé les autres navigateurs.

Ce sujet a était abordé des millier de fois sur ce forum. Comme il est rare de rencontré une feuille de style sans float:left; ou right;, quasiment toute les pages ont a un moment ou un autre posé un problème similaire dans la mise en forme.

Cordialement, GC
gc-nomade a écrit :
bonsoir,

recherche du conté […]

Ah ça, je sais où il faut aller pour en trouver du comté : en Franche-Comté! Smiley biggrin
Modifié par hibou57 (18 Jan 2011 - 00:20)
Merci hibou57,

Ne t'embête pas pour IE7 et plus vieux, ma bidouille concernant avant tout une utilisation de Canvas, je pars du principe qu'il faut un navigateur récent pour vouloir jeter un coup d'œil à cette page.

Mais d'un autre coté, ça peut toujours être utile de savoir faire ce genre de positionnement, y compris pour les navigateurs plus anciens Smiley cligne

Test 2 ne correspond pas à ce que je cherche :

_Canvas doit lui aussi être dans Main-Conteneur.

Main-conteneur étant le corps de ma page : toujours centré.

Par contre, magique.
En ajoutant la propriété "display : inline-block" (que je ne connaissais pas), la div présente dans mon formulaire s'écoule exactement de la façon que je le souhaite.

Je test un peu mieux la chose, et je reviens aux nouvelles.

Edit : J'me taperais bien une salade de Haute-Patate Smiley cligne
Edit2 : Effectivement, "display : inline-block" sur ma div contenant mes sliders la sort de sous mon Canvas!
Je zieuterais un peu plus tard comment marche la chose.

Merci à vous Smiley smile

Et voilou ce sur quoi je travaille :

http://img443.imageshack.us/img443/1015/metac.jpg
Modifié par The_Moye (18 Jan 2011 - 00:31)
The_Moye a écrit :
Merci hibou57,
Test 2 ne correspond pas à ce que je cherche :

_Canvas doit lui aussi être dans Main-Conteneur.
[…]

Ah OK. Il était pourtant en dehors de Main-Conteneur dans le HTML que tu donnais comme source (puis le résultat me semblait correspondre à l’image). Enfin, bref, j’ai l’impression que tu as trouvé ce que tu voulais.

Pour IE7 et le inline-block, juste le temps de régler un cafouyage avec IE7 justement, et je poste ça (je me souviens du hack de mémoire, mais je veux le tester avant).
Modifié par hibou57 (18 Jan 2011 - 00:24)
a écrit :
Ah OK. Il était pourtant en dehors de Main-Conteneur dans le HTML que tu donnais comme source


<Mauvaise-fois> C'est pas vréééééééé </Mauvaise-fois>

Une erreur de copier / coller Smiley langue
The_Moye a écrit :
[…] ma bidouille concernant avant tout une utilisation de Canvas, je pars du principe qu'il faut un navigateur récent pour vouloir jeter un coup d'œil à cette page.

Mais d'un autre coté, ça peut toujours être utile de savoir faire ce genre de positionnement, y compris pour les navigateurs plus anciens Smiley cligne

Je viens de comprendre ce qui ne va pas avec IE7 : il n’aime pas qu’on donne une largeur explicite à Main_Conteneur, et alors il ne fait plus couler sons contenu inline autour de Canvas (en référence à Test 2 qui ne correspondait pas à ce que tu recherche, mais c’est pour info).

The_Moye a écrit :
Je test un peu mieux la chose, et je reviens aux nouvelles.

Lecture à propos de inline-block : 9.2.4 The 'display' property [W3C]

Alors tu as de la chance, parce que c’est très court :

"W3C/CSS.2.1" a écrit :
inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.


"Traduction" a écrit :
inline-block
Cette valeur commande à un élément de générer un conteneur de type inline block. L’intérieur d’un élément inline-block se formate comme une boite bloque, et l’élément lui-même est formaté comme une boite inline.


En terme plus claire : quand tu donne la propriété display:inline-block à un élément, celui-ci se comporte, comme quelque chose que tu connais bien en HTML : les éléments IMG. C’est aussi simple que cela.

Attention : c’est une propriété CSS 2.1 et non pas CSS2.0. C’est important si tu souhaite la retrouvé dans une documentation, de faire la différence.

"The_Moye" a écrit :
Edit : J'me taperais bien une salade de Haute-Patate Smiley cligne


Elle est bonne celle-là… tellement que ça donne faim (je m’en ferais bien un morceau aussi si j’en avais).
Modifié par hibou57 (18 Jan 2011 - 01:11)
hibou57 a écrit :

Ah ça, je sais où il faut aller pour en trouver du comté : en Franche-Comté! Smiley biggrin


bon bah on va pas en faire un fromage, c'est connu que je ne sache pas écrire, que je suis cuisinier de profession et fan de tartiflette !

@The_Moye , si tu veut comprendre les effets de display:inline-block; , (j'ai l'impression de me repeter), cherche a comprendre ce que sont contexte de formatage et haslayout, ce sont deux mots clés ...
Sujet clos
Aller à