For my Jekyll blog, I want the images to span the whole width of the column, while having padding on either side of the text, like this: http://www.webdesignerdepot.com/2015/05/the-ultimate-guide-to-web-animation
The main problem I'm having is that Jekyll wraps images in <p> tags, so there's no way (that I know of) to target the width of images without and not the paragraphs.
<p>
"Some text."
</p>
<p> <img src="#"> </p>
How would you suggest tackling this issue?
I think Davids answer is really good. However, if you have no problem solving this with jQuery, you can do this:
$('.content > p > img').parent().css('padding','0');
That way your markdown will stay clean.
I understand that you are writing your post/page in markdown.
In order to apply a specific style to the P container you can use kramdown block attributes to set a class on it.
Some test
{: .imgContainer}
Will render as
<p>Some test</p>
<p class="imgContainer"><img src="/path/to/img.jpg" alt="Alt text" /></p>
You can then style .imgContainer.
You can also choose to create an HTML block. This is done by wrapping an img tag in a div like this:
line
<div><img src="image.jpg" /></div>
line
No clean markdown, but a pretty clean solution nevertheless. Found the solution here.
Related
Issue
I'm trying to display several images in GitHub's README.md with a margin of x px between them. But for some reason GitHub seems to strip away the margin-right: 30px style.
Markdown
[<img style="margin-right: 30px" src=foo.svg height=30>](https://www.example.com/)
[<img style="margin-right: 30px" src=bar.svg height=30>](https://www.example.com/)
<!-- ...and so on -->
Note: I tried align="left" here which works fine but breaks on lg sm xs devices.
You could use to make space instead of CSS margin.
It is not possible to use different types of styles in GitHub markdown.
Github only allows to use of some attributes inside the HTML tag and also removes some attributes from the tag if the user puts them inside the HTML tag.
Also, we cannot use CSS in GitHub markdown because it is part of the sanitization process.
The HTML is sanitized, aggressively removing things that could harm you and your kin—such as <script> tags, inline styles, and class or id attributes.
source: https://github.com/github/markup#github-markup
If we use an HTML block in the markdown file something like
<div style="margin-right: 30px;">
Markdown content goes here.
</div>
Then, When GitHub rendered it, the style attribute was automatically removed and no CSS style was applied. It will render it something like
<div>
Markdown content goes here.
</div>
N.B: In the case of positioning, the align attribute is the only way that will currently work. Despite being deprecated, it's still rendered.
At last, you can do it hacky way ✨
While a bit hacky, you can use <dl>, <dt> and <dd> tags in combination to make indent without any enumeration (unlike <ul>/+/-/* or <ol>/1. 2. 3.).
The lines in preview below are generated by ---, but it works without those.
See example below:
This is normal text.
---
<dl>
<dd>This gets indented, without enumeration nor dots.</dd>
</dl>
---
<dl>
<dd>
<dl>
<dd>
Multiple levels seems to be possible?
</dd>
</dl>
</dd>
</dl>
---
<dl><dd><dl><dd><dl><dd><dl><dd>
Yes, but syntax gets messy, unless you write it single line :)
</dd></dl></dd></dl></dd></dl></dd></dl>
Result preview:
Check it directly in my GitHub gist here.
You can simply add
<div align="center">
<div align="center">
<div align="center">
<p>a</p>
</div>
<p>a</p>
<p>b</p>
</div>
<p>a</p>
<p>b</p>
<p>c</p>
</div>
By adding a div you can customize the position
You refer the outcome in my GitHub
Hack Required
Due to GitHub's HTML sanitization (removing a lot of the attributes and values), you'll need to find an unorthodox way of styling your page. One way I found pretty effective was to create an invisible image, completely transparent, and include that between the images you want margin.
Example
<div align="center">
<span><img src="./loginScreen.jpg" height=650 width=300 /></span>
<span><img src="./aligner.png" height=50 width=150 /></span> <!--invisible-->
<span><img src="./Expenses.jpg" height=650 width=300 /></span>
</div>
You can easily alter the height and width of that image as if it were the top/bottom, left/right margin. Hope that helps!
Im trying to change the html code of a website. As you can see here: https://share-your-photo.com/b12b204e8c
The Code starts with an h3 tag. i want to replace it with a p tag. at beginning with <p class=and at the end of the code with </p>. But the code turns red at the end. can you give me a solution how i can do?
So I see that you had the <h3></h3> wrapped around everything and that is not the proper syntax in html. Its called hierarchy. Hierarchy is
An element that is directly above another element in the hierarchy is
called the parent of the element below it. The element below the
parent is called the child. When two elements are equal in the
hierarchy, they are known as siblings.
--Thx Google... A <h3></h3> tag can't wrap all of those elements only tags like a <div> can or a <span>. A <div> tag is a block element. So if you have 2 <div> tags like this... <div>HI</div> and <div>Hello</div> "HI" will be on top and "Hello" will be on the bottom but if it were <span> It will make it horizontal <span>Hi</span> and <span>Hello</span> the output will be "Hi Hello". If you check out this link they briefly explain nesting. But there are many many places you can go to understand this [https://www.w3schools.com/html/html_elements.asp1 Hopefully that helps you! Keep on coding! 👍
You said: "_the code turns red at the end...". The end of what??? Are you trying to edit the code locally in an editor such as sublime, vscode?
Basically, think of an Html document as a Word document that contains titles, subtitles, etc..
In Html documents, we have the following hierarchy structure.
<h1>My Page Title</h1>
<h2>My Page Subtitle</h2>
<p>here we can have only text, <strong>bold text</strong>, <i>italic</i>, and other styled text with <span>spanned texts</span></p>
<div>
<h3>Layouts</h3>
<p>you can use divs to structure your layout, so, doesn't make sense to have divs inside paragraphs.</p>
<p>If you want, you can break lines with <br> tags</p>
</div>
Let's cut to the chase. This is the piece of code that is giving me trouble:
<p id="mainBlock">
<img src="/icons/128x128.png" id="icon">
<h3>App name</h3>
<span id="version"></span>
</p>
<p>Description</p>
http://jsfiddle.net/DerekL/0pd7njbr/
Looks okay to me. But when I try it in Chrome, this is what I see in the console:
This is not the correct markup! Notice the <p> is messed up. I have been looking at this for a while now and still can't see what's causing that.
I can't believe I made a question asking why my p tags are not working.
p elements may not contain headings, including h3 elements.
The end tag for p elements is optional, so the p element is implicitly ended by the h3 start tag.
Its not appropriate to add a heading tag within a p tag that is probably why you are getting that problem. Look here: How to use an <h2> tag </h2> inside a <p></p> in the middle of a text?
I had a very hard time trying to word what I wish to know how to do, nor could I locate any post or website from Google that had my answer probably due to not being able to word this correctly, but I will explain in fullest detail.
<br />
<hr />
<br />
Break, horizontal, break is my way of separating parts of the post from another. How can I group the three into one simple tag that can replace the three, thus saving me time and hassle .
It would be also helpful to know if there are ways to define tag groupings with more than just empty tags like a tag identified by the string title1 would be a tag containing all the format, text, and all sub-elements of the template that was coded somewhere else.
If this question has already been posted then I am sorry. Thanks!
You don't need the <br> tags because <hr> is a block level element and automatically creates a line break. If you're doing that to get some vertical space above and below thw <hr> why not just use CSS to give the <hr> some margin?
hr
{
margin-bottom: 20px;
margin-top: 20px;
}
Neither <br> nor the proposed alternative <hr> are particularly well-suited here.
You need to learn about CSS. All you need to do is apply appropriate styles (i.e. a margin) to the elements that wrap your posts.
<div class="post">
<h1>Post #1</h1>
<p>something</p>
</div>
<div class="post">
<h1>Post #2</h1>
<p>something else</p>
</div>
div.post {
margin-bottom: 3em;
}
If you are using HTML5 then use <article> instead of <div class="post"> to denote individual posts.
As for grouping tags, this is currently not possible in plain HTML, you need to apply some preprocessing for that. The usual solution is to use a content management system which creates the final HTML based on your content and an HTML template.
Whilst this specific problem can be solved with a little bit of CSS, it sounds like you need a layout or templating engine of some sort in the long run. I'm a rubyist by trade so my go-to solution for doing this is Jekyll.
What Jekyll does is generate static html files from layouts and content that you write. You can abstract a lot of the repetitive layout markup into separate files and then just reference them when you need them.
The following guide is a good place to get started: http://net.tutsplus.com/tutorials/other/building-static-sites-with-jekyll/
If you're already working with another framework then do some reading around it first to see if there's something there you can use. If you're just writing straight-up HTML/CSS though, then definitely give Jekyll a try.
Markdown syntax is often convenient to write blogs and comments;
But at times it interferes with the content when you would want to write a simple html
Is there a tag / syntax that asks markdown to ignore that part like the pre html tag?
If pre works, what if the markdown part needs to include an html tag?
The original implementation of Markdown (by Gruber) and PHP Markdown don't format inside block-level HTML elements, so you can use <div>, for example:
Markdown text.
More markdown text.
<div>
Markdown ignores inside the div, you can do all sorts of crazy stuff:
Stack Overflow.
<blink>Is blink still supported?</blink>
</div>
Yet more markdown text.
Will get rendered as:
<p>Markdown text.</p>
<p>More markdown text.</p>
<div>
Markdown ignores inside the div, you can do all sorts of crazy stuff:
Stack Overflow.
<blink>Is blink still supported?</blink>
</div>
<p>Yet more markdown text.</p>
At least here on Stack Overflow, the ... <pre> HTML tag works just fine for that purpose. It also formats your text like a browser would:
This is pre-formatted, so in here I can /slash/ and *star* stuff
without issues, and [[square brackets]] [are] just brackets.