Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Centrage (encore !)

8 réponses
Avatar
M.H
Bonjour,
Je m'occupe du site de mon club.
Il avait été fait avec frontpage... et des "frames".

J'ai tout nettoyé ou récrit avec CSS mais il reste basé sur des frames :
http://www.achr.asso.fr/

J'essaye de supprimer les "frames" en utilisant du PHP avec "menu" à
gauche et "pages" à droite:
http://www.achr.asso.fr/site_new/Tempo/pages/accueil.php
Cà n'a pas l'air mal :).
(Seuls les liens "accueil" et "terrain" sont OK).

Mais si le contenu "page" de la bande de droite n'est pas assez large,
ce contenu n'est pas centré sur l'espace de droite comme par exemple :
http://www.achr.asso.fr/site_new/Tempo/pages/terrain.php

Je bataille depuis un bon moment sans succès pour centrer ce truc.
Merci de vos suggestions

A+


--
M.H.

8 réponses

Avatar
Michael DENIS
Le 14.04.2010 17:17, M.H a écrit :
Je bataille depuis un bon moment sans succès pour centrer ce truc.
Merci de vos suggestions



Après un rapide coup d'oeil, il semble normal que le contenu ne se
centre pas sur le reste de la page puisqu'aucune largeur n'est spécifiée
pour la div contenant. Elle s'adapte donc au contenu.

Une idée à valider : mettre width à 100% pour #droit en le positionnant
en haut à gauche et en lui donnant une margin-left de la largeur du
menu. Pour l'instant, il semble qu'il y a un peu trop de div, dont deux
div portant la même id (menu) !

Autre suggestion si vous utilisez Firefox : utilisez les extensions
"html validator" (pour corriger les erreurs bêtes qui apparaissent dans
votre code) et "firebug" et/ou "web developer" pour aider à mieux
visualiser votre mise en page (et beaucoup plus).

Bon courage.

--
Michaël DENIS
Avatar
M.H
Michael DENIS a écrit :
Le 14.04.2010 17:17, M.H a écrit :
Je bataille depuis un bon moment sans succès pour centrer ce truc.
Merci de vos suggestions



Après un rapide coup d'oeil, il semble normal que le contenu ne se
centre pas sur le reste de la page puisqu'aucune largeur n'est spécifiée
pour la div contenant. Elle s'adapte donc au contenu.



C'est là qu'est l'os !

Une idée à valider : mettre width à 100% pour #droit en le positionnant
en haut à gauche et en lui donnant une margin-left de la largeur du
menu. Pour l'instant, il semble qu'il y a un peu trop de div, dont deux
div portant la même id (menu) !




Çà ne marche pas.
Vu pour les deux "id", j'ai mis un "class".


Bon courage.




Merci.
Finalement j'ai réglé le problème en mettant une largeur 16% pour le
"menu" et 84% pour le panneau "droit".
Si l'écran est trop petit, le menu est un peu écorné mais bon...
C'est dommage qu'on ne puisse faire des largeur du genre 100%-200px.
A+


--
M.H.
Avatar
Sergio
M.H a écrit :

Merci.
Finalement j'ai réglé le problème en mettant une largeur 16% pour le
"menu" et 84% pour le panneau "droit".
Si l'écran est trop petit, le menu est un peu écorné mais bon...
C'est dommage qu'on ne puisse faire des largeur du genre 100%-200px.



min-width: ?

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Avatar
M.H
Sergio a écrit :
M.H a écrit :

Merci.
Finalement j'ai réglé le problème en mettant une largeur 16% pour le
"menu" et 84% pour le panneau "droit".
Si l'écran est trop petit, le menu est un peu écorné mais bon...
C'est dommage qu'on ne puisse faire des largeur du genre 100%-200px.



min-width: ?




Je n'ai pas de largeur mini pour le block de droite, je voudrais que ce
soit = 100% - largeur_menu en px.
Mais on ne peut pas faire, donc j'ai mis des % pour la largeur du menu
et du block de droite. Çà marche pas mal sauf si on réduit beaucoup la
fenêtre.
A+
--
M.H.
Avatar
Laurent vilday
M.H :

Je m'occupe du site de mon club.
Il avait été fait avec frontpage... et des "frames".



Jamais trop tard pour bien faire :)

Mais si le contenu "page" de la bande de droite n'est pas assez large,
ce contenu n'est pas centré sur l'espace de droite comme par exemple :
http://www.achr.asso.fr/site_new/Tempo/pages/terrain.php

Je bataille depuis un bon moment sans succès pour centrer ce truc.
Merci de vos suggestions



Commencer par bien nettoyer *et* valider le code HTML avant de vouloir
le styler.

