Version imprimable
Je suis un petit nouveau sur ce forum et je demande de l'aide...Quelqu'un pourrait t'il m'aider...
Tous les éléments de ma page web sont décalés, de quoi cela peut t'il venir ??? Alors que c'était bon avant, sauf si on changeait d'écran, de résolution. Comment faire en sorte que la page reste correct quelque soit la résolution, le type d'écran, etc...:(
Voici l'adresse de la page en question:
http://cairn3000.free.fr/
ainsi que celle-ci :
http://parc-naturel-alpes-maritimes.chez-alice.fr/
Bonjour,
commence par enlever ceci;
Code:
2
3
4
5
6
7
8
9
10
Bonjour,
en augmentant la taille du tableau principal de 784px à 800px par exemple :
Code:<table bordercolor="#33448f" height="74" cellspacing="0" cellpadding="0" width="800" align="center" border="3">
Bonjour,
Avant de poser des questions pensez à regarder la documentation.
De plus il y en a une qui convient très bien à ce que vous faites sur developpez : Placement div
Il faut toujours réfléchir en espace comme ceci.
L'HTML est un langage de structuration, puis le CSS est un langage de style donc en premier lieu il faut voir plein de rectangle.
Vous écrivez tout ce que vous souhaitez en HTML puis quand vous passez au CSS la première chose à faire de mettre des dimensions au conteneur et de les vérifier avec un border.
Sample
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Votre remarque ne correspond pas à la question posée puisque la structure du site est construite en tableau (balises : table, tbody, tr, td...), le recours à la création d'une règle CSS n'est pas forcément utile présentement, de plus votre lien qui fait référence à l'ajout d'une barre de menu verticale s'écarte du problème posé.
Ah bon 8O
Excusez-moi alors je pensais que le problème venait d'une mauvaise définition de la taille de son tableau qui était trop grande ... et comme le montre cette ligne :
Code:<table width="610" cellspacing="0" cellpadding="0" border="0" align="left">
De toute manière il faut toujours mettre des dimensions pour éviter d'avoir des mauvaises surprises, et taille de table ou div même combat le problème de taille.
Par contre les balises table ce n'est pas trop recommandé, il vaut mieux mettre des div (comme dis dans mon post précédent).
oui le problème vient de là et le rendu est correct sur firefox mais problématique sur chrome. Mais je n'ai pas compris que tu mentionnais cela.;)Citation:
Envoyé par nicosmash
Tout à fait d'accord mais c'est un choix qu'il faut respecter...Citation:
Envoyé par nicosmash
Aucun soucis on s'est mal compris alors ;)
On m'a toujours dit qu'il fallait placer des div et que table sert à faire des tableaux, je lui dis simplement et je respecte tout à fait son choix ;)
Merci pour vos réponses, je vais suivre vos recommandations et vous tiens au courant...Je travaille avec Dreamweaver et je ne connais pas trop bien le logiciel et le langage HTML. :roll:
Concernant Dreamweaver vous avez une section dédiée, dans le forum:http://www.developpez.net/forums/f43...s/dreamweaver/
Bonjour,mettre une border est la meilleur façon de "cassé" le rendu, sauf si un box-sizing est précisé, il me semble que le mieux est la background-color.Citation:
Envoyé par nicosmash
@cairn3000
trop de TABLE tu les TABLEs, pas moins de 10 dans ton document pour la plupart imbriquées.
La différence de rendu entre Firefox et Chrome provient de ton doctype incomplet. Du coup chaque navigateur interprète ton code en mode Quirks et donc avec des différences de l'un à l'autre.
Avec un docytpe correct et complet (par exemple <!DOCTYPE html>pour faire simple), tu rencontreras moins de différences d'un navigateur à l'autre (en l'occurence cela sera aussi foireux sur Firefox que Chrome :aie:).
Après, je rejoins les autres quant à l'utilisation des tableaux pour la création d'un site; c'est une pratique à bannir.
Les div et les tableaux n'ont pas du tout le même comportement par défaut puisque le div occupe tout l'espace horizontal à disposition dans son parent alors qu'un tableau établit sa largeur en fonction de son contenu. En général il vaut mieux éviter de donner des largeurs au div afin de ne pas rencontrer de problème en fonction des margin, padding et border (à moins de jouer sur la propriété box-sizing comme le relève No-smoking).Citation:
Envoyé par nicosmash
En fait j'ai testé avec un doctype ce matin et j'avais un rendu toujours correct sur Firefox et mauvais sur Chrome et apparemment ce serait un bug identifié:http://stackoverflow.com/questions/8...ome-vs-firefox
J'avais trouvé un lien plus explicite mais je ne parviens pas à mettre la main dessus :aie:
Note : on parle de la mise en page en tableau mais que dire de la balise marquee
Chez moi, avec la page actuelle, changer le doctype change le rendu sur Firefox :?
Edit: il me semble que le problème montré dans ton lien n'intervient actuellement qu'avec Firefox en mode Quirks. Il a probablement été corrigé depuis FF8 ?
Bon j'ai loupé quelque chose, pourtant le défaut de doctype m'est apparu tout de suite :cry:
Je vais me mettre au "travail" après avoir lu tous les posts...Je ne sais pas trop par où commencer. Chez moi sur mon ordi avec un écran 19 pouces et IE 8, le problème se pose (alors qu'avant non...?). Au boulot sur un écran de 17 pouces avec IE 8 c'est OK :roll:
Comment faire un doctype correct pour ne pas avoir de pb avec les différents navigateurs ???
Je vais en profiter pour revoir le langage html
Rectificatif :
Chez moi sur mon ordi avec un écran 19 pouces et IE 10 et non pas IE 8, le problème se pose (alors qu'avant non...?). Au boulot sur un écran de 17 pouces avec IE 8 c'est OK
Merci pour la réponse : Parmi les différents "doctype" lequel prendre ???
HTML5 :
Code:<!DOCTYPE html>
Le nouveau doctype pour HTML5 est allégé et simplifié.
HTML4.01 transitional :
Code:
2
- Le document est du HTML : il ne peut pas être traité comme du XML ;
- pas de balises propriétaires (<marquee>, <embed>, etc) ;
- la fermeture des balises area, dt, dd, p, li, thead, tfoot, colgroup, col, tr, th et td est optionnelle ;
- les balises peuvent être écrites en majuscules ou en minuscules ;
- pour les valeurs des attributs HTML, les guillemets peuvent être omis si la valeur de l'attribut ne contient que des lettres (a-z et A-Z), des chiffres (0-9), le caractère trait d'union (-), le caractère virgule (,), le caractère souligné (_) et le caractère deux-points (:) ;
- les attributs peuvent être minimalisés : on écrit <OPTION selected> au lieu de <OPTION selected="selected">
- les attributs et éléments de présentation suivants sont autorisés :
Eléments BASEFONT et FONT ;
Eléments CENTER, U, STRIKE et S ;
Attributs ALINK, BACKGROUND, BGCOLOR, LINK, VLINK, TEXT de l'élément BODY ;
Attributs BGCOLOR, HEIGHT, NOWRAP, WIDTH des éléments internes de tableaux ;
Attributs BORDER, HSPACE, VSPACE des images et objets ;
Attributs CLEAR, NOSHADE, SIZE, WIDTH des lignes de séparation HR ;
Attributs COMPACT, TYPE des éléments de liste, et attributs START, VALUE des listes numérotées ;
Attribut WIDTH de l'élément PRE ;
- l'attribut target des liens est autorisé ;
- les éléments IFRAME sont autorisés (mais pas FRAMESET ni FRAME) ;
HTML4.01 strict :
Code:
2
Comme en HTML4.01 transitional :
Mais, à l'inverse du HTML4.01 transitionnel :
- les attributs et éléments de présentation précédents ne sont plus autorisés. Ils doivent être remplacés par des styles CSS ;
- l'attribut target des liens n'est pas autorisé ;
- les IFRAME ne sont pas autorisés (ni FRAMESET et FRAME).
HTML4.01 frameset :
Code:
2
Les règles sont identiques à HTML4.01 transitionnel, mais l'élément BODY n'existe plus. Il est remplacé par l'élément FRAMESET, qui contient les éléments FRAME.
XHTML1.0 transitional :
Code:
2
Le document peut être traité comme du HTML (ce que vous allez faire en pratique) mais aussi comme du XML (ce qui est plus compliqué, et qu'Internet Explorer ne sait pas faire correctement dans ce cas).
Les règles de syntaxes sont différentes de celles du HTML :
- les balises propriétaires ne sont pas autorisées ;
- toutes les balises sans exceptions doivent être fermées ;
- toutes les balises et leurs attributs doivent être en minuscules ;
- les attributs ne peuvent plus être minimalisés : on ne peut plus écrire <option selected>. Il faut écrire uniquement <option selected="selected"> ;
- les guillemets sont obligatoires autour de toutes les valeurs d'attributs ;
Mais, exactement comme en HTML4.01 transitionnel (si ce n'est le fait de les écrire en minuscules).
XHTML1.0 strict :
Code:
2
Comme en XHTML1.0 transitionnel, les règles de syntaxe sont strictes :
Le document peut être traité comme du HTML (ce que vous allez faire en pratique) mais aussi comme du XML (ce qui est plus compliqué, et qu'Internet Explorer ne sait pas faire correctement dans ce cas).
Dans le cas du choix de html5 prévoir un script (html5shiv) pour IE8 et inférieur.