J'ai retrouvé une technique pas très glamour qui consiste à utiliser le caractères espace insécable   pour rédiger les entêtes des colonnes des tableaux
exemple :

<th class="tac"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NOM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>


sinon en JQuery j'ai fait un poil plus compliqué mais tu n'as rien à changer dans la syntaxe de tes colonnes : le script recherche la class "w"+la_taille(ex:w115) dans tes cellules d'entête (th) et les cumules pour calculer la taille du tableau :

$('table').each( function() {
      var tw=0;
      $(this).find("th").each( function() {
             var regex = new RegExp("w[0-9]+");
             var laclassw = $(this).attr("class").match(regex);
             if (laclassw != null) {
                  $(this).css("width",parseInt(laclassw[0].substr(1)));
                  tw+=parseInt(laclassw[0].substr(1));
              }
       });
       $(this).css("width",tw);
});


Il y a aussi plus radical : n'utilise pas le tag <table>....

Bonne nuit,
GJboba
PS : "critique construction" ne veut rien dire aussi ^^
Mais est-ce que tu as retenu mes conseils ou ils étaient inutiles ? Sinon pour les vraies critiques, je pense que ton site est bien car :
- Design :
. L'harmonie des couleurs qui est bonne et sobre (simple et efficace),
. Tu devrais mettre un logo sur ton <header>pour qu'on sache bien que ce soit ton site, c'est une marque de signature un peu si tu veux,
- Contenu :
. Il y a pas mal de contenu à savoir que ton site n'est quand bêta et vient de sortir donc je ne peux pas t'en vouloir,
. Tes exercices et leçons sont corrects et complets, un très bon point que je souligne(ou que je met en italique) Smiley up
Modifié par Soldat8889 (15 Dec 2017 - 23:48)
J’ai présenté ci dessus mon site pour recevoir des critiques constructives, ce qui n’etait pas du tout le cas de la tienne...
Mon code n’est pas ergonomique ? Grand bien te fasse je travaille seule, le « mon compte » te dérange ? Ce n’est pas mon problème, il est là pour permettre la bonne « responsivité » (si je puis dire) du site...
Une critique construction passera toujours mieux qu’une liste exhaustive de défauts...

Cordialement Bastien.
Bonjour,
je souhaite faire un lien qui va vers une page de mon cv dans mon sous menu déroulant, de préférence en htlm et css, car je suis debutante. Je commence une formation en février.
Merci

<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="style.css"/>
	<title>Blog Christelle Gamiette</title>
</head>
<body>
<div class="entet">
	<h2>Bienvenu sur la présentation de mon site !</h2>
	</div>
<div class="menu">

		<ul>
			<li><a href="">Accueil</a></li>
			<li><a href="">Services</a>
				<ul>
					<li><a href="">Maquillages</a></li>
					<li><a href="">Les Soins</a></li>
				</ul>
			</li>
			<li><a href="">Projets</a>
				<ul>
					<li><a href="">Mon Cv</a></li>
					<li><a href="">Le Web</a></li>
				</ul>
			</li>
			<li><a href="">MonParcours</a>
				<ul>
					<li><a href="">Chromiste</a></li>
					<li><a href="">PAO/CTP</a></li>
				</ul>
			</li>
			<li><a href="">Contact</a>
				<ul>
					<li><a href="">Portable</a></li>
					<li><a href="">Mail</a></li>
			</li>
		</ul>
	</div>
		<h1>Christelle Gamiette<br/></h1>
		<h3>Opératrice PréPress PAO / CTP<br/>Retouches Photos / Chromiste</h3>
	<div class="trait">
	</div>
	<div class="element"></div>
<section>

		Un article si j'arrive à mettre l'image</br>
			<img src="photokris.jpg" height="200px" width="200px" alt="Photo"></br>
			<a href="https://www.google.fr"target="_BLANK">
		Lien Vers google</a>
		
</section>

		<aside>aside
		</aside>
		<footer>footer</footer>
</body> 
</html>
Bonjour,

Attention, je pense que la css content n'est pas interprétée par tous les lecteurs d'écran.

