Bonsoir tout le monde,

Je suis actuellement en train de faire le carnet de voyage de zozor et la première impression que j'ai eu, c'était qu'il y avait beaucoup de "div", à tel point que je me suis demandée si tous étaient vraiment utiles, et pourquoi. Du coup j'ai trouvé une partie du code ci-dessous, où un "div" encadre un autre "div". Le premier "div" est-il vraiment utile ?

</div>

Par ailleurs dans le cours il est dit que le "id" ne pouvait servir qu'une seule fois et que c'était la différence avec "class". Du coup je ne suis plus certaine de comprendre car il y a énormément de "id" tout au long du code et aucun "class" (c'est contraire à ce qu'on a vu dans le cours non ?).

J'en profite pour demander si quelqu'un pouvait m'expliquer, dans le ficher css, la différence entre le ".logo" et "#logo" (entre le point et le dièse). Je sais que ça n'appelle pas la même chose mais parfois ce n'est pas claire, comme dans l'exercice pratique du troisième chapitre, où on écrit class="menu" et qu'on doit faire "#menu" dans le css et non pas ".menu" pour pouvoir définir les données. Pourquoi ?

Alors pour être précis :

id = unique 

class = peuvent être répétées à l'infini

on utilise de moins en moins les ID car les classes ont un avantage certain contrairement aux id même du côté de jQuery ou Javascript qui prend très bien en compte aussi les class au même titre que les ID.

Sémantiquement, l'ID doit être unique pour respecter les normes W3C et les class elles, peuvent être utilisées plusieurs fois sur la même page, et c'est pourquoi aujourd'hui on utilise plus souvent les class que les ID.

Dans les anciens codes, on mettait des ID à tout va sans comprendre réellement leur rôle. L'es ID sont surtout utilisés pour les ancres et d'autres petites actions mais c'est très limité. La class est ce qu'on utilise le plus de nos jours en plus des nouvelle balises <header><footer><section><article><aside> etc depuis html5. Donc on utilise moins de div class="" etc.

Pour ton exemple ou y a plusieurs div, il est possible parfois, et selon la configuration nécessaire du site, qu'il faille utiliser plusieurs div.

exemple pour les positions absolute de certaines div dans un cadre, t'es bien obligé d'avoir un cadre englobant le contenu en position:relative pour que les divs (ou images dedans) se place uniquement à l'intérieur de cette div englobante. Donc selon le CSS et la mise en page, il est parfois nécessaire de mettre plusieurs div même si de prim à bord, elles semblent pas utiles

J'espère que ça va t'aider un peu

-
Edité par stefde3 20 mai 2017 à 0:02:42

Hello,

Pour appuyer ce qui à été dis par  stefde3 

Le JS peut depuis longtemps cibler facilement les classes avec l'API Selector.

-> https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector 

-> http://www.blog.stephanejacquot.com//javascript/article/gerez-vos-evenements-avec-addeventlistener#querySelectorAll 

Cela évite aussi d'avoir des comportements de CSS étranges et d'avoir un ciblage peu pratique. Les Id et Class ont un poids (calcul de priorité) différent:

A lire absolument -> https://www.emmanuelbeziat.com/blog/principes-du-css-poids-des-declarations  

Et ce code est le tiens ?

<divid="banniere_image">
<divid="banniere_description">
Retour sur mes vacances aux États-Unis...
<ahref="#"class="bouton_rouge">Voir l'article <imgsrc="images/flecheblanchedroite.png"alt=""/></a>
</div>
</div>

A moins que ce soit un souci pour le poster , il faut respecter les espacements pour un code lisible, compréhensible par le navigateur et valide.

<div id="banniere_image">
<div id="banniere_description">
Retour sur mes vacances aux États-Unis...
<a href="#"class="bouton_rouge">Voir l'article <img src="images/flecheblanchedroite.png" alt=""/></a>
</div>
</div>

