Quelques éléments...
sofresh a écrit :
Il me semble que le bloc "contenu" pose problème. En effet, il crée un décalage, empechant aux blocs de la meme ligne (col gauche, droite, et lui même) de toucher le bloc "menu".
C'est un problème de fusion des marges. La marge du h4 qui contient le texte « Contenu » fusionne avec celle de div#middle qui fusionne avec celle de son parent direct (une simple div). Cette simple div hérite donc d'une marge supérieur de 1em (la marge supérieure du h4). D'ailleurs si on augmente la taille du texte de ce h4, l'écart augmente.
Je suggèrerais :
- supprimer cette div qui traine là (à quoi sert-elle, d'ailleurs ?) ;
- empêcher la fusion des marges du contenu de div#middle avec div#middle, par exemple avec ceci :
div#middle {
padding: 1px 0;
}
Note : en appliquant un
background: red; sur div#middle, on peut constater la différence avant l'application du padding (fusion des marges) et après l'application du padding (plus de fusion des marges).
Plus d'informations et d'autres moyens d'empêcher la fusion des marges :
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html
sofresh a écrit :
Est-il possible que les trois blocs de cette même ligne (gauche, contenu et droite) s'étendent du bloc "menu" jusqu'au bloc "footer", quelle que soit la taille de la fenêtre?
À priori, non. Par contre, il y a une chose que l'on peut faire : donner l'impression visuelle que c'est le cas, en jouant sur des images de fond.
Voir à ce sujet :
-
Des blocs de même hauteur sans tableaux (quelque chose de simple pour commencer)
-
Les colonnes factices (la référence en la matière)
-
Un exemple à décortiquer (attention, il faut avoir de bonnes bases pour pouvoir l'adapter à son propre design sans commettre d'impair).
sofresh a écrit :
En reduisant la taille de la fenêtre, lorsque la barre de défilement vertical apparait, le footer reste à sa position, et ne s'adapte plus en fonction du défilement.
Bah forcément, quand on utilise le positionnement absolu sans avoir la moindre idée de ses conséquences, ça aide pas.
En gros, un élément positionné en absolu sort complètement du flux du document, et tous les autres éléments considèrent alors qu'il n'est plus là. Pouf, parti.
Donc forcément, demander à un conteneur (ici div#page) de s'allonger en fonction de son contenu (div#left et div#right), alors que ce contenu n'est plus du tout pris en compte... ben ça aide pas.
Pour rappel : le pied de page se place en bas de div#page. Si on donne une couleur de fond à div#page, on peut observer jusqu'où ce conteneur s'étend, et si des éléments en dépassent ou pas.
Deux solutions :
- Soit on se débrouille pour que le contenu central (contenu de div#middle) soit toujours plus grand que div#left et div#right. Dans ce cas, div#page se fichera toujours autant de div#left et div#right, mais sera agrandi en fonction du contenu de div#middle, et tout ira bien.
- Soit on n'en est pas sûr... et dans ce cas le positionnement absolu est plutôt risqué. Donc exit le positionnement absolu pour les colonnes, et on bascule :
Option 1 - sur un tableau à une ligne et trois cellules, tout propre tout beau, et ne posant pas de problème d'accessibilité car on n'utilisera pas de cellules vides, on n'imbriquera pas des tableaux dans des tableaux, etc.
Option 2 - sur des colonnes flottantes.
Je développe l'option 2 :
div#left{
float: left;
width:150px;
margin:0; padding:0;
height: 400px; /* horreur... */
}
div#right{
float: right;
width:100px;
margin:0; padding:0;
height: 400px; /* horreur, bis */
}
Voilà, on ne change pas grand chose, surtout que les trois blocs div#left, div#right et div#middle étaient déjà pile dans le bon ordre dans le code HTML (note : les flottants doivent se trouver en premier dans le code, avant div#middle).
div#middle ne devrait pas changer : on aura toujours besoin des marges latérales, car les flottants repoussent le contenu (le texte, les images, plus généralement tous les éléments de type en-ligne) mais pas les blocs eux-même. D'ailleurs, si le comportement des flottants n'est pas clair, ne pas hésiter à jeter un oeil ici :
http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html
Là, on va se trouver face à une petite subtilité : les flottants, eux aussi, sortent du flux de leur bloc parent. Argh. Les flottants seraient-ils comme les éléments positionnés en absolu ? Serait-ce donc sans espoir ?
Que nenni. Car contrairement à ce qui se passe avec le positionnement absolu, on pourra faire rentrer les flottants dans le rang. Il suffit de dire au conteneur de bien vouloir ne pas laisser s'échapper (déborder) les flottants, et tout ira pour le mieux. Concrètement, on va faire ça ainsi :
div#page {
overflow: hidden;
...
}
(les points de suspension représentent le reste du code, que l'on reprendra à l'identique).
And voilà. Les colonnes flottantes sont dans le flux de leur bloc parent (div#page), et le pied de page ira bien se placer tout en bas.
Une dernière petite subtilité pour la route : le pied de page étant positionné en absolu, il n'est pas exclu (et même probable) qu'il vienne se superposer sur le bas des contenus. Ben oui, le positionnement absolu c'est pas de la gnognotte.
Pour éviter ça, on peut créer un espace vide de tout contenu en bas de chaque bloc de contenu susceptible de rentrer en contact avec le pied de page. En l'occurrence, il y en a trois : div#left, div#right et div#middle.
On peut donc tous leur rajouter un petit :
padding-bottom: 30px
(c'est bien 30px la hauteur du pied de page ? Je ne me souviens plus vraiment.
Sur ce, chers amis, il est temps de se quitter. Merci à tous pour votre attention et à la semaine prochaine pour un nouveau cours fantastiquenthousiasmant sur les CSS !
PS : n'oubliez pas de faire vos devoirs.
Modifié par Florent V. (18 Jan 2007 - 22:15)
Wow, quel cours, quel démonstration! Merci! Je n'esperais pas tant d'aide et d'implication!
