Flottant à droite récalcitrant

[Pascale]

Bonjour,

Je me doute que c'est une question de débutant, mais enfin, je suis
enquiquinée avec ça.

Soit une page avec un menu (flottant à gauche), un corps de texte, et une
petite boîte flottante à droite.

Le menu a les caractéristiques suivantes (j'ai viré bien sûr ce qui n'était
pas nécessaire à la compréhension) :
div.gauche
{
float: left;
position: absolute;
top: 150px;
left: 60px;
width: 250px;
}

div.corps
{
margin-left: 250px;
padding: 40px;
max-width: 800px;
}

Cette partie fonctionne correctement, mais lorsque j'essaie de placer ma
boîte à droite, de la manière suivante :

div.droite
{
clear: left;
max-width: 100px;
text-align: center;
margin: 60px 10px 10px 10px;
float: right;
}

La boîte « flotte » bien mais je constate deux problèmes :

- Si j'ouvre mon navigateur en plein écran, la boîte est calée à droite, ce
qui ne me va pas du tout : je préfèrerais qu'elle soit, à la marge près,
collée contre le corps de texte. Là, il y a un énorme blanc entre le corps
de texte et cette boîte.

- Si je réduis la taille de mon navigateur, cette boîte et le corps de
texte se chevauchent, c'est très moche.

Je ne suis même pas sûre d'employer la bonne technique pour faire ce que je
désire, donc si quelqu'un pouvait m'aider, ce serait bien...
--
Pascale
http://www.la-grille-verte.net

[SAM]

Le 18/04/12 19:28, Pascale a écrit :

> Bonjour,
>
> Je me doute que c'est une question de débutant, mais enfin, je suis
> enquiquinée avec ça.
>
> Soit une page avec un menu (flottant à gauche), un corps de texte, et une
> petite boîte flottante à droite.
>
> Le menu a les caractéristiques suivantes (j'ai viré bien sûr ce qui n'était
> pas nécessaire à la compréhension) :
> div.gauche
> {
> float: left;
> position: absolute;

Je suis assez certain que le positionnement absolu n'est pas requis
(ou alors il y a une erreur de conception en amont)

> top: 150px;
> left: 60px;
> width: 250px;
> }
>
> div.corps
> {
> margin-left: 250px;
> padding: 40px;
> max-width: 800px;

Pourquoi une largeur maxi ici ?
(normalement ce div doit s'étendre sur toute la largeur libre à droite
du div-gauche, c'est le contenant général qui devrait avoir une
limitation de largeur)

> }
>
> Cette partie fonctionne correctement, mais lorsque j'essaie de placer ma
> boîte à droite, de la manière suivante :

on ne comprend rien à rien !

les css c'est une chose
mais ...
sans le html correspondant
sans dons divinatoires
là ça va pas le faire ...

elle doit être à la droite de quoi ?
et, quel est son contenant ?

> div.droite
> {
> clear: left;
> max-width: 100px;
> text-align: center;
> margin: 60px 10px 10px 10px;
> float: right;
> }
>
> La boîte « flotte » bien mais je constate deux problèmes :
>
> - Si j'ouvre mon navigateur en plein écran, la boîte est calée à droite,

---> "float: right;"

> ce qui ne me va pas du tout : je préfèrerais qu'elle soit, à la marge près,
> collée contre le corps de texte.

alors on ne l'éclaircit pas à gauche
ni on ne la flottaille à droite

> Là, il y a un énorme blanc entre le corps
> de texte et cette boîte.
>
> - Si je réduis la taille de mon navigateur, cette boîte et le corps de
> texte se chevauchent, c'est très moche.
>
> Je ne suis même pas sûre d'employer la bonne technique pour faire ce que je
> désire, donc si quelqu'un pouvait m'aider, ce serait bien...

Je ferais :

- un div de menu à gauche
- avec largeur fixée
- en float: left
- sans positionnement (sauf si utile aux items-liens)
- un div conteneur
- marge gauche ≥ largeur du menu
- éventuellement avec largeur max
- positionnement relatif
- un div de sous-menu dans le conteneur
- en float right
- de largeur fixée
- un div de contenu dans le conteneur
- avec marge droite ≥ largeur sous-menu de droite


