Reprise du message précédent :

 
Je connais mais je ne sais pas l'utiliser dans toutes ses possibilités, il va falloir que je consulte quelques tutos concernant le sujet.
Concernant Bootstrap j'ai trouvé un site moins compliqué que celui de Bootstrap, plus à la portée des débutants.
Je voulais utiliser un bouton de mon cru, mais ça ne fonctionne pas, puisque Bootstrap a un bouton simplifié dans son fichier CSS.
En fait, malgré son fichier CSS, il faut créer aussi son propre fichier CSS, pour obtenir certains effets.
On avance ...
 

Je connais peu Boostrap, je suis plutôt allé sur le Framwork concurrent Foundation.
 
J'ai cet manie de prendre un truc qui finira derrière en utilisation, voir disparaitre (Betamax au lieu de VHS, Mootools au lieu de Jquery, etc.).  
 
Le but de ces Framework c'est justement de gagner du temps en ne se prenant pas la tête a styler un bouton.
Après ils donnent aussi les outils pour modifier leur template mais je penses qu'on vas pas te lancer la dedans tout de suite...
https://openclassrooms.com/fr/cours [...] conception
 
Il faut installer des paquets en ligne de commande pour avoir un pré-compilateur saas vers css, je ne crois pas que tu en soit arrivé à ce stade.
 
Par contre tu peux surcharger leur règle par les tiennes en utilisant un sélecteur de poids plus fort.
 
Par exemple si tu as une règle bootstrap de ce genre :

mais que tu n'en veux pas (de padding)
Tu peux écraser leur règle dans une autre feuille de style disant :

Ici j'ai mis une règle qui affecte tout les li ayant body comme parent (ce qui sera normalement toujours le cas    ), plus d'info sur les poids de sélecteur ici :
https://blog.organicweb.fr/comprend [...] egles-css/
ou plus complet ici :
https://www.zonecss.fr/cours-css/po [...] s-css.html

 
Je suis souvent "victime" de ma curiosité ... et de mon insatiable envie d'aller toujours plus loin ... on ne se refait pas    
Pour le poids des sélecteurs, j'ai survolé le sujet, il y a peu de temps, ça ne m'a pas intéressé sur le moment, peut-être à tort ... j'approfondirai.
Comme je ne publie pas mes pages sur le web, je ne m'inquiète pas d'être, ou non, placé dans le haut de la pile des navigateurs.
 
Dans la diversité des framework, j'ai choisi Bootstrap au hasard; comme il ressort souvent dans les commentaires, j'ai essayé.
 
Merci pour tes commentaires.
 

Je voudrais placer un conteneur bleu entre les tables, pour servir de séparateur, comme entre la première et la deuxième table.
Comme on peut le constater, entre la deuxième et la troisième table, le conteneur ne s'affiche pas à l'emplacement prévu ... Je ne trouve pas pourquoi ... Si j'essaie avec un autre conteneur et un background, il se place au même endroit.
Comment séparer la deuxième et la troisième table avec le même effet ?

Tu aurais un lien pour qu'on puisse voir le code, ma est en panne...

 
https://jsfiddle.net/0f9k5Leo/
 
  Si j'oublie de joindre le lien ...
Depuis mon dernier post, la situation a un peu évolué; j'ai réussi à placer "la bande" bleue entre chaque table. Le fait d'ajouter une table permet de placer la div concernée, sauf qu' une bande est plus haute
que les autres (par héritage ??).
Si c'est possible je voudrais les bandes de même hauteur. Sinon, ça peut rester ainsi.
 
Si j'essaie de créer ces mêmes bandes avec un conteneur et un background, ça ne fonctionne pas.
 
Après ça, j'aurai un formulaire avec un menu déroulant, des cases à cocher, des réponses à des questions, à sauvegarder sur un NAS.
Enfin, de quoi chatouiller un peu plus les neurones.

