[hello] Bonsoir à tous, [hello] Je cherche à construire mon site avec des blocs div et à les positionner correctement les uns par rapport aux autres. J'ai trois blocs: - un bloc "haut" comprenant la banniere et le menu horizontal - un bloc "centre" comprenant lui-même les blocs "gauche" et "droite" - un bloc "bas" Rien de compliqué à première vue si ce n'est que je ne parviens pas à positionner le bloc du bas à 3 pixels précisément du bloc "centre". Avec un positionnement relatif, une marge du haut de trois pixels et étant situé juste après le bloc "centre" dans le code source ça ne fonctionne pas et j'ai un résultat différent selon le navigateur utilisé. De plus, impossible de définir une couleur de fond pour le bloc "centre" à moins de lui spécifier une hauteur ce que j'aimerai éviter du fait que la hauteur du contenu varie selon les pages.

Salut. Eviter tant que posssible les position:absolute et relative sers toi des marges c'est plus sur meme si elles different entre IE et les autres tu corriges avec un hack css margin:XXpx; ! important; /*pour les nav autres queIE*/ margin:XXpx; /*pourIE*/

Merci jeanpierre949 Il faut pourtant que j'utilise des positionnements relatifs car je souhaite placer le contenu principal de mes pages avant le menu de gauche. J'ai résolu temporairement en utilisant le "truc du tableau" mais mon but est justement d'éviter les tableaux. Et pour l'instant je ne trouve pas de moyen autre que des blocs div en absolu et avec des marges négatives pour placer le contenu avant.

Re. Je ne comprends pas trop ta demarche "placer le contenu avant le menu de gauche"? Tu le places ou ce contenu? En principe ca ne pose pas de probleme en css .

salut jeanpierre 949, en fait si j'utilise un tableau standard de 2 colonnes, l'une pour le menu de gauche et l'autre pour le contenu, on aura la disposition suivante: Du coup le menu de gauche apparaît avant le contenu dans le code source. Et une fois la page linéarisée par un navigateur texte le résultat est catatstrophique puisque sur chaque page le menu est situé avant le contenu. Sans parler des moteurs de recherche qui préfèrent que les mots importants d'une page soient situés le plus tôt possible dans le code. J'ai donc résolu temporairement le problème en restructurant mes tableaux: avec le code css suivant: Mais j'ai d'abord essayé de faire mes pages plus proprement en utilisant des blocs avec des marges négatives comme conseillé sur Alsacréations. Et comme je le signale dans mon premier message, j'ai le bloc du bas que je n'arrive pas à aligner correctement par rapport aux autres mais bon je débute avec les blocs... Je suis étonné aussi qu'il soit nécessaire de préciser une hauteur si l'on veut qu'un bloc ait une couleur de fond. Dans le cas exposé au début avec mon bloc "centre" qui contient les deux blocs "gauche" et "droite" la couleur d'arrière-plan n'apparaît pas sous le bloc "gauche" qui est moins haut que le bloc "droite" sauf si je spécifie une hauteur pour le bloc "centre" mais c'est à éviter. Mon cas apparaît donc comme insolvable et c'est pour cette raison que je suis revenu à une mise en page par tableaux mais "améliorée". Voilà j'espère t'avoir fourni suffisamment de renseignements et en tout cas merci pour ton aide.

Ce n'est pas insolvable si tu veux je te fais la mise en page je la mets en ligne tu n'auras qu'a recopier le code css et html

OK merci jeanpierre949 pour comprendre la mise en page que je souhaite je joins un schema de la situation: [img width=500 height=470]http://perso.wanadoo.fr/safedit/schema.gif[/img] [je ne sais pas pourquoi cette image ne s'affiche pas dans son format original il faut l'agrandir en cliquant] J'ai deux difficultés sur cette mise en page: 1) je n'arrive pas à positionner le bloc "bas" à 3px du bloc "centre" du fait que la hauteur du contenu des pages varie. 2) je n'arrive pas à spécifier une couleur d'arrière-plan pour le bloc "centre" à moins de lui préciser une hauteur. Et commme cette hauteur varie selon les pages... Si je ne précise pas la hauteur je n'ai pas d'arrière-plan sous le menu de gauche c'est horrible. Il me semble que c'est une bonne façon de procéder car ainsi je peux arranger l'ordre du code source comme bon me semble. Sauf que tu m'as déconseillé d'utiliser les positionnements absolus. je ne vois donc pas comment faire. Le résultat actuel est visible ici: http://perso.wanadoo.fr/safedit/html/securite/default.html

