Bonjour ! J'ai un GROS problème : J'ai fait une page à l'aide de tableaux, tout fonctionne parfaitement sous FireFox, mais sous IE, plus je remplis une cellule de gauche, plus le texte de celle de droite se decale vers le bas... (cellule contenant le texte : "VOICI LE BUG !") J'ai vraiment tout tenté et suis un peu desesperée ! Un peit coup de main m'aiderait beaucoup. Je vous donne le code de ma page : (la repetition d'un des paragraphe c'est pour l'exemple afin de bien faire apparaitre le bug...)

J'ai enlevé ce morceau de code qui était long et gâchait la visibilté de cette discution qui somme toute, devient plutôt interessante.

Oula, perso je n'ai pas vraiment envie de t'aider quand je vois un code pareil, espac tes lignes et sa ira mieux et je epnse que tu t'y retrouvera plus facilement, mais bon, fait en sorte qu'il soit plus lisible.

Bon courage!

J'ai simplifié mon code pour que vous compreniez plus vite... Je vous en prie, AIDEZ MOI !!

La solution est simple :
Ne pas utiliser de tableaux pour faire le corps du site !
Voici pourquoi :
http://www.siteduzero.com/forum-83-138058-p1-les-raisons-pour-ne-pas-creer-de-sites-en-tableaux.html

Le problème avec les div c'est que c'est vite ingérable, et il suffit souvent de redimensionner la fenêtre pour que y'est des trucs qui partent en couille... (certains éléments bougent parfois) ! Même avec des positions absolues et relatives, c'est pas encore ça, et mettre un élément au cm près devient vite galère si on utilise QUE des div ! A moins qu'il y est une méthode magique, mais alors la j'attends qu'on m'explique, j'aimerais bien savoir quelle est cette méthode ? Sinon j'ai trouvé la solution à mon problème, sous IE il faut lui spécifier au maximum les tailles de tableaux ou cellules (heigh, width). Voilà. J'attend donc que quelqu'un m'apporte une solution VIABLE pour des sites entièrement avec des div...

Citation : elea

Le problème avec les div c'est que c'est vite ingérable

C'est totalement l'inverse !
La mise en page en tableau est un modèle de fourbis ingérable et très difficile à maintenir plusieurs mois après l'avoir codée.