<h1 style="height:150px">titre et logo</h1>
<div id="tout_le_contenu">
<div id="menu">
<ul>
...
</div>
<div id="conteneur">
<div id="sous-menu">
...
</div>
<div id="contenu">
<p> blabla
</div>
</div>
</div>
<div id="pied_page">
merci de votre visite
</div>
</body>



(pas testé)

--
Stéphane Moriaux avec/with iMac-intel

[SAM]

Le 18/04/12 19:55, SAM a écrit :
>
> (pas testé)

test :
<http://cjoint.com/?BDtmn1PFL8f>

[SAM]

Le 19/04/12 12:14, SAM a écrit :

> Le 18/04/12 19:55, SAM a écrit :
>

> test :
> <http://cjoint.com/?BDtmn1PFL8f>


Ooops ! ce n'est pas le bon !

voici :
<http://cjoint.com/?BDtmvaOUkpv>

[Pascale]

Tout d'abord, je te remercie pour ton aide, SAM !

SAM <stephanemor...@wanadoo.fr.invalid> écrivait
news:4f8efffa$0$21461$ba4a...@reader.news.orange.fr:

> Je suis assez certain que le positionnement absolu n'est pas requis
> (ou alors il y a une erreur de conception en amont)

C'est une erreur de ma part ! En fait le code est :

div.gauche
{
float: left;
width: 250px;
margin-left: 30px;
padding-top: 50px;

}

> Pourquoi une largeur maxi ici ?
> (normalement ce div doit s'étendre sur toute la largeur libre à droite
> du div-gauche, c'est le contenant général qui devrait avoir une
> limitation de largeur)

Jusqu'à présent, il n'y avait pas de contenant général, vu qu'il n'y avait
pas de boîte à droite : la largeur du menu de gauche étant fixée, il me
suffisait de préciser la largeur maxi du corps de texte, histoire de ne pas
avoir un texte étalé sur toute la largeur d'un écran géant (:

> on ne comprend rien à rien !
>
> les css c'est une chose
> mais ...
> sans le html correspondant
> sans dons divinatoires
> là ça va pas le faire ...
> elle doit être à la droite de quoi ?

Du corps de texte (le corps de texte est donc encadré à gauche par le menu,
à droite par la fameuse boîte).

> et, quel est son contenant ?

Il n'y en a pas, et je me doute bien que c'est là la plus grosse erreur !

Donc j'en ai mis un qui englobe le corps de texte ET la boîte flottante à
droite.

J'ai simplement précisé :
<div class="gauche">
Menu
</div>
<div class="corps">
<div class="droite>
Boîte flottant à droite
</div>
<div class="milieu">
<div class="intro">
Introduction
</div>
<div class="annonces">
Annonces
</div>
</div>
</div>
(il y a aussi une div en-tête et une div pied-de-page).

Et naturellement, cela marche tout de suite mieux comme on peut le voir
ici :

http://ecuriesdelancelot.fr

Par contre, j'ai encore un problème de « flottaison » sur cette page :
http://ecuriesdelancelot.fr/equipe

Normalement, chaque photo flotte à droite ou à gauche du texte de
présentation. Le problème est que je n'ai pas trouvé de solution vraiment
propre pour faire ça correctement.

Je peux insérer chaque ensemble texte + photo dans une div (à partir de la
2ème photo seulement, sinon, le corps de texte démarre sous le menu), et
appliquer un clear: both; à cette div. Je peux aussi, après chaque texte,
insérer un paragraphe vide ayant la propriété clear: both; Mais outre que
ça ne me paraît pas très propre comme procédé, si je fais ça, il y a un
espace anormalement grand entre les deux premières photos, puisque le
clear: both; est placé après le premier ensemble photo + texte.
En résumé, dès que je mets un clear: both; le corps de texte apparaît plus
bas que le menu, ce qui est évidemment tout à fait inadapté.

Actuellement le code est le suivant :

<div class="gauche">
Menu flottant à gauche
</div>
<div class="corps">
<h1>Titre 1</h1>
<h2>Sous-titre</h2>
<h3>Nom 1</h3>
<img class="photogauche" src="photos/photo1.jpg" title="titre1"
alt="titre1">
<p class="pres">1er texte de présentation.</p>
<h3>Nom 2</h3>
<img class="photodroite" src="photos/photo2.jpg" title="titre2"
alt="titre2">
<p class="pres">2ème texte de présentation.</p>
...
</div>

