Construction de notre site
Choix du design
L'objectif lorsque nous avons décidé du thème de ce site, était d'apprendre à jouer avec les proriété de positionnement des éléments. Nous avons donc choisi une boite à outils, pour rester dans le thème, et nous l'avons positionnées en haut à droite. Elle est intégrée dans l'en-tête et nous l'avons laissé dépasser sur le contenu avec la propriété overflow:visible; Ensuite nous avons voulu qu'elle forme un cadre avec le menu. L'objectif était de rendre la navigation plus facile, entre les différentes pages du site en gardant le menu sous la main, mais aussi au sein d'une même page avec le sous-menu à droite. Tous cela devait habiller la page que nous avons autrement laissé volontairement blanche.
Les défauts
Nous avons rencontré quelques difficultés pour placer les différents éléments de la page. Par exemple, la boite à outils était au départ trop grande, elle cachait une partie du texte. Il nous a donc fallu trouver la dimension adaptée. Que la boite soit assez grosse pour faire un effet de cadre, mais suffisemment petite pour permettre de voir le contenu et le sous-menu. Nous avons ensuite remarqué des problèmes d'affichage du menu sur certains navigateurs. Il faut savoir qu'une div n'hérite pas des propriété de positionnement de la div qui la contient. Il nous donc fallu positionner le menu comme nous avons positionné la div d'en-tête.
Ce menu fixe a eu une conséquence à laquelle on ne s'était pas attendue : il ruine le système d'ancres de notre sous-menu. En effet, lorsque l'utilisateur clique sur une ancre, il est ramené sur la section correspondante qui se trouve alors tout en haut de l'écran. Or précisément, sur notre site, le menu fixe cache le haut de l'écran.
Enfin, tous les éléments fixes de notre site posent un dernier problème si on zoome ou si on consulte le site avec une petite fenêtre de navigateur. Les éléments restent à la même taille et se superposent au contenu. Produire un site avec autant d'éléments fixes est donc surrement à éviter. Mais c'était un exercice formateur dans le cadre de nos PPE.