I'm using HTML5's Summary/Details tags to hide/show extra text on a documentation page. The extra text is lengthy and the open/close nature of the summary tag is that you have to click on the summary line to make it both open and close the details block. This means that after scrolling down through the length of the long text you must scroll back up to the summary tag in order to click to close it.
I would like to be able to click on the bottom of the details segment to close it. Using CSS, I am able to add a 'close' triangle at the bottom of the detail segment. What can be done (preferably in CSS) to cause a click on the triangle to close the detail block?
details[open]:after {
content:'▲';
}
Below is a CSS only solution, just use ::after on <summary> and absolute positioning.
details.test {
position: relative;
padding: 5px 0;
}
details.test[open]>summary::after {
display: inline-block;
content: "close";
position: absolute;
right: 0;
bottom: 0;
}
<details class="test">
<summary>Example</summary>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</details>
I don't think it can be done using CSS. But you can use javascript:
<!DOCTYPE html>
<html>
<body>
<script>
function closeDetails() {
document.getElementById("details").removeAttribute("open");
window.location = "#details";
}
</script>
<details id="details">
<summary>Show Details</summary>
<p>yadda yadda</p>
<button onclick="closeDetails()">Close Details</button>
</details>
</body>
</html>
Since there were no other answers I’ll mark Sartoris’ as the correct one.
In case anyone else wants to use to it, I took the liberty of embellishing it a bit so that it would work with more than one ‘details’ element on a page and be a bit more generic. In this way the same function and close button definition can be used for all ‘details’ blocks as long as each has a unique ID.
<!DOCTYPE html>
<html>
<body>
<script>
function closeDetail(detailsElement) {
detailsElement.removeAttribute("open");
window.location = '#' + detailsElement.id;
}
</script>
<details id="details">
<summary>Show Details</summary>
<p>yadda yadda</p>
<button onclick="closeDetail(this.parentElement)">▲</button>
</details>
</body>
</html>
Related
Hi Ive got basic html file + external css file. css file contain font-size class and text-align class but only font-size class actually work. I try VS Studio code, Pycharm, and use .centered class on body, header, footer - still dont work
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<link href="styles.css" rel="stylesheet">
<title>Title</title>
</head>
<body class="centered">
<header class="large" >
John Harvard
</header>
<main class="medium">
Welcome to my page!
</main>
<footer class="small" >
Copyright © John Harvard 1636
</footer>
</body>
</html>
CSS code:
<style>
.centered {
text-align: center;
}
.large {
font-size: 70px;
}
.medium {
font-size: medium;
}
.small {
font-size: 3px;
}
</style>
I try VS Studio code, Pycharm, and use .centered class on body, header, footer - still don`t work
Can you explain why?
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
In your CSS file, you can NOT utilize <style> tags. To fix this, change your CSS file to the following:
.centered {
text-align: center;
}
.large {
font-size: 70px;
}
.medium {
font-size: medium;
}
.small {
font-size: 3px;
}
All I did here was delete the first and last lines (<style> and </style>)
That should do it!
If you're trying to align all the text in the body to center then you don't give body a class name, you just call upon it like this:
body {
text-align: center;
}
(Reminder: do not to call upon body in your CSS style sheet like a class or an id, so .body or #body would be wrong, its just body.)
If you want to create a container or wrapper called "centered"
you would create a div as such:
<div class="centered"></div>
then you would use CSS:
.centered {
text-align: center;
}
There are a lot of ways to center a text in HTML, the first one is to type
<center> Your text here </center>
in the HTML file, the other one is put all your text in a div, and add a css style in that div with this code inside
margin: 0 auto;
Basically in your case, i would just replace
<body class="centered">
with
<body style="margin: 0 auto;" class="centered">
I would like to display poetry, using only HTML and CSS. To my understanding, the semantically correct way to structure poetry in HTML is using <p> tags for verses and <br /> tags for individual lines, like this:
<p>
poetry is very nice <br />
but kind of hard to style <br />
if only you could help me, guise, <br />
I'd give you my best smile.
</p>
When the poem has long enough lines to wrap, the accepted style would be to hanging indent the wrapped line, like this:
This is a very long line that
needs to be wrapped
Ideally the wrapped part would be right aligned, but a fixed dimension hanging indent would work too.
I have seen various solutions to this, but they all involve semantically superfluous HTML, such as using lists or <span> tags for each line. For example:
.verse {
margin-left: 2em;
}
.line {
margin-left: -2em;
}
<p class="verse">
<span class="line">poetry is very nice </span><br>
<span class="line">but kind of hard to style </span><br>
<span class="line">if only you could help me, guise, </span><br>
<span class="line">I'd give you my best smile.</span>
</p>
Is there a way I could accomplish this without cluttered HTML?
Edit (1): I had an error in the example code. Both .verse and .line should have a margin-left property declared, not padding-left and margin-left.
Edit (2): Regarding the possible duplicate, I am aware of the different opinions regarding what is the most correct to mark up poetry in HTML. I have selected what seemed to me to be the most semantically correct, and this question is about the CSS needed to display it correctly.
Edit (3): I corrected the error in the example incorrectly. Here is a screenshot:
To clarify, I would like to achieve the same effect as the above screenshot without the <span> tags, or any other semantically superfluous tags.
Considering you have 2em of padding along with 1.5em of negative margin, you can simply combine these two values by just giving the verses 0.5em of padding. This will allow you to cut out the <span> tags entirely, with the exact same visual output:
.verse {
padding-left: 0.5em;
}
<p class="verse">
poetry is very nice<br />
but kind of hard to style<br />
if only you could help me, guise,<br />
I'd give you my best smile.
</p>
You can use a negative text-indent for the first line of a paragraph and add padding to the whole paragraph, i.e. you need only a the <p> element.
.verse {
text-indent: -20px;
padding-left: 20px;
}
<p class="verse">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
Use like :
div.a {
text-align: justify; /* For Edge */
-moz-text-align-last: right; /* For Firefox prior 58.0 */
text-align-last: right;
}
<div class="a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>
Follow : https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-align-last
The only easy solution I've come up with so far is to do paragraph breaks instead of line breaks and create a .poem class that takes away the spaces between paragraphs (so it acts as a line break rather than paragraph break).
.poem { text-indent: -2em; margin: 0 0 0 2em;}
But then you have to go through and put double paragraphs (double space) between stanzas. It's not a good solution but it's easier than pasting in classes on each line or making a list.
If anyone has a solution with breaks though, that would be awesome. text-align-last: right; has a similar effect, but it's not a traditional poetry format.
im using the BEM naming convention within a small project and having some slight difficulty in deciding between element and modifier names.
I'm currently working on a hero/splash section of the website. see image below.
Heres my current code -
<div class="hero hero__project">
<div class="grid">
<h1 class="hero__project__title">Final Year Project</h1>
<div class="hero__project__meta">
<p>Published<span>23 Oct 2014</span></p>
<p>Applictions <span>Unity3d, Photoshop, 3ds max</span></p>
</div>
<p class="hero__project__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </p>
</div>
</div>
My question is - Do you understand what the piece of markup is doing? and is it in line with them BEM methodology. Thanks
As far as I understand BEM, I would say your naming does not make sense. Your Block (or module) would be your .hero. Your Elements would be your main components of your block (i.e. project-title, project-meta, etc). If you needed a modifier on your block for a different state, you could add one in addition to your block (e.g. class=".hero .hero--isHidden)
<div class="hero">
<div class="grid">
<h1 class="hero__project-title"></h1>
<div class="hero__project-meta"></div>
<p class="hero__project-summary"></p>
</div>
</div>
For more in-depth info checkout http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
To answer your question regarding the other names, I guess I would modify my answer slightly. Again, only using the --project modifier to style the other elements if they are indeed different than a hero on another page.
<div class="hero hero--project">
<div class="grid">
<h1 class="hero__title"></h1>
<div class="hero__meta"></div>
<p class="hero__summary"></p>
</div>
</div>
I'm new to BEM and trying to wrap my head around it all. I read one of the rules for BEM was no nested selectors. So based off the 2nd answer, let's say we style the hero title to be black but style project hero titles to be red. Would the CSS look like this?
.hero__title { color: #000; }
.hero--project .hero__title { color: #cc0000; }
.rounded-box(#border; #radius; #bg-color: transparent; #padding: 5px 10px) {
border:1px solid #border;
.border-top-radius(#radius);
.border-bottom-radius(#radius);
.border-left-radius(#radius);
.border-right-radius(#radius);
background-color: #bg-color;
padding: #padding;
}
I have a mixin creating a rounded corner box, in the screenshot below, you can see that it does not have any spacing between each div, which has .make-column(4) applied to each.
*I do include the bootstrap.less into my main less file and run lessc to compile and this is in the screen shot you see is over 990px wide. Any help is appreciated.
#rounded-box-radius: 10px;
#rounded-box-border: #ccc;
#rounded-box-height:230px;
#box-bg-color: #eee;
.article {
.make-column(4);
}
.promo {
.make-column(4);
.visible-lg;
.rounded-box(#rounded-box-border, #rounded-box-radius);
height: #rounded-box-height;
} // promo end
HTML
<div class="promo">
Promo
</div>
<div class="article">
<h3>Blog Entry 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor.</p>
<div class="date">March 23, 2013</div>
<div class="read-more">Read more</div>
</div>
<div class="promo">
Promo
</div>
I think bootstrap 3 uses padding for column separation instead of margins. Your border wraps around the entire element, including the padding. You may need supply your own margin rules for column separation instead of padding to get bordered boxes with separation between them.
#jtlowe is right in https://stackoverflow.com/a/18127896/1596547 about the padding. But applying margin rules on your columns will break the grid (due to margins adds up with the width).
Use an extra container, just like here: need spacing between divs using twitter bootstrap v3 (duplicate??)
html
<div class="promo">
<div class="rounded-box">Promo</div>
</div>
less
.rounded-box(#border; #radius; #bg-color: transparent; #margin: 5px 10px) {
border:1px solid #border;
.border-top-radius(#radius);
.border-bottom-radius(#radius);
.border-left-radius(#radius);
.border-right-radius(#radius);
background-color: #bg-color;
margin: #margin;
height:#rounded-box-height;
}
NOTE apply the height (#rounded-box-height) here and replace the padding with margin
I'm looking for a way in CSS to place a symbol into the margin of the document to highlight/indicate the position of some special phrase in the text body of the document. Think of the usual text-editors in programming IDEs that place little warning icons in the margin next to lines that contain errors.
This is easy to do if the document consists of non-wrapped single lines. Then I can just check if the line needs the symbol and place it manually.
But it gets tricky if I want to, for example, place an icon for spelling mistakes in a document where the browser automatically breaks the lines. Then I would have to have a way to figure out which line the spelling mistake ended up in. This is probably also possible with JS by checking the y-coordinate of some wrapper-span that marks the spelling mistake, but I'm looking for something more elegant.
Is there some trick with float-left or absolute positioning that allows me to, for example, put this marker symbol into the span that marks the error and have it be placed in the left margin of the document instead of inside the boundaries of the span?
Actually, the answer is exactly as you described. Have spans wrapping your text, and inside the span, include an icon element. Then float it left, and set a negative margin on it. Example:
CSS:
.icon {
display: inline-block;
width: 10px;
height: 10px;
background: blue;
float: left;
margin-left: -15px;
margin-top: 5px;
}
Markup:
<span class="selected"><span class="icon"></span>this is some text in a span. </span>
Working example: http://jsfiddle.net/FQCsn/
I think there's also an application for the position: absolute in the context of the :before pseudoelement. Try this and see if it gives you what you're looking for:
<html>
<head>
<title>Lorem Ipsum</title>
<style>
.allowLeftMargin
{
margin-left: 5em;
}
.highlightThis
{
background-color: yellow;
}
.highlightThis:before
{
background-color: yellow;
content: "Note";
padding-left: 0.25em;
padding-right: 0.25em;
position: absolute;
left: 1em;
}
</style>
</head>
<body>
<div class="allowLeftMargin">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
<span class="highlightThis">Excepteur sint occaecat</span>
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
</body>
</html>
You can quickly adjust the size of the browser window to confirm that the note moves with the highlighted span.
What you can do is put a strong around the spelling error, add another tag (a span for example) right after that spelling error, and set that span in position: absolute, but without the "top" property (because the top position is variable). Put that span in width: 100% in order to "select" the line, and add another tag inside that span (a i tag for convenience), and use it to put your icon.
p{ line-height:20px; margin:20px;}
strong{ color:red;}
span{ display:block; height:20px; left:0; position:absolute; width:100%;}
i{ background:red; display:block; height:12px; left:0; position:absolute;
top:-16px; width:12px;}
Example: http://jsfiddle.net/fwZqv/1/
Try to change the width of the "Result" window and see how it behaves.
It's not a perfect solution, and I would rather use JS for that matter.