Mise en page un peu spéciale...

Bonjour à tous !

Je vous écris ce message car j'ai un ancien site à refondre en css. Sa construction, en html classique ne posait aucun problème puisque l'on pouvait utiliser les valign bottom.

En css, par contre, c'est une autre chose. J'ai essayé de nombreuses techniques (notamment avec le tuto sur les alignement et bas de page) mais je me heurte toujours au même problème : je ne parviens pas à aligner et les div et les background sous Firefox et IE.... Comment faire ?

Je vous livre le shéma de la page

http://www.myoken.fr/shema.gif

Merci à tous.

Tes div peuvent être positionnés en absolu (par rapport à leur bloc conteneur) avec bottom:0, c'est ce qui me parait le plus simple

j'avais déjà mis un exemple de ce genre en ligne :
http://pablo.prieto.free.fr/tests/relative.html

(dans cet exemple il faut juste rajouter un height:1% au bloc conteneur sous IE pour le doter d'un layout mais sinon ça roule)

Ok, merci je vais voir cela !

Cela fonctionne effectivement, mais une fois positionner dans une structure plus complexe (mélangeant positionnement absolu et flux normal...) je n'obtiens plus aucun résultats...

C'est effectivement à adapter à chaque situation, mais je ne vois rien de complexe dans ton schéma. Je ne vois pas par exemple quels autres blocs nécessitent un positionnement absolu (qui est toujours à utiliser avec parcimonie...)

Peux-tu détailler le problème lié à ta structure en particulier ?

v-mike a écrit :
Cela fonctionne effectivement, mais une fois positionner dans une structure plus complexe (mélangeant positionnement absolu et flux normal...) je n'obtiens plus aucun résultats...

Ben là, sans le code ça risque d'être dur. Une petite page de test en ligne ?

Par contre je ne comprends pas bien ta distinction entre les « div » et les « background ». Que sont donc ces « background » à positionner ? S'ils suivent les blocs à aligner en bas, il serait logique de les appliquer aux dits blocs, non ?
Sinon, la technique des colonnes factice pourraît être utile.

Mais tout dépendra de ce que tu dois faire précisément.


Edit : sur le positionnement absolu par rapport à un bloc parent, cf la page suivante :
http://web.covertprestige.info/test/12-positionnement-absolu-selon-conteneur.html
Note : j'utilise zoom: 1 pour conférer le layout au bloc conteneur positionné en relatif, mais ça n'est pas forcément la solution la plus appropriée.
Modifié par mpop (29 Sep 2006 - 11:53)

En premier lieu merci de vous intéresser à mon problème ! Je vais plutôt produire une page qui résume le problème !
Modifié par v-mike (29 Sep 2006 - 11:56)

voici donc une page test qui résume très certainement tout ce que je n'ai pas compris dans le fonctionnement des bas de page absolu...puisque parti de sources saines j'en arrive à quelque chose qu'il l'est moins...

Merci encore !

Ok ton problème est classique, ton conteneur ne "contient" plus tes blocs 1 et 2 puisqu'ils sont positionnés en flottants. La hauteur du conteneur ne suis pas la hauteur de ces blocs.

Pour y remédier il faut qu'un élément à la suite des 3 blocs flottants rétablisse le comportement normal du flux, avec la propriété clear (clear:both ou clear:left dans ton cas).

Dans ton exemple tu peux appliquer ce comportement à fond4, qui n'a pas besoin d'être positionné en absolu :

#fond4{
clear:both;
margin-right:200px;
margin-left:200px;
height:20px;
background:#c0c0c0;
}

Je viens de tester et de mettre en ligne (toujours le même lien) mais IE mange le fond3... sinon sous FireFox c'est nickel !

Ça sera en largeur fixe ?

