I have this code and I'm using this HTML validator to check it: https://validator.w3.org
When I've put this code through it, one error that appeared was:
Element arcticle not allowed as child of element main in this context
which I don't really understand.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vuestras mascotas</title>
</head>
<body>
<header>
<nav>
Inicio
Informacion
Formulario
Vuestras mascotas
FAQ
</nav>
</header>
<main>
<h1>Vuestras mascotas</h1>
<arcticle>
<h2>Estas son alguna de vuestras mascotas:</h2>
<section>
<h3>PatoLucas</h3>
<p>Subespecie: Anatino</p>
<p>Hola! Me llamo PatoLucas. Soy un pato de 4 años! Me gusta mucho nadar en la piscina y soy un poco
travieso jijiji. Me encanta graznar a las 05:00am y despertar a mi familia.</p>
<img src="imagenes/pato1.png" alt="PatoLucas" width="250" height="250">
</section>
<section>
<h3>Paquito</h3>
<p>Subespecie: Tardonino</p>
<p>Mi nombre es Paquito. Soy un pato que le encanta viajar en furgoneta con sus dueños. Mi ultima
aventura ha sido recorrernos todo Europa en furgoneta. Sigueme en mi canal de youtube
#paquitoViajerito y se mi nuevo amigo de aventuras.</p>
<img src="imagenes/pato2.png" alt="Paquito" width="250" height="250">
</section>
<section>
<h3>Lazo</h3>
<p>Subespecie: Mergino</p>
<p>Encantada :) me llamo Lazo. Soy una patita de Portugal que le encanta robar lazos. Soy mas bien
tranquilita, y me gusta quedarme en el sofa sentada junto a mi familia. Me gusta mas la comida de
mis dueños que la mia, pero no me suelen dar :(</p>
<img src="imagenes/pato3.png" alt="Lazo" width="250" height="250">
</section>
</arcticle>
</main>
<footer>
<p>© 2021 Tyler de Mier</p>
</footer>
</body>
</html>
Here's the full error message from validator.w3.org:
Error: Element arcticle not allowed as child of element main in this context. (Suppressing further errors from this subtree.)
From line 22, column 9; to line 22, column 18
>↩ <arcticle>↩
Here's line 23:
<main>
<h1>Vuestras mascotas</h1>
<arcticle> <-- Line 23
<h2>Estas son alguna de vuestras mascotas:</h2>
Very simply: "arcticle" isn't a valid HTML element name. It's probably just a typo. Try changing it (and the end tag) to article
For a django project i need to generate from the Django Website a kind of complex Word document.
I started using Docx-Template that do the job great but i encountered a problem:
For certain "spot" in the word template i need to brake Django rich texte (HTML) in something usable for Docx Template
So i went into transforming my richtext in a list that can have two types of elements (to keep the order of the blocs) : ["some paragraphs","('list',['first elt of the list for bullet','second','ect...")]
For now i have two function : one that break the HTML and one that transform it
My "HTML Breaking function" is like that :
def decoupe_html (raw_html):
soup=BeautifulSoup(raw_html,"html.parser")
arbre=[]
#decoupe en grand bloc HTML
for elt in soup:
arbre.append(elt)
print(arbre)
#On parcours chaque elt pour le transformer en truc compréhensible par Word dans une liste
for elt in arbre:
#recup du tag de début du "chunk"
tag=elt.name
#traitement des paragraphe de texte
if tag == "p":
texte=elt.text
place=arbre.index(elt)
arbre[place]=texte
#traitement des listes
elif tag == "ul":
list_elt=[]
enfants = elt.findChildren()
#on récupère tous les elt de la liste
for chld in enfants:
list_elt.append(chld.text)
place=arbre.index(elt)
arbre[place]=("list",list_elt)
return(arbre)
But i have trouble in "breaking" more complex list with multi level like for example this html :
<p>pfoizepfkjze</p>
<ul>
<li>blabla
<ul>
<li>bla2
<ul>
<li>bla3
<ul>
<li>bla4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>rebla</li>
</ul>
what should i change in my code to keep my data structure and get for example :
arbre = ['pfoizepfkjze',('list',['blabla',('list',['bla2',('list',['bla3',('list',['bla4'])])]),'rebla'])]
Thanks all for your help :)
Plain english sentence is:
While in 5th direct and ready for the downshift to 4th overdrive, push
the range preselection lever down.
Converts to French correctly as:
Alors que dans le 5ème direct et prêt pour le downshift à la 4ème
overdrive, pousser le levier de présélection de gamme vers le bas.
However, when including html (&textType=html), the phrase doesn't have the same meaning:
While in 5th direct and ready for the downshift to <span data-id="xyz123">4th overdrive</span>, push the range preselection lever down.
Translates to:
Alors que dans le 5ème direct et prêt pour le downshift à 4e
overdrive, pousser la gamme levier de présélection duvet.
The tags are considered an additional token in the sentence. Similar effect as punctuation, both having an effect on the translation.
Hello Stack Overflow community,
I have coded a list:
<h2 class="top-heading-big" style="text-align: center;">Déroulement de la Prestation</h2>
<ul style="line-height: 160%;">
<li class="presta"><a target="_blank" class="retour" href=/pages/contact title="Envoyer un email à Pascal pour recevoir un Audit" style="text-decoration: underline; color:#1990C6;">Prise de contact</a> avec votre besoin succintement décrit</li><br>
<li class="presta">Audit Vidéo de 10 min, Gratuit et Sans Engagement </li><br>
<li class="presta">Ajustement & Établissement du Devis</li><br>
<li class="presta">Réception du Paiement</li><br>
<li class="presta">Prestation livrée dans les meilleurs délais</li><br>
<li class="presta">Compte-Rendu en vidéo de 10 min, et réception du feedback client avec témoignage</li><br>
<li class="presta"><strong>Consulting Personnalisé Offert</strong> pour aller plus loin</li><br>
</ul>
<br>
It looks like the indentation is not regular among the different lines of my list.
In particular, the first and last lines have an extra indentation.
So I immediately thought, this is because of the and tags that appear right at the beginning of each lines.
I had none idea of this, could you confirm?
And if this a well-known fact, what would be the best solution to have an aquel indentation for each line?
I know I could put a new class for the first and last element, and then play with CSS to adapt this extra indentation, but I'm pretty sure there is something better.
PS: I'm using Google Chrome last version
Any help would be greatly appreciated on this matter :)
Sincerely, Pascal
URL: https://www.pascaldegut.com/pages/prestation-webdesign?variant=16668787376246
Just give it a try: remove the whitespaces in the first and last li content right at the beginning, please.
I've looked at your generated HTML Code of the given URL above. It's not the exact semantic. It's obviously not a valid html semantic. Change your code from:
<ul style="line-height: 160%;">
<li class="presta">
<a target="_blank" class="retour" href="/pages/contact" title="Envoyer un email à Pascal pour recevoir un Audit" style="text-decoration: underline; color:#1990C6;">Prise de contact</a> avec votre besoin succintement décrit</li>
<br>
<li class="presta">Audit Vidéo de 10 min, Gratuit et Sans Engagement </li>
<br>
<li class="presta">Ajustement & Établissement du Devis</li>
<br>
<li class="presta">Réception du Paiement</li>
<br>
<li class="presta">Prestation livrée dans les meilleurs délais</li>
<br>
<li class="presta">Compte-Rendu en vidéo de 10 min, et réception du feedback client avec témoignage</li>
<br>
<li class="presta">
<strong>Consulting Personnalisé Offert</strong> pour aller plus loin</li>
<br>
</ul>
to:
<ul style="line-height: 160%;">
<li class="presta"><a target="_blank" class="retour" href="/pages/contact" title="Envoyer un email à Pascal pour recevoir un Audit" style="text-decoration: underline; color:#1990C6;">Prise de contact</a> avec votre besoin succintement décrit</li>
<li class="presta">Audit Vidéo de 10 min, Gratuit et Sans Engagement </li>
<li class="presta">Ajustement & Établissement du Devis</li>
<li class="presta">Réception du Paiement</li>
<li class="presta">Prestation livrée dans les meilleurs délais</li>
<li class="presta">Compte-Rendu en vidéo de 10 min, et réception du feedback client avec témoignage</li>
<li class="presta"><strong>Consulting Personnalisé Offert</strong> pour aller plus loin</li>
</ul>
I've also removed the <br>s between the <li> elements. For the spacing purpose you have to define a margin to the <li> elements. To create a valid mark up you have to remove <br> as direct childs of <ul>. If you really need this sort of break you can use it like that: <li>some content<br></li>
Anyway, I recommend a margin-bottom for this behaviour.
look this image to see the problem
I develop a simple application (to start) in AngularJS and I have a worry because my drop down list that allows to choose the list of movies by style, displays the styles present several times in my JSON file. I have tried several solutions but nothing works and I block on it for a while, there is only that (and can be added by after) to finish my application and fill my JSON file.
JSON FILE :
[
{
"picture" : "la-malediction",
"title" : "LA MALEDICTION",
"year" : "1976",
"time" : "1h41",
"director" : "Richard Donner",
"synopsis" : "Robert Thorn est ambassadeur des États-Unis à Londres. Plusieurs décès tragiques et étranges ont lieu dans son entourage. Keith Jennings, un photographe et le père Brennan finissent par convaincre Thorn que Damien, son fils de cinq ans, un orphelin aux origines obscures qu'il a adopté à sa naissance à l'insu de sa femme qui venait de faire une fausse couche, n'est autre que l'Antéchrist.",
"style" : "Horreur",
"scenario" : "David Seltzer",
"production" : "20th Century Fox",
"music" : "Jerry Goldsmith",
"score" : "7.5/10",
"actors" : "Gregory Peck, Lee Remick, David Warner, Billie Whitelaw, Patrick Throughton, Harvey Stephens, Sheila Reynor, Martin Benson, Leo McKern, Tommy Duggan, Anthony Nicholls, Nicholas Campbell"
},
{
"picture" : "volte-face",
"title" : "Volte/Face",
"year" : "1997",
"time" : "2h18",
"director" : "John Woo",
"synopsis" : "1991 : le terroriste Castor Troy tente d'abattre son ennemi juré Sean Archer, agent du FBI. Au moment du tir, il rate Archer, mais abat accidentellement son fils. Six ans plus tard, Castor est repéré à Los Angeles. À la suite d'un violent affrontement à l'aéroport, Castor est plongé dans le coma par Archer. Ce dernier apprend que Troy a placé une bombe chimique en ville. Il prend le visage de Troy, grâce à une opération chirurgicale, afin d'infiltrer un pénitencier secret où est détenu Pollux, le frère de Castor, pour connaitre l'emplacement de la bombe. Entre-temps, Troy sort du coma et se fait lui-même greffer le masque d'Archer, puis tue tous ceux qui sont au courant de l'opération, volant ainsi le travail, la vie et la femme d'Archer. Livré à lui-même, privé de son identité, ce dernier décide de s'évader...",
"style" : "Thriller",
"scenario" : "Mike Werb, Michael Colleary",
"production" : "Paramount Picture",
"music" : "John Powell",
"score" : "9/10",
"actors" : "Joh Travolta, Nicolas Cage, Joan Allen, Alessandro Nivola, Dominique Swain, Gina Gershon, Nick Cassavetes"
},
{
"picture" : "la-fureur-du-dragon",
"title" : "La fureur du dragon",
"year" : "1997",
"time" : "2h18",
"director" : "John Woo",
"synopsis" : "1991 : le terroriste Castor Troy tente d'abattre son ennemi juré Sean Archer, agent du FBI. Au moment du tir, il rate Archer, mais abat accidentellement son fils. Six ans plus tard, Castor est repéré à Los Angeles. À la suite d'un violent affrontement à l'aéroport, Castor est plongé dans le coma par Archer. Ce dernier apprend que Troy a placé une bombe chimique en ville. Il prend le visage de Troy, grâce à une opération chirurgicale, afin d'infiltrer un pénitencier secret où est détenu Pollux, le frère de Castor, pour connaitre l'emplacement de la bombe. Entre-temps, Troy sort du coma et se fait lui-même greffer le masque d'Archer, puis tue tous ceux qui sont au courant de l'opération, volant ainsi le travail, la vie et la femme d'Archer. Livré à lui-même, privé de son identité, ce dernier décide de s'évader...",
"style" : "Kung-fu",
"scenario" : "Mike Werb, Michael Colleary",
"production" : "Paramount Picture",
"music" : "John Powell",
"score" : "9/10",
"actors" : "John Travolta, Nicolas Cage, Joan Allen, Alessandro Nivola, Dominique Swain, Gina Gershon, Nick Cassavetes"
},
{
"picture" : "la-fureur-du-dragon",
"title" : "La fureur du dragon",
"year" : "1997",
"time" : "2h18",
"director" : "John Woo",
"synopsis" : "1991 : le terroriste Castor Troy tente d'abattre son ennemi juré Sean Archer, agent du FBI. Au moment du tir, il rate Archer, mais abat accidentellement son fils. Six ans plus tard, Castor est repéré à Los Angeles. À la suite d'un violent affrontement à l'aéroport, Castor est plongé dans le coma par Archer. Ce dernier apprend que Troy a placé une bombe chimique en ville. Il prend le visage de Troy, grâce à une opération chirurgicale, afin d'infiltrer un pénitencier secret où est détenu Pollux, le frère de Castor, pour connaitre l'emplacement de la bombe. Entre-temps, Troy sort du coma et se fait lui-même greffer le masque d'Archer, puis tue tous ceux qui sont au courant de l'opération, volant ainsi le travail, la vie et la femme d'Archer. Livré à lui-même, privé de son identité, ce dernier décide de s'évader...",
"style" : "Kung-fu",
"scenario" : "Mike Werb, Michael Colleary",
"production" : "Paramount Picture",
"music" : "John Powell",
"score" : "9/10",
"actors" : "John Travolta, Nicolas Cage, Joan Allen, Alessandro Nivola, Dominique Swain, Gina Gershon, Nick Cassavetes"
}
]
<div class="jumbotron">
<input type="text" ng-model="query"/>
<br>
<br>
<select ng-model="styles" ng-options="media.style for media in medias track by media.style"></select>
<div class="order">
<p>
<label><input type="radio" ng-model="direction" /> Croissant</label>
</p>
<p>
<label><input type="radio" ng-model="direction" value="reverse" /> Décroissant</label>
</p>
</div>
</div>
<article class="media" ng-repeat="media in medias | filter : styles">
<div class="jumbotron">
<div class="media">
<h2 id="title-movie">{{media.title}}</h2>
<div class="media-left" >
<img ng-src="images/{{media.picture}}.png" alt="{{media.title}}" />
</div>
<div class="media-body" style="margin-top:15px;">
<p class="description">Style : {{media.style}}</p>
<p class="description">Année : {{media.year}}</p>
<p class="description">Durée : {{media.time}}</p>
<p id="infos"><a class="link-info" href="#/detail/{{medias.indexOf(media)}}">Plus d'info</a></p>
</div>
</div>
</div>
controller ANGULAR JS
Now I got your problem. Well, you can use the Angular UI filter called unique.
I couldn't find the original code, but I found this fork.
So, you just need to add the filter:
var mediaControllers = angular.module('mediaControllers', []);
/**
* Filters out all duplicate items from an array by checking the specified key
* #param [key] {string} the name of the attribute of each object to compare for uniqueness
if the key is empty, the entire object will be compared
if the key === false then no filtering will be performed
* #return {array}
*/
mediaControllers.filter('unique', function () {
return function (items, filterOn) {
if (filterOn === false) {
return items;
}
if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
var hashCheck = {}, newItems = [];
var extractValueToCompare = function (item) {
if (angular.isObject(item) && angular.isString(filterOn)) {
return item[filterOn];
} else {
return item;
}
};
angular.forEach(items, function (item) {
var valueToCheck, isDuplicate = false;
for (var i = 0; i < newItems.length; i++) {
if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
newItems.push(item);
}
});
items = newItems;
}
return items;
};
});
And then, you put the filter on your ng-options:
<select ng-model="styles" ng-options="media.style for media in medias | unique: 'style'"></select>
I tested it and it's working. I hope it solves your problem.
UPDATE:
You should also update the filter to match the selected item style instead the selected object.
<article class="media" ng-repeat="media in medias | filter : styles.style">