Adapté le contenu en fonction de : header et footer

Legendary7
Les bases HTML/CSS

Bonsoir à la confrérie des développeurs web, Je viens vers aujourd'hui, vous l'aurez sûrement déjà compris, pour vous demander de l'aide. Et oui en effet, étant actuellement en train de coder mon premier design en CSS, je galère sur un petit truc. Donc voilà, je vous expose mon problème. Donc première, je possède un système de design simple : Un header (contenu le logo) Un menu (horizontal) Du contenu (en bloc) Un footer ** Voici le design que j'ai actuellement développé : [url=http://img4.hostingpics.net/pics/994051sitedesignopeclass.png]aperçu ici[/url] Comme vous le verrai certainement, le bloc principal n'est pas relier au footer. Ce que j'aimerai pouvoir faire, c'est un bloc principal qui soit à la fois : adapté en fonction du texte adapté de la hauteur entre le header et le footer et que le background soit statique.** Pourriez-vous m'éclairer afin de répondre à mes besoins, de me rediriger vers des tutoriels ou autre (j'ai peut-être mal mené mes recherches, cause de mots clés ou de la méthode de recherche). Je vous en serez vraiment reconnaissant. Bisous

4 réponses

Legendary7
Auteur

Salut,
La marge au dessous du menu est pour le logo :)
Super merci pour les liens :D

Arrows78

Avoir une marge aussi grande, ça ne se fait pas de base. Tu as forcément ajouter des marges dans le css, sinon de base, les blocs sont adaptés en hauteur automatiquement, et donc peu importe la taille de ton texte du bloc principal, le footer sera toujours juste en dessous. De même pour ton header et ton menu : toujours juste au dessus de ton bloc principal.

Legendary7
Auteur

Salut,
En fait je crois que vous n'avez pas saisi ma question. En fait j'aimerai que le block principal (entouré en gris) soit instantanément du haut (donc à partir du menu) jusqu'au pied de page (footer). Et ce, que le texte soit long ou pas (car je ferai un système de pagination).

Et sinon pour la parge, c'est normal, c'est le logo (qui est masqué).

header {
    background: url(/images/header.png) no-repeat scroll 50% 0;
    height:245px;
    margin:0px;
    width: auto;
}
Arrows78

Kevin, si j'ai bien compris, tu veux que la barre grise (sur ton image) en bas de ton texte soit rattaché au footer, et ceux tout le temps, que le texte soit petit ou grand.
Si c'est bien ça, j'avais donc bien compris. Mais si ton footer n'est pas coller au reste c'est forcément que tu as un marge externe ou interne... Après tu peux donner un taille fixe à ton bloc principal, mais c'est pas terrible du tout comme solution.