Pour mettre en pratique mes compétences théoriques de HTML et CSS ...etc j'ai décidé de créer le site internet de l'univers de fantasy qu'on est en train de créer avec des potes. Je suis en train de créer la page d'accueil et je me heurte déjà à un problème (ou plusieurs en réalité).
Mon code se décompose pour le moment en 3 parties: une balise <header> une balise <nav> et une balise <footer>. Étant donné qu'il ne s'agît que d'une page redirigeant vers le reste des autres catégories je ne pense pas qu'il faille plus de balises.
Mon <header> contient pour le moment juste le titre et un lien vers la page qui permettra de s'inscrire/se connecter et qui sera remplacé par l'image de profil et le pseudo quand un utilisateur sera connecté. À terme, le header contiendra aussi le chemin des pages sur lesquelles l'utilisateur se sera rendu pour rendre la navigation plus simple.
Le <footer> contient pour le moment juste deux lien vers le compte twitter et la chaîne youtube mais devrait à terme également contenir un formulaire de contact ou autre...enfin on verra bien.
Le <nav> contient le plus important de la page: un tableau avec 5 liens menant vers les différentes parties du site.
Le petit souci que j'ai c'est que je souhaiterais faire en sorte de garder le header et le footer à la même taille mais que le nav prenne toute la taille qui reste sans créer un scrolling à moins que le nav ne passe en dessous de 500px de hauteur.
nav
{
height: 60%;
min-height: 300px;
background: url(Images/MNLogo.jpg) no-repeat center scroll;
}
De plus, j'aimerais faire en sorte que le tableau se redimensionne dynamiquement pour prendre le 100% de la hauteur du nav
table
{
margin: auto;
width: 50%;
height: 100%;
}
Le souci c'est que le résultat ressemble plutôt à ça
Le problème est donc:
-Le nav ne se redimensionne pas et semble prendre la valeur min-height comme valeur fixe
-Le tableau ne se redimensionne pas pour remplir l'espace du nav
-Même s'il se redimensionne, le pourcentage ne permettrait pas d'obtenir un résultat propre peut importe la hauteur de l'écran: il y a toujours du scrolling ou une surface vide en dessous du footer si la hauteur ne correspond pas exactement à la hauteur pour laquelle la page était conçue
Quelqu'un pourrait m'aider à résoudre au moins un de ces problèmes ?
Bon j'ai réussi à faire en sorte que mon tableau soit toujours centré moyennant le sacrifice de quelques valeurs en pourcents et en suivant les conseils de cette page: http://phrogz.net/CSS/vertical-align/index.html (en anglais). On perd un peu en "malléabilité" de la page mais le résultat final correspond à peut près à ce que je voulais.
Maintenant il ne me reste plus qu'un problème: faire en sorte qu'il n'y aie pas de vide sous le footer:
Comme vous pouvez le voir, il reste un espace sous le footer que j'aimerais pouvoir combler en mettant comme règle que le footer doit toujours rester tout en bas et que le nav se redimensionne pour remplir l'espace entre le Header et le Footer
Bon j'ai décidé de prendre une autre approche à mon problème: je vais tenter de trouver qqun sur le forum "recrutement" qui pourrait m'aider de manière régulière avec les problèmes que je pourrais rencontrer durant le développement de mon site.
Première fois que je suis déçu de ce forum et de l'aide que j'ai pu obtenir
Ce serait peut être mieux, mais comprend aussi que cette période n'est peut être pas non plus la plus tranquille pour certains d'entre nous, pour ma part en ce moment je n'ai absolument pas le temps de me pencher sur ton problème, cherchant moi même à bouclé le maximum de choses avant les vacances, j'avais espéré qu'en posant ton code quelqu'un y aurais répondu, mais à mon avis nombreux sont ceux qui sont dans mon cas.
Maintenant je vais te donner un bout de soluce, le prob viens de là
Ca pousse firefox à créer un span de grilles responsive, tu le vois si tu examine le code attentivement dans le navigateur.
Et pour limiter la casse sous safari un petit
html{
height: 100%;
}
- Edité par exen 4 juillet 2017 à 19:06:47
Compos sui.
Combiner blocs fixes et blocs variables
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Compos sui.
Compos sui.