Enfin HTML5 propose une panoplie de balises sémantiques, autant en profiter, à utiliser de manière cohérente bien sûr,  sachant qu'un div ou span n'a aucun sens sémantique.

-> https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html 

Ex de structure -> https://www.alsacreations.com/article/lire/1374-html5-structure-globale-document.html 

-
Edité par Lucky13 20 mai 2017 à 0:31:49

Non c'est pas don code c'est celui d'un cours si je me rappelle bien avec un site test :

Le carnet de voyage de zozor

Elle a du les coller lors du copier/coller car ils sont bien séparés sur le site

Et en effet, c'est bien une div englobante en position relative pour la première div et la seconde en position absolute.

Merci à vous deux d'avoir éclairé un peu tout ça. Je ne comprends pas encore tout ce qui découle des explications, mais j'ai compris l'idée générale. Je pense que je manque juste beaucoup de pratique (j'ai commencé à apprendre il y a 3 semaines). Les tenants et aboutissants de toutes ces explications devraient faire davantage écho en moi avec le temps.

Si j'ai bien compris du coup, j'oublie les "id="" " et je mets donc des "class="" " qui est la nouvelle sémantique d'usage.

Cet après-midi je me lance, je vais tenter de faire une page principale de mon imagination. On verra bien ce que ça donnera, je sens déjà le casse-tête surgir. Dans la théorie c'est simple et compréhensible, mais dans la pratique, quand on a pas l'habitude, on manque parfois d'automatismes... et on a pas toujours les mêmes shémas de logique. Bref, on verra bien...

3 semaines c'est tout frais, relire un cours est toujours une bonne idée.

Les id ne sont pas à bannir, pour les #ancres, les classes étant effectivement plus pratique à maitriser côté CSS.

Le lien que je t'es donné m'a fait comprendre le pourquoi du comment, un déclic qui m'a fait revoir ma conception.

Je redonne le lien que je trouve capitale -> https://www.emmanuelbeziat.com/blog/principes-du-css-poids-des-declarations

Mais utiliser un ID pour le JS n'a rien d'absurde non plus.... 

Et bien oui, c'est la pratique encore et encore qu'il faut faire. Essayer de reproduire ton propre design ou la mis en page d'un site qui te plait est un bon exercice. N'hésite pas non plus à consulter le code source d'autres sites (avec l' inspecteur d'éléments de ton navigateur)

Ne pas rester que sur OC, exemple de sites que je consulte beaucoup : https://www.alsacreations.com/ 

: https://www.w3schools.com/html/default.asp 

Enfin bien que très bien fait et assez complet, le cours te donne les bases pour voler de tes propres ailes. Néanmoins il y en tout plein de chose à découvrir. Perso après 4 ans de pratique j'en apprend encore tous les jours, et pas plus tard qu'hier sur ce forum d'ailleurs... et ce n'est pas près de s'arrêter 

exemple au hasard -> https://www.alsacreations.com/article/lire/1397-html5-attribut-data-dataset.html 

ou -> https://www.alsacreations.com/article/lire/1615-Cest-quoi-le-Responsive-Web-Design-.html 

-
Edité par Lucky13 20 mai 2017 à 11:44:11

Je pense qu'il faut trop lui en donner non plus car trop d'infos va finir par la perdre et la décourager. Mieux vaut qu'elle maitrise déjà ce qu'elle veut faire et quand elle voudra faire des trucs en plus, elle en apprendra plus après

On oubli, quand on sait, qu'on a pas appris en 3 semaines et qu'on a mis beaucoup de temps à comprendre les choses. Perso je code depuis 2004 et je n'ai toujours pas tout acquis vu que ca change régulièrement.

Il est important,une fois qu'on maitrise le code, de se tenir informé  des avancés de ces mêmes codes

-
Edité par stefde3 20 mai 2017 à 11:52:05

Je suis entièrement d'accord avec toi, c'était comme je l'ai dit juste pour montrer qu'il y avait encore bien des choses à voir et surtout qu'il n'y a pas qu'OC dans la vie . Croiser les tutos/cours fait partie de ma méthode d'apprentissage, je trouve cela plus bénéfique.