Ce qui est actuellement fourni est presque du HTML valide, mais à une
exception près et une erreur de rendu quirks c'est pas bon et ça peut
potentiellement casser toute la structure du document. Tu as très peu de
chance d'obtenir un visuel cohérent *et* constant sur tous les
navigateurs avec ça.

Ci dessous le code HTML résultant de la page terrain.php (chaque ligne
est précédée des lettres CODE: et reformartée pour que j'y vois un peu
plus clair). N'hésites pas a demander plus d'informations.

CODE:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

* Un bon point, c'est pas du XHTML et ça c'est bien.

* Un mauvais point, ce doctype sous cette forme passe la page en mode de
rendu quirks et non pas strict. Un rendu strict étant l'objectif qu'il
faut IMO toujours se fixer. Le mode quirks est un résidu d'une période
sombre du web ou chaque acteur jouait dans son coin. Il est a proscrire
puisqu'il n'apporte rien si ce n'est des rendus incohérents et des
scripts qui cafouillent. A proscrire. Attention, ne pas confondre rendu
strict et doctype strict.

* Pour faire simple sans tout chambouler, utilise ceci à la place :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;

CODE:<HTML>
CODE:<HEAD>
CODE:<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">

* Je pense que le 8859-1 est une erreur parce que sur la page
<http://www.achr.asso.fr/site_new/Tempo/pages/accueil.php&gt; on y trouve
le caractère ¤ (euro) hors je crois me rappeler qu'il n'existe que en
8859-15 et pas en 8859-1. Olivier Miakinen pourra très probablement t'en
dire bien plus si tu as des soucis avec l'encodage. Pour ma part, je te
préconise d'utiliser "utf-8" ou au pire "iso-8859-15"

* Sinon, pourquoi mélanger HTML en majuscules et minuscules ? Certes ça
n'influence en rien le rendu, mais pour les yeux c'est laborieux, ça
pique un peu :)

CODE:<TITLE>A.C. du Haut-Rhin</TITLE>
CODE:<link type="text/css" href="../pages/styles.css" rel="stylesheet">
CODE:</HEAD>
CODE:<body>
CODE:
CODE:<div id="menu">

* Vu qu'il s'agit d'une liste, il me semble (sémantiquement parlant)
plus judicieux d'utiliser un <ul id="menu"> plutôt qu'un <div>. Mais bon.

CODE:<img src="../media/jpeg/logo.png" width="100%" alt="logo" title="">
CODE:<a href="../pages/accueil.php">Accueil</a>
CODE:<a href="../pages/activites.php">Activités</a>
CODE:<a href="../pages/devenir.php">Devenir pilote</a>
CODE:
CODE:<a href="../pages/tarifs-moteur.php">Tarifs</a>
CODE:<a href="../pages/flotte.php">La flotte</a>
CODE:<!-- <a href="../pages/telecharger. php">Télécharger</a> -->
CODE:<a href="../pages/disclaimer.php">Télécharger</a>
CODE:<a href="../pages/terrain.php">Terrain</a>
CODE:<a href="../media/videos/Video_flash.php">Vidéos</a>
CODE:<a href="../pages/regio.php">La Regio</a>
CODE:<a href="../passwd/passwd.php">Membres</a>
CODE:
CODE:
CODE:<!-- DEBUT DU SCRIPT --><script type="text/javascript">
CODE:var hlien=new Array();
CODE:hlien[0] = "qcmavion.php";
CODE:hlien[1] = "biageneral1.php";
CODE:hlien[2] = "biahistoireairespace1.php";
CODE:hlien[3] = "biahistoireairespace2.php";
CODE:hlien[4] = "biahistoireairespace3.php";
CODE:hlien[5] = "biahistoireairespace4.php";
CODE:hlien[6] = "biatechnique1.php";
CODE:hlien[7] = "biatechnique2.php";
CODE:hlien[8] = "biatechnique3.php";
CODE:hlien[9] = "biatechnique4.php";
CODE:hlien[10] = "biatechnique5.php";
CODE:
CODE:nlien = Math.round(Math.random() * (hlien.length - 1))
CODE:
CODE:document.write('<a '+
CODE: 'href="http://achr.asso.fr/Qcm/Creation/' +
CODE: hlien[nlien] + '">Jeux concours</a>');
CODE:</SCRIPT><!-- FIN DU SCRIPT -->

* Au delà du "document.write()" que j'exècre, seulement les navigateurs
avec javascript activé ont accès aux "Jeux concours" ? C'est dommage.

* Je te suggère ceci à la place :
<!-- a placer dans le <head></head>
ou mieux en faire un js externe au document -->
<script type="text/javascript">
var nlien;