D'autre pas, je pense que tu utiles mal les aria-labelledby , mais n'étant pas un expert je mets des guillemet dans ce que je dis.
Prenons l'exemple ci-dessous que j'ai pris dans Accessibles form objects. :
<fieldset id="Textarea-Required">
    <legend>Textarea</legend>
    <label for="textarea">Required with restrictions</label>
    <textarea id="textarea" name="textarea-data" placeholder="from 5 to 500 caracters" minlength="5" maxlength="500" rows="2" autocomplete="off" aria-required="true" required=""></textarea>
    <span class="field-requirement" aria-describedby="textarea">field require</span>
    <span class="field-placeholder" aria-describedby="textarea">from 5 to 5000 caracters</span>
  </fieldset>

field require, from 5 to 5000 caracters ne sont pas décrits par id="textarea"
c'est id="textarea" qui est décrit par field require et from 5 to 5000 caracters
Bonjour Vincent,

Il y a un code étrange dans cette ligne
<a href="" [b]onclick="myFunction()"[/b]>


Je conseille plutôt
<td onclick="functionJS()">...</td>

ou même sur toute la ligne
<tr onclick="functionJS()"><td></td></tr>


On ne peut pas imbriquer une <div> dans un tableau, utiliser (il y a 8 colonnes à fusionner)
<tr><td colspan="8">...</td></tr>


Pour afficher/masquer des contenus successifs, on peut aussi utiliser les classes.

.hide {
  display: none;
}

et classList.remove('hide') ou classList.add('hide')

Un exemple en identifiant les lignes par "ligne1", "ligne2"...
et les lignes cachées par "ligne1detail", "ligne2detail".... auxquelles on attribue la classe "detail"

#testHidden {
  display: none;
  border:1px solid blue;
}
.hide {
  display: none;
}
td {
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding: 5px;
}

 function myFunction() {
        document.getElementById("testHidden").style.display = "block";
    }
function cacherdetails() {
	x = document.getElementsByClassName("detail");
	for (i = 0; i < x.length; i++) {
		x[i].classList.add('hide');
	}
}


<body>
 <table>
      <tr class="h40">
        <th class="w50 tac">ID</th>
        <th class="w155 tac">Nom</th>
        <th class="w155 tac">Prénom</th>
        <th class="w115 tac">Validité <br>Aptitude Médicale</th>
        <th class="w115 tac">Validité <br> Formation Amiante</th>
        <th class="w115 tac">Validité <br>Formation SST</th>
        <th class="w90 tac">Masque VA<br>(fit-test)</th>
        <th class="w90 tac">Masque AA<br>(fit-test)</th>
      </tr>
      <tr><td class="ligneVide" colspan="8"></td></tr>
      <tr class="h20"><td class="titreGroupe tac" colspan="8">Personnel Encadrement Technique</td></tr>
      <tr class="h40 ligne ligneWarning">
        <td class="tac"><a href="#">01</a></td>
        <td class="tac"><a href="javascript:myFunction()">W</a></td>
        <td class="tac"><a href="">G</a></td>
      </tr>
      <tr id="testHidden" onclick="document.getElementById('testHidden').style.display = 'none';">
      <td colspan="8"> Détails de la ligne 1 (cliquer pour fermer) </td>
      </tr>
      
      <tr  id="ligne3" onclick="document.getElementById(this.id+'detail').classList.remove('hide');">
        <td class="tac">Cliquer</td>
        <td class="tac">Une</td>
        <td class="tac">Cellule</td>
        <td class="tac">Quelconque</td>
      </tr>
      <tr class="hide detail" id="ligne3detail" onclick="this.classList.add('hide')">
      	<td colspan="8"> Détails de la ligne 3 (cliquer pour fermer) </td>
      </tr>
      <tr  id="ligne4" onclick="document.getElementById(this.id+'detail').classList.remove('hide');">
        <td class="tac">Ici</td>
        <td class="tac">la</td>
        <td class="tac">ligne</td>
        <td class="tac">suivante</td>
      </tr>
      <tr class="hide detail" id="ligne4detail" onclick="this.classList.add('hide')">
      	<td colspan="8"> Détails de la ligne 4 (cliquer pour fermer) </td>
      </tr>
</table>
<button onclick="cacherdetails()">Cacher tous les détails</button>
</body>