Après oui on j'apprend toujours encore et encore, comme les microdata et schema.org.

Exemple, il y a 3 jours Lamecarlate parle de columns dans un sujet ? 

-> https://www.alsacreations.com/tuto/lire/1557-les-multicolonnes-en-css3.html 

Ce n'est pourtant pas des plus récent et jamais entendu parlé pour ma part... moi qui faisais cela avec des <ul> en inline-block, si j'avais su...

Et toi  avec ton <summary>, je connais ceci en c# mais rien à voir dans l'utilisation HTML. Bon découvrir prend du temps et comme je suis à fond sur le JS en ce moment je passe à côté de certaines choses aussi...

-
Edité par Lucky13 20 mai 2017 à 12:05:26

Merci beaucoup de votre aide ! Les liens sont super intéressants et ça me donne envie de tout apprendre (je me suis peut-être un peu trompée de vocation... ^^') mais parce que je ne veux pas me contenter de coder au hasard et d'obtenir des résultats approximatifs, je préfère ne pas sauter les étapes. Je pense qu'il vaut mieux de très bonnes bases bien acquises que pleins de connaissances maitrisées à moitié. Les connaissances ça viendra avec le temps, et pour l'instant je me bats avec mes flexbox. Je vous avoue que dans le principe j'ai compris, mais dans la pratique ça ne marche PAS !

Du coup j'en ai profité pour jeter un coup d'oeil au lien que tu m'a filé, Lucky13. Et je me demande si le fait que ça ne fonctionne pas ne découle pas directement d'un problème de poids ou de priorité. Je me dis que pour que ça ne fonctionne pas, j'ai dû indiquer malgré moi dans mon code des ordres contradictoires.

J'ai commencé ce matin vers 11h donc j'avance lentement hein, ne vous moquez pas

Voici mon code :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main_page.css" />
    <title>Plateforme d'écriture Anorway</title>
</head>
<body>
    <div id="bloc_page">
    <header>
        <h1>Anorway</h1>
    </header>
        <article class="categories">
            <div class="lecture_ecriture"><h1>Lecture & Ecriture</h1></div>
            <div class="concours"><h1>Concours</h1></div>
            <div class="critique"><h1>Critiques</h1></div>
        </article>
        <aside class="icones">
            <img src="connexion2.jpg" alt="Connexion">
            <img src="facebook.png" alt="Facebook">
            <img src="twitter.png" alt="Twitter">
        </aside>
        <footer>
            <a href="#">Nous contacter</a>
            <a href="#">Mentions Légales</a>
        </footer>
    </div>
</body>

Et voici mon CSS :

body
{
    background-image: url("fond.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

h1
{
    color: white;
}

.lecture_ecriture
{
background-color: rgba(29, 148, 199, 0.5);
color: white;
width: 30%;
}

.concours
{
background-color: rgba(107, 209, 235, 0.5);
color: white;
width: 30%;
}

.critique
{
background-color: rgba(22, 46, 107, 0.5);
color: white;
width: 30%;
}

.categories
{
display: flex;
flex-wrap: wrap;
}

J'essaie désespérément d'aligner mes box dans la section "article" mais je n'y arrive pas. J'ai tout essayé : virer les h1, encadrer le tout d'un second div, changer le class par un id pour donner plus de poids, mettre un width avec des pixel, rien à faire, le "display: flex;" ne fonctionne pas... Du coup je suis en train de chercher sur tt les forums à cause de quoi ça peut être dû mais j'avoue qu'il y a tant de problèmes différents que j'ai un peu du mal à trouver... Vous auriez des idées ?

-
Edité par Gwenouille Bouh 20 mai 2017 à 13:52:53

Depuis ce matin 11h, c'est trop pour t'aider.

je ne suis pas sûr d'avoir saisi ta demande, comme ceci ? -> https://jsfiddle.net/5qrpL5rp/3/ 

Si c'est un menu de navigation alors la balise <nav> + liste à puces <ul><li>... serait plus adapté. 

Si tu mets des titres h1 juste pour leur design c'est une erreur, il vaut mieux les utiliser (h1, 2, 3...) pour la suite du contenu textuel de la page. mais bon pourquoi pas, je ne suis pas non plus un expert en SEO (référencement)

-
Edité par Lucky13 20 mai 2017 à 14:24:07

Jusqu'à ce que tu m'en parles je n'avais pas pensé à le mettre comme menu de navigation, ais en fait ça pourrait en être un... Je vais tester !

En fait c'est juste que pour l'instant mes box son alignées verticalement et ne veulent pas s'aligner horizontalement ^^'

Et non j'ai mis h1 car ce sont des titres et qu'il se peut que je rajoute dessous des paragraphes ^^' J'ai hésité avec h2

-
Edité par Gwenouille Bouh 20 mai 2017 à 14:17:59

J'ai mis des images ->  -> https://jsfiddle.net/5qrpL5rp/3/

Merci de ton aide, je viens de regarder et je ne comprends toujours pas... toi ça s'aligne et moi toujours pas... Ca se met les uns sous les autres en colonne... Je suis perdue là...

C'est quoi le .foo {flex:1} ?

Bon je suis rassurée, ce n'est pas moi qui suis folle, je viens de tester ton css avec ton html ici, et donc sur iexplorer, le display: flex; ne marche pas, tes flexbox sont les unes sous les autres et non les unes à coté des autres ^^'

La grande question c'est "pourquoi" ?

-
Edité par Gwenouille Bouh 20 mai 2017 à 14:51:49

Parce que sur IE10 il faut utiliser des préfixes pour Flexbox : http://caniuse.com/#feat=flexbox

Ce que je te suggère : ne t'en préoccupe pas pour l'instant, teste sur IE11 ou Edge.

Merci Lamecarlate ! Je viens de passer 2 h à comprendre ça, mais au moins je suis soulagée !

foo est une classe pour les 3 éléments ( c'est bien le principe d'utiliser les classes non? ), je l'ai appelé ainsi pour l'exemple : en France on utilise souvent toto, en Anglais on voit souvent foo, bar etc...

Oui je m'en suis douté, ça évite de retaper le code 3 fois, malheureusement ça ne semle pas marcher sur mon code donc je dois mal l'utiliser ;(

Du coup comme mon problème de display:flex; est réglé, je me suis amusée avec les boites.

L'idée, c'est d'avoir des boites disposées un peu partout sur la page (dont 3 seules sont affichées). J'ai donc créé 9 div pour les 9 boites (comme ceci: )

1 -- 2 -- 3

4 -- 5 -- 6

7 -- 8 -- 9

et paramétré les hauteurs et largeurs de manières à ce qu'avec flex-wrap:wrap; elles s'empilent comme ci-dessus et sachant par ailleurs que je ne souhaite afficher que la box 1, 6 et 8 (les autres boites sont des boites invisibles). Ca marche ! Sauf que quand j'affiche la page à 80 %, ça ne marche plus... Du coup je voulais savoir s'il existait un moyen de figer ces positions une fois qu'elles sont établies ?

Moi je vais m'absenter pour profiter du soleil, mais il fait préciser ce que tu entends par : figer ces positions une fois qu'elles sont établies ?

Et n'hésites pas à utiliser jsfiddle (ou un autre outil en ligne de ton choix) pour montrer ce que tu fais.

ps: menu: "save"  la 1ère fois puis "Update" à chaque modifications. Tu obtiens un lien de ce style : https://jsfiddle.net/5qrpL5rp/3/ (ici 3 updates = 3 scripts différents et disponibles)

-
Edité par Lucky13 20 mai 2017 à 16:01:38

Merci pour le lien, je tente de vous montrer ça rapidement Pour l'heure, je vais faire comme toi je pense : aller me changer les idées