mailou a écrit :
Bonjour,
J'ai fais des modifs, ça passe au validateur mais ça modifie profondément l'aspect du site, enfin l'essentiel est d'avoir supprimé les erreur et fait du travail propre.
Merci
Bonsoir,
Avec du positionnement absolu, c'était presque couru d'avance 
En 1024x768 ça passerait presque mais dans une résolution plus grande, l'entête et la colonne centrale restent centrés mais les colonnes de navigation et extra restent resp. à gauche et à droite de la fenêtre du navigateur soit très loin du contenu central !
Si vous souhaitez un design qui passe dans toutes les résolutions et tous les navigateurs, le plus radical est de changer de gabarit.
Deux ressources:
- les gabarits refondus par Florent V. sur Alsacreations.com : http://www.alsacreations.com/static/gabarits/ avec moultes explications en français
- les gabarits HTML Layout Gala http://blog.html.it/layoutgala/ utilisés parait-il par Spip depuis quelques temps
Sinon voilà une rustine ou une cautère sur l'existant (OK pour Firefox 3 vu que je viens de le faire avec l'extension Firebug, à tester sur IE6/IE7 où il peut y avoir un bug assez courant avec le positionnement absolu. La solution n'a rien de bien méchant en général mais le bug peut être spectaculaire)
Principe du positionnement absolu: un bloc positionné en absolu (sort du flux naturel et) se positionne par rapport à son premier ancêtre positionné ou à défaut par rapport à la fenêtre du navigateur
Ici aucun ancêtre de #navigation ou #extra n'est positionné donc ces deux blocs se positionnent à 245px plus bas que le haut du contenu et 25px plus à droite que le bord gauche (left: 25px;) / 25px plus à gauche que le bord droit pour #extra
Un ancêtre c'est dans la hiérarchie des éléments HTML l'élément qui contient un élément donné (le parent) puis l'élément qui contient ce dernier (grand-parent), etc et on remonte jusqu'à body et html
Ici #page est un parent (ancêtre le plus proche) des deux blocs.
Un ancêtre positionné est un ancêtre que l'on a positionné en CSS via la propriété position ayant la valeur relative ou absolute ou fixed (mais pas static, la valeur par défaut).
En plus clair: Initiation au positionnement en CSS (Partie 1) - Alsacreations
En plus complet: la trilogie du positionnement CSS sur Openweb Initiation au positionnement CSS : 1.flux et position relative | Openweb.eu.org + float + le dernier absolu/relatif
Dooonc (ouf), ici on veut que les deux colonnes ne se placent pas par rapport à la fenêtre mais par rapport à l'entête déjà centré. Pour ça, on va positionner #page le parent commun et ce sera lui le premier ancêtre positionné ! Ca se fait avec la valeur relative (tant qu'on applique pas top/left/bottom/right un bloc positionné en relatif reste dans le flux et ne bouge pas, contrairement à fixed et absolute)
/* on POSITIONNE un parent des blocs de gauche et de droite */
#page {
position: relative;
}
/* supprimer right et left:25px; et réduire la largeur ... ou bien réduire celle du bloc central */
/* les 2 blocs peuvent être réunis, les instructions sont les mêmes sinon appliquer ce qui suit aux deux règles #navigation et #extra */
#navigation, #extra {
/* plus d'instruction left: NNNpx; ni de right: NNNpx; pour les 2 blocs */
top: 225px;
width: 167px; /* l'image pose problème, à vous de voir */
}
/* menu plus gros */
div#bloc {
padding: 9px 4px; /* dans toutes les directions */
}
/* faire disparaître l'espace blanc entre le logo et le menu */
.accueil {
float: left;
}
/* faire disparaître l'espace blanc entre le menu et le contenu central */
div#conteneur {
margin: 0 170px 1px 169px; /* attention, homogénéïser 170/169 avec les 170/170 de div#bloc */
}
/* pas d'espace de 8px au-dessus du logo */
body {
margin: 0;
}
Cordialement,
Felipe