function setLienConcours(ID)
{
var
node,
hlien = ["qcmavion.php",
"biageneral1.php",
"biahistoireairespace1.php",
"biahistoireairespace2.php",
"biahistoireairespace3.php",
"biahistoireairespace4.php",
"biatechnique1.php",
"biatechnique2.php",
"biatechnique3.php",
"biatechnique4.php",
"biatechnique5.php"];

if ( !nlien )
{
nlien = Math.round(Math.random() * (hlien.length - 1));
}
if ( document.getElementById )
{
node = document.getElementById(ID);
if ( node ) { node.href = nlien; }
}
}
</script>

<!-- a placer dans le <body></body> -->
<div id="menu">
<img src="../media/jpeg/logo.png" width="100%" alt="logo" title="">
<a href="../pages/accueil.php">Accueil</a>
<a href="../pages/activites.php">Activités</a>
....
<a id="concoursA"
href="http://achr.asso.fr/Qcm/Creation/qcmavion.php">Jeux concours</a>
</div>
<script type="text/javascript">
setLienConcours('concoursA');
</script>

CODE:<!-- <a class="w3c"
CODE: href="http://validator.w3.org/check?uri=referer&quot;
CODE: target="_blank">
CODE: <img src="../media/gifs/W3c.gif" border="0"
CODE: alt="bouton validation W3C"
CODE: title="Valid HTML 4.0 Transitional">
CODE:</a> -->

* T'as bien fait de mettre ça en commentaire, parce que ça l'est pas
vraiment encore. Presque mais à une ou deux erreurs près ça ne l'est pas :)

CODE:</div>
CODE:
CODE:<div style="position:absolute; top:0; left:0; font-size:10px">

* Je te conseilles de dégager ce style inline et de mettre plutôt une
classe ou au pire un id. Et vu qu'il ne s'agit en fait que d'un lien
javascript pour les jeux concours, il est IMO certainement préférable
d'en faire un simple <a></a>

CODE:<script type="text/javascript">
CODE:<!--

* Oublie les commentaires HTML dans les éléments <script>. C'est un
artefact de temps tellement anciens qu'il est devenu totalement inutile
en 2010.

CODE:document.write(nlien)

* Sniff, encore une fois, accessible que si javascript est activé.
Autant pour une application online, que javascript soit requis ça me
parait cohérent, autant pour une page web c'est une aberration.

CODE://-->
CODE:</SCRIPT>
CODE:<!-- <img src="../media/gifs/sapin_noel.gif" alt="noel"> -->

* Woohooo, on échappe au syndrome sapin de noël :)

CODE:</div>

* Je te suggère ceci à la place :
<!-- a placer dans <style></style>
ou mieux dans une css externe
comme par exemple ../pages/styles.css -->
#concoursB { position:absolute; top:0; left:0; font-size:10px }

<!-- a placer dans le <body></body> -->
<a id="concoursB"
href="http://achr.asso.fr/Qcm/Creation/qcmavion.php">Jeux concours</a>
<script type="text/javascript">
setLienConcours('concoursB');
</script>

CODE:<div id="droit">
CODE:
CODE:
CODE:<style="text-align: center;">
CODE:

* Ouch, voila l'erreur principale pourquoi ca valide pas. Qu'est-ce
qu'il fait ce truc ici ? C'est pas un <style>, c'est pas un attribut, je
sais même pas si c'est qqchose HTMLement parlant.

CODE:<strong> AERODROME DE MULHOUSE-HABSHEIM - 68170 RIXHEIM
CODE:<br>
CODE:&#9742; : 03 89 44 01 41&nbsp;&nbsp;
CODE:Fax : 03 89 44 29 76&nbsp;&nbsp;
CODE:E-mail :
CODE: <script type="text/javascript" language="JavaScript">

* language="JavaScript" c'est complètement obsolète. Restes avec le
type="text/javascript", c'est bien suffisant.

CODE:<!--

* bis repetita.
Les commentaires HTML sont inutiles dans un <script> en 2010.

CODE:var name = "contact";
CODE:var domain = "achr.asso.fr";
CODE:document.write('<a href="mailto:' + name + '@' + domain + '">');
CODE:document.write(name + '@' + domain + '</a>');
CODE://-->
CODE: </script>

* Là je peux comprendre pourquoi c'est un javascript seulement même si
je pense que la protection des mails par javascript est inutile et très
probablement bientôt dépassée. C'est ton choix de le rendre
innaccessible, ok ça se défend.

CODE: </strong>
CODE:
CODE:<table width="80%" align="center">

* humm humm. Ca se présente plutôt mal, je me rappelle pas avoir vu des
données tabulées sur cette page.

