I found this little snipped of code here on stackoverflow, it works great but when you expand each one of the items, the "parent" or "title" for each of the other 'detail' tag sections moves down too.
is there a way to make it so that only the expanded result shows in the next line? so that the 'detail' options stay in the same line even after any of them is expanded
For example when I expand 'mail', both options 'telefon' and 'brev' move down, I want them to stay in the same place
Here is a fiddle: https://jsfiddle.net/y8tb5jnt/
I tried using inline or formatting but I wasn't even close to getting the desired result
HTML
<footer>
<P>Kontakta mig på följande sätt</P>
<details>
<summary>Mail</summary>
<p>Bla bla bla</p>
</details>
<details>
<summary>Telefon</summary>
<p>Bla bla bla</p>
</details>
<details>
<summary>Brev</summary>
<p>Bla bla bla</p>
</details>
</footer>
CSS
footer details {
display: inline-block;
}
Related
I'm after a regex code to highlight/extract everything inside the div tag include the closing match tag itself.
The problem is I'd like to extract a div tag with some specific information in its angle bracket ">"
For example, after filtering the results will show something like:
<div class="abc" id= "123">
bla bla bla
</div>
<div class="def" id = "456">
bla bla bla
</div>
<div class="hit" id = "789">
bla bla bla
</div>
Could anyone suggest how to extract/hightlight the matching regex in VSCode editor? I've installed the maching bracket plugin but when seaching for the tag it did not show the matching one.
Thank you very much
It is a 2 step process
search the div open tag with the right attributes, assume that the attributes are always in the same order and is the whitespace different.<div class="[a-f]*?" id="2\d\d">search all occurences (Alt+L from find dialog)
Press Right Arrow. Cursors are now right after the div-open tag
Use command Emmet: Balance (outward)
Sometimes I want to send a link to e.g. an article in a newspaper and want the receiver to read a specific paragraph, chapter or similar. If the structure of the page is something like
<p class="h2">Some header
<p class="body">Body text
etc. Is it possible to link to any of these element specifically? For example, I want someone to read the fourth paragraph, that is, the fourth time the class="h2" is used, something like . I know, but I don't recall the syntax ATM, that XPaths offers this functionality, but what about html?
This will work for you http://www.web-source.net/html_link_anchors.htm#.Us-JX7T6SrE
<p class="h2">Some header</p>
<p class="body" name="text">Body text</p>
<html>
<body>
<p>
See also Chapter 4.
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a id="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
If you visit following link, this will take you to bottom of the page (this page explains the topic too):
http://www.myhtmltutorials.com/jump.html#Bot
Google Chrome offers this functionality since a couple of months ago. Right-click on whatever you want to direct link to and select Copy link to. The result is something like this:
https://stackoverflow.com/questions/21036942/link-to-one-of-many-divs-with-the-same-class#:~:text=If%20you%20visit-,following,-link%2C%20this%20will
This is not supported on all browsers so far but I guess it, with time, will spread.
The standard tutorials teach how to use the hashtag and the anchor name to link to page sections, like so:
<li>Section 2</li>
<h1>Title</h1>
<a name="section1"></a><h2>Section 1</h2>
<p>Blah bla bla bla bla.</p>
<a name="section2"></a><h2>Section 2</h2>
<p>Blah bla bla bla bla.</p>
How do I make a page jump where I can embed the link to the page section using a fully qualified url? For example:
Please read section 2
The application is a signup notification email.
Using your example, the link would be:
Please read section 2
Also note that the <a name="section2"></a> is superfluous. You could simplify to
<h2 id="section2">Section 2</h2>
In my <p> tag I have some text, and it's broken on many lines.
<p>
some really long text broken in many places...
</p>
Normal behavior is not to show space character on line break, but in my application I need to show it, is it possible in any way ?
EDIT:
If You run this:
<p style="width:100px;">
<span style="background-color: #008000">
some long text bla bla bla bla bla bla bla
</span>
</p>
You can see, that space (" ") between words, appears like any other character, but there is no space on the end of each line.
Your answer can be found in the css white-space property. This should be your HTML:
<p style="width:100px;">
<span style="background:#008000;">some long text bla bla bla bla bla bla bla</span>
</p>
And your CSS should be:
span {
white-space: pre-wrap;
}
One problem with white-space:pre-wrap; though, is that it also includes all tabs you may use in your HTML formatting. So you can't indent the text inside the <span> tags.
Take a look at this fiddle I made: jsfiddle.net/jWbgW/
Of course, you should really put all your style definitions in the css, but that's a given.
The space character is not actually displayed at the end of a line. If you set white-space: pre on the span element, then its content will be displayed as is, preserving the division into lines as well as multiple or end-of-line spaces. To have just some individual space(s) at ends of lines displayed (in the sense that they occupy space and get background color), you can use no-break spaces, representable as &nsbsp;.
But if you would like to have text wrapped as usual, then I’m afraid there is no simple way to make browsers append such a “visible space” at the ends of lines.
You can use <br /> for new line or margin/padding in CSS.
<p>
some really long text broken in many places...
<br />
</p>
To add a line break in HTML between different paragraph sections you can wrap each section in <P></P> tags, use a <BR />, or use CSS padding-bottom attribute. When you use each of these really depends on the situation.
Here's a good article that offers some good explanation: http://www.newbiewebsitedesign.com/html-line-break-tag-cod
p { white-space:nowrap;}
<p>This text will be not broken on many lines...</p>
Check this out too: http://www.impressivewebs.com/css-white-space/
I have got just a quick question regarding the header hierarchy when using HTML5 and especially sections. I am asking from a SEO point of view.
At this moment my markup looks like this:
<article>
<header><h1>Article Header</h1></header>
<!-- Bla bla -->
<section>
<header><h1>Article section 1</h1></header>
<!-- Bla bla -->
</section>
<section>
<header><h1>Article section 2</h1></header>
<!-- Bla bla -->
<h2>Article section 2 Sub 1</h2>
<!-- Bla bla -->
</section>
<section>
<header><h1>Article section 3</h1></header>
<!-- Bla bla -->
</section>
</article>
The questions I am asking is about <h1>Article section 2</h1> and <h1>Article section 3</h1> and the code in-between.
Its outline is as expected:
hmtl5 outline http://i51.tinypic.com/34pi1hk.jpg
But when looking at the site without css, I am seeing this:
As you can see in the second picture it seems that <h2>Article section 2 Sub 1</h2> is given more "importance", although it is just a h2 of another subsection (just like displayed in the outline).
Now I am wondering if I can safely ignore this, or does Google probably also think that <h2>Article section 2 Sub 1</h2> is more important than the previous and next h1 titles? Obviously, I want to make sure that <h2>Article section 2 Sub 1</h2> is given less importance than the previous and next h1 titles.
I hope I was able to explain what I am trying to figure out!
The order of rendering the page never means anything as far as SEO is concerned. h1 will always be given more importance compared to h2 in the context it is placed in.
Firstly, HTML5 is backward-compatible with HTML4.
You can use old style h2+ tags
Or just sectioning contents and the h1 tag only
Or both, in the same page!
but default style is firstly made to maintain backward compatibility with older pages,
then to implement html5-sectioning's default style
Your code is not wrong, you just need to reset the style.
I'm pretty sure about this because I've read some discussions on mozilla's bugzilla
Hope this helps!