[Résolu] Décalage contenu sous le menu

Bonsoir,

Je suis allé faire passer l'étape de validation à mon site, et du coup j'ai découvert une </div> en trop, qui m'arrangeait pourtant bien pasque mon site était comme il fallait. En supprimant cette div, mon contenu va se fourrer sous le menu, loin loin en bas de la page. Je cherche mais je ne trouve pas pourquoi.

Voilà l'adresse de mon site :
http://mikachudesign.free.fr/sitetest2/accueil.php

Merci d'avance de votre aide.
Modifié par Mikachu (12 May 2006 - 20:45)

Bonsoir,

Déjà, pour ne pas avoir de </div> en trop, il faut prendre l'habitude de commenter un minimum son code, pour s'y retrouver. Un exemple :

<!-- bloc conteneur -->
<div id="conteneur">

   (plein de contenu)

</div>
<!-- fin du bloc conteneur -->

Ainsi, on sait où commencent et finissent les div.

J'allais regarder ton exemple, mais je pense que tu devrais relire les tutoriels sur le positionnement : Comprendre le positionnement des balises en CSS. Tu peux réussir le même design sans jouant autant avec les positions relatives et marges négatives si tu organises ton balisage comme il faut.

Une petite chose encore : ton div#general n'est pas utile. On peut attribuer des ID au body, mais ici, il faut remplacer le div par body { (...) }. L'image de fond (et son positionnement) que tu as affecté sur ce pseudo body, il vaut mieux le mettre dans le div#contenair.

Il te faut quatre à cinq div principaux :



* div#page : contient tout le site (correspond à ton div#contenair)
* div#entete : contient le header (bannière, liens d'évitements, etc.)
* div#pied de page : contient le footer
* div#menu : contient le menu et tout ce qui doit se trouver à gauche
* div#contenu : contient tout ce qui doit se trouver à droite


Si je regarde ton balisage, un des problèmes est que le div#content (qui correspond à div#contenu sur l'image) est intégré dans le div#navigation.
Modifié par (12 May 2006 - 20:25)

Ben en fait merci, tu m'as souligné le pb en fait...

Le soucis était que la div de #navigation n'était pas fermé ! Du coup forcément il faisait apparaître le contenu sous le menu.

Je sais que j'ai toujours un soucis pour les histoire de positions (relative absolute, fixed, voire aucune). Je fais en fonction des moyens du bord pasque je n'ai toujours pas saisi l'intérêt d'être "dans le flux" ou non. La j'ai fait en sorte d'avoir un maximum de données dans ce flux, car il semble que c'est le mieux. Cela me permet d'avoir une lecture du site linéaire quand on utilise pas la CSS. Je vais cependant rejeter un coup d'oeil sur ce tutoriel, voir si j'ai pas raté une information qui me permettrait de mieux faire. Ceci dit, je n'aime pas récupérer une structure déja faite pour l'adapter à ce que je veux, l'intéret de l'apprentissage étant de savoir le faire moi même, je commence par faire des erreurs mais c'est comme ca que j'apprends. Petit à petit, la logique se faisant dans ma tête, j'utiliserai tout ca de manière plus adaptée.

Merci bien en tout cas pour ta réponse.

PS. Ceci dit, au final j'ai 4 divs principales (quicknav, header, navigation, content) dans une div contenante (container)
Modifié par Mikachu (12 May 2006 - 20:44)

Tu devrais définir une largeur au div#quicknav, ou lui donner une marge à droite, pour supprimer une barre de défilement horizontale sous navigateur type Gecko.

#quicknav {
  width: 160px;

C'était déja fait

La barre de défilement horizontale se situe sous la quicknav ou sous le site ? Pourrais tu me faire une capture s'il te plait ?

Merci bien

Les voici :
La première, en affichant la page (on voit la barre de défilement en bas) :



La seconde, en "scrollant" à droite (avec web developer : entourer les blocs) :

Bon je viens d'ajouter une marge à droite, car j'ai réduit la taille du div au maximum (135px contre 160 au départ), mais ensuite je vois l'icone mail passer à la ligne.

Dis moi si ca fonctionne mieux maintenant.

C'est corrigé !

Merci encore