- Details
- Written by: Stanko Milosev
- Category: HTML
- Hits: 1988
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#"> <head> <meta content="text/html; charset=UTF-8" name="Content-Type" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@milosev.com" /> <meta name="twitter:creator" content="@stankomilosev" /> <meta property="og:title" content="Test title" /> <meta property="og:url" content="http://www.milosev.com/gallery/allWithPics/india/www/index.html" /> <meta property="og:image" content="http://www.milosev.com/gallery/allWithPics/india/thumbs/20191111_162437.jpg" /> <meta property="og:description" content="Test description" /> </head> <body> test1 </body> </html>Here is test link. Notice line:
<meta content="text/html; charset=UTF-8" name="Content-Type" />Without that line it will not work.
- Details
- Written by: Stanko Milosev
- Category: HTML
- Hits: 2660
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#"> <head> <meta property="og:title" content="test" /> <meta property="og:url" content="http://www.milosev.com/gallery/index.html" /> <meta property="og:image" content="http://www.milosev.com/gallery/20180911_202614.jpg" /> <meta property="fb:app_id" content="2128533190490272" /> <meta property="og:description" content="Yo! This is a test!" /> </head> <body> test </body> </html>
- Details
- Written by: Stanko Milosev
- Category: HTML
- Hits: 9786
One example with using srcset:
<!doctype html> <html> <head> </head> <body> <img srcset="/large.jpg 900w, /medium.jpg 600w, /small.jpg 400w" src="/large.jpg"> </img> </body> </html>
Check example here (try to resize window - but in Chrome incognito mode, to see medium image, width of the window has to be less then 600 and bigger then 400, every time when you want to resize the window to see another image you have to either clear the cache or close incognito window and open it again)
---
Another example with picture (art direction)
<!doctype html> <html> <head> </head> <body> <picture> <source media="(min-width: 800px)" srcset="/large.jpg, /medium1.jpg 2x"> <source media="(min-width: 450px)" srcset="/medium.jpg, /large1.jpg 2x"> <img src="/small.jpg" srcset="/large1.jpg 2x"> </picture> </body> </html>
At this moment I have no idea what 2x means... Check the example here.
- Details
- Written by: Stanko Milosev
- Category: HTML
- Hits: 17040
Title and content of this article basically I copied from here.
HTML:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link type="text/css" rel="stylesheet" href="/index.css"> </head> <body> <table id="table_id"> <tr> <td>Column1</td> <td>Column2</td> <td>Column3</td> <td>Column4</td> <td>Column5</td> <td>Column6</td> <td>Column7</td> <td>Column8</td> <td>Column9</td> <td>Column1</td> <td>Column2</td> <td>Column3</td> <td>Column4</td> <td>Column5</td> <td>Column6</td> <td>Column7</td> <td>Column8</td> <td>Column9</td> </tr> <tr> <td>Column11</td> <td>Column21</td> <td>Column31</td> <td>Column41</td> <td>Column51</td> <td>Column61</td> <td>Column71</td> <td>Column81</td> <td>Column91</td> <td>Column11</td> <td>Column21</td> <td>Column31</td> <td>Column41</td> <td>Column51</td> <td>Column61</td> <td>Column71</td> <td>Column81</td> <td>Column91</td> </tr> </table> </body> </html>
CSS:
body { font-size: 20px; } #table_id { display: block; border: 1px solid; } #table_id tr { border: 1px solid; } #table_id td { display: inline-block; min-width: 50px; border: 1px solid; width: 100px; min-height: 50px; }
Example you can see here.
Things to notice are:
#table_id {
display: block;
and:
#table_id td {
display: inline-block;
Basically you need only display: block on table to set, and display: inline-block on td.
Idea behind this article was to have responsive table, but after testing I am not satisfied with it. Next thing to test is this article, which at this moment I didn't test.
---
Here is responsive table example.
HTML:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1" name="viewport"> <title></title> <link type="text/css" rel="stylesheet" href="/index.css"> </head> <body> <table id="table_id"> <thead> <tr> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> <th>Column5</th> <th>Column6</th> <th>Column7</th> <th>Column8</th> <th>Column9</th> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> <th>Column5</th> <th>Column6</th> <th>Column7</th> <th>Column8</th> <th>Column9</th> </tr> </thead> <tr> <td>Column1</td> <td>Column2</td> <td>Column3</td> <td>Column4</td> <td>Column5</td> <td>Column6</td> <td>Column7</td> <td>Column8</td> <td>Column9</td> <td>Column1</td> <td>Column2</td> <td>Column3</td> <td>Column4</td> <td>Column5</td> <td>Column6</td> <td>Column7</td> <td>Column8</td> <td>Column9</td> </tr> <tr> <td>Column11</td> <td>Column21</td> <td>Column31</td> <td>Column41</td> <td>Column51</td> <td>Column61</td> <td>Column71</td> <td>Column81</td> <td>Column91</td> <td>Column11</td> <td>Column21</td> <td>Column31</td> <td>Column41</td> <td>Column51</td> <td>Column61</td> <td>Column71</td> <td>Column81</td> <td>Column91</td> </tr> </table> </body> </html>
CSS:
/* @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { */ @media only screen and (max-width: 480px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } /* Label the data */ td:nth-of-type(1):before { content: "Column1"; } td:nth-of-type(2):before { content: "Column2"; } td:nth-of-type(3):before { content: "Column3"; } td:nth-of-type(4):before { content: "Column4"; } td:nth-of-type(5):before { content: "Column5"; } td:nth-of-type(6):before { content: "Column6"; } td:nth-of-type(7):before { content: "Column7"; } td:nth-of-type(8):before { content: "Column8"; } td:nth-of-type(9):before { content: "Column9"; } td:nth-of-type(10):before { content: "Column1"; } td:nth-of-type(11):before { content: "Column2"; } td:nth-of-type(12):before { content: "Column3"; } td:nth-of-type(13):before { content: "Column4"; } td:nth-of-type(14):before { content: "Column5"; } td:nth-of-type(15):before { content: "Column6"; } td:nth-of-type(16):before { content: "Column7"; } td:nth-of-type(17):before { content: "Column8"; } td:nth-of-type(18):before { content: "Column9"; } }
Example you can see here. Problem which I had is something like described here. I had to insert line:
<meta content="width=device-width, initial-scale=1" name="viewport">
and in CSS I am using:
@media only screen and (max-width: 480px),
(min-device-width: 768px) and (max-device-width: 1024px)
Only like this I was able to force example to work in Dolphin browser...