I have this little part of markup:
<section class="middle tab-bar-section">
<h2 class="title">Lorem ipsum</h2>
</section>
If I run it through an HTML5 outliner, the section is untitled, like this:
1. Untitled Section
1. Lorem ipsum
Shouldent the h2 tag be the sections title?
Related
So I have an <h2> element and a <p> right below it and I'd like to space them out a little bit. Currently I'm just using a <br> between them but I was wondering if there's a way to do it in CSS? It can be applied to all the <h2> and <p> elements on my page. Thanks!
you can control line-spacing in one HTML tag only. So if you have
<h2 style="line-spacing:40px;">Hello World</h2>
<p>Lorem ipsum</p>
It will only affect the <h2> "Hello World" and not the <p> tag with the text Lorem Ipsum. You need to give the a margin-bottom such as this:
<h2 style="margin-bottom:40px;">Hello World</h2>
<p>Lorem ipsum</p>
I was wondering if there is a way to generate an anchor for each of my headings. I was hoping to achieve the following using Pug:
h2 Some heading
process into
<div id="some-heading">
<h2>Some heading</h2>
</div>
Is there an option to do this in Pug?
This is a great opportunity to use a mixin, with javascript to transform your headline into an id-safe string.
Additionally, you can add a level parameter and use tag name interpolation to support multiple levels of headings.
Mixin:
mixin h(level, headline)
- let id = headline.toLowerCase().replace(' ', '-').replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\#\[\\\]\^`\{\|\}~]/g, '');
section(id= id)
#{'h' + level}= headline
if block
block
Usage:
+h(2, 'Section A')
+h(2, 'Section B')
p Lorem ipsum dolor amit
+h(2, 'Section C')
p Lorem ipsum dolor amit
+h(3, 'Section C, Subsection A')
p Lorem ipsum dolor amit
Compiles to:
<section id="section-a">
<h2>Section A</h2>
</section>
<section id="section-b">
<h2>Section B</h2>
<p>Lorem ipsum dolor amit</p>
</section>
<section id="section-c">
<h2>Section C</h2>
<p>Lorem ipsum dolor amit</p>
<section id="section-c-subsection-a">
<h3>Section C, Subsection A</h3>
<p>Lorem ipsum dolor amit</p>
</section>
</section>
Usually you're looping through an array with this sort of thing. Let's assume it's just called headings for the sake of argument.
- var headings = ["Heading1", "Heading2", " Heading3"];
each heading in headings
div(id= heading)
h2= heading
Outputs:
<div id="Heading1">
<h2>Heading1</h2>
</div>
<div id="Heading2">
<h2>Heading2</h2>
</div>
<div id="Heading3">
<h2>Heading3</h2>
</div>
To have a different ID from the heading label you could create an array of objects:
- var headings = [];
- headings.push({ "id": "heading-1", label: "Heading #1" });
- headings.push({ "id": "heading-249", label: "Heading #249" });
each heading in headings
div(id= heading.id)
h2= heading.label
Outputs:
<div id="heading-1">
<h2>Heading #1</h2>
</div>
<div id="heading-249">
<h2>Heading #249</h2>
</div>
Of course, you shouldn't be setting up arrays in your pug template. That should all be done in the route handler before you call res.render in your node/express route handler.
Using bootstrap I created three columns, each containing an image and a caption. Like so:
However, I want it to actually output the content like this:
This is my current code:
<!-- Section 6 -->
<div class="cssSection cssCenter">
<div class="container">
<h2>The Order</h2>
<br>
<p class="cssInformation">Labelled as a religious order, the Knights Templars established a set of rules by which their members would follow.</p>
<br>
<div class="row">
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars swore to an oath of poverty, chastity, obedience and renounced the world.</p>
</div>
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars lived within their own community, which meant sleeping in a common dorm, while also eating their meals in union. Lorem ipsum sont dolor sit amet. Lorem ipsum sont dolor sit amet.Lorem ipsum sont dolor sit amet.</p>
</div>
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars refrained from becoming drunk, gambling and swearing</p>
</div>
</div>
</div>
</div>
And here is the related CSS code:
.cssSection {
padding: 45px 0 30px;
}
.cssCenter {
text-align: center;
}
.cssInformation {
font-size: 18px;
}
What can I adjust within the HTML and or CSS to make the p tags align horizontally, without affecting the images?
Are you sure there is no other css you might have added? I tried your code on jsfiddle (adding bootstrap) and it shows up fine for me.
Here everything is fine in plunker. Please provide your whole html file to help us inspect your issue.
Your code works well in bootstrap3.3.4.
Check your bootstrap version.
I'm building a Single-Page layout with a navigation for scrolling to several anchors (anchor locks on top of the page - height of the header). The scrolling content is only structured in headlines <h3> and paragraphs <p>. Works well so far, but the last section of the page is quite short, so it gets stuck on the page's bottom and has not enough "space/content" to even arrive at the top of the page.
Does anyone know a way to extend the very last <p> to the browser's height (- the header's height), so that it can reach the top?
CSS-only would be great, jQuery is fine aswell.
Thanks!
From your description you seem to have something like this, where I'm giving your "scrolling content" area an id of application-body like this:
<div id="application-body">
<h3 id="n-1">Headline 1</h3>
<p>Lorem ipsum </p>
<h3 id="n-2">Headline 2</h3>
<p>Lorem ipsum </p>
<h3 id="n-3">Headline 3</h3>
<p>Lorem ipsum </p>
<h3 id="n-4">Headline 4</h3>
<p>Lorem ipsum </p>
<h3 id="n-5">Headline 5</h3>
<p>Lorem ipsum </p>
<h3 id="n-6">Headline 6</h3>
<p>Lorem ipsum </p>
<h3 id="n-7">Headline 7</h3>
<p>Lorem ipsum </p>
<h3 id="n-8">Headline 8</h3>
<p>Lorem ipsum </p>
<h3 id="n-9">Headline 9</h3>
<p>Lorem ipsum </p>
<h3 id="n-10">Headline 10</h3>
<p>Lorem ipsum </p>
<h3 id="n-11">Headline 11</h3>
<p>Lorem ipsum </p>
</div><!--#application-body-->
And you want to make the last element in that list - the last <p> element in this case, artificially taller so it will work correctly. If I'm not mistaken I think what you want is this:
#application-body p:last-child {
color: red;
height: 1000px;
}
Which will increase the height arbitrarily as you see fit. Not sure what the constraints of your page are, but you could also experiment with other units. I don't think percentage height will do what you intend though. em might work as well. You might also consider setting the height with a media query so that if the height was not very tall you could set it lower.
Here's more about :last-child
If you simply must use jQuery or must get precise about the height you want, you'd want to use this chunk of jQuery. Note that your header must have an id of header for this code to work. Adjust to your own site.
var targetHeight = $(window).height() - $('#header').height();
$('#application-body p:last-child').height(targetHeight);
I'm working on a blog that implements Disqus comments and I'm making an effort to make as much use of HTML5 semantic markups as possible.
Here's an example <article /> (itself within a <section />), fairly simple:
<article class="post">
<header>
<h2>Title</h2>
<p class="posted-on">Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time>.</p>
</header>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<!-- blog comments -->
</article>
With the above structure, I'm unsure semantically where to integrate the article's comments.
A <footer /> is clearly not appropriate ("The footer element is not sectioning content; it doesn't introduce a new section.")
Disqus uses async JavaScript to create an <iframe /> to contain the comment widget, so a <p /> doesn't seem appropriate, either.
Am I over-thinking the semantic markup thing: is it best to just stick it into a <div /> and not worry about it?
There is an example in the HTML5 spec for a blog post with comments. Which makes sense, in my opinion.
Your example could look like:
<article class="post">
<header>
<h1>Title</h1>
<p class="posted-on">Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time>.</p>
</header>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<section>
<h1>Comments</h1>
<article><!-- comment 1--></article>
<article><!-- comment 2--></article>
<article><!-- comment 3--></article>
<section>
</article>
Side note: I think your "posted-on" would better fit into a footer instead of a header. So your header could be omitted because it would only contain the heading. So your example could look like:
<article class="post">
<h1>Title</h1>
<footer class="posted-on">Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time>.</footer>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<section>
<h1>Comments</h1>
<article><!-- comment 1--></article>
<article><!-- comment 2--></article>
<article><!-- comment 3--></article>
<section>
</article>
You could stick it in its own <section> (rather than a <div>) within your containing <section>, as a sibling of your <article>. But if you're using Disqus, I guess whichever element you use doesn't matter. I don't think it belongs within the article content though. Maybe an <aside> instead?
Just keep in mind that when it comes to semantics, there aren't any hard and fast rules. As long as your document is structured and outlined in a meaningful way, that's what matters.