27219 sujets

CSS et mise en forme, CSS3

bonjour
je reçois a l'analyse de mon CSS (Grid)
"l élément wrapper n'est pas autorisé en tant qu'enfant de l'élément body dans ce contexte".... je ne comprends pas cette demande de WC3 ??
Une idée , merci d'avance
Modérateur
l'element wrapper ? , bah surement une faute d'attention et une class devient aussi le conteneur :

extrait de ton code source : <wrapper class='wrapper'> <== un element wrapper avec une class wrapper , probablement un div ou section dans l'idée premiere . Smiley cligne
Merci vous deux, je suis preneur, car pourquoi il n'acceptes pas cette syntaxe Grid ... je sent que vous allez me faire avancer dans la compréhension de ce mécanisme Smiley cligne
Je mets l'essentiel ..
(en HTML5)

<body id='lbody'>
<wrapper class='wrapper'>
<bandeau class='bandeau' style='background: url(paysage.jpg) center / cover no-repeat;width:100%;'>
</bandeau>

et son CSS

body { 	background-color:#577bac;font-family:"Times New Roman", Times, serif;color:#feffff; font-size:22px;margin:0;border:0;}
.bandeau {
  grid-area: bandeau;   
  width:100%;
  margin: 0 auto; 
  overflow:hidden; 
}
.menu {
  grid-area: menu;
  width:90%;
  margin: 0 auto; 
  overflow:hidden;
}
.content {
  grid-area: content;
  width:90%;
  margin: 0 auto;  
  overflow:hidden;
}
.footer {
  grid-area: footer;
  width:90%;
  margin: 0 auto;  
  overflow:hidden;
}


.wrapper {
  display: grid;
  grid-template-areas:
        "bandeau"
        "menu"
        "content"
        "footer";
}
.wrapper {
  background-color: #577bac;
  width:100%;
  margin: 0 auto;  
}
.wrapper > div {
  background-color: #577bac;
  color: #ffffff;  
}
.bandeau {display: flex;justify-content: center;margin: 0 auto;}
.menu {display: flex;justify-content: center;width:90%;margin: 0 auto;}
.menu a {  text-decoration: none; margin-left:10px; color: #ffffff;}
.menu a:hover {color: #ff5555;	}
.content {text-align:center;width:90%;margin: 0 auto;   }
.footer {text-align:center;width:100%;margin: 0 auto;   }

Merci d'avance Smiley cligne
Modérateur
Et l'eau,

<wrapper> et <bandeau> ne sont pas des éléments html standards. Soit tu les remplaces par des <div>, soit tu crées des web components. Mais par contre, je ne vois pas vraiment l'intérêt pour ton cas d'un web component.


<bandeau-info> .... </bandeau-info>



class BandeauInfo extends HTMLElements{
//.... etc...
}

customElements.define('bandeau-info', BandeauInfo );
Merci de ta réponse, mais bien que simple de structure, mon site est pour certaines pages assez complexes, et je trouvais juste par intérêt pas mal de tester Grid et Flex dessus .
WC3 me dit cela, mais à mon sens mon site marche mieux qu'avant et il est plus simple , mais je comprends que pour toi cela ne justifiait pas cette démarche.
Par contre qu'il s'appelle footer ou pied-de-page ne me gêne pas , mais dans les deux livres de Raphael, il y a des liens sur des sources qui font ainsi ?
mon site est (tu dois le connaitre) http://www.fox-infographie.com/
Merci d"avoir pris le temps de regarder cela.
As tu une autre méthode pour lier ma déclaration de Grid a des Div (ID ou Class ?) c'est sans doute cela que j'ai mal compris ? Smiley confused
Administrateur
Jean-Pierre-Bruneau a écrit :
"l élément wrapper n'est pas autorisé en tant qu'enfant de l'élément body dans ce contexte".... je ne comprends pas cette demande de WC3 ??

Hello,

Comme te l'ont dit les autres avant moi, je pense que la seule explication possible est que le W3C te fait comprendre que l'élément "wrapper" n'existe pas en HTML, tout simplement. Ton code est donc invalide car tu dois te limiter aux balises existantes.

Si ce n'est pas ça, je ne vois pas non plus.

EDIT : en effet, quand je vois la structure de ton site, je remarque plein d'éléments inventés (donc non valides) : wrapper, menu, bandeau, content, etc.

EDIT : je confirme que le problème vient bien de là...
upload/1581600198-1-wrapper.png
Modifié par Raphael (13 Feb 2020 - 14:23)
Meilleure solution
Merci à tous, et à toi Raphael
Alors je vais revenir a des DIV Smiley confus je trouvais cela plaisant car ces termes sont causant pour nous depuis HTML5, mais bon, je revois ma copie au plus vite, et merci à toi d’être passé.
Administrateur
Hello,
Jean-Pierre-Bruneau a écrit :
Alors je vais revenir a des DIV Smiley confus

Tu n'es pas obligé de te limiter aux "div". Depuis HTML5, il existe une panoplie d'éléments nouveaux et dotés de sens : https://developer.mozilla.org/fr/docs/Web/HTML/Element

Jean-Pierre-Bruneau a écrit :
je trouvais cela plaisant car ces termes sont causant pour nous depuis HTML5

HTML5 a ajouté plein de nouveaux éléments "causants", mais tu ne peux quand-même pas inventer tes propres éléments Smiley cligne
Administrateur
Jean-Pierre-Bruneau a écrit :

C'est curieux, toutes mes pages (plus de 100 ) ont le même CSS
le même doctype+menu+bas de page.. et il est validé ??

Le validateur CSS ne peut valider... que le CSS Smiley cligne

Si tu as une "balise" <wrapper> dans ton HTML mais que tu n'en fais référence nulle part dans ton CSS :
- ton HTML sera forcément invalide (balise inventée)
- ton CSS pourra être tout à fait valide

Bon week-end Smiley smile
Mille mercis encore !
Je vais corriger tout cela, c'est long mais cela prends tournure ! Smiley cligne
Bon week-end à toi de même
_______________________réédite_________________________
Trop bien mon site validé même en HTML+CSS en fait c'est grâce à ma structure 90% de mes pages sont avec un include de
Doctype
Menu
bas de page
alors voila mon site est tout beau tout neuf ! j'avais en plus du Grid-Layout du Flex, et j'en ai remis la ou je pouvais ... je peux sans doute trouver encore desFlexBox à enrichir ..et cerise sur le gâteau, sur portable le menu est commandé 100% CSS plus de Javascript... merci encore à vous !
Modifié par Jean-Pierre-Bruneau (21 Feb 2020 - 16:49)