I am working on a puzzle given in below link
Semantics
It has 3 questions:
Update the website's HTML to make use of semantic elements so that:
The classless outer div element is replaced with a more appropriate element.
The divs with the image and caption classes are replaced with self-contained content elements.
The divs with the lorem-ipsum and description classes are replaced with elements, so that by default only the contents of the description element are shown. When the contents of the description element are clicked, the visibility of the rest of the lorem-ipsum element is toggled.
I tried adding class to outer div as <div class="header"> and <div class="container">. Adding a Div section to contain the image and caption and also other ways to solve the puzzle, but none of them are working, the test cases are not successful.
Can you please tell me what is the right approach for this puzzle.
Take a look at:
https://www.w3schools.com/html/html5_new_elements.asp
for example:
use <main> instant of the <div> over all elements
use <figure> instant of the <div> for the image
use <figcaption> instant of the <div> for the image caption
....
I used following semantic elements and it worked.
use <main> instead of <div> over all elements
use <figure> instead of <div> for the image
use <figcaption> instead of <div> for the image caption
use <details> instead of <div> for lorem-ipsum class
use <summary> instead of <div> for description class
The correct response is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Semantics</title>
</head>
<body>
<section>
<h1>Lorem Ipsum</h1>
<figure class="image">
<img src="https://www.testdome.com/files/resources/12362/5d766d82-359a-42e3-b8e7-36fc20fa8395.png" alt="Lorem Ipsum">
<figcaption class="caption">Lorem Ipsum</figcaption >
</figure >
<details class="lorem-ipsum">
<summary class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur vitae hendrerit mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris lacinia scelerisque nibh nec gravida.
Duis malesuada nec nibh sit amet pulvinar.
Phasellus congue porttitor arcu, ut suscipit nibh aliquam vel.
Nunc arcu lectus, egestas ut sem ac, euismod porttitor eros.
Phasellus tincidunt consequat pharetra. Maecenas sodales purus at nulla finibus dapibus.
Nullam varius at nisl vel euismod. Fusce aliquet ligula non tempor fermentum.
Nam fermentum posuere mauris, quis aliquam nibh dictum sed.</p>
</details>
</section>
</body>
</html>
While Madhukar's answer correctly provided the elements that TestDome is looking for to achieve a 100% score, it should be noted that the action of 'details' and 'summary' (toggling visibility of the 'p' element) does not work cross-browser (https://caniuse.com/#search=details) without the use of polyfils. These tests should be treated with caution - as the old saying goes 'there is more than one way to skin a cat'.
Related
I seem to have a problem with the AOS (animate-on-scroll) library in my html page. The code works fine, but the issue is that the last div doesn't run its AOS code (fade-right) until the user is scrolling over it within a certain range of pixels, meaning that if my height is set at "100%", the page will just show a blank space where the div is supposed to be. This is because the content of the last div is too short to actually let the user scroll withing said range. Of course, the code runs fine if I extend the height of the html to a specified value that is longer than the height occupied by the elements in the page, but I really would like to avoid that and just allow this last div to appear without having to add space for the user to scroll just a little bit more. I'll leave a snippet for clarification.
html{
height:100%;
}
body{
overflow-x: hidden;
}
h1{
font-size : 90px;
text-align: center;
}
p{
width:50%;
font-size:20px;
text-align:justify;
margin:auto;
padding:20px;
background-color: #3E9AE0;
}
div{
margin-bottom:50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
</head>
<body>
<div data-aos="fade-right" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem sapien, pulvinar at condimentum vel, mollis quis erat. In consequat sem vel enim laoreet, non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet.
</p>
</div>
<div data-aos="fade-left" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem sapien, pulvinar at condimentum vel, mollis quis erat. In consequat sem vel enim laoreet, non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet.
</p>
</div>
<div data-aos="fade-right" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init({
mirror:false,
});
</script>
</body>
</html>
After a little bit of tampering with the code, I may have found a solution to this specific case. Setting the height for the html tag, in CSS, to the attribute "fit-content" seems to do the trick just fine, for pages that are simply structured such as mine. You may want to try something else if you have positioned your elements in a particular way near the end of the page. Here's the (very brief) code needed for this solution, to type in your CSS file:
html{height:fit-content;}
As a (most likely irrelevant) side-note: this attribute is not supported in Internet Explorer.
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 3 years ago.
I am trying to draw some rich text in a border; here is an excerpt:
<!DOCTYPE html>
<html>
<body>
<div id="140280868923376" class="Container" data-parent-widget="140280868799320" style="margin:30px;padding:10px;border-width:2px;border-style:solid;border-color:blue;border-radius:20px;width:100%;height:100%;position:static;order:-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<div style="color:blue;font-size:30px">Ut ut blandit erat. Suspendisse laoreet mattis condimentum.</div><br>
Quisque ullamcorper diam a tortor tempus, in scelerisque mauris facilisis.<br>
<div style="color:red;font-weight:bolder">Aenean rhoncus mattis dolor non efficitur.</div>
</div>
</body>
</html>
This seems to draw outside right border:
... while I would like to get something like:
Note: second image has been rendered using width:90%; which, of course, is not correct because right margin/padding is dependent on window size, while it should be a fixed number of pixels from right.
What is the "Right Way" to get result I need?
Simply get completely rid of the width and height settings for your outer container <div>. This will make the border's size depending on the size of the content inside.
<div id="140280868923376" class="Container" data-parent-widget="140280868799320" style="margin:30px;padding:10px;border-width:2px;border-style:solid;border-color:blue;border-radius:20px;position:static;order:-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<div style="color:blue;font-size:30px">Ut ut blandit erat. Suspendisse laoreet mattis condimentum.</div><br>
Quisque ullamcorper diam a tortor tempus, in scelerisque mauris facilisis.<br>
<div style="color:red;font-weight:bolder">Aenean rhoncus mattis dolor non efficitur.</div>
</div>
After searching some resources, I ended up creating this equivalence:
<blockquote>
<p>Nulla venenatis ac orci at placerat. Vivamus quam odio, sagittis vitae dui in, faucibus euismod metus. Vivamus purus sem, dictum vel egestas sit amet, facilisis ac tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elis mauris, luctus in risus et, volutpat malesuada mito.</p>
<figure>
<img src="#" alt="John Doe">
<figcaption>
<small>John Doe</small>
</figcaption>
</figure>
</blockquote>
For this result:
Is it correct to use on this case <figure> and <figcaption>?
Is it better to use footer or small for the author? Both seem valid.
If you're following W3C HTML5, which allows attribution to be placed within a blockquote element, you need to use a footer:
Attribution for the quotation, [if any,] may be be [sic] placed inside the blockquote element, but must be within a cite element for in-text attributions or within a footer element.
You can still use a figure element as you are doing, though; you just need to put it in a footer.
Your use of the small element is inappropriate, since the author name isn't what most would consider "fine print" for the purposes of small. The author name is marked up using cite (again, if you're following W3C HTML5):
<blockquote>
<p>Nulla venenatis ac orci at placerat. Vivamus quam odio, sagittis vitae dui in, faucibus euismod metus. Vivamus purus sem, dictum vel egestas sit amet, facilisis ac tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elis mauris, luctus in risus et, volutpat malesuada mito.</p>
<footer>
<figure>
<img src="#" alt="John Doe">
<figcaption><cite>John Doe</cite></figcaption>
</figure>
</footer>
</blockquote>
If you're following WHATWG HTML, then it forbids attribution to be placed within a blockquote; in this case, simply move the figure out of the blockquote.
I'm quite new into HTML&CSS and I'm having troubles with the model box I think.
Here both elements below "Personal data" aren't at the same height and I can't find the reason. Can anyone help me?
jsfiddle.net/jbzgmqns/
PS: Don't worry about being ugly, everything included the borders are just placeholders.
this is happening because <P>...</p> itself is taking margin.
Set its margin value '0' i.e. margin:0; to keep it in same level of image.
And take <p> inside <div class="cuadro">...</div> as shown below
<div class="cuadro">
<h1>Personal Data</h1>
<div class="imagen">
<img src="http://gobierno.morelos.gob.mx/sites/default/files/images/transparencia/placeholder-transparencia.jpg" />
</div>
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br> Donec efficitur eros quis sapien congue, hendrerit rhoncus magna cursus.
<br> Nam a blandit diam. Curabitur auctor, ipsum eget mattis vulputate, elit ex egestas nunc, sit amet molestie
<br> ante felis porta ligula. Aenean elementum justo sed placerat finibus.</p>
</div></div>
It's because in your code you defined the block height, when you shouldn't:
.block {
height: 700px;
Just remove that and all will be fine.
I have this odd problem in using margin-bottom in a class for responsive design. For example
HTML
<div class="space-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo sollicitudin molestie. In lacus purus, posuere non lacus eu, pharetra suscipit arcu.</p>
</div>
CSS
.space-bottom{margin-bottom: 10px}
The class "space-bottom" with a margin bottom of 10px will not work in mobile device. Even if i insert it in a Media Query which is weird. But when i change the "class" into "ID"
HTML
<div id="space-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo sollicitudin molestie. In lacus purus, posuere non lacus eu, pharetra suscipit arcu.</p>
</div>
CSS
#id space-bottom{margin-bottom: 10px}
It seems to work. I don't even need to insert the attribute inside a Media Query
There is no issue with your CSS in the first example; what you may be noticing is that the margins for the <p> element and the <div> are collapsing, based on the browser's default margin for <p>.
See Mozilla Developer Network's page on collapsing margins for more information on this feature.
Also, the CSS in your second example is incorrect; that should be selecting a <space-bottom> element with id id. Why it works, or seems to work, is a mystery to me.