[Résolu]Mon background ne veut pas descendre !

Salut tout le monde,
j'ai un problème avec les CSS et plus particulièrement avec mon background.
Il s'agit d'un simple background d'une couleur, appliqué avec la propriété "background-color", mais le problème c'est que ce background ne suit pas le contenu, comme si mon block n'était pas inclut dans le flux de la page.

En effet, le background descend bien jusqu'en bas du menu, mais pas jusqu'en bas du texte, bien plus grand que le menu.

C'est aussi pour ça que mon footer ne se place pas en dessous du texte, mais en dessous du menu.

Vous pouvez voir ce que ça donne ici et la css est disponible ici.

Merci d'avance .
Modifié par koskoz (25 Feb 2006 - 10:03)

koskoz a écrit :
comme si mon block n'était pas inclut dans le flux de la page.

C'est très probablement le cas.

koskoz a écrit :
En effet, le background descend bien jusqu'en bas du menu, mais pas jusqu'en bas du texte, bien plus grand que le menu.

Sans regarder la feuille de style : le menu est en positionnement normal (static), et le texte est en positionnement flottant.

Toutes les infos par là :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent.html

Ah non, autant pour moi : la div#page est bien en float: left;, mais comme elle est déjà en positionnement absolu, la propriété float n'est pas prise en compte (me semble-t-il).
Mais le positionnement absolu fait sortir l'élément ainsi positionné du flux de son élément parent. Et contrairement à ce qui se passe avec un float, là ça ne peut pas être corrigé.

La correction à faire, ça sera donc de virer ce position: absolute; intempestif, et de trouver autre chose... bonne chance !

Salut, j'ai beau enlever mon position: absolute, à part les liens qui se décallent à droite, le background ne descend toujours pas en dessous du texte .

koskoz a écrit :
Salut, j'ai beau enlever mon position: absolute, à part les liens qui se décallent à droite, le background ne descend toujours pas en dessous du texte .

Une fois le position: absolute; enlevé, le float: left; entre en action.
Aussi bien le positionnement en absolu que le positionnement flottant font que l'élément ainsi positionné sort du flux de l'élément parent. Cf le lien que je donnais un peu plus haut.

Une idée :
- menu flottant à gauche
- contenu flottant à droite
- utilisation d'un spacer pour faire rentrer les deux dans le flux de l'élément parent (du coup l'élément parent s'alongera pour contenir les deux éléments enfant), ou utilisation d'une autre solution. overflow: auto; peut être pratique, par exemple.

Bonsoir,

mpop a écrit :

Aussi bien le positionnement en absolu que le positionnement flottant font que l'élément ainsi positionné sort du flux de l'élément parent.

Pas tout à fait, et la précision est importante pour la bonne utilisation de float et de position :
- les flottants peuvent ne pas être en compte dans le calcul de hauteur du conteneur. Les éléments positionnés ne sont pas pris en compte.
- un élément flottant adopte un comportement spécifique dans le flux
- un élément en position absolue peut soit adopter un comportement spécifique dans le flux, soit être retiré du flux, selon les valeurs de top/bottom/etc.
- seul un élément en position fixe est systématiquement retiré du flux

Alors j'ai suivit vos conseils, mon background suit bien le texte, mais les liens sont partis à droite, et pas vraiment moyen de les recoller à gauche sans casser le background.

J'ai mis à jour la page.

koskoz a écrit :
Alors j'ai suivit vos conseils, mon background suit bien le texte, mais les liens sont partis à droite, et pas vraiment moyen de les recoller à gauche sans casser le background.

J'ai mis à jour la page.

Tu trouveras peut-être ton bonheur par ici :

http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html

Pour savoir quel élément mettre à quel place dans le flux HTML, et avec quelle valeur de float.

Laurent Denis a écrit :
- un élément flottant adopte un comportement spécifique dans le flux
- un élément en position absolue peut soit adopter un comportement spécifique dans le flux, soit être retiré du flux, selon les valeurs de top/bottom/etc.
- seul un élément en position fixe est systématiquement retiré du flux

Effectivement, c'était une approximation grossière de ma part.
Par comportement spécifique, tu parles du comportement d'un élément flottant qui flotte au dessus des autres éléments (div, paragraphes...) mais qui repousse le texte de ses éléments ?

J'ai consulté le lien proposé, mais je ne peux pas vraiment dire que cela m'ait aidé .

koskoz a écrit :
J'ai consulté le lien proposé, mais je ne peux pas vraiment dire que cela m'ait aidé .

Pourtant ça aurait dû t'aider (je parle de la deuxième page, celle avec des exemples d'éléments en positionnement flottant).

Bon alors, je t'avais conseillé de mettre ta div#page en positionnement flottant à droite, mais apparemment tu ne m'as pas écouté

#page {
margin-left: 200px;
float: left;
}

Forcément, il te place ta div#page à gauche, tout en réservant un espace (vide) de 200 pixels à gauche. Du coup, plus de place pour le reste. Et comme ton bloc flottant est "prioritaire" sur les éléments non flottants, plus rien ne peut se mettre à gauche du bloc.

#page {
margin-right: 40px;
float: right;
}

Devrait marcher bien mieux !

J'avais déjà essayé, ça ne m'avais pas donné le même resultat que maintenant:
les liens reviennent bien à gauche, mais plus bas que le texte .

Je met à jour la page si tu n'arrives pas à le visualiser dans ta tête (j'admet que c'est un peu dur avec mes explications ).

Après modification, voici ce que ça donne.

Float right ou left, c'est un peu la même chose selon que le texte soit à droite ou à gauche.

J'ai bien essayé d'appliquer un float: left au menu et un float: right au contenu, mais ça redecalle tout.

koskoz a écrit :
Après modification, voici ce que ça donne.

Float right ou left, c'est un peu la même chose selon que le texte soit à droite ou à gauche.

J'ai bien essayé d'appliquer un float: left au menu et un float: right au contenu, mais ça redecalle tout.

Ça a l'air de marcher correctement. La div de contenu, de largeur fixe et en positionnement flottant à droite, laisse à gauche suffisament d'espace libre pour que le menu (lui aussi en largeur fixe) vienne s'y loger automatiquement. Il ne manque plus qu'une marge à droite de la div de contenu pour que le texte ne colle pas aux bords du bloc parent (enfin... sauf si c'est l'effet voulu).
Enfin, un spacer en clear: both; vient forcer le bloc conteneur à intégrer les éléments flottés dans la hauteur du bloc.

Tout va bien, donc ?
S'il n'y a plus de problème, tu peux mettre ton sujet en [Résolu] (en éditant le sujet de ton premier message).

Merci pour ton aide en tout cas .

J'update la page .

koskoz a écrit :
Merci pour ton aide en tout cas .

J'update la page .

C'était avec plaisir

Et j'aime beaucoup ce design (je suis bien incapable de faire des choses aussi simples et belles...). Création personnelle ou repompage pour tests ?

J'avoue que ce design est pas mal, mais personnellement je ne l'aime pas, car en fait c'est un gros repompage... manque d'idées .

Bon, en bas dans le footer il y aura un lien vers le design principal, mais je ne suis pas très fière de moi sur ce coup là...

Biensûr, c'est une réalisation gratuite pour aider, j'aurais honte de faire payer quelque chose comme ça.