Attention a tes <tr>, <th>, <td>, etc. ils sont mal imbriqués parfois.
Et surtout tu as oublié de fermer des </table>...
 
Il faut faire attention à tous ces petits trucs quand tu fais du copier/coller.
C'est pour ça que tes contenus ne s'affichent pas au bon endroit.
 
Aussi tu as mis le même id pour tous les tableaux, ce n'est pas valide.
 
Ensuite tu pourrais t'appuyer sur le système de grid Bootstrap plutôt que ces tableaux, ça t'apportera un affichage plus responsive, c'est là tout l'intérêt de Bootstrap.
 
Sémantiquement tu devrais aussi plutôt tout imbriquer dans un seul "container-fluid", dans lequel tu utiliserais des "row" par exemple.
D'ailleurs tu peux aussi sans problème continuer à utiliser les bonnes sémantiques HTML5 (<section>, <article>, etc.) avec Bootstrap.

EDIT : bon ben grillé, mais exactement les mêmes remarques, comme quoi.
 
Salut,
 
Comme d'habitude, tes vieux démons font surface, il y a des erreurs de syntaxe, des tables pas fermées, des tr manquants, des tbody pas fermés. De plus chaque table a la même id, ce qui est interdit, une id est unique.
version corrigée : https://jsfiddle.net/wcq7gs6p/

 
Les <tr>, <th>, <td>, ça me   je m'embrouille vite, et à force de retoucher le code, d'essayer un truc, un autre, je finis par me perdre ...
Je recommencerai (si, si) avec les grid, pour voir si je m'en sors mieux.
OK pour le seul "container-fluid", pourquoi faire compliqué ...
Pour l'id, j'ai oublié la régle ...
Merci pour tes remarques.

 
    Je suis un misérable ver de terre   Mon principal défaut est probablement de vouloir finir trop vite quand je sature, et je fais des c....s    
Cela dit, pour un premier essai avec Bootstrap, je ne suis pas trop déçu, vu qu'à un moment je ne voulais pas continuer à l'utiliser.
Tu sais, les "vieux" ont du mal à changer leurs habitudes (rooohh!)    
Allez, on continue.

D'ailleurs on y viendra peut-être, qui sait, peut-être que tu finiras par utiliser un IDE qui t'empêchera de faire ce genre d'erreurs.

 
Je viens de tester Codingground en ligne, il est surprenant, ou alors je ne suis pas doué ... Teste le, pour rire.
J'ai téléchargé Sublime Text, qui me parait bien. Le problème est toujours l'anglais limité chez moi, et je n'ai pas l'intention de m'y mettre; faut pas trop charger la mule.
Avec Visual Code, beaucoup d'anglais aussi, j'ai abandonné.

Visual Studio Code, c'est aussi en français, ça se configure, évidemment tu as des plugins en anglais, mais l'anglais tu peux pas y couper.

 
Je sais bien que tu as raison, dans tous les domaines cette langue s'est imposée, mais je ne vais pas reprendre mon parcours scolaire et professionnel qui sont celui d'un autodidacte, avec les lacunes que cela peut comporter.
Ça ne m'a pas empêché de travailler sur des avions américains, une clé étant une clé et un plan un plan, ces avions ont continué à voler.    
 

Ce que je veux dire par là, c'est que Visual Studio Code (ou VSCode) est de base multilingue et la version francaise de propose déjà une traduction complète de l'ensemble de l'application, et pour ce que tu as à faire (du HTML/CSS) c'est à mon avis le meilleur éditeur de code qui se présente.
J'ai testé des dizaines d'éditeurs en 20 ans, et VSCode est vraiment celui qui m'a le plus séduit, car il a été adopté par une grande majorité, il a une quantité astronomique d'extensions, mis à jour tout le temps, et il est suivi par une grosse boite (microsoft).

 
J'ai téléchargé la version 2022, sur le site de Microsoft  il n'y a pas d'icône sur le bureau;  sur le disque C: il est bien installé, avec un fichier 2022, mais pas d'icône .exe; je le démarre à la manivelle ?    
Je vois que le fichier s'appelle visual studio .... donc, pour moi, ça n'est pas VSCode.  
 
 