Les classes "photodroite" et "photogauche" correspondent évidemment à un
float: left; et à un float: right;

Je me doute bien que je me noie encore dans un verre d'eau, mais si
quelqu'un a une bouée...

--
Pascale
http://www.la-grille-verte.net

[SAM]

Le 19/04/12 16:39, Pascale a écrit :

>
> Par contre, j'ai encore un problème de « flottaison » sur cette page :
> http://ecuriesdelancelot.fr/equipe
>
> Normalement, chaque photo flotte à droite ou à gauche du texte de
> présentation. Le problème est que je n'ai pas trouvé de solution vraiment
> propre pour faire ça correctement.
>
> Je peux insérer chaque ensemble texte + photo dans une div (à partir de la
> 2ème photo seulement, sinon, le corps de texte démarre sous le menu), et
> appliquer un clear: both; à cette div. Je peux aussi, après chaque texte,
> insérer un paragraphe vide ayant la propriété clear: both; Mais outre que
> ça ne me paraît pas très propre comme procédé, si je fais ça, il y a un
> espace anormalement grand entre les deux premières photos, puisque le
> clear: both; est placé après le premier ensemble photo + texte.
> En résumé, dès que je mets un clear: both; le corps de texte apparaît plus
> bas que le menu, ce qui est évidemment tout à fait inadapté.
>
> Actuellement le code est le suivant :

Là aussi j'aurais mis un conteneur pour chaque "fiche"

essaie avec :

.corps { position: relative; }
.corps h3 { clear: both; }

et peut-être aussi :

.corps img { width: 50%; }

>
> <div class="gauche">
> Menu flottant à gauche
> </div>
> <div class="corps">
> <h1>Titre 1</h1>
> <h2>Sous-titre</h2>
> <h3>Nom 1</h3>
> <img class="photogauche" src="photos/photo1.jpg" title="titre1"
> alt="titre1">
> <p class="pres">1er texte de présentation.</p>
> <h3>Nom 2</h3>
> <img class="photodroite" src="photos/photo2.jpg" title="titre2"
> alt="titre2">
> <p class="pres">2ème texte de présentation.</p>
> ...
> </div>
>
> Les classes "photodroite" et "photogauche" correspondent évidemment à un
> float: left; et à un float: right;
>
> Je me doute bien que je me noie encore dans un verre d'eau, mais si
> quelqu'un a une bouée...



--

Stéphane Moriaux avec/with iMac-intel

[Pascale]

SAM <stephanemor...@wanadoo.fr.invalid> écrivait
news:4f902fd0$0$12516$ba4a...@reader.news.orange.fr:

> Là aussi j'aurais mis un conteneur pour chaque "fiche"

Fait : pour chaque « fiche », j'ai mis un div (pas pris la peine de le
nommer, vu que je ne lui ai pas ajouté de caractéristiques).

> essaie avec :
>
> .corps { position: relative; }

Fait, mais j'avoue que je ne comprends pas très bien le rôle de
« relative » quand on ne lui ajoute pas de paramètres pour indiquer
le décalage.

> .corps h3 { clear: both; }

Fait.

> et peut-être aussi :
>
> .corps img { width: 50%; }

Oui, c'est pas plus mal comme ça (:

Mais pour l'ensemble de la page, grmbl, j'ai encore dû faire quelque chose
de travers, je suppose...
http://ecuriesdelancelot.fr/equipe

--
Pascale
http://www.la-grille-verte.net

[SAM]

Le 19/04/12 18:50, Pascale a écrit :

> SAM<stephanemor...@wanadoo.fr.invalid> écrivait
> news:4f902fd0$0$12516$ba4a...@reader.news.orange.fr:
>
>> Là aussi j'aurais mis un conteneur pour chaque "fiche"
>
> Fait : pour chaque « fiche », j'ai mis un div (pas pris la peine de le
> nommer, vu que je ne lui ai pas ajouté de caractéristiques).
>
>> essaie avec :
>>
>> .corps { position: relative; }
>
> Fait, mais j'avoue que je ne comprends pas très bien le rôle de
> « relative » quand on ne lui ajoute pas de paramètres pour indiquer
> le décalage.

