Can i use multiple figures for images with different captions? Or mabye shoud use div with headling for new image?
Example:
<figure>
<figcaption>XXX</figcaption>
<img src="image/jmv.png" alt="XXX">
</figure>
<figure>
<figcaption>XXX</figcaption>
<img src="image/jmv.png" alt="XXX">
</figure>
A figure element may contain several images, but it can contain at most one figcaption element, which thus works as a caption for the entire element. There are various other ways to associate caption texts with images; after all, we used captions before figure was invented. Somewhat naivistically, you could use e.g. the following approach:
<figure>
<figcaption>Two random images</figcaption>
<table>
<tr>
<td>
<img src="http://lorempixel.com/200/100/people" alt="(image 1)">
<td>
<img src="http://lorempixel.com/200/100/nature" alt="(image 2)">
<tr>
<td>
A random image of people.
<td>
A random image of nature.
</table>
</figure>
Alternative you could use several figure elements, each with one image and a figurecaption, and you could wrap the figure elements, and possibly a heading element for them, inside a div element or a section element.
Within either choice, there is much variation. The choice of the approach and the variation is mainly a matter of taste and coding standards, though it may also be affected by technical considerations. Some approaches can be more suitable for styling or scripting purposes, in a particular context.
Related
I was just updating my profile readme on Github, but i had a issue. I need to align two elements side by side vertically, but, when I tried to use CSS, I just found out that it's impossible to use style attr on Github's Markdown files. So, how can I align two elements side by side, vertically, without CSS?
My code:
<details>
<summary>Minhas Estátisticas no Github</summary>
<p align="center">
<img src="https://github-readme-stats.vercel.app/api?locale=pt-br&username=carlos3g&theme=radical&show_icons=true&include_all_commits=true" alt="Estátisticas Gerais" />
</p>
<p align="center">
<img src="https://github-readme-stats.vercel.app/api/top-langs?locale=pt-br&username=carlos3g&theme=radical" alt="Techs utilizadas nos projetos" />
</p>
</details>
I want align these two p tags
You use p tags which are block element by default if want to make these two images align side by side remove p tags from your code
<details>
<summary>Minhas Estátisticas no Github</summary>
<p>
<img align="left" src="https://github-readme-stats.vercel.app/api?locale=pt-br&username=carlos3g&theme=radical&show_icons=true&include_all_commits=true" alt="Estátisticas Gerais" />
<img align="right" src="https://github-readme-stats.vercel.app/api/top-langs?locale=pt-br&username=carlos3g&theme=radical" alt="Techs utilizadas nos projetos">
</p>
</details>
Note: I used the p tag to make more space between the summary title and the details
You can also use tables if want but it's not very useful in this situation. Here a good guide to using tables in markdown
Being a customer service staff with limited access to basic html, I've been assigned a task that beyond my skill about making a decent page of highlight items, after series of search around, I somehow get things working, well, in firefox, when I load up the the same content in Chrome & IE, I found different problem and to my best effort, I have no idea what cause the problem...
You might first wish to look at the firefox version as it display perfectly as I wanted it to:http://jsfiddle.net/kitchellw/TR6v5
(and I don't know why the first line doesn't apply the CSS...)
In IE, the round corner gone, which I won't worry too much... but
padding is gone...
the lower table looks like a mess
I found a way to tackle the image border, just border=0
In chrome,
while the upper section looks ok, the content in lower table seems 'shifted' to right by a few pixels and no longer stay center
Here is the exact code for the problem table at the lower section:
<table class=highlightitem>
<tr>
<td height="200" valign="top" >
<center>
<a href="http://www.digitalbuydirect.com/index.php?route=product/category&keyword=DSC-TX30" target="blank">
<img width=234 src="http://www.digitalbuydirect.com/edm/eDM20130516/TX30.png" /></a>
</center>
</td>
</tr>
<tr>
<td height="200" valign="top" >
<font class=product><B>some text</b></font><br><br>
<font class=content>some text</font><br>
<br>
<font class=pricehighlight><B>price</font><BR>
<font class=content><s>other price</s></font>
</td>
</tr>
<tr>
<td align="right" height="50" valign="bottom" >
<img src="http://www.digitalbuydirect.com/edm/achieve/shopnow_35.png" /> </td>
</tr>
</table>
and finally, I know my code is complex by using multi-table to control the vertical position, and CSS is my friend here, but i were unable to get the 'shop now' icon station at the lower right corner with clickable url attach with it, I found a CSS background image with a display block for the url might work, but the display block still request at least 1 character, which I cannot afford on my image. Any hint or direction would be appreciated.
First of all, you should really clean up your deprecated code.
So far the things I've seen that are deprecated or not supported anymore are as follows:
<center> - Use CSS text-align:center; reference
<font> - Use another element like <p> coupled with CSS text styling
<td align="right"> - Use CSS float:right; reference
<td valign="top"> - Use CSS vertical-align:top; reference
As for your IE padding problem, take a look at this question. I'm not sure if that's applicable though, since you didn't include your CSS in the question, so I don't know how you implemented the padding you already have.
As for centering, using margin:0 auto; will work for statically positioned elements. For absolutely or fixed position elements I do this: #elementID{width:800px[specify width]; left:-400px[negative half of the width]; margin-left:50%;}
I want this layout where I have a rectangular box. And inside the box on the left there is a text and on the right there is an image. This looks fine in the browser, but when sent out as an html email, in outlook the float right doesn't seem to work. It puts the image in the next line under the text. Any ideas on how to make this work? (I am trying to avoid using tables.)
<div style="width: 100%;border-style:solid;overflow: hidden;">
<span style="float: left;">
<h3> Your appointment Details</h3>
</span>
<span style="float: right;">
<img src="someImage"/>
</span>
</div>
Very late to the conversation, but here is how to "float" in html email using align="" instead.
Example here
Also, if you are looking for resources on html email (I assume you are as the answer you marked correct is very general), here is a huge list of resources.
This is a really good guide from Mail Chimp on Coding for HTML Emails:
http://kb.mailchimp.com/article/how-to-code-html-emails
Some basic tips:
Use tables for layout.
Set your widest table to be maximum of 600px wide.
Don't try and use JavaScript or Flash
Don't use CSS in a style tag as some mail clients will discard it.
Use inline CSS styles only.
Basically code your emails as if it was roughly 2003.
CampaignMonitor provide this rather brilliant guide to all CSS support across multiple email clients, which is also available as a pdf or xls download.
As the answers above say, email support for CSS is very limited, mostly due to Microsoft's descision to use Word as its html rendering engine.
Simple floating images can be like
<img src="yourimage" align="left" />
BUT that way you won't get solid results with padding between text and image, outlook removes margin and padding and your text will stick right next to the image. So try this:
<div style="text-align:justify;">
...a lot of text here untill you want to insert an image that floats left...
<table cellpadding="0" cellspacing="0" align="left" style="float: left;">
<tr>
<td>
<img src="yourimage" align="left" vspace="4" />
</td>
<td width="15"> </td>
</tr>
</table>
...a lot more text here until you need an image that floats right...
<table cellpadding="0" cellspacing="0" align="right" style="float: right;">
<tr>
<td width="15"> </td>
<td>
<img src="yourimage" align="left" vspace="4" />
</td>
</tr>
</table>
... a lot more text here...
</div>
You need to wrap a 'table' element around it to get the padding-margin effect to work in Gmail, Outlook (online), Microsoft Outlook (desktop client),...
Give the table an align=left or right attribute. (Edit answer here: in addition and fallback for other email clients also give the table a float value so do both. They are back-ups to each other. Some clients understand "float", others understand "align", some understand both,...) Your table will float in the text almost like an image does. The only difference is that in outlook a table generates an automatic line break in the text where an image with align left or right does not generate breaks.
For setting the margin, since we are now working with a table, add an extra "td" with a width="15" to the left or right of your image cell and a non-breaking-space in it. (or a transparant gif -> spacer.gif)
You better not leave cells empty because otherwise the width of your cell will not be respected in certain email clients
For top and bottom margin we can use the 'vspace' attribute, don't forget to give the image an align = left or right attribute. Otherwise the 'vspace' will not work.
I've found a way to apply float on Outlook.com.
Just capitalize the tag like Float:left.
<span style="Float:left;">Content to float</span>
Maybe you should use !important too;
I tested it and it worked.
check out https://www.campaignmonitor.com/css/ here it has listed what are all the things supported and not supported in email
Instead of float you can use an outer table and put contents you want to float left in left td of outer table.
this is not an elegant answer but I did it this way
When you are floating something to the right of something the right floating element should allways apear first in code. Like this:
<div style="width: 100%;border-style:solid;overflow: hidden;">
<img src="someImage" style="float: right;"/>
<h3> Your appointment Details</h3>
</div>
If the Doctype declares XHTML 1.0 Transitional then would this be acceptable?
<a href="" target="_self">
<img src="" width="160" height="160" alt="" />
<img src="" width="160" height="160" alt="" />
<img src="" width="160" height="160" alt="" />
<h1>Images</h1>
</a>
I seem to remember reading that if XHTML then <a></a> cannot contain block elements but I cannot locate this information again.
You have two different questions there:
Is hyperlinking multiple elements with a single “a” tag acceptable?
Yes it is, if the multiple elements combined form the description of the resource to which the hyperlink points.
Can you have block level elements validly inside a hyperlink in XHTML 1.0 Transitional?
No. However, it is valid in HTML5 if the parent of the <a> element permits block level elements inside it.
Yes that's fine. Anchor tag's shouldn't contain divs, but images and text are fine.
Use http://validator.w3.org/check to validate your code, and it will detect the Doc type and inform you of any problems!
It´s fine, but I would recommend against this.
From a SEO perspective its best to have clean hyperlinks with clear descriptions.
Now you have 4 elements (3 images and 1 header) of which the images lack a description in your example.
Also with regard to your CSS you might run into undesired behavior for the end/user, since you apply a link to different elements. By that I mean that you MAY have to style differently for the example above.
If you try your code you will see it does what is expected in basically all browsers, but why make it difficult for yourself.
I am unsure what the best combination of CSS rules and HTML elemtents is to achieve this layout:
example layout
(Apologies for the image, it was the best way I could think of to express what I had in mind)
It is essentially a table with 2 rows and 4 columns, but I don't want to use tables.
I'm fairly confident I could hack something together that would do this but it wouldn't be elegant or optimal and I want to know the cleanest way of doing it.
Let me know if this is not clear. Thanks
Do you mean something like this?
http://jsfiddle.net/semencov/P8B4R/
Depending on what's your target audicence, consider using 1200px.com.
In case you already have your template, I made you this jsFiddle. You can start from there :)
http://jsfiddle.net/aLXby/6/
For simple layout, float all the containers ("columns") left and make sure to clearfix the parent container of those columns:
<section class="clearfix">
<figure>
<img src="img1.jpg">
<figcaption>Text here</figcaption>
</figure>
<figure>
<img src="img2.jpg">
<figcaption>Text here</figcaption>
</figure>
<figure>
<img src="img3.jpg">
<figcaption>Text here</figcaption>
</figure>
<figure>
<img src="img4.jpg">
<figcaption>Text here</figcaption>
</figure>
</section>
Your CSS might be:
(clearfix as described on linked page)
figure {
float: left;
}
For more control and structure, try a grid system, like 960.gs.
This example is assuming that your images have captions, and the HTML5 figure tag and figcaption tags are well-suited for this purpose.
The most important thing is to keep your HTML semantic. So there's no "HTML best suited for this layout" but rather HTML best suited for that content. In this case it's what Matt suggests (figure and figcaption). I would probably use a list (ul with li) rather than section though.
Regarding the styling, there are numerous ways to achieve that layout. Depending on your specific needs (are the images equal height? equal width? what about the captions? one line? several lines? etc) you might get by using floats, you could also use display: inline-block and if you really want to replicate a table you can use display: table/table-row/table-cell.
Edit: I'd argue that using a grid system for this is like using an MVC framework to display an animated gif. All grid systems I've seen require the user to add quite a load of divs and classes that ruin your markup.