je crois que tu n'as pas du télécharger le bon fichier, c'est pas possible...
 
C'est ici que ça se passe :  
https://code.visualstudio.com/download#
 
Tu prends "System Installer" -> x64
 
Et là il va te télécharger un installer pour windows 64 bits.
 
et si tu ne trouve pas, c'est ce lien qui te permet de télécharger directement l'installer :  https://code.visualstudio.com/docs/?dv=win64
 
et normalement celui-ci te fourni une icone sur ton bureau

 
J'ai désinstallé Visual Studio, et téléchargé VSC sur un autre site, c'est OK. J'ai téléchargé le langage en français, au moins je comprends mieux les menus.
Je vais commencer à ouvrir un fichier que j'ai déjà créé et  commencer à "bricoler".

 
La page d'accueil s'ouvre bien, les liens affichent les pages concernées..
Est-ce qu'on peut envoyer le fichier sur le site, comme le fait JSfiddle ?
J'ai vu qu'il y a une fonction partager, je n'ai jamais utilisé, je ne suis pas partageur ...  

Quel autre site, je t'ai donné le site officiel.
 
Je suis prêt à parier que tu es tombé sur les premiers résultats de google qui sont des pubs et qui t'emmènent parfois sur des sites de merde.

 
Oui, tu m'as donné le site officiel, j'avais déjà téléchargé ... Sur une autre page Microsoft, pas Google.
C'est bon, ça fonctionne bien.
 

Sur mes pages, j'utilise un bouton de Bootstrap, il y a un curieux problème d'affichage de ce bouton. Selon la dimension des photos, il se positionne un peu où il veut; ça n'est pas si grave, je donne les mêmes dimensions aux photos qui s'affichent dans mes pages.
Par contre le bouton s'affiche bien en bas, à droite de la photo, mais sur le côté gauche, il y a une "portion" de bouton qui s'affiche sous la forme d'un carré, sans inscription, à la couleur du background. Comme si le bouton  voulait s'afficher en plusieurs parties ...
Est-ce que cela peut provenir des photos centrées ?
Je suis entrain de regarder la personnalisation des templates de Bootstrap, je vais devoir visualiser le tuto en plusieurs fois pour le digérer ...
Le problème est plus visuel que fonctionnel; ça fonctionne correctement pour le retour à la page d'accueil.

<img src=“”/>

<img src=“”/>

 
  OK merci; pour l'instant, je ne vois pas d'avantage à utiliser Bootstrap ... peut-être le manque d'habitude et de connaissance de ce framework ?

https://jsfiddle.net/a1rqf3ws/
 
Pour éviter les répétitions à chaque bouton, ou autres éléments ...

Non, je n'ai pas disparu ...
Je voudrais créer un lien à partir d'une liste déroulante en HTML et CSS, pour afficher une autre page lorsque je sélectionne une option de la liste.

En javascript je n'y parviens pas ...
Comment fait-on pour coder par dessus l'image de fond ?
Là, le code se poursuit en bas de l'image.

Gné ?!
Ne devrais tu pas mettre ton contenu dans ta section si tu veux que l'image soit sous celui-ci...

 
Heeuu, been oui... Il y a des jours où ça patine encore ... Merci.  
Je vais tester ton bout de code.

Code :
 
    document.querySelector('#pet-select').addEventListener('change', function(){
        document.location.href = this.value;
    });
 
Désolé, je ne vois pas où le placer ... pas dans <style>, pas dans <section> ...

C'est du Javascript, ça se met dans des balises <script></script>
Et à la fin de ta page pour être sur que tes nœuds html soit chargé (sinon il ne va pas trouver ton select avec document.querySelector('#pet-select')).

 
OK, c'est tout bon. Encore un grand merci pour tes explications qui me sont bien utiles pour avancer.

Après un background-image, est-il possible de placer du texte par dessus cette image sans hériter de l'opacité de celle-ci (opacity: 0.6 ?
Opacity ne fonctionne pas pour le texte, dans ce cas ...

 
Curieux, il s'affiche un smiley que je n'ai pas souhaité, à la place de la parenthèse de fermeture ... combinaison de touches ?

Il y'a plusieurs façon de faire mais quand un conteneur à une opacity < 1 tout les éléments inclus en hérite, tu auras beau leur remettre une opacity à 1 si leur parent est à 0.5 ils seront à 1*0.5.
Imagine ce code :

https://jsfiddle.net/prk5sL2b/
Chaque enfant est à 0.75 de son parent...
 
Dans ton cas il te faut un bloc conteneur en position relative, un enfant avec le contenu text et opacity 1 et un autre avec ton fond image en position absolute et opacity réduite.
https://jsfiddle.net/prk5sL2b/1/
(J'ai mis une min-height:100vh; sur le parent pour vraiment couvrir l'affichage mais ce n'est pas forcément nécessaire, ça dépend de ton contenu...)

; + ) =>

 
Piiooouuu, quel boulot pour traduire le texte en anglais   je plaisante; tout comme les lorem ipsum, je ne cherche pas à comprendre.
OK pour la combinaison de touches, on va trouver la parade.
L'affichage en backgrond-image est particulier, difficile d'avoir un véritable plein-écran, en fonction de la taille de l'image.
Même si je redimensionne avec un log de retouche d'image, il y a souvent un ascenseur, que j'annule en diminuant la taille de l'image, et tant pis pour le plein-écran.
Alors qu'avec les photos d'un APN, on arrive à obtenir un plein-écran impeccable, en cropant l'image et en faisant une copie d'écran.
Ca n'est pas la même application.
Bon, je vais suivre tes indications pour les opacités différentes.
 

N'oublie pas de penser "responsive", tu voit peut être ton site avec un écran sur ton pc en 1920 x 1080px, mais un autre internaute le verra avec un vieux portable en 1024x768 ou avec une grosse config et un écran QHD (bien qu'en général, dans ce cas, le navigateur est rarement en plein écran;-P ), sans oublier le smartphone en 375 x 812px (ou l'inverse si il le tourne à 90° ^^).
 
Bref, essaye de prévoir une image de fond "relativement carré", en assez grosse résolution, et en utilisant la proprité background-size:cover;
 
Tu as aussi la possibilité de modifier les images en ciblant les résolutions via des media query :
https://web-dev.translate.goog/opti [...] r_pto=wapp

 
Il est vrai que, comme je ne "publie" pas mes "réalisations", j'ai tendance à négliger le responsif, parfois par facilité, j'en suis bien conscient.
Je vais approfondir l'affichage des images en responsif.
 
 
 

 
Lorsque je passe le point d'arrêt en tablette, j'ai deux images qui s'affichent, une en dessous de l'autre. Idem pour le mobile.
J'ai adapté la taille de l'image à 480px pour le mobile, 1024 px pour la tablette, et 1920px pour le PC. L'affichage sur PC est OK.
Je ne comprends pas pourquoi, les mq sont mal formulées ?

J'abandonne l'opacité; mon œil de photographe ne supporte pas ces images "brumeuses"    
Selon les couleurs de l'image, il faut adapter la couleur du texte pour qu'il soit bien visible. Blanc sur blanc, ou autre, c'est pas top.

Il faut ajouter background-repeat: no-repeat dans les mqueries. Ben oui, après coup, ça parait évident.

Il y'a des solutions pour ça tu peux soit mettre une couleur rgba (rgb + alpha donc plus ou moins transparente) pour unifier le fond de ton bloc text ou mettre du text shadow a l’opposé de ta couleur de texte.
Exemple ici : https://jsfiddle.net/72p5mzgw/1/