28172 sujets

CSS et mise en forme, CSS3

Bonjour à toutes et à tous et d'avance merci pour votre aide précieuse...

Ayant décidé de créer un petit site Web pour une assoss , j'ai lu ici et là que pour la validations de celui-ci, mieux vaux à l'avenir éviter d'utiliser les tableaux, vu que la validation w3C ne reconnait pas les balises dans le code Html align margin etc...

J'ai donc cherché comment créer un site entièrement composé de blocs en Css, et là ... petit hic, si cela fonctionne parfaitement sous Firefox, sous Explorer c'est moins évident.

le site se compose de 4 blocs (div)

PS : pour bien voir d'où vient l'erreur, j'ai exagéré les couleurs Smiley biggrin

-haut de la page
- menu gauche
- contenu
- bas de la page

sous Firefox l'alignement des 4 bloc est nickel
sous Explorer il y a décalage du bloc du haut et celui du bas..

pour monter une démo en ligne, plutôt que d'écrire tout le code ici : voici le lien pour voir la page en question : http://rschorter.free.fr/test/

ou mis un fichier rar à télécharger : http://rschorter.free.fr/test/test.rar

Mille mercis pour votre aide, car j'ai beau parcourir le Web, je ne trouve pas la solution (peut-être que je devrais finalement créer le site avec des tableaux de ce bon vieux Html ?)

René
Modifié par lapagemagik (27 Jul 2011 - 13:55)
Décalage horizontal ou vertical ? Lequel pose problème ?
Il faudrait que les div 'menu' et 'contenu' soient comment l'une par rapport à l'autre ?
tu es toujours en html hein. ca n'existe pas des "bloc en css". Le css est une feuille de style c'est tout. Elle est la pour "styliser" le html.

Pour ton problème très franchement c'est extrêmement basique et il y a des tutos partout sur le web à propos de la mise en page.

Tu peux par exemple voir ici sur alsacreation en parcourant la section "apprendre".

Bon courage Smiley smile
Par default les div se positionnent les unes relativement aux autres, ne pas présicer "position:absolute;" dans les styles revient par default à "position:relative;".

Donc "contenu" va se positionner par rapport à "menu" (au passage tu as deux blocs #menu {...} il faudrait les réunir en un seul) avec en plus une marge à gauche margin-left:425px; (j'imagine d'ailleurs que tu as réglé cette valeur en faisant 251 width de menu + 174 margin-left) et une marge en haut margin-top: -11px; On voit en effet que le fond blanc de "contenu" remonte un tout petit peu par rapport au bas de "contenu" (-11px)
Modifié par Ababdge (27 Jul 2011 - 14:09)
Hello,

merci pour vos réponses Smiley biggrin

pour ptivincent : oui je suis en Html, mais je voulais dire par là des blocs en html mais dont l'aspect et la mise en forme passe par du Css...et si mon problème est si basique pourquoi ne pas y répondre ? Smiley cligne

pour Abadge : en fait les il s'agit des blocs du haut et du bas de la page qui sous Explorer n'ont pas le même décalage horizontal..
Ababdge a écrit :
Je suis sous IE et je ne vois pas à quel décalage tu fais allusion


merci ta réponse Smiley biggrin rapide

en fait, le bloc du haut (celui contenant l'image) est décalé de 2 mm par rapport au reste des autres blocs, et sous Firefox ce n'est pas le cas...

si je redimensionne sous IE c'est sous firefox que tout va être décalé Smiley bawling
Modifié par lapagemagik (27 Jul 2011 - 14:17)