PictureBox : code source complet HTML5/CSS3/JavaScript

PictureBox : code source complet HTML5/CSS3/JavaScript

Cet article s’adresse aux développeurs en herbe avec une base de connaissance en Html/CSS3 et JavaScript. Vous pouvez copier/coller le code avec facilité et le tester chez vous en le personnalisant à votre guise.

C’est une PictureBox réalisée en Html5/CSS3 et du JavaScript. Très simple mais encore faut-il connaître un peu le fonctionnement des « média queries« . Ce code source vous fera afficher une galerie photos originale et « responsive« , c’est à dire qu’elle sera adaptée à tous les supports tels que les PC, smartphones, tablettes tactiles etc…

Notez bien qu’il y a 4 fichiers CSS, 1 fichier JavaScript et bien sûr l’index (.html). Les images sont disponibles en bas de page dans un caroussel

Arborescence de vos fichiers

Arborescence - PictureBox - Rue de l'info

Fichier index.html

Fichier style.css

Fichier screen.css

Fichier smartphone.css

Fichier tablette.css

Fichier script.js

Dossier « images »

Clic droit > enregistrer l’image sous

Répondez

web CV : Code source complet HTML5/CSS3 (gratuit)

web CV : Code source complet HTML5/CSS3 (gratuit)

Ce tutoriel s’adresse à ceux qui ont des connaissances dans les languages HTML/CSS. Le but étant de vous aider à faire votre web CV adaptatif. On dit « responsive » en anglais… Il existe plusieurs supports comme les PC, les tablettes, les mobiles… Pour éviter la jalousie, il faut bien entendu que que votre web CV soit à la portée de tous les internautes quelque soit le matériel utilisé.

Nous vous donnons tout le code source nécessaire dans cet exemple de CV en ligne dont les fichiers CSS incluant les media queries.

Les requêtes média (media queries) permettent de modifier l’apparence d’un site ou d’une application en fonction du type d’appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d’écran ou la largeur de la zone d’affichage (viewport) par exemple).

Arborescence dans votre dossier webCV :

arborescence - Rue de l'info

Lancez-vous les amis, voici les fichiers à votre disposition pour la création de votre super web CV. (Vous pouvez Copier/Coller le code fournit)

Fichier index.html

Fichier cv.css

Fichier cvpc.css (tous écrans PC d’au moins 400px)

Fichier cvmob.css (CSS pour les mobiles)

Fichier normalize.css (Navigateurs)

Téléchargez les images ci-dessous (clic droit > enregistrez-sous ) et placez les dans le dossier « images »

Répondez

CSS comment centrer une image horizontalement et verticalement dans un bloc ?

Comment centrer une image horizontalement et verticalement dans un bloc ?

Horizontalement

Le centrage horizontal d’une image dans un un conteneur de type bloc, une div par exemple, ne pose pas de problème. Il suffit de définir la propriété CSS text-align à center sur le conteneur.

HTML :

CSS :

Résultat :

Rue de l'info

Verticalement

Le centrage vertical est plus délicat à mettre en place.

Il faut en effet modifier la propriété display de notre conteneur pour pouvoir utiliser la propriété vertical-align qui nous permettra de positionner verticalement l’image.

CSS :

Résultat :

Rue de l'info
Cette technique fonctionne sur Internet Explorer qu’à partir de la version 8. Une autre solution serait de mettre l’image dans un tableau, mais on perdra en sémantique
2 Replies
Rue de l'info by RDI © 2019
Advertisment ad adsense adlogger