Je ne vois pas ce qui te pose problème dans la mise en page avec les <div> ...
Regarde le tuto de M@téo, les tutos des Zéros et aussi du coté du site Alsacréation (une mine d'or).

Pour répondre à ta question, il n'y a pas de méthode miracle, juste une successions de propriétés CSS c'est tout.
Si tu connais le CSS et que tu as un minimum de jugeotte, tu ne devrais avoir aucun problème (de ceux que tu as ennoncé).

Je me permet de te redonner le lien du très bon topic de nicknick63 : http://www.siteduzero.com/forum-83-138058-p1-les-raisons-pour-ne-pas-creer-de-sites-en-tableaux.html
Je te conseil vraiment de le lire.


EDIT : Ton code est une horreur au niveau de l'accessibilité et de l'optimisation (les tableaux imbriqués, çaylemal absolue !!!)

Pour faire un site entièrement avec des divs, il faut respecter les normes du W3C, coder proprement, utiliser un ordre logique (<div class="text"><p>bla bla bla</p></div> et non <div class="text"><p>bla bla bla</div></p>) et coder une feuille de style CSS (séparée du code XHTML déjà, c'est plus simple) conforme aux standards là encore du W3C.
Si tout est codé ainsi, le site devrait être opérationnel avec des div et quelque soit le taille de la fenêtre (le mien l'est en tout cas).

quelques lien:
Validateur XHTML

Validateur CSS

Il serait bon de signaler que la "mise en page en div" n'existe pas...
L'élément div est à utiliser quand rien d'autres ne convient, et de même pour span. ici, c'est plutôt de la mise en page avec p, div, etc...

Le principe de la mise en page sans tableaux, c'est d'utiliser les balises standart tout en leur donnant des propriétés d'aspects avec CSS.
On peut faire des choses bien plus simplement qu'avec les tableaux, cf les liens sus-cités.

En effet, la "mise en page en <div>" est un abus de langage, mais ça reste compréhensible et plus rapide.

Oui, c'est ce que j'ai préféré dire dans mon message, après, chacun appelle ca comme il veux...

Merci pour m'avoir redonné confiance dans les <DIV> !! voici mes debuts avec cette nouvelle façon d'apprehender la structure d'un site (dites moi si je suis dans la bonne voie... !) Ne soyez pas trop sévère, je suis une grande débutante en sites Internet, je suis programmeuse sur des langages tout de même beaucoup plus normalisés que ceux du web ! Alors au début c'est un peu déroutant de voir qu'un même code peut être interpreté différemment en fonction du navigateur !! Maintenant je vais remplir tout ça... en esperant que ce soit pas galere de placer correctement les elements à l'interieur...

Une petite remarque, je vois que tu place le CSS à l'intérieur du code. C'est possible, mais ca te prive d'un avantage majeur du CSS.

Tu devrais plutôt l'écrire dans un fichier .css externe, ainsi toutes tes pages utiliseraient le même code et tu n'aurais pas à le retaper!
Avantage énorme: si tu veux changer le thème de ton site tu change juste le fichier CSS!

Pour inclure un fichier CSS, par exemple theme.css, tu place

Un autre détail important, je vois que tu as fixé la largeur à un peu moins de 1000px.
C'est dommage: un bonne partie des internautes possède un écran de 800x600 pixels... Pour ces visiteurs, ton site s.ne sera pas entièrement visible.
Tu devrais baisser la largeur à 800 pixels

Citation : Gwen-Haël

un bonne partie des internautes possède un écran de 800x600 pixels...

Une bonne partie, j'irais pas jusque là, mais c'est vrai qu'il faut aussi penser à eux. En tout cas, je te conseille également de passer aux <div> (et non aux <DIV>... C'est mesquin, mais ça change tout), parce que non seulement ton code sera plus clair, mais en plus il sera accessible (et ça c'est un gros plus).

Hum, la dernière stat que j'ai vue sur Alsacrétions je crois faisait état de plus de 10%, c'est quand même un nombre non négligeable de visiteurs.
Même sur le site du zéro, plutôt high tech, il y en a dans les 5%.

Merci pour tous ces posts interessants. Pour répondre aux remarques concernant la largeur du site à 980px, c'est pour que celui-ci se retrouve en plein écran dans une résolution de 1024x768, résolution que je considère minimum, et tant pis pour les "boulets" qui gardent une résolution plus basse, après tout, si on peut faire avancer les choses... ! De plus, en 800x600, le site bénéficie de la barre de défilement horizontale qui lui permet de rester accessible. (Tiens, faudra que j'essai en 640x480 ! ).
Oui, c'est bien <div> et non <DIV> (n'andive... ! ).
Oui, j'ai fait un fichier CSS externe, mais dans le post c'est plus pratique de vous le présenter ainsi.
Au fait, j'ai une question ! Voici une petite suite du code précédent, incluant 3 nouvelles balises <div> pour créer des liens dans le <div> "bandeau"... Je souhaiterais que mes cadres ne touchent pas les bords du cadre qui les contient... Alors là... mais alors là ! ... Ca me donne un affichage "semi-logique" sous IE (les cadres ne sont pas collés au bord haut, mais le sont au bord bas... (A quoi sert mon "margin-bottom" alors ? ), et un affichage "décalé" sous FireFox (les cadres se sont déplacés en dehors de celui qui les contient ! ). J'ai tenté d'autres techniques... encore plus hazardeuses ! ttt... ! Une réponse à me donner ? Vous pouvez éclaircir mon chemin ? D'avance Merci !

Citation : elea

c'est pour que celui-ci se retrouve en plein écran dans une résolution de 1024x768, résolution que je considère minimum, et tant pis pour les "boulets" qui gardent une résolution plus basse

Ne prend pas en compte ce que toi tu considère comme juste, prend en compte les faits tels qu'ils sont.
Et le fait est que bon nombre d'internautes sont encore en résolution 800x600. Ne pas penser à eux, c'est se priver de pas mal de visiteurs !

Un site se doit d'être accessible au plus grand nombre possible.
Quand à la barre de défilement horizontale, personnellement je trouve cela vraiment dérangeant (voir horrifique).

Niveau CSS, je peux déjà te conseiller ceci :


A mettre au tout début de ton code CSS.

Il faut savoir que les navigateurs ont des marges par défaut, le problème est qu'elles sont différentes d'un navigateur à l'autre. C'est souvent la cause de pas mal de problèmes de compatibilité.

Avec ce code, tu redéfinis les marges extérieures/intérieures à 0, comme ça plus de problème (enfin en partie ).
Bien sûr, il faudra définir les marges pour chaque élément par la suite.

Bien entendu la barre de navigation horizontale ne s'affiche QUE sur une résolution en-dessous de 1024x768... Donc je permet aux gens qui ont un "grand" écran, d'en profiter, et aux autres d'acceder tout de même au site... (800x600 = moins de 10% des internautes... soit moins de 10% qui verront cette vilaine barre !). Ok pour les marges, je vais essayer ce que tu m'as conseillé. En tout les cas je confirme : C'est beaucoup plus facile, intuitif, lisible et maintenable d'utiliser les balises <div> pour créer la structure de son site (même si faut jongler un peu avec les propriétés "Float" et "position" !). Donc, adieu les horribles tableaux !

Je suppose que c'est un menu horizontal.
Sa structure n'est pas bonne, trops de <div> tue le <div> !

Essais plutôt ça :




De plus, si l'élément est unique dans la page (comme ici le div "bande"), utilise une "id" plutôt qu'une "class".
En regardant ton fichier CSS, tu sauras tout de suite si l'élément est unique ou non.


EDIT : J'ai remarqué que tu écrivais :


le "div" est inutile. tu peux écrire tout simplement :


On indique juste que c'est une "class" ou une "id" (avec un point ou un dièse) puis le nom de la class/id.

Salut à toi,
content que tu es trouvé là le principal interet des divs.
N'oublie pas de valider des pages (html, php, htm et même css, voir plus grâce à un tuto dans la section Serveurs dans Sites Web).
Sinon pour la barre de défilement hoizontale, sache que moi, qui ai une résolution panoramique (1024x768) je ne supporte pas les site qui ont une telle barre, oui il y a des site qui ont une largeur superieure à 1024px, pas beaucoup, mais il y en a (par exemple sur le SdZ, dans les forums, les scripts prennent parfois la largeur de 2 écrans, ils ne doivent pas connaîre la touche entée ou espace)! Sache que quand je vois ça, soit je quitte le site, soit je fais précédent, même si c'est un sujet qui m'intéresse.
C'est pourquoi je m'éforce des coder mon site, qui je l'espère sera bien visité, de façon à ce qu'il soit le plus accessible possible.
Voilà, c'est mon coup de gueule envers les sites qui sont conçus sur des écran de cinéma !
Prends ça comme tu veux, mais même si seulement 10% des internautes possèdent une résolution de 800x600, ça fait quand même 2 300 000 internautes français (source:Journal du Net)
Allez tchuss

Remarque: Jean_Mich a raison au sujet du CSS (div.corps).

Cependant, il peut-être plus clair (au début en tout cas) d'écrire le type d'élément devant son nom, pour savoir à quoi on a affaire en lisant le code, c'est plus lisible...
Après, tout est question d'habitude.