Modifié par ozmozz le 15/12/2005 14:46

Voila il est a cette adresse corrigé et mille excuses [url]http://www.secpop-montpellier.fr/ozmozz.html[/url] les 3grands blocs avec menu et contenu dans celui du centre contenu etant placé avant menu dans le code html. tu corriges les details ,j'ai mis des couleurs de background pour bien differencier les blocs a toi de mettre celles qui te conviennent et regler les marges selon tes desirs

Modifié par jeanpierre949 le 15/12/2005 16:30

http://localhost/... c'est ton adresse interne à ton PC, on saura jamais y acceder ;)

Un grand merci jeanpierre949 mais c'est vrai que l'adresse http://localhost/spf_site/ozmozz.html n'est accessible que depuis ton poste. En tout cas j'ai hâte de voir le résultat.

j'ai modifié l'adresse . Suis-etourdi quand meme!

OK merci merci jeanpierre949 j'étudie tout ça et te tiens au courant En fait je débute en html (est-ce utile de le préciser) et je découvre énormément de choses grâce au forum entre autres. J'ai commencé la création de mes pages avec Frontpage 2003 (incroyable mais vrai) mais j'ai vite acquis Dreamweaver 8 car Frontpage ne connaît même pas le doctype. J'avais fait une cinquantaine de pages lorsque j'ai appris l'utilité du Doctype et j'ai dû tout modifier. Bye Bye Frtpge... Depuis j'écris tout le code à la main dans DW et j'ai 3 objectifs (le contenu brut mis à part): - la validation XHTML 1.0 strict - un minimum d'accessibilité (au passage félicitation pour les raccourcis clavier de ton site) - avoir le code le plus léger et le plus propre possible. Je pense y arriver à partir de ton design mais je vais d'abord chercher pourquoi ça ne fonctionnait pas au départ. encore merci et bravo pour le travail effectué.

felicitations pour avoir laissé tomber frontpage et pour ton desir de vouloirrealiser un site propre et accessible. Pas de remerciements c'est avec plaisir, surtout si j'arrive a te convaincre de laisser les tableaux et utiliser les css. N'hesite pas a me contacter des que tu en as besoin .sur le forum ou en message privé

re-salut en fait le tout est presque parfait mais il subsiste un problème. Je ne parviens pas à définir une couleur de fond pour le bloc "conteneur": [img width=500 height=406]http://perso.wanadoo.fr/safedit/image2.gif[/img] j'ai essayé toutes sortes de solutions rien à faire ça ne marche pas sous FF ni Opera. avec le code CSS suivant: La couleur de fond n'est pas prise en compte sauf si je précise une hauteur pour le bloc "conteneur" ce qui est impossible. Je fais peut-être fausse route. Une idée? car moi je suis à court.

juste pour dire que le problème n'est pas sur le choix d'un positionnement, mais plutôt qu'une fois le choix choisi, utiliser uniquement ce positionnement et non pas faire un mixe des deux.

Re. probleme recurant des height sous Opera et FF je t'ai mis la parade en ligne a la meme adresse mais garde le pour toi ne le dis a personne c'est un secret. Tu verras c'est un petit conteneur de 1px de hauteur et 100%largeur placé juste avant de fermer le div avec la propriété clear:both

jeanpierre949, tu est un génie!!! ça fonctionne parfaitement. grâce à toi bye bye les tableaux. Merci beaucoup tu me sauve la mise, je vais pouvoir taper un code propre. Maintenant le plus fastidieux reste à faire: modifier la cinquantaine de pages que j'avais déjà faites avec des tableaux... Dernière petite question: que signifie la propriété clear: both?

Quand on met un cadre en float comme sur ta page en theorie on le sort du flux. "clear:both" signifie nettoyer le float ou plus expicitement retourner dans le flux normal.

ok encore merci!

Effectivement ti_ouf désormais mon choix est fait(avec l'aide de jeanpierre949) et je laisse de côté le positionnement relatif qui m'avait causé des soucis.