Modifié par hopla (15 Dec 2017 - 19:52)
J'ai juste fait un petit tour sur ton site web, c'est normal que tu n'utilises pas même presque pas du tout de class="nomdetaclasscss" car tu utilises des style="propriété: value;" directement sur ta balise html, ton site n'est pas ergonomique car dans mon compte et bah je n'ai pas de compte mais je vois qu'on peut en avoir un si on clique dans je n'ai pas encore de compte donc il vaut mieux avec des conditions PHP mettre se connecter ou s'inscrire. Quand on va sur l'accueil de ton site on ne sait pas ce qu'on peut faire écris un court résumé pour présenter ton site, les balises <b>, <u>, <center>, etc ... ne sont pas à utiliser car c'est le boulot du CSS et non du HTML, à la fin au lieu d'utiliser que des <br>*20 utilise plutôt une div avec une height de, par exemple, 500px.
Bref, voilà c'était une très courte liste de critiques sur ton code.
Bonjour,

Je sais pas si j'ai tout compris :
mais comme mon table est sur plusieurs tableaux, ils ne font pas la même taille .

Si tu mets un width:100% sur le table.
Tes colonnes devrais s'auto-adaptées et si le tableau est vraiment trop grand le scroll apparait....
.w115{width : 7.6923%; /* 100/13  13 nb cololonne */}

<div style="overflow-x:auto;">
<table width="100%" border="1">
      <tr class="h40 bts bbs">
        <th class="w115 tac">Nom</th>
        <th class="w115 tac">Prénom</th>
        <th class="w115 tac">Nom</th>
        <th class="w115 tac">Prénom</th>
        <th class="w115 tac">Nom</th>
        <th class="w115 tac">Prénom</th>
        <th class="w115 tac">Nom</th>
        <th class="w115 tac">Prénom</th>
        <th class="w115 tac">Nom</th>
        <th class="w115 tac">Prénom</th>
        <th class="w115 tac">Nom</th>
        <th class="w115 tac">Prénom</th>
        <th class="w115 tac">Nom</th>
      </tr>
       <tr class=" ">
        <td class="w115td">Nom</td>
        <td class="w115td">Prénom</td>
        <td class="w115td">Nom</td>
        <td class="w115td">Prénom</td>
        <td class="w115td">Nom</td>
        <td class="w115td">Prénom</td>
        <td class="w115td">Nom</td>
        <td class="w115td">Prénom</td>
        <td class="w115td">Noq sdj hd;jh kfjh ksjhsdkjf hdksfjhqs :kjfhdkjsh dsfdqs fffksdhfj kjqshfkj hkjsdhfksdhf kdsm</td>
        <td class="w115td">Prénom</td>
        <td class="w115td">Nom</td>
        <td class="w115td">Prénom</td>
        <td class="w115td">Nom</td>
      </tr>
</table>
</div>

Modifié par aliasdmc (15 Dec 2017 - 19:12)
Je me présente

Tout d'abord Bonjour, je me nomme Bastien, j'adore les sciences (avec tout de même une petite préférence pour la physique) ainsi que la programmation. Je suis, depuis peu, un web-développeur débutant (HTML/CSS, PHP, Python, MySQL etc...). Little-Académia est un projet ayant germé dans ma tête en Octobre 2016, mais manque de compétence de ma part, la construction de Little-Académia n'aura réellement commencé qu'en Juin 2017.

Me contacter

Mon Discord : Bastien#6591

Présentation du Projet

Little-Académia, de son nom, est un site web répertoriant bon nombres de fiches de révisions ainsi que d'exercices, écrits pas des étudiants (collégiens, lycéens...) pour des étudiants. Nous partons du principe que l'élève sera sans aucun doutes la personne la mieux placée pour aider un autre élève en difficulté (ou pas en difficulté, tout simplement). Little-Académia est déjà sorti en BETA, à l'adresse suivante : https://little-academia.fr

Nous recrutons

Nous recrutons donc des personnes, de tout âge, se pensant assez fort dans un certains domaine (physique, mathématique, français, biologie, philosophie etc...) pour faire découvrir cette matière à un autre élève. Aucune conditions n'est demandée, à part celle ci-dessus. Ainsi qu'un à trois cours par mois. Le rédacteur sera totalement bénévole, toute rémunération ne sera perçu qu'au moment où le site deviendra un minimum rentable. J'attend vos retours avec impatience.
Modifié par Bastien11 (15 Dec 2017 - 17:59)
RiRi_Zer a écrit :
J'aimerai modifié le ficher html directement mais quand je fais un clique droit puis edit cela s'ouvre world.
hum... Word ! Dans le menu contextuel du clic-droit tu as la commande "ouvrir avec..." que tu sélectionnes pour enfin choisir le programme que tu souhaites utiliser pour éditer ce genre de fichier. Tu peux même y cocher la case "utiliser par défaut".

