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!
Related
I am trying to center a code in markdown (used in JupyterLab). Here is the code I use
<div style="text-align:center"><span style="font-size:1em;">
`code template`
</span> </div>
But this code keeps showing ` at the beginning and end of this simple snippet. Any suggestion on solving this problem is appreciated
Markdown generally is not processed in HTML block-level elements like <div>s:
Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.
But you can still use HTML:
<div style="text-align:center"><span style="font-size:1em;">
<code>code template</code>
</span> </div>
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.
I'm trying to get everything in the anchor tag to be a clickable link. Unfortunately, in IE6 (which is the only browser I'm concerned with currently), the only thing that isn't a clickable link are the inline images. I know that it's not valid html to put a div inside of an anchor but it's not my markup and I've been asked to avoid changing it. Any suggestions to altering the CSS to enable the images as clickable links? If changing the markup is the only solution... any suggestions there? My initial thought was to set the image as a background of it's parent (.ph-item-featured-img), although I'm unclear if that will solve the problem.
Thanks!
<div class="tab-panel-init clear ui-tabs-panel ui-widget-content ui-corner-bottom" id="ph-flashlights">
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
</div>
The problem is that it isn't valid html. Explain that you have to change the markup to make it work as desired. Changing the div to a span and setting the class .ph-item-featured-img to display: block should produce the same look-and-feel and be correct html.
Edit: Another, not as clean solution, is to add a click-listener with JavaScript and invoke the link upon a click on the image.
If you can't change the mark up (which you admit isn't valid), I don't think there is anything you can do here.
You should reconsider changing the markup. This example is bad in so many ways it could serve as a textbook example of what not to do.
Alternate strategies:
Remove everything but the image and
give it an onclick handler that does
the link mechanics.
Remove the DIV and just have the IMG
inside the anchor tag.
etc.
Well i looks like youre already using jQueryUI so why not just through a click even on the containing DIV. Also you should definitely change the markup. If its not valid, its not valid. That can lead to all kinds of problems other than the one youre currently facing. If there is a good reason for change this is it.
This is what the w3c validator returns when I pass in the snippet you posted:
Line 15, Column 46: document type does not allow element "DIV" here; missing one of "OBJECT", "MAP", "BUTTON" start-tag
<div class="ph-item-featured-img">
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
If I remember correctly, IE6 requires that every element inside of the <a> tag to be an element with CSS display: inline set on it (or inline-by-default elements like <span>, <b>, <strong>, etc.), or else it doesn't get linked, or links act weird.
Perhaps it is even IE6's HTML parser that is to blame. Maybe it sees the <img src="#"> and thinks, "that's not a valid URL to an image! :ignore:". IE6 is strange that way, often acting in a way that is a diametric opposite to how standards-compliant browsers act.
Truth is, this I have no way of checking all this; thankfully, every Windows computer I have access to has IE7+ on it. Perhaps you should take Google's route and just explicitly say that you're not going to support IE6, redirecting all IE6 browsers to a place where they can upgrade.
I believe you can do this with conditional comments like so:
<html>
<head>
<!--[if lte IE 6]>
<meta http-equiv="refresh"
content="2;url=http://www.microsoft.com/windows/internet-explorer/default.aspx" />
<![endif]-->
...
</head>
Is there a coding standard for HTML? Please suggest links that have the coding styles for HTML.
For example:
<table>
<tr>
<td>
Data
</td>
</tr>
</table>
Here's a few standards to add to your list.
1. Indentation
You seem to have the right idea on this already. The main purpose of indentation should be to make it clear where a tag is opened and closed. Consider this example.
<div><p>Hello World</p><div><p>Hello World</p></div>
This looks okay until you indent it properly and spot the error:
<div>
<p>Hello World</p>
<div>
<p>Hello World</p>
</div>
The original div wasn't closed. Ooops! This is why indentation can be a great time saver.
2. Tags and Attributes
It is generally accepted now that all tags and attributes should be lower case. We dispensed with ALL CAPS tags a long time ago in HTML and also with camelCasing for things like onMouseOver and onClick, which are now all lower case. All attribute values should be surrounded with double-quotes. For example:
<div id="content">Hello</div>
Not
<div id=content>Hello</div>
<DIV ID="content">Hello</DIV>
3. Semantic mark-up only
Don't use any tags to infer style or to control style. For example...
<font>
<b>
Or attributes like...
<table border="2">
Also, don't use things like h1 tags just to get a bigger font.
Try to think of what the tag means, "h1" is a top level heading, "p" is a paragraph, "table" denotes data laid out in a tabular format. Never use a tag for a different purpose to what is intended and try to know what tags are available. For example, using lists instead of manually laying out lists of things.
Don't use tables for layout. (I have emphasised this important point using the semantic "em" tag).
Don't use too many div tags to solve a problem! (div-itus!)
Firstly choose your doctype and then validate your html against the W3C validator for formatting errors
Other things to consider off the top of the head are
Proper indentation
Resisting the temptation to add too much markup i.e. keep the markup simple
Structure your html semantically so that if you switched off style sheets the document would still make sense and be in the right order
Avoid deprecated tags e.g. <font>
Choosing generic class names e.g. mainHeader instead of largeRedHeader
Use classes for repeating elements and ids for elements that appear once
Use classes and ids on parent elements only and style child elements using css e.g. #intro > p instead of #intro .paragraph
HTML Tidy provides a pretty reasoble style, which it will also help you enforce.
Did you mean indentation style? Here is the de facto indentation style:
<table>
<tr>
<td>One line of text - no indent.</td>
<td>
<p>
Multiple lines of text. <br />
With line breaks - indent.<br />
Inline: <b>no indent</b>
</p>
</td>
</tr>
</table>
However, the style above takes too much spaces, for some indentation styles, HTML, HEAD and BODY are not indented.
<html>
<head>
<title>Title</title>
</head>
<body>
<div>
<h1>Title</h1>
<p>Hello, world! The content begins here.</p>
</div>
</body>
</html>
Personally I follow the xhtml standards (all open tags get a closed tag, case sensitivity and so on). It makes it easier to follow the code and to format things automatically. I also generally indent everything 1 from their parents:
<table summary="example table">
<tr>
<td>
Data
</td>
</tr>
</table>
I also tend to try and include all of the required attributes for accessibility, I figure it is a nice thing to do.
Is it sometimes bad to use <BR/> tags?
I ask because some of the first advice my development team gave me was this: Don't use <BR/> ; instead, use styles. But why? Are there negative outcomes when using <BR/> tags?
The main reason for not using <br> is that it's not semantic. If you want two items in different visual blocks, you probably want them in different logical blocks.
In most cases this means just using different elements, for example <p>Stuff</p><p>Other stuff</p>, and then using CSS to space the blocks out properly.
There are cases where <br> is semantically valid, i.e. cases where the line break is part of the data you're sending. This is really only limited to 2 use cases - poetry and mailing addresses.
I think your development team is refering to <br /> in place of margin spacing. To make empty space between elements, use padding / margin styling via CSS.
Bad use of <br />:
<div>
Content
</div>
<br />
<br />
<br />
<br />
<div>
More content...
</div>
Good use of <br />:
<style>
div {
margin-top:10px;
}
</style>
<div>
Content<br />
Line break
</div>
<div>
More content...
</div>
Generally, <br/> is an indication of poor semantic HTML. The most common case is using <br/> to declare paragraph separations, which there are much better ways to do it semantically. See Bed and BReakfast.
There are occasions where it is the proper tag to use, but it is abused often enough that people adopt a "do not use" mentality as to force better semantic thinking.
What was meant by your team was probably not to use <br>s to split between paragraphs.
For example :
<p>I am a paragraph</p>
<p>I am a second paragraph</p>
is the better way to do that, because you can then easily adjust the spaces between paragraphs through CSS.
Other than that, I can not think of anything speaking against line breaks as such.
Same concept applies to why we don't use tables for layout - use tables for tables and CSS for layout.
Use <br/> for break lines in a block of text and CSS if you want to affect the layout.
Specifying the layout directly makes it difficult adapting the site for different page sizes or fonts for example.
If you do this: <BR/> <BR/>
You will get diffrent layout on different browsers.
Deeper:
If you use <BR/> just for line breaks - ok.
If you use <BR/> as a line spacer - not ok.
I will generally always set appropriate margins and padding on elements using CSS - it's a lot less messy than loads of <br />s all over the place apart from being more semantically correct.
Probably the only time I would use a <br /> in preference to the margins and padding set by CSS, even if it's not strictly technically correct, is if it was an isolated incident where slightly more space was needed. If I'd got quite a large stylesheet and it didn't seem worth setting up an additional style just for that one occurence, I may use a <br /> as a one-off.
Like most things, <br />s aren't a bad thing providing they're used correctly.
I try to write my markup in a way that it's easily readable with CSS disabled. If you're just using BRs to add spacing, it's better to use margins and padding.
<br /> should be used for line breaks only, and not to apply style to a page. For example, if you need extra space between paragraphs, give them a class and apply the extra padding to the paragraphs. Don't spread out your paragraphs with <br /><br ><br />
They are to be used to represent newlines. Nothing more. Not to fill up space like as at the average geocities site. There is however only one case wherein they may be useful for other purposes than putting a newline: to clear the floats.
<br style="clear: both;">
Don't use three or more consecutive <br>s, that's a signal you're using them for stylistic purposes and no, you shouldn't.
Some would say a single <br> is enough and instead of two you should use <p></p>, but there are situations (e.g. screenplays) in which you want to introduce a longer pause without implying a change of topic or a new period starting, like a paragraph usually does.
They're fine, if used appropriately. For instance, you shouldn't use them in lieu of <p> tags or to create spacing between elements. You're probably doing something wrong if you ever have two in a row.
Here's an example how <br> can negatively affect styling (run snippet for visuals)
(note the misaligned button and odd space on the right):
button {
width: 70px;
height: 70px;
}
#arrows {
border: solid thin red;
display: inline-block;
}
#arrows span:first-of-type {
text-align: center;
display: block;
}
#moveUp {
margin: 0;
}
/* In the current case instead of <br> use display */
/*
#arrows span:last-of-type {
display: block;
}
*/
<div id="arrows">
<span>
<button id="moveUp" value="üles">↑</button>
</span>
<button id="moveLeft" value="vasakule">←</button>
<button id="moveDown" value="alla">↓</button>
<button id="moveRight" value="paremale">→</button>
<br> <!-- note the shifted button and odd space on right -->
<span>or move with keyboard arrows</span>
</div>
In HTML (up to HTML 4): use <br>
In HTML 5: <br> is preferred, but <br/> and <br /> is also acceptable
In XHTML: <br /> is preferred. Can also use <br/> or <br></br>
So use of <br> tag is perfectly valid HTML. But use of <br> is not recommended?
Main reason why not to use <br> is because it's not semantic tag & has no content inside. Its use can be avoided like,
<p>some<br>text<p>
can be marked up without <br> as
<p>some</p>
<p>text<p>
If you are using <br> other purpose like top-spacing etc. that can be achieved via CSS margin property.