Eléments décalés dans pages web

**cairn3000** · 07/06/2013, 23h42

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/

**ticoune** · 08/06/2013, 00h00

Bonjour,
commence par enlever ceci;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>

**rodolphebrd** · 08/06/2013, 09h48

Bonjour,
en augmentant la taille du tableau principal de 784px à 800px par exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<table bordercolor="#33448f" height="74" cellspacing="0" cellpadding="0" width="800" align="center" border="3">

**nicosmash** · 08/06/2013, 11h50

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!DOCTYPE html>
<html>
    <head>
        <style> 
            div
            {
                width: 115px;
                height: 100px;
                border:2px solid #000000;
            }
        </style>
    </head>
    <body>
        <div>
            Il fait beau aujourd'hui, le soleil brille, j'ai faim.
        </div>
    </body>
</html>

**rodolphebrd** · 08/06/2013, 12h19

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é.

**nicosmash** · 08/06/2013, 12h39

Ah bon

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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).

**rodolphebrd** · 08/06/2013, 12h55

Envoyé par nicosmash

je pensais que le problème venait d'une mauvaise définition de la taille de son tableau qui était trop grande

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.

Envoyé par nicosmash

Par contre les balises table ce n'est pas trop recommandé, il vaut mieux mettre des div

Tout à fait d'accord mais c'est un choix qu'il faut respecter...

**nicosmash** · 08/06/2013, 13h04

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

**cairn3000** · 08/06/2013, 16h21

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.

**rodolphebrd** · 08/06/2013, 16h48

Concernant Dreamweaver vous avez une section dédiée, dans le forum:http://www.developpez.net/forums/f43...s/dreamweaver/

**NoSmoking** · 08/06/2013, 17h49

Bonjour,

Envoyé par nicosmash

la première chose à faire de mettre des dimensions au conteneur et de les vérifier avec un border.

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.

@cairn3000
trop de TABLE tu les TABLEs, pas moins de 10 dans ton document pour la plupart imbriquées.

**Candygirl** · 08/06/2013, 18h59

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

).

Après, je rejoins les autres quant à l'utilisation des tableaux pour la création d'un site; c'est une pratique à bannir.

Envoyé par nicosmash

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.

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).

**rodolphebrd** · 08/06/2013, 19h46

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

Note : on parle de la mise en page en tableau mais que dire de la balise marquee

**Candygirl** · 08/06/2013, 20h49

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 ?

**rodolphebrd** · 08/06/2013, 20h53

Bon j'ai loupé quelque chose, pourtant le défaut de doctype m'est apparu tout de suite

**cairn3000** · 10/06/2013, 14h44

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

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

**rodolphebrd** · 10/06/2013, 14h51

http://xhtml.developpez.com/faq/?pag...#html_doctypes

**cairn3000** · 11/06/2013, 20h45

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 ???

**nicosmash** · 11/06/2013, 21h00

HTML5 :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE html>

Le nouveau doctype pour HTML5 est allégé et simplifié.

HTML4.01 transitional :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

- 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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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).

**rodolphebrd** · 11/06/2013, 21h37

Dans le cas du choix de html5 prévoir un script (html5shiv) pour IE8 et inférieur.

Eléments décalés dans pages web

HTML

Discussions similaires

Partager

Partager