CODE:<tr align="center">
CODE:<!-- <td height="54"><div class="button">Habsheim</div></td> -->
CODE:<td>L'indicatif OACI de l'aérodrome est LFGB.
CODE:La carte d'approche à vue (VAC) est
CODE:<a href="...pdf" rel="external">ICI</a><br><br>
CODE:</td>
CODE:</tr>
CODE:<tr align="center">
CODE:<td>
CODE:Cliquez sur les b&acirc;timents
CODE:</td>
CODE:</tr>
CODE:<tr>
CODE:<td align="center">
CODE:<img src="../media/jpeg/lfgb.jpg" border="0"
usemap="#Club" alt="map"></td>
CODE:</tr>
CODE:<tr>
CODE:<td class="lien_menu" ><a href="histoire.php">Histoire</a></td>
CODE:</tr>
CODE:
CODE:</table>

* c'est malheureusement bien ce que je pensais. Pas de données tabulées.
Dégage le <table>, il est 100% inutile. On arrive a la même chose avec
ceci et un peu de css :

<p>
L'indicatif OACI de l'aérodrome est LFGB.
La carte d'approche à vue (VAC) est
<a href="...pdf" rel="external">ICI</a><br><br>
Cliquez sur les b&acirc;timents<br>
<img src="../media/jpeg/lfgb.jpg" border="0"
usemap="#Club" alt="map">
<a href="histoire.php">Histoire</a>
</p>

CODE:<map name="Club"><area ...
CODE:....
CODE:</map>
CODE:
CODE:</div> <!-- fin du droit -->
CODE:</body>
CODE:</html>

Voila mes "suggestions", n'hésites pas a appeler au secours si tu as besoin.

--
laurent
Avatar
M.H
Laurent vilday a écrit :
M.H :

Je m'occupe du site de mon club.
Il avait été fait avec frontpage... et des "frames".



Jamais trop tard pour bien faire :)


Commencer par bien nettoyer *et* valider le code HTML avant de vouloir
le styler.
...........



Un grand merci pour toutes ces suggestions constructives.
Comme dit, ce site a d'abord été écrit avec frontpage et j'ai "élagué"
par petits bouts, et il reste des traces (le code écrit en majuscule par
ex.).

Je suis d'accord avec tout ce que tu écris, html strict, liste <ul>,
paragraphe <p> au lieu de tableau, charset=iso-8859-15, etc.
C'est d'ailleurs ce que j'ai fait sur mon site perso.
air-et-terre.info
En partie seulement parce que c'est quand même du boulot et seuls les
"puristes" s'en aperçoivent. Ce qui est un peu décevant !

Pour le javascript, je suis moins d'accord pour l'abandonner, d'autant
plus que je ne pratique pas le php couramment :) .

Tu as fait un gros travail d'analyse, j'ai à faire toutes ces
corrections, il faut un peu de temps.
Merci encore et A+

--
M.H.
Avatar
Olivier Miakinen
Bonjour,

Je ne répondrai que sur un seul point (celui pour lequel, très
justement, Laurent m'interpelle). En ce qui concerne tout le reste,
soit je suis d'accord, soit je n'ai pas d'opinion, soit (pour la fin)
je n'ai tout simplement pas lu jusque là.

Le 17/04/2010 15:46, Laurent vilday a écrit :

CODE:<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">

* Je pense que le 8859-1 est une erreur parce que sur la page
<http://www.achr.asso.fr/site_new/Tempo/pages/accueil.php&gt; on y trouve
le caractère ¤ (euro) or je crois me rappeler qu'il n'existe que en
8859-15 et pas en 8859-1. Olivier Miakinen pourra très probablement t'en
dire bien plus si tu as des soucis avec l'encodage. Pour ma part, je te
préconise d'utiliser "utf-8" ou au pire "iso-8859-15"



Tu as parfaitement raison sur le fait que le caractère ¤ existe en
ISO-8859-15 et en UTF-8 mais pas en ISO-8859-1. Si ce caractère était
envoyé sous la forme d'un seul octet, malgré une déclaration en
ISO-8859-1, cela voudrait dire qu'en réalité il s'agit de CP-1252 et que
seul un « bug volontaire » (pour être compatible Microsoft) fait qu'il
s'affiche parfois comme voulu. Mais sur la page en question il est
représenté par un appel de référence &#8364; lequel n'utilise que des
caractères ASCII 7 bits : dans ce cas il n'y a aucun souci à déclarer
ISO-8859-1.

En conclusion : M.H. peut parfaitement conserver ce charset tel qu'il
est, si ça l'arrange. Mon avis est que le nettoyage du code sera une
tâche déjà suffisamment ardue sans qu'il soit besoin de se compliquer
encore plus l'existence avec des changements de charset.

Cordialement,
--
Olivier Miakinen
Avatar
Laurent vilday
M.H :

Pour le javascript, je suis moins d'accord pour l'abandonner



Oups, j'ai du mal exprimer le principe. Loin de moi l'idée d'abandonner
le javascript de ta page, mais plutôt de passer a une version où le js
serait un bonus et non pas un pré-requis.

--
laurent