Auquel cas deux choses :
1 - Ne pas prendre 800px de largeur (berdel de morde je le répète une fois par jour sur ce forum, je vais finir par me lasser...), mais quelque chose comme 760-770px. Penser aux barres de défilement, bordures des fenêtres, fenêtres non maximisées, etc.
2 - Pour une largeur fixe, on peut utiliser assez facilement la technique des colonnes factices pour placer les images de fond.
http://www.pompage.net/pompe/colonnesfactices/
Il suffira ensuite d'aligner l'image de fond en bas (background-position).

Edit : il existe d'autres méthodes qu'un élément en clear: both pour éviter les dépassements de flottants.
Cf. http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
Modifié par mpop (29 Sep 2006 - 13:13)

En réalité, cette mise en page est justement problématique dans le sens où je ne peux utiliser les colonnes factices puisque les 4 coins du site sont des images bien particulières qui ne peuvent être répétées.

Une meilleur illustration avec l'une des maquettes que l'on m'a envoyée : les éléments problèmatique sont en rouges :
l'exemple

Je comptais au départ faire deux div de chaque côté qui contiendrait les deux images mais le souci est donc de pouvoir aligner la petite image (en rouge) en bas..

Pour les tailles les 800 étaient tout à fait indicatifs... je connais bien les questions liées à l'accessibilité. Mais il est certain qu'il vaut mieux le répéter !
Modifié par v-mike (29 Sep 2006 - 14:20)

Rhaa la la, je savais bien que travailler sur un schéma grossier ferait qu'on proposerait plein de trucs dans tous les sens sans savoir si c'est réellement adaptable ou pas au design à obtenir...

La maquette que tu présente est beaucoup plus simple à rendre que ce que tu annonçais avec ton schéma !
C'est quoi le problème ? On ne peut pas intégrer les deux petits machins qui « dépassent » à l'image de fond du pied de page, parce qu'ils doivent remonter assez haut pour se retrouver au niveau de la fin du contenu de la page ?

Ben il suffit de contourner la difficulté sans trop se prendre la tête.

Solution numéro 1 : on intègre ces bouts d'image à l'image de fond du conteneur général.
Problème : le conteneur général doit avoir comme image de fond à la fois les zigouigouis du haut (qui doivent rester en haut) et les zigouigouis du bas (qui doivent descendre si le contenu est long). Solution : on imbrique deux div, la première aura comme image de fond les zigouigouis du haut, et la deuxième (enfant de la première, donc) aura les zigouigouis du bas comme image de fond, alignés en bas, sans couleur de fond précisée pour ne pas masquer les zigouigouis du haut. Et hop, on a un double fond « à coulisse ». À l'intérieur de ce conteneur dédoublé, on met l'en-tête, les menus, le contenu principal, et le pied de page

Solution numéro 2 : on intègre les zigouigouis du haut comme image de fond du conteneur général, et les zigouigouis du bas (bordure bas plus les bouts qui remontent) au bloc pied de page.
Problème : le contenu repousse le pied de page, et ne se trouvera donc jamais au même niveau que les bouts qui remontent... sauf si on remonte l'ensemble du pied de page, avec un position: relative; top: -35px;. Et hop, l'affaire est dans le sac. Par contre, ça laissera un espace blanc (ou vert) de 35px en dessous du pied de page, comme si on avait un padding-bottom de 35 pixels sur body. Mais ça n'est pas très gênant.

Tiens, sinon je vois bien aussi une variante avec un contenu flottant qui dépasserait sur le pied de page, avec un clear: both uniquement sur le menu des liens du pied de page (et pas sur l'ensemble du bloc pied de page).


Bref, il y a plein de solutions pas trop compliquées à ce problème finalement pas si compliqué. Le gros écueil, c'est de penser « cellules de tableaux » et « découpage en petits éléments à positionner bien comme il faut ». Attention à la découpagite aiguë, parente de la mieux connue divite aiguë !

Pour résumer, voici une image qui compare (du moins si j'ai bien compris) d'une part la manière dont tu as présenté le problème, et d'autre part la manière dont il aurait été plus intéressant/efficace de présenter le problème.



C'est bien ça ou je suis à côté de la plaque ?

Bon, on dirait que je suis à côté de la plaque...