Je doute que tu disposes d'outil adéquat donc si je peux me permettre de te suggérer l'utilisation de Notepad ++ qui est un très bon outil pour l'édition web et, cerise sur le gâteau, entièrement gratuit.
J'en profite pour te glisser à l'oreille "encodage en utf8 sans BOM" (une rapide recherche te donnera réponse à la question que tu te poses: Mais c'est quoi cette bête ?

RiRi_Zer a écrit :
Non plus comme un journal journalier j'écrit mes ligne et j'envois les donnés ensuite.
Je suis certain que dans ta tête cette phase était pleine de sens. Hélas je n'en saisis pas la portée...


RiRi_Zer a écrit :
En quoi consiste Wordpress ?
Un minimum de recherche sur ton moteur favori t'aurai déjà apporté réponse. Je doute que Wordpress soit LA solution qu'il te faille retenir au vu de son envergure ; je le citais à titre d'exemple et pensais que tu verrais d’emblée ce dont je parle ; mais je te conseille de te tourner vers un ersatz beaucoup plus léger. Aller pour t'aider dans ta démarche, voici un point de départ pour tes recherches:
Wikipedia - CMS: Principes généraux
Wikipedia - CMS: listing (non exhaustif)


Bonne lecture !
jp.bond a écrit :

merde, c'est le chainon manquant alors...
parce qu'utliser vw avec des seuils à la taille de police, c'est un peu le monde parfait non ?
Je pense que nous sommes nombreux à baver devant cette possibilité Smiley cligne Smiley smile Smiley biggrin


De quoi nourrir le rêve:
MDN - text-size-adjust


La réalité:
Codepen - Fluid Header


LA solution (pour avoir une migraine carabinée):
The math of CSS locks (en anglais)

Bonne lecture ! Smiley smile
Salut,

jp.bond a écrit :

J'ai bien compris qu'il y avait les cas extremes qui posaient problème, écran très grand ou fenètre très petite... mais je me disais qu'il suffisait de déclarer une taille de police minimale et maximale et que pour le reste on laissait faire vw ?
Je pensais que c'est à ça que servait vmin et vmax...
Non pas du tout, plus de précision sur cette page.

jp.bond a écrit :

Ce que je cherche, c'est un moyen de faire, par exemple :
h1 {
font-size: 3vw;
font-size minimale : 18px;
font-size maximale : 200px;
}
J'espere que j'ai été assez clair...
merci
Oui, très clair mais rien n'est prévu en Css pour appliquer des seuils à la taille de police.

Pour ce faire, il te faudra user des media-queries pour définir des tailles personnalisées en fonction de la taille du viewport et/ou du type de media.

A titre d'exemple:

/* Déclaration d'une taille de référence utilisée pour tous les médias et en toute circonstance (réécrite par la suite) */
h1 {
 font-size: 3vw;
}

/* Sur très petit support... */
@media (max-width: 320px) {
 h1 {
  font-size: 2rem;
 }
}

/* Pour l'impression... */
@media print {
 h1 {
  font-size: 18px;
 }
}

/* Pour les grands et très grands supports... */
@media (min-width: 1440px) {
 h1 {
  font-size: 8rem;
 }
}
Tu vois le principe ?


PS : Voir si CSS4 ne solutionne pas cette problématique. Le cas échéant la spec serait trop précoce pour passer en dév.
Modifié par Greg_Lumiere (15 Dec 2017 - 11:04)
Sans utiliser de langage côté serveur, ce que tu semble vouloir n'est pas possible.

Mais pourquoi donc tu ne modifie pas directement ton fichier html au lieu de passer par une copie au format texte ?

Après, si le but est d'alimenter une page comme on alimente un blog ou un forum te devras soit passer par du Php (couplé avec une base de donnée ou des fichiers de data). Auquel cas tu devras coder à la main chacune des fonctions qui te permettront de mettre à jour ta page.

Soit passer par un CMS, un gestionnaire de contenu tel que Wordpress ou autre (il en existe des tas en fonction de l'usage que tu en as).
25 Dernières réponses