Centrage (encore !)
M.H
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.
Michael DENIS
> 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
M.H
> 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) !
>
Çà 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.
Sergio
> 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
M.H
> 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".
>> 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.
Laurent vilday
> 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">
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> 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"
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:☎ : 03 89 44 01 41
CODE:Fax : 03 89 44 29 76
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â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â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
M.H
> 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.
Olivier Miakinen
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> 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 € 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
Laurent vilday
> 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