I would like to highlight two sections of a page at the same time.
Currently I have the following:
<li class="langLI" style="list-style-type:none">| French Creole</li>
and I would like this footer link to anchor and highlight the following sections:
<p id="French"><strong>French Creole</strong><br />
ATANSYON: Si w pale Kreyòl Ayisyen, gen sèvis èd pou lang ki disponib gratis pou ou. Rele 1-321-268-6111. (TTY: 1-800-955-8771)</p>
<p id="French"><strong>French</strong><br />
ATTENTION: Si vous parlez français, des services d'aide linguistique vous sont proposés gratuitement. Appelez le 1-321-268-6111. (TTY: 1-800-955-8771)</p>
This is the CSS I am using to highlight the selected section:
#French:target{
background-color: #ffa;
-webkit-transition: all 1s linear;
}
Currently, it will anchor and highlight the French Creole. How can I highlight both sections?
Javascript way
<li class="langLI" style="list-style-type:none"><a onclick="mulselect()">| French Creole</a></li>
Calling a javascript function using onclick listener, getting all elements with French class as array and then iterating over them to change the style.
function mulselect(){
french=document.getElementsByClassName("French");
for( i in french ) {
french[i].style.backgroundColor = 'yellow';
}
CSS way "If they are at one place"
Note the change in href attribute, Now link targets to parent div of the elements to be selected.
<li class="langLI" style="list-style-type:none">| French Creole</li>
Wrap these p tags in a parent div with target id
<div id="targetarea">
<p class="French"><strong>French Creole</strong><br />
ATANSYON: Si w pale Kreyòl Ayisyen, gen sèvis èd pou lang ki disponib gratis pou ou. Rele 1-321-268-6111. (TTY: 1-800-955-8771)</p>
<p class="French"><strong>French</strong><br />
ATTENTION: Si vous parlez français, des services d'aidelinguistique vous sont proposés gratuitement. Appelez le 1-321-68-6111. (TTY: 1-800-955-8771)</p>
<p class="English"><strong>French</strong><br />
ATTENTION: Si vous parlez français, des services d'aidelinguistique vous sont proposés gratuitement. Appelez le 1-321-68-6111. (TTY: 1-800-955-8771)</p>
</div>
Now change the CSS to this
#targetarea:target .French{
background-color: #ffa;
-webkit-transition: all 1s linear;
Now you have more control over selection i.e. Only elements with class French will be highlighted
`
Related
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
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.
This question already has answers here:
How to wrap text inside to different paragraphs around image inside the first paragraph (<p> tag). (Content is inputted using CKeditor Plugin)
(5 answers)
Closed 4 years ago.
I am using CKeditor to input RichText.
Inside the text area of CKEditor, the text is perfectly wrapped over the image.
But the text is not wraping on the html page.
This is how it looks in CKeditor
But my html looks like this.
What may be I am missing here. ?
Here is the actual code snippet
<p>Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups under
<img alt="" src="/media/uploads/2018/09/27/sufs5o_fWCbPPM.jpg" style="float:right; height:1080px; width:420px">
Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. .
</p>
<p>s settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.</p>
<img align="right" hspace="3px" vspace="3px" alt="" src="/media/uploads/2018/09/27/sufs5o_fWCbPPM.jpg" style="height:1080px; width:420px">
Try this on
.floatright {
float: right;
clear: right;
position: relative;
margin: 0 0 0.5em 0.5em;
}
<div style="text-align:justify;margin:6px">
<img src="//upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Mandala1_detail.jpg/150px-Mandala1_detail.jpg" width="150" height="173"
class="floatright"
>
<p>
El arte budista tiene su origen en el subcontinente indio (actuales India, Bangladés, Nepal y Pakistán) en los siglos posteriores a la vida de Siddhartha Gautama, el Buda histórico, entre los siglos vi y v a. C. Más tarde, gracias al contacto con otras culturas, logró evolucionar y difundirse por el resto de Asia y el mundo.
Una primera etapa, llamada preicónica, se sitúa antes del siglo i d. C. y se caracteriza por no recurrir a representaciones directas de Siddhartha Gautama como el Buda Śākyamuni o de los budas míticos que se suponen existieron en eras pasadas. La etapa siguiente, icónica, tiene por el contrario a la imagen humana del Buda y los budas del pasado, del futuro y de otros universos como símbolo central de sus obras de arte.
Desde entonces, el arte budista se diversificó y evolucionó para adaptarse a las nuevas regiones en las que comenzaba a sumar adeptos. Se expandió hacia el este y el norte a través de Asia Central, para formar lo que luego fue clasificado como arte budista del norte —en contraposición al arte budista del sur, que surgiría en el sudeste de Asia. En India, el arte budista floreció e incluso llegó a influir en el desarrollo del arte hindú, hasta que el budismo casi desapareció alrededor del siglo x, con la expansión del hinduismo y el islam.
</p>
<p>
El arte budista tiene su origen en el subcontinente indio (actuales India, Bangladés, Nepal y Pakistán) en los siglos posteriores a la vida de Siddhartha Gautama, el Buda histórico, entre los siglos vi y v a. C. Más tarde, gracias al contacto con otras culturas, logró evolucionar y difundirse por el resto de Asia y el mundo.
Una primera etapa, llamada preicónica, se sitúa antes del siglo i d. C. y se caracteriza por no recurrir a representaciones directas de Siddhartha Gautama como el Buda Śākyamuni o de los budas míticos que se suponen existieron en eras pasadas. La etapa siguiente, icónica, tiene por el contrario a la imagen humana del Buda y los budas del pasado, del futuro y de otros universos como símbolo central de sus obras de arte.
Desde entonces, el arte budista se diversificó y evolucionó para adaptarse a las nuevas regiones en las que comenzaba a sumar adeptos. Se expandió hacia el este y el norte a través de Asia Central, para formar lo que luego fue clasificado como arte budista del norte —en contraposición al arte budista del sur, que surgiría en el sudeste de Asia. En India, el arte budista floreció e incluso llegó a influir en el desarrollo del arte hindú, hasta que el budismo casi desapareció alrededor del siglo x, con la expansión del hinduismo y el islam.
</p>
</div>
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.
I want to insert dynamic url from my title, it works but it displays 6*6 'cause of 2 differents loops... I don't know how to do differently...
I tried to use global variable but it's the same... (I have 6 Recipes)
Thanks !
Code XML :
<recette id="r1">
<titre>Cake au chocolat</titre>
<cat>dessert</cat>
<type/>
<nombre>6</nombre>
<listeingredients>
<ingredient q="150" u="g">chocolat pâtissier</ingredient>
<ingredient q="3" u="pièce">oeufs</ingredient>
<ingredient q="100" u="g">sucre en poudre</ingredient>
<ingredient q="60" u="g">farine</ingredient>
<ingredient q="1" u="cuillère à café">levure</ingredient>
<ingredient q="80" u="g">beurre</ingredient>
<ingredient q="50" u="g">poudre d'amandes</ingredient>
</listeingredients>
<cuisson>
<temps type="preparation">15</temps>
<temps type="cuisson">30</temps>
<temperature u="C">180</temperature>
</cuisson>
</recette>
<recette id="r2">
<titre>Brownies aux noix de pécan</titre>
<cat>dessert</cat>
<type/>
<nombre>6</nombre>
<listeingredients>
<ingredient q="200" u="g">chocolat à cuire</ingredient>
<cuisson>
<temps type="preparation">10</temps>
<temps type="cuisson">25</temps>
<temperature u="C">180</temperature>
</cuisson>
<instruction>
<etape>Faire fondre le chocolat avec le beurre, soit au bain-marie à feu doux, soit au micro-ondes sur programme 'décongélation'.</etape>
<etape>Quand c'est bien fondu, mélanger et ajouter le sucre, les oeufs un par un, la farine, puis les noix de pécan hachées grossièrement.</etape>
<etape>Bien mélanger et verser dans un moule carré de 20 cm (ou rectangulaire pas trop grand), chemisé de papier sulfurisé.</etape>
<etape>Mettre au four préchauffé à 180°C pendant 25 min.</etape>
<etape>Laisser refroidir et couper en carrés.</etape>
</instruction>
</recette>
</listerecettes>
Code xq :
{
for $titre in db:open("recettes")//recette//titre, $j in (6,2,1,5,4,3)
order by $titre
return
<a href="http://127.0.0.1:8984/rest/recettes?query=//recette[#id='r{$j}']">
<ul>
<li>
{
$titre
}
</li>
</ul>
</a>
}
</body>
</html>
After your comment I still don't really know what you want to achieve with $j as it is not useful at all and can simply be removed. So I guess you maybe want something else and not just a simple list ordered by thte title - If so, please clearify what you want to achieve. Otherwise, simply removing the $j and using the id attribute will work fine.
for $recette in db:open("recettes")//recette
let $titre := $recette/titre
order by $titre
return
<a href="http://127.0.0.1:8984/rest/recettes?query=//recette[#id='{$recette/#id}']">
<ul>
<li>
{
$titre
}
</li>
</ul>
</a>
Thank you but I had just found an other way ! :
for $titre in db:open("recettes")//recette//titre
order by $titre
return
<a href="http://127.0.0.1:8984/rest/recettes?query=//recette[#id='{$titre/..//#id}']">
<ul>
<li>
{
$titre
}
</li>
</ul>
</a>
I tested your code and it's correct but you've forget "$titre" after order by !