Un contenu se réfère à son plus proche contenant qui est positionné

En fait, c'est un problème inverse

Je ne sais pas trop si ici on en a réellement besoin ?
Ha! ben si, pour les images réduites à la 1/2 de la largeur de "corps".

>> .corps h3 { clear: both; }
>
> Fait.
>
>> et peut-être aussi :
>>
>> .corps img { width: 50%; }
>
> Oui, c'est pas plus mal comme ça (:
>
> Mais pour l'ensemble de la page, grmbl, j'ai encore dû faire quelque chose
> de travers, je suppose...
> http://ecuriesdelancelot.fr/equipe

non, pas vraiment

Il faut juste que le 1er H3 ne soit pas en clear: both;

<h3 style="clear:none">Laetitia</h3>

par exemple

sinon, et comme de juste, il s'affiche après le menu qui doit être
flottant, non ?

[Pascale]

SAM <stephanemor...@wanadoo.fr.invalid> écrivait
news:4f9061b3$0$21489$ba4a...@reader.news.orange.fr:

> Un contenu se réfère à son plus proche contenant qui est positionné
>
> En fait, c'est un problème inverse
>
> Je ne sais pas trop si ici on en a réellement besoin ?
> Ha! ben si, pour les images réduites à la 1/2 de la largeur de
> "corps".

Je viens de tester sans le position: relative, je ne vois pas de
différence.

> non, pas vraiment
>
> Il faut juste que le 1er H3 ne soit pas en clear: both;
>
> <h3 style="clear:none">Laetitia</h3>
>
> par exemple

Oui, c'est quelque chose que j'avais essayé, mais du coup, c'est la 2ème
« fiche » qui se retrouve un peu trop bas.

> sinon, et comme de juste, il s'affiche après le menu qui doit être
> flottant, non ?

Exactement !

En fait, n'ayant pas bossé depuis un moment sur ce site (hormis des mises à
jour simples), je ne me souvenais plus pourquoi j'avais mis ce position:
absolute; dans ma CSS : et bien maintenant, je me souviens, c'était
précisément pour résoudre ce problème de mise en page, pour cette page là
spécifiquement.

Là, je viens de remettre ce fameux position: absolute; ça marche, mais je
serais bien en peine de justifier la logique de ce position couplé à un
float... J'ai conscience que ça ressemble plus à un infâme bricolage qu'à
du travail propre.

--
Pascale
http://www.la-grille-verte.net

[SAM]

Le 19/04/12 23:15, Pascale a écrit :

>
> Là, je viens de remettre ce fameux position: absolute; ça marche, mais je
> serais bien en peine de justifier la logique de ce position couplé à un
> float... J'ai conscience que ça ressemble plus à un infâme bricolage qu'à
> du travail propre.

Je suis quasi certain que tu n'as plus besoin du float
(en tous cas pour cette page)

[Pascale]

SAM <stephanemor...@wanadoo.fr.invalid> écrivait
news:4f914f19$0$12498$ba4a...@reader.news.orange.fr:

> Je suis quasi certain que tu n'as plus besoin du float
> (en tous cas pour cette page)

Je vais essayer sans, mais le corps de texte ne va-t-il pas passer en-
dessous du menu ? Je vais voir ça !

--
Pascale
http://www.la-grille-verte.net

[Pascale]

SAM <stephanemor...@wanadoo.fr.invalid> écrivait
news:4f914f19$0$12498$ba4a...@reader.news.orange.fr:

> Je suis quasi certain que tu n'as plus besoin du float
> (en tous cas pour cette page)

Une fois de plus, c'est toi qui as raison ! (o:

J'avoue n'avoir jamais pensé qu'absolute pouvait se substituer à float, et
ça me plonge dans des abîmes de perplexité... D'autant que le
positionnement avec absolute me paraît plus facile à appréhender que les
flottants.

--
Pascale
http://www.la-grille-verte.net

[SAM]

Le 20/04/12 16:44, Pascale a écrit :

>
> J'avoue n'avoir jamais pensé qu'absolute pouvait se substituer à float, et
> ça me plonge dans des abîmes de perplexité...

Dans la mesure où pour le div suivant tu lui précises une marge gauche ≥
à la largeur de celui en absolute, ce div suivant remonte tout seul se
mettre à droite.
Ça fonctionne comme si le div absolute était un float gauche sauf qu'on
n'est plus dans le flux, le positionnement, naturel.

> D'autant que le positionnement avec absolute

Sauf que ... il faut absolument tout tenter pour s'en passer ! ! !
(le + souvent il est facile de s'en passer)

> me paraît plus facile à appréhender que les flottants.

La largeur d'un relatif se règle automatiquement et par défaut sur toute
la largeur restante disponible
(sauf à la fixer bien entendu)

La largeur d'un absolute se règle sur son contenu
(sauf à la fixer bien entendu)

Un float est presque un absolute
sa largeur devrait se régler en fonction de son contenu

[Pascale]

SAM <stephanemor...@wanadoo.fr.invalid> écrivait
news:4f91946e$0$12481$ba4a...@reader.news.orange.fr:

> Dans la mesure où pour le div suivant tu lui précises une marge gauche ?

> à la largeur de celui en absolute, ce div suivant remonte tout seul se
> mettre à droite.
> Ça fonctionne comme si le div absolute était un float gauche sauf qu'on
> n'est plus dans le flux, le positionnement, naturel.

Oui, en y réfléchissant un peu, j'ai fini par comprendre que c'était
logique.

>> D'autant que le positionnement avec absolute
> Sauf que ... il faut absolument tout tenter pour s'en passer ! ! !
> (le + souvent il est facile de s'en passer)

Peux-tu m'expliquer pourquoi ? Il me semblait avoir lu que le rendu des
float pouvait être parfois un peu aléatoire.
Et dans la mesure où on ne veut pas que le corps de texte revienne sous
l'élément flottant (vu qu'on met une marge), le float est-il si logique que
ça ? Je ne conteste pas, j'essaie de comprendre (:

> La largeur d'un relatif se règle automatiquement et par défaut sur toute
> la largeur restante disponible
> (sauf à la fixer bien entendu)
>
> La largeur d'un absolute se règle sur son contenu
> (sauf à la fixer bien entendu)

Dans le cas de mon menu, la largeur est effectivement fixée.

> Un float est presque un absolute
> sa largeur devrait se régler en fonction de son contenu

Tes explications sont très claires. L'inconvénient, c'est que ça me pousse
à te poser plus de questions ! (-:

--
Pascale
http://www.la-grille-verte.net

[SAM]

Le 20/04/12 19:28, Pascale a écrit :

> SAM<stephanemor...@wanadoo.fr.invalid> écrivait
> news:4f91946e$0$12481$ba4a...@reader.news.orange.fr:
>

>>> D'autant que le positionnement avec absolute
>> Sauf que ... il faut absolument tout tenter pour s'en passer ! ! !
>> (le + souvent il est facile de s'en passer)
>
> Peux-tu m'expliquer pourquoi ?

Paske !
Plus propre, plus concis, plus respectueux du visiteur (il peut n'avoir
pas les mêmes réglages que le voisin et dans ce cas le positionnement
naturel se dégrade mieux), sans doute plus en accord avec l'affichage
sur écrans de mobiles ?
Voir si openweb n'en cause pas ?

> Il me semblait avoir lu que le rendu des
> float pouvait être parfois un peu aléatoire.

Ben ... oui, comme tu as pu le voir ;-)

(IE étant là aussi très caractériel !)
(mébon, juste pour un menu flottant ça ne doit pas poser de pb)

> Et dans la mesure où on ne veut pas que le corps de texte revienne sous
> l'élément flottant (vu qu'on met une marge), le float est-il si logique que
> ça ? Je ne conteste pas, j'essaie de comprendre (:

Ben ... le float est fait pour faire glisser sur le côté indiqué les
trucs suivants.
Une fois dépassé le truc qui a la flottaison il est naturel qu'on
revienne à la ligne et marge normale, comme pour tout traitement de
texte qui gère des objets (images ou pavés de texte).
Comme pour un traitement de texte, si on ne veut pas que ça revienne
sous le flotaillon, il faut mettre une marge.
À mon idée, il n'y a donc rien d'anormal à ces comportements.

Avec le menu en absolute, il faudra que tu en revois la position dès que
tu changeras ce qu'il y a au-dessus, non ?
Avec le menu en float, le menu et ce qui doit glisser à côté vont suivre
tout naturellement l'évolution du haut de page sans avoir à changer la FdS.


Bon, il se trouve que tu as bien compliqué les choses en flottaillonnant
alternativement un trombinoscope commenté

Mais ... c'est très faisable
- sans absolute
- avec des floats
<http://cjoint.com/?BDvbP0jwDU6>
Cependant ... non testé IE ! ! !

[Pascale]

Tout d'abord, je te fais mes excuses pour n'avoir pas répondu plus tôt.
Mais me revoici !
SAM <stephanemor...@wanadoo.fr.invalid> écrivait
news:4f91f553$0$21469$ba4a...@reader.news.orange.fr:

> Paske !

(o:

> Plus propre, plus concis, plus respectueux du visiteur (il peut
> n'avoir pas les mêmes réglages que le voisin et dans ce cas le
> positionnement naturel se dégrade mieux), sans doute plus en accord
> avec l'affichage sur écrans de mobiles ?
> Voir si openweb n'en cause pas ?

Là ? http://openweb.eu.org/articles/initiation_absolue
Alsacréations donne les limites du positionnement absolu :
http://www.alsacreations.com/article/lire/53-guide-de-survie-du-
positionnement-css.html

Dans le cas précis d'un menu calé à gauche et sous une bannière, qui n'en
bouge pas, j'avoue que je n'ai pas trop de scrupules à l'utiliser, du moins
dans la mesure où ça me simplifie la vie.

>> Il me semblait avoir lu que le rendu des
>> float pouvait être parfois un peu aléatoire.
> Ben ... oui, comme tu as pu le voir ;-)
>
> (IE étant là aussi très caractériel !)
> (mébon, juste pour un menu flottant ça ne doit pas poser de pb)

En fait, ce qu'il faudrait, c'est avoir une utilisation plus subtil du
clear. Je sais qu'on peut faire both, right ou left, mais en fait, il
faudrait pouvoir préciser qu'on se débarrasse du float « juste avant »,
mais pas de celui du menu à gauche. J'explique ça de manière plus que
rustique, mais je pense que tu vois ce que je veux dire (:

> Ben ... le float est fait pour faire glisser sur le côté indiqué les
> trucs suivants.
> Une fois dépassé le truc qui a la flottaison il est naturel qu'on
> revienne à la ligne et marge normale, comme pour tout traitement de
> texte qui gère des objets (images ou pavés de texte).

Voilà, et justement, je ne veux pas que le corps de texte repasse sous mon
menu une fois celui-ci terminé, c'est pourquoi l'emploi du float dans ce
cas, quoiqu'usuel, ne me paraît pas si logique que ça.

> Comme pour un traitement de texte, si on ne veut pas que ça revienne
> sous le flotaillon, il faut mettre une marge.

Oui, c'est bien ce que je fais.

> À mon idée, il n'y a donc rien d'anormal à ces comportements.

Ah mais non, j'ai pas dit que c'était anormal ! (:

> Avec le menu en absolute, il faudra que tu en revois la position dès
> que tu changeras ce qu'il y a au-dessus, non ?

Forcément, mais la bannière ne change pas tous les jours (encore que, si
j'étais moins nulle en dessin, je pourrais faire quelque chose de mieux).

> Avec le menu en float, le menu et ce qui doit glisser à côté vont
> suivre tout naturellement l'évolution du haut de page sans avoir à
> changer la FdS.

Oui !

> Bon, il se trouve que tu as bien compliqué les choses en
> flottaillonnant alternativement un trombinoscope commenté
>
> Mais ... c'est très faisable
> - sans absolute
> - avec des floats
> <http://cjoint.com/?BDvbP0jwDU6>
> Cependant ... non testé IE ! ! !

<couine>Maisheuuu ! pourquoi avec toi ça marche et pas avec moi ?!</couine>
J'avoue que je n'avais pas pensé à mettre une liste de définitions à cet
endroit, mais ça ressemble à une bonne idée.

--
Pascale
http://www.la-grille-verte.net