Je ne sais pas si “débutant” est le qualificatif qui convient puisque dans le temps j'avais appris, grâce au SdZ, jusqu'au PHP pour réaliser un premier site, mais il se trouve que c'était il y a bien longtemps (en 2006 pour être exact) et depuis j'ai bien perdu en plus des normes qui ont changé.
J'ai acheté un nouveau nom de domaine. Pour le moment je veux simplement m'en servir pour afficher mon CV.
J'ai d'abord réussi à coder une page qui me convienne sur ordinateur, mais dont l'affichage sur smartphone n'était pas bon.
En bidouillant un peu j'ai produit un code qui convient sur smartphone mais pas sur ordinateur. Le hic est que pour cela j'ai dû changer l'image de place dans le header, elle est avant les titres (h2 et h4) sur le fichier cv.comp.html, et après ces mêmes titres sur le fichier cv.mobi.html. Évidemment le CSS aussi diffère un peu d'un fichier à l'autre.
Voici mes fichiers :
cv.comp.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Sylvain Saboua</title>
<link href="style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
#header { min-height: 274px; padding-bottom: 0.5em }
#header * { text-align: center }
#header img { max-width:200px; height:auto; float: left; margin: 0 }
#header h2 { margin-top: 1em; margin-bottom: 0.5em }
#header h4 { margin: 0 }
#header p { max-width:570px; margin: 2em 0 auto auto }
@media (max-width:800px) {
}
section h3 { text-align: center }
</style>
</head>
<body>
<nav>
<a href="/">saboua.xyz</a>
<a href="" id="lang_nav" class="lang_en">English</a>
</nav>
<main>
<section id="header">
<img src="media/idpic.jpg" alt="Photo d'identité">
<h2>Sylvain Saboua</h2>
<h4>Esthète, Hacker, Auteur</h4>
<p>
Bienvenue sur cette page qui me sert de <abbr title="Curriculum Vitæ">CV</abbr>.<br>
Fort de mon parcours chaotique, je ne savais pas où trouver une plate-forme à même de
réunir l'ensemble de mes intérêts. J'envisage d'utiliser ce site pour
centraliser mes travaux, que l'on peut actuellement consulter via mon
<a href="http://linktr.ee/Sylvain">arbre de liens</a>.
</p>
</section>
<section>
<h3>2024</h3>
<ul><li>Mise en ligne du site saboua.xyz</li></ul>
</section>
<section>
<h3>1992</h3>
<ul><li>Naissance à Pessac en Gironde</li></ul>
</section>
</main>
</body>
</html>
cv.mobi.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Sylvain Saboua</title>
<link href="style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
#header { min-height: 274px; padding-bottom: 0.5em }
#header * { text-align: center }
#header img { max-width:200px; height:auto; display: block; margin: auto }
#header h2 { margin-top: 1em; margin-bottom: 0.5em }
#header p { max-width:570px; margin: 2em 0 auto auto }
@media (min-width:767px) {
header img { float: left; position: absolute; top: 3.5em; display: inline; }
}
section h3 { text-align: center }
</style>
</head>
<body>
<nav>
<a href="/">saboua.xyz</a>
<a href="" id="lang_nav" class="lang_en">English</a>
</nav>
<main>
<section id="header">
<h2>Sylvain Saboua</h2>
<h4>Esthète, Hacker, Auteur</h4>
<img src="media/idpic.jpg" alt="Photo d'identité">
<p>
Bienvenue sur cette page qui me sert de <abbr title="Curriculum Vitæ">CV</abbr>.<br>
Fort de mon parcours chaotique, je ne savais pas où trouver une plate-forme à même de
réunir l'ensemble de mes intérêts. J'envisage d'utiliser ce site pour
centraliser mes travaux, que l'on peut actuellement retrouver via mon
<a href="http://linktr.ee/Sylvain">arbre de liens</a>.
</p>
</section>
<section>
<h3>2024</h3>
<ul><li>Mise en ligne du site saboua.xyz</li></ul>
</section>
<section>
<h3>1992</h3>
<ul><li>Naissance à Pessac en Gironde</li></ul>
</section>
</main>
</body>
</html>
style.css
html { width:100%; height: 100%; margin:0; padding:0; font-family: sans-serif }
body { max-width: 800px; min-height: 100%; margin: auto; padding-top: 0.5em ; line-height:1.1em }
nav { padding: 0; text-align: center }
#nav_home { display: block }
#lang_nav { float: right }
nav * { color: gray; text-decoration: none }
nav a:hover { text-decoration: underline }
Comment faire pour fusionner les deux pages de la manière la plus simple et la plus propre possible ?
Ceci sera dans ton style.css et reconnaitra la largeur de l'écran qui utilise ton site.
Si ton css ressemble à
body{
background-color: blue
}
@media (max-width: 768px) {
body {
background-color: red
}
}
sur écran avec une taille d'écran plus grande que 768px de largeur, la couleur du fond de ta page sera bleue, et en rouge si écran inférieur à 768px.
Grace à cela tu pourras modeler exactement ta page HTML comme tu le souhaites, sur toutes les tailles d'écran ! Mais n'hésite pas à regarder le cours que je t'ai envoyé, il est très bien expliqué !
Bonne journée à toi et bon courage pour ton site !
Je me suis débrouillé en utilisant deux balises img avec deux classes css, une .comp (affichée sur ordinateur / largeur d'écran de plus de 615px) et une .mobi (largeur d'écran de moins de 614px).
<section id="header">
<img class="comp" src="media/idpic.jpg" alt="Photo d'identité">
<h2>Sylvain Saboua</h2>
<h4>Esthète, Hacker, Auteur</h4>
<img class="mobi" src="media/idpic.jpg" alt="Photo d'identité">
<p>
Bienvenue sur cette page qui me sert de <abbr title="Curriculum Vitæ">CV</abbr>.<br>
Fort de mon parcours chaotique, je ne trouvais pas de plate-forme à même de
réunir l'ensemble de mes intérêts. J'envisage d'utiliser ce site pour
centraliser mes travaux, que l'on peut actuellement consulter via mon
<a href="http://linktr.ee/Sylvain">arbre de liens</a>.
</p>
</section>
#header { min-height: 274px; padding-bottom: 0.5em }
#header * { text-align: center }
#header img { max-width: 200px; height:auto }
#header h2 { margin-top: 1em; margin-bottom: 0.5em }
section h3 { text-align: center }
@media (min-width:615px) {
.comp { float: left; margin:0 }
.mobi { width:0; height:0; display:none }
#header h4 { margin: 0 }
#header p { max-width: 570px; margin: 2em 0 auto auto }
}
@media (max-width:614px) {
.mobi { display: block; margin: auto }
.comp { width:0; height:0; display:none }
#header p { margin: 2em auto 0 auto }
}
section li p { font-style: italic; width:60%; margin-left: 20% }
Commencer par l'affichage sur mobile en premier permet de ne mettre que l'essentiel de son site Web. Et c'est également plus facile d'ajouter des éléments d'un petit vers un grand écran que gérer dans l'autre sens.
Bizarre pour un faux débutant comme tu dis de ne pas avoir essayer le mobile first. Une raison à cela ?
Je répond même si tu as mis le sujet en résolu, désolé !
Meme si ça fonctionne comme tu l'as marqué, si tu avais jeté un coup d'oeil plus appronfondi sur les media query, tu aurais vu que tu n'as pas besoin de 2 balises images.
Selon tes query tu peux modeler la même image, de 2 façons différentes en fonction de la taille de l'écran. T'évitant indéniablement ce genre de chose
.mobi { width:0; height:0; display:none }
Sur un petit site comme le tien cela ne serait pas délirant de faire comme ça, mais ça reste des ressources gaspillées. Ton code n'est pas optimal et tu finiras par t'y perdre au fur et à mesure que ton site avancera.
Vraiment renseigne toi sur ce que je t'ai mit ça ne peux pas faire de mal à ton site !
CristianoRolando a écrit:
Commencer par l'affichage sur mobile en premier permet de ne mettre que l'essentiel de son site Web. Et c'est également plus facile d'ajouter des éléments d'un petit vers un grand écran que gérer dans l'autre sens.
Et je soutiens ce qu'à écrit CristianoRolando. Le développement mobile-first est une pratique vraiment utile et intuitive dès que tu commences a comprendre l'utilité du responsive.
Je ne sais plus très bien si j'ai développé pour mobile ou ordinateur en premier, plutôt en parallèle je crois mais mon site est auto-hébergé donc je peux directement voir le résultat de mon code via mon navigateur en local, ceci explique peut-être cela. Je prends note de la remarque de dev d'abord pour les écrans plus petits.
J'ai bien compris l'utilité du responsive et de la balise media, j'aurais au moins réussi à faire un seul fichier HTML –ce qui est un bon début–, est-ce que c'est en rester au CSS2 de croire que la propriété img { float: left } aurait dû afficher correctement sur ordinateur ? Je vais tâcher de me renseigner sur les propriétés CSS pour afficher ma page correctement en responsive mais je ne sais pas trop par ou commencer ...
merci à vous
PS j'avais "résolu" le problème avant la première réponse mais j'ai trainassé pour poster mon code
EDIT: j'ai essayé à nouveau, en cherchant du côté des float: et display: ... rien à faire : pas possible de se débarrasser du doublon <img>. En soi ce n'est pas très grave, ça n'alourdit le code que d'une ligne et dans les deux cas il s'agit du même fichier source .jpg, mais c'est vrai que ça fait un peu tache (pour un puriste comme moi 😊). Si vous avez la solution, je suis preneur de conseils ou d'indications.
Si jamais, tu peux voir directement via ton navigateur ce que ton site te donnerait sur mobile en appuyant sur F12 (ou CTRL+Shift+I) avec ce petit bouton.
Ensuite je te conseillerait quand même d'oublier certaines bases ou mécanismes que tu avais pu apprendre, si j'ai bien suivi ça remonte jusqu'à 2006.. Beaucoup de choses ont pu changer depuis ce temps et il serait bénéfique pour toi de t'accommoder aux nouvelles normes de développeent, dont CSS3. Après, ça ne reste que mon avis personnel
sylvainsab a écrit:
Je vais tâcher de me renseigner sur les propriétés CSS pour afficher ma page correctement en responsive mais je ne sais pas trop par ou commencer ...
Pour cela, tu peux commencer a regarder n'importe quel cours de openclassroom qui gère le designing avec CSS ou encore les cours basiques de HTML / CSS. Ça devrait suffire pour ton site qui reste assez simple dans l'ensemble.
En effet j'ai vu qu'on pouvait utiliser les outils pour développeurs dans le navigateur (Brave sous MacOS et Firefox sous openbsd pour ma part), c'est bien utile notamment pour faire des éditions succinctes du code et voir immédiatement ce que cela peut donner sans avoir à passer du navigateur à l'IDE et altérer son fichier à chaque fois.
Certes je ne connais pas toutes les avancées du CSS3, mais en soi mon problème partiellement ou temporairement résolu par l'emploi de deux balises <img> est très basique et aurait tout aussi bien pu se poser à l'époque du CSS2 : il s'agit de disposer sur la gauche d'un bloc une image qui dans le code HTML est située immédiatement après les deux balises titre, h2 et h4, le bloc étant un <section> donc l'équivalent d'un banal <div> en HTML4/xHTML, il me semble. C'est d'ailleurs la solution de départ (deux balises <img>) qui m'a été suggérée sur stackoverflow.
En fait je suis confus parce que j'ai bien la forte impression que ce “problème” devrait se résoudre avec un banal float:left ! Je vais continuer à chercher, notamment via les cours du site comme tu le suggères, mais si tu as la solution n'hésite pas
linktr.ee/Sylvain
linktr.ee/Sylvain
linktr.ee/Sylvain
linktr.ee/Sylvain