I am making a site that publishes articles in issues each month. It is straightforward, and I think using a Markdown editor (like the WMD one here in Stack Overflow) would be perfect.
However, they do need the ability to have images right-aligned in a given paragraph.
I can't see a way to do that with the current system - is it possible?
You can embed HTML in Markdown, so you can do something like this:
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
I found a nice solution in pure Markdown with a little CSS 3 hack :-)
Follow the CSS 3 code float image on the left or right, when the image alt ends with < or >.
img[alt$=">"] {
float: right;
}
img[alt$="<"] {
float: left;
}
img[alt$="><"] {
display: block;
max-width: 100%;
height: auto;
margin: auto;
float: none!important;
}
Many Markdown "extra" processors support attributes. So you can include a class name like so (PHP Markdown Extra):
{.callout}
or, alternatively (Maruku, Kramdown, Python Markdown):
{: .callout}
Then, of course, you can use a stylesheet the proper way:
.callout {
float: right;
}
If yours supports this syntax, it gives you the best of both worlds: no embedded markup, and a stylesheet abstract enough to not need to be modified by your content editor.
I have an alternative to the methods above that used the ALT tag and a CSS selector on the alt tag... Instead, add a URL hash like this:
First your Markdown image code:
Note the added URL hash #center.
Now add this rule in CSS using CSS 3 attribute selectors to select images with a certain path.
img[src*='#left'] {
float: left;
}
img[src*='#right'] {
float: right;
}
img[src*='#center'] {
display: block;
margin: auto;
}
You should be able to use a URL hash like this almost like defining a class name and it isn't a misuse of the ALT tag like some people had commented about for that solution. It also won't require any additional extensions. Do one for float right and left as well or any other styles you might want.
I like to be super lazy by using tables to align images with the vertical pipe (|) syntax. This is supported by some Markdown flavours (and is also supported by Textile if that floats your boat):
| I am text to the left |  |
or
|  | I am text to the right |
It is not the most flexible solution, but it is good for most of my simple needs, is easy to read in markdown format, and you don't need to remember any CSS or raw HTML.
Embedding CSS is bad:
CSS in another file:
img[alt=Flowers] { float: right; }
<div style="float:left;margin:0 10px 10px 0" markdown="1">
</div>
The attribute markdown possibility inside Markdown.
Even cleaner would be to just put p#given img { float: right } in the style sheet, or in the <head> and wrapped in style tags. Then, just use the markdown .
I liked learnvst's answer of using the tables because it is quite readable (which is one purpose of writing Markdown).
However, in the case of GitBook's Markdown parser I had to, in addition to an empty header line, add a separator line under it, for the table to be recognized and properly rendered:
| - | - |
|---|---|
| I am text to the left |  |
|  | I am text to the right |
Separator lines need to include at least three dashes --- .
If you implement it in Python, there is an extension that lets you add HTML key/value pairs, and class/id labels. The syntax is for this is:
{: style="float:right"}
Or, if embedded styling doesn't float your boat,
{: .floatright}
with a corresponding stylesheet, stylish.css:
.floatright {
float: right;
/* etc. */
}
As greg said you can embed HTML content in Markdown, but one of the points of Markdown is to avoid having to have extensive (or any, for that matter) CSS/HTML markup knowledge, right? This is what I do:
In my Markdown file I simply instruct all my wiki editors to embed wrap all images with something that looks like this:
'<div> // Put image here </div>`
(of course.. they don't know what <div> means, but that shouldn't matter)
So the Markdown file looks like this:
<div>
![optional image description][1]
</div>
[1]: /image/path
And in the CSS content that wraps the whole page I can do whatever I want with the image tag:
img {
float: right;
}
Of course you can do more with the CSS content... (in this particular case, wrapping the img tag with div prevents other text from wrapping against the image... this is just an example, though), but IMHO the point of Markdown is that you don't want potentially non-technical people getting into the ins and outs of CSS/HTML.. it's up to you as a web developer to make your CSS content that wraps the page as generic and clean as possible, but then again your editors need not know about that.
I had the same task, and I aligned my images to the right by adding this:
<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>
For aligning your image to the left or center, replace
<div style="text-align: right">
with
<div style="text-align: center">
<div style="text-align: left">
You can directly use align property:
<img align="right" width="100" height="100" src="https://images.unsplash.com/photo-1650620109005-099c2de720f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60">
The best and most customizable option:
<div style="display:flex; align-items: center;">
<div style="flex:1">
<img src="https://www.researchgate.net/profile/Jinsong-Chong/publication/233165295/figure/fig5/AS:667635838640135#1536188196882/Initial-contour-Figure-9-Detection-result-in-low-resolution-image-in-low-resolution-image.ppm"/>
</div>
<div style="flex:1;padding-left:10px;">
<img src="https://www.researchgate.net/profile/Miguel-Vega-4/publication/228966464/figure/fig1/AS:669376512544781#1536603205341/a-Observed-low-resolution-multispectral-image-b-Panchromatic-image-c.ppm" />
</div>
</div>
This will align the first to the left, and the second to the right. Works for more than 2 images too.
For a simple approach to just indenting your image a bit, just use some non-breaking spaces with an img element. E.g., <img src="https://user-images.githubusercontent.com/123456/123456789-3aabedfe-deab-4242-97a0-a6641e675e68.png" />
Align image and text side-by-side as part of a paragraph in a single block, within a warning box.
<div class="warning" style='background-color:#EDF2F7; color:#1A2067; border-left: solid #718096 4px; border-radius: 4px;'>
<p style='padding:0.7em; margin-left:0.7em; display: inline-block;'>
<img src="typora_images/image-20211028083121348.png" style="zoom:70%; float:right; padding:0.7em"/>
<b>isomorphism</b> → In mathematics, an isomorphism is a structure-preserving mapping between two structures of the same type that can be reversed by an inverse mapping.<br>
</p>
</div>
Output :
I think the easiest solution is to directly specify align="right":
<img align="right" src=/logo.png" alt="logo" width="100"/>
this work for me
<p align="center">
<img src="/LogoOfficial.png" width="300" >
</p>
Simplest is to wrap the image in a center tag, like so ...
<center></center>
Anything to do with Markdown can be tested here - http://daringfireball.net/projects/markdown/dingus
Sure, <center> may be deprecated, but it's simple and it works!
Related
I'm trying to find a way to create an HTML layout and display it as text.
for example, i want to "paint" an area over the dummy html layout according to a selection.
I've made an example using images but my question is how to replace the images part with pure HTML / CSS?
just a side note, i'm working with a .Net environment (MVC)
jsFiddle example
CSS:
img{
display: none;
}
img:target {
display: block;
}
HTML:
<div>
Top Head |
Bottom Head |
Top Bottom |
Bottom Head
<div>
<img id="topHead" src="https://s29.postimg.org/fjuguwv2f/htmlTopHead.png" alt="">
<img id="bottomHead" src="https://s29.postimg.org/qtn6pv03r/htmlBottomHead.png" alt="">
<img id="topBody" src="https://s29.postimg.org/vgt8rmngn/htmlTopBody.png" alt="">
<img id="bottomBody" src="https://s29.postimg.org/q2ugk2xqf/htmlBottomBody.png" alt="">
</div>
</div>
Take a look at: http://www.freeformatter.com/html-escape.html
This will replace the characters that are reserved in HTML and must be replaced with their corresponding HTML entities.
What about a syntax highlighter like prism? there are many others which can fit to your requirements.
If this doesn't help, your best option is coding the html file, and put inside each tag the scaped version, with your own styling.
friends. I'm using atom to write html codes. Every time I input the word "p", it can generate 3-line codes automatically:
<p>
</p>
now I give a inline class to put two p elements in one line:
.inline {
display:inline-block;
}
<p class="inline">
Hi, friend
</p>
<p class="inline">
s
</p>
I want it shows "Hi, friends" in browser, but it shows "Hi, friend s" with a space between "friend" and "s".
I know the problem is that html treats a line-break as a space.So if I write the code as <p class="inline">Hi, friend</p><p class="inline">s</p>, then I can get the result I want. So I have two questions:
Can I avoid the needless space when write codes in multiple lines?（I tried to search on the web, only get the answer "No": Advanced HTML multiline formatting - removing not need spaces from new lines）
If No.1 can't, can I autocomplete the p element in only one line as <p></p> while using atom?(Actually, after autocomplete the codes, I can use Ctrl+J to join two lines. However, this only works for two lines(not 3 or more) and will change original line-break into a space)
Waiting for answers sincerely. Thanks.
Hi you can remove white space, see my fiddle here
you can do this by keeping in one line like this
<p>Hi, friend</p><p>s</p>
p{
margin: 0;
display: inline;
}
or by this method
<div class="parent1">
<p>Hi, friend</p>
<p>s</p>
</div>
p{
margin: 0;
display: inline;
}
.parent1 {
font-size: 0;
}
.parent1 p {
font-size: 16px;
}
Try display:table-cell - like this:
.inline {
display: table-cell;
}
<p class="inline">
Hi, friend
</p>
<p class="inline">
s
</p>
Final edit:
This answer was wrong and I know it is wrong. I'm leaving it for posterity because some of the information below is still useful.
Edit: forget everything I wrote below-- the problem is just that your CSS is set to display as inline-block, not inline.
.inline {
/*display:inline-block;*/
display: inline;
}
Check out this post:
How to remove the space between inline-block elements?
This is known, expected behavior for inline-block elements. And it's not just the space because of the new line in the element-- it happens even if they are on the same line, like so:
<p class="inline">Hi, friend</p>
<p class="inline">s</p>
There are known techniques for handling this behavior (see here and here -- none of it is super pretty, but it's the reality of the situation.
To summarize the above links, they are basically means of trying to remove the spaces in the editor in ways that aren't super hideous or painful My preferred method is commenting out the spaces, like so:
<p class="inline">Hi, friend</p><!--
--><p class="inline">s</p>
...but it's really up to preference.
Alternately, you can leverage other options like floats or flexbox to achieve what you are looking for.
So I'm having a sorta minor issue that is really bothering me. I'm trying to make a single line but the live site is separating the h3 and the sup onto two separate lines.
<p><h3><b><font color=" crimson";>CONSENT</font></b></h3> <sup>
Forgot? I got you </sup><a
href="http://www.exampledomain.com/example"
target="_black">Script</a></p>
The concept is to have the "Forgot? I got you" and the button be on the same line but spaced a little further from the word "Consent".
As you haven't really provided an exact example of what you want your result to look like, you might consider using the following mark-up :
<h3 style='color: crimson; display:inline-block;'>
CONSENT
</h3>
<small>
Forgot? I got you
Script
</small>
What this does :
<h3> and other heading tags are block level elements, which means that they will take not be rendered inline by default. You can change this by indicating that you want to display them inline by using display:inline; or display:inline-block;
The <font> tag hasn't been used in ages, you are better off simply applying a style attribute to the most relavent tag to style your contents.
You were previously using all of these tags within a <p> tag, which can constitute invalid markup. They have each been broken out, if you need some type of container tag, you can use a <div>.
Replaced the superscript tag <sup> with a small tag <small> to keep everything on the same line. You could replace this if you preferred.
Previously, you were using target="_black", which undoubtedly you meant to be target="_blank" for your <a> tag.
Generally, you would want to avoid using an abundance of inline style tags in favor of using an actual CSS file along with class attributes.
Example
<h3 style='color: crimson; display:inline-block;'>
CONSENT
</h3>
<small>
Forgot? I got you
Script
</small>
Your code needs a lot of work but really you could achieve this with simple CSS. As simple as it gets would be using a vertical-align on a <span> element, unfortunately vertical-align: middle; does NOT work directly on your <p> or <h3> tags. There are plenty of other ways to achieve this with separate <div>'s and all but here is the most basic.
HTML:
<span class="vAlign">
<h3 class="crimson flt-left vAlign">CONSENT</h3>
<p class="vAlign"><a href="http://www.exampledomain.com/example"
target="_black">Forgot? I got you</p>
</span>
And CSS
.flt-left{
float: left;
}
.crimson {
color: crimson;
}
.vAlign {
display:inline-block;
vertical-align: middle;
}
I am designing an HTML email for a company. I'm having a problem with the footer at the bottom. Currently, it looks like this:
I love it!
When it's resized a lot, it looks like this:
Wonderful! I DO want the footer to break onto 3 lines.
However, when I resize the window halfway, it looks like this:
What CSS code can I use to make the footer to either break ALL lines, or none? It needs to ALWAYS look like either this:
or this:
But NEVER this:
and NEVER this:
I tried numerous combinations of white-space: nowrap; to no avail. When ANY lines break, they need to ALL break at the same time. Maybe this could be accomplished with a <table>?
Thank you for your help. The CSS needs to be inline and without media queries. JavaScript support for HTML email is very limited and non-reliable, therefore, I wish to do without it.
A JSFIDDLE for editing can be found here.
The layout which you are trying is possible using media queries or javascript. but most of the email templates doesn't support both solutions.
So, as I see, you have two options:
it will be better if you always keep the footer items independent to each row i.e add br tags between the nav tags.
or
Create different email templates based on the resolution.
Personal suggestion: I would have gone with the first option.
<nav style="display:inline; white-space:nowrap;">
<a moz-do-not-send="true" style="text-decoration:none; word-break:break-all; color:white;" href="tel:1234567890">
(123) 456-7890
</a>
</nav>
Use
word-break:break-all;
Jsfiddle
http://jsfiddle.net/f1uuwexy/8/
You can do this using only html:
<div>
www.hazardmoving.com<br />
Patrickhazard#yahoo.com<br />
(123) 456 7890<br /></div>
You seem to try pushing css beyond its limits
If you feel comfortable including bootstrap you can try:
<link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div style="width: 600px; margin: 60px auto; text-align: center;">
<div class="col-md-4">www.hazardmoving.com</div>
<div class="col-md-4">Patrickhazard#yahoo.com</div>
<div class="col-md-4">(123) 456 7890</div>
</div>
That should do the work. Check my pen:
http://codepen.io/anon/pen/EajwXp
Okay, bear with me because I'm new to WEB development.
I have an MVC 4.0 Web API application using Razor and Entity Framework 5 (C#).
One of my links takes me to a page which displays data from the EF.
I added an HTML button to this page called "Export to Excel."
I want to center this button on the screen, above the report results.
What is the correct approach for this and how do I do it? I need to understand the PROPER architecture for files and code.
Do I use CSS? If so, where do I store the file in the solution? How do I use it on my page?
Do I do something specific to Razor?
Should I simply use HTML tags like
Again, all I want to do is center a button on the web page.
Can someone help me with a step by step process to do this correctly?
I'm just having a hard time figuring out where to put code and files (basically how to structure the application properly).
You can use CSS.
.centerAlign {
text-align: center;
}
In your view you can then apply the centerAlign class to the button:
<button class='centerAlign' />
You can also make a custom HTML Helper that will automatically apply the class for you.
namespace YourApplication.Helpers
{
public static class ButtonExtensions
{
public static string ButtonCenter(this HtmlHelper helper, string value)
{
return String.Format("<button class='centerAlign'> {0} </button>", value);
}
}
}
Then in your view you could do:
#Html.ButtonCenter("Click me");
I know there is an answer, but this is a really common way to center objects margin: 0 auto. Since the answer by itself doesn't really explain, I'll provide some detail.
When you build your View it is marked as a .cshtml file. Your View will contain a series of HTML or Hyper Text Markup Language. What you are doing is utilizing a particular Element called a div. These are used to help build a structure or layout for your site.
<div id="Origin">
<div class="origin-container">
<div class="header-style">
<div id="Origin-Header">
<div class="header-container">
// Inside Header Elements
</div>
</div>
</div>
</div>
</div>
So essentially this is a Site Structure. You'll notice that I have a tendency to inner-wrap a lot of my Elements. That is because it makes it easier to customize and style my layout, making it more customizable.
If your thinking "How is it more customizable?" Your partially correct, this HTML is simply a structure- The customization will come from your Stylesheet, Cascading Stylesheet to be exact.
Your HTML will call this Stylesheet to help adapt your layout to give a consistent appearance. So if you'd like to center your header you would put in your stylesheet:
#Origin-Header {
margin: 0 auto;
}
What the command is stating is three things:
Margin: These are the page margins.
0: Is the pixel difference for Top and Bottom.
Auto: The left and right pixels.
So rather then a top, bottom, left, and right they are all merged together in the short-hand. You'll have a lot of additional control to your layout as well through your stylesheet. Bare in mind that this is manipulating those div tags. If your trying to align a particular object, it would work identical but rather then focus on the element- You would point it to your html object.
But I hope that helps.
I do not know if it is good practice, but the only way I have been able to center entire controls like a button in HTML was to do something like
.btn{
margin-left:auto;
margin-right:auto;
}
I have been able to center the control by setting the button's class to "btn" and using the above css. The text-align property has never really worked for me in HTML.
Try this:
[i guess is this what you are looking for]
check LIVE DEMO on jsfiddle
HTML
<section class="iHaveBorder">
<h3>Help me here!...Center stuff...</h3>
<div class="myWorderfullDiv iAmRed">
your report here...
</div>
<center>
<button>DoIt</button>
</center>
</section>
<h1>::::::OR:::::</h1>
<section class="iHaveBorder">
<h3>Help me here!...Center stuff...</h3>
<div class="myWorderfullDiv iAmBlue">your report here...</div>
<div style="text-align: center;" >
<button>DoIt</button>
</div>
</section>
<h1>::::::OR relative:::::</h1>
<section class="iHaveBorder iFeetIn">
<h3>Help me here!...Center stuff...</h3>
<div class="myWorderfullDiv iAmGreen">your report here...</div>
<div class="iWant2BeCenter">
<button>DoIt</button>
</div>
</section>
CSS:
.myWorderfullDiv{
height: 80px; width: 200px;
}
.iAmBlue{background-color: blue}
.iAmRed{background-color: red}
.iAmGreen{background-color: green}
.iHaveBorder{border:2px black solid;}
.iFeetIn{display: inline-block;}
.iWant2BeCenter{text-align: center;}
check LIVE DEMO on jsfiddle