I'm trying to replicate the design and structure of a Facebook page post.
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
a {
color: #365899;
cursor: pointer;
text-decoration: none;
}
.post td {
vertical-align: top;
}
.timestamp {
font-size: 13px;
color: #999;
}
<div class="post">
<table>
<tbody>
<tr>
<td>
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</td>
<td>
<table>
<tr>
<td>
<strong><a>Toomblr</a></strong>
</td>
</tr>
<tr class="timestamp">
<td>
20/01/2017 - 11:43
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Some content.
</td>
</tr>
</tbody>
</table>
</div>
Here is the JSFiddle of what I have: https://jsfiddle.net/6nodfbdj/
As you can see, the image is only 50x50, but it's pushing the td all the way out like that for no reason.
Somehow it's conflicting with the td that contains the content. So basically what's happening, is whatever the width of the content td is, is also being set for the td containing the image.
Any ideas?
As mentioned in one of the comments, tables are not to be used for formatting. They are for tabular data.
From The w3.org site
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
Note. This specification includes more detailed information about tables in sections on
https://www.w3.org/TR/html401/appendix/notes.html#notes-tables
Instead you should use CSS. While the layout and sizes aren't exactly the same as your fiddle, take a look at https://jsfiddle.net/ringhidb/jeeu2yrt/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 16px;
}
a {
color: #365899;
cursor: pointer;
text-decoration: none;
}
.post {
position: absolute;
}
.header {}
.logo {
float: left;
padding: .1em;
}
.info {
float: left;
padding: .25em;
}
.site {
font-size: 1.02em;
font-weight: bold;
}
.timestamp {
font-size: .75em;
color: #999;
}
.content {
clear: both;
}
</style>
<title>CSS Layout</title>
</head>
<body>
<div class="post">
<div class="header">
<div class="logo">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</div>
<div class="info">
<a class="site">Toomblr</a>
<div class="timestamp">20/01/2017 - 11:43</div>
</div>
</div>
<div class="content">
Some content.
</div>
</div>
</body>
</html>
It's being set by the width of the text in the <td> containing "Some content". Try:
<td colspan=2>
Some content.
</td>
I don't know what you want to do, but try this.
.post td {
vertical-align:top;
float:left;
}
You had a "spare cell" what can be fixed with rowspan and colspan.
Try this:
<body>
<div class="post">
<table>
<tbody>
<tr>
<td rowspan=2>
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</td>
<td>
<strong><a>Toomblr</a></strong>
</td>
</tr>
<tr class="timestamp">
<td>
20/01/2017 - 11:43
</td></tr>
<tr>
<td colspan=2>
Some content.
</td>
</tr>
</tbody>
</table>
</div>
</body>
have you tried image width 100% ?
Related
I'm trying to create a new HTML signature for our company, but I can't seem to get it work nicely on Gmaill app (Android in my test case). Both font-size and line-height changes. I tried different stuff, even deleted the whole HTML signature and try to make a new one with just a few lines to test, but unfortunately I can't get it to work. I tried so many things, that I just have no clue anymore how to fix. I also tried to search for the problem, but I still can't seem to make it work. Please see attached code.
If anyone can help me into the right direction, that would be great. I also included screenshots to show what I mean regarding the Gmail app. As you can see, also text-size is different.
https://imgur.com/mxtU4Bs
https://imgur.com/RXKQt9w
Thanks in advance!
<html>
<head>
<meta charset="utf-8">
<title>html signature</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {margin: 0px; padding: 0px; }
img { border: 0px; }
a { color: #00002E; text-decoration: none; }
h1.title { font-family: Arial, Helvetica, sans-serif; font-size: 16px; margin-top: 0px; margin-bottom: 5px; }
span.function { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #00002E; }
#wrapper { width: 100%; max-width: 470px; }
#border { border-left: 1px solid #00002E; }
table.functiondetails { width: 100%; margin-top: 5px; }
table.functiondetails tr { height: 30px; }
table.functiondetails tr td { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #00002E; }
table.functiondetails tr td.icon { width: 10%; }
table.functiondetails tr td.detail { width: 90%; }
#media screen and (max-width: 768px) {
#wrapper { width: 90%; }
#logoColumn { width: 30%; max-width: 30%; }
#logoColumn img { width: 100%; }
#functionColumn { width: 70%; max-width: 70%; }
}
#media screen and (max-width: 470px) {
#wrapper{ width: 100%; }
}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table id="wrapper" cellpadding="0" cellspacing="0">
<tr>
<td id="logoColumn">
logo
</td>
<td id="border"></td>
<td id="functionColumn">
<h1 class="title">Name of employee</h1>
<span class="function">Function | Company</span>
<table class="functiondetails" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-phone.jpg" alt="Bel ons" width="13" height="13"></td>
<td class="detail">+31 (0)6 - 12345678<br>+31 (0)162 -123456</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-email.jpg" alt="Mail ons" width="13" height="13"></td>
<td class="detail">email#domain.nl</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-location.jpg" alt="Adresgegevens" width="13" height="13"></td>
<td class="detail">Address line 1<br>Address line 2</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-arrow.jpg" alt="Website" width="13" height="13"></td>
<td class="detail">domain.nl</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
[1]: https://imgur.com/mxtU4Bs
Campaign Monitor can tell you a lot of information about what CSS properties are supported by the different email platforms. On there it mentions that font-size and line-height are almost universally supported. But it says that style tags in the head or body are not entirely supported, and there is very low support for linked CSS. So your best bet is to try inline styles.
https://www.campaignmonitor.com/css/text-fonts/line-height/
One downside of only using inline styles however is that you can't use media queries. So you could still leave the media queries in a style tag, but they just won't be used by every platform.
What i am trying to do is to make HTML similar to this image.
I tried Below HTML with table and with div as well. but text is not aligning proper. Not sure what is the best way to do it. As i am using bootstrap.
Here is my HTML that i tried.
h1{
font-size:45px;
}
<table>
<tr>
<td rowspan="2"><h1>1</h1></td>
<td>Shopping Cart</td>
</tr>
<tr>
<td>small content</td>
</tr>
</table>
You can try with elements to get the result you want.
<div class="item">
<span class="count">1</span>
<div class="txt">
<h2>Shopping Cart</h2>
<p>Manage Your Item list</p>
</div>
<div class="clear"></div>
</div>
<style type="text/css">
.clear {
clear: both;
}
.count {
float: left;
font-size: 45px;
width: 30px;
}
.txt {
margin-left: 40px;
}
.txt h2,
.txt p {
margin: 0;
}
</style>
try this
<style>
.sc-col-4{
width: 33.33%;
background: #ddd;
height: 150px;
}
.left-box{
background:#007bff;
padding: 1.5rem; color: white;
padding-right: 3rem;
padding-left: 3rem;
margin-right:1.3rem;
float:left;
font-size: 50px;
}
.right-box{
float: left;
}
</style>
<div class="sc-col-4">
<div class="left-box">1</div>
<div class="right-box">
<div style="padding-top: 1rem; font-weight:600; font-size: 1.25rem; color: #007bff;">$1.999,50</div>
<div style="color: #868e96; font-weight: 700; font-weight: bold">INCOME</div>
</div>
</div>
h1{
font-size:45px;
}
#bottom{
vertical-align:bottom;
}
#top{
vertical-align:top;
}
td{
padding:0;
margin:0;
line-height:1;
}
<table>
<tr>
<td rowspan="2"><h1>1</h1></td>
<td id='bottom'>Shopping Cart</td>
</tr>
<tr>
<td id='top'>small content</td>
</tr>
</table>
Your code is actually working but the output comes like that due to the size of each cell in table try this :-
<table >
<tr>
<td rowspan="2"><h1>1</h1></td>
<td style="vertical-align:bottom">Shopping Cart</td>
</tr>
<tr>
<td style="vertical-align:top">small content</td>
</tr>
</table>
A solution using styles as mentioned above would probably be cleanest. But if you're looking for something purely within the table element, you could add a nested table as follows.
Hope this helps!
h1 {
font-size: 45px;
}
<table>
<tr>
<td rowspan="2">
<h1>1</h1>
</td>
<td>
<table cellspacing="0">
<tr>
<td>Shopping Cart</td>
</tr>
<tr>
<td>small content</td>
</tr>
</table>
</td>
</tr>
</table>
I am trying to create an Email Signature Generator. I am trying to get the blue line (it can be seen in the program) to stretch all the way down. However, when I do it, it stretches the rest of the items. I believe this may be because it is all inside a table and when one element is sized differently than the others, it tries it equal it out but I am not sure how to change it. Here is my code:
table {
display: inline-block;
}
#image {
width: 200px;
height: 200px;
border-radius: 50%;
}
.spacer {
width: 30px;
}
hr {
height: 200px;
width: 7.5px;
border-radius: 20px;
border: none;
background-color: cornflowerBlue;
}
#fullName {
font-family: 'Source Sans Pro', sans-serif;
font-size: 24px;
color: orange;
}
#job {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
padding-top: 11px;
}
#jobLocationText {
font-family: 'Source Sans Pro', sans-serif;
font-size: 15px;
padding-top: 6px;
}
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr>
<td>
<img src="https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id="image">
</td>
<td class="spacer"></td>
<td>
<hr>
</td>
<td class="spacer"></td>
</tr>
<tr>
<td>
<center>
<div id="fullName">Billy Staples</div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="job"><i>Programmer</i></div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="jobLocationText">at the <b id="jobLocation">HTML hub</b></div>
</center>
</td>
</tr>
</table>
And a working version can be found here.
Again, I am trying to get it so the hr (in the CSS) when the height is changed (to say 300 or something) it doesn't stretch the rest of the table with it. If you have an idea as to how I might be able to do my table differently so that it might be easier or just so that I could fix this problem, suggestions are welcome!
Thanks in advance!
Use rowspan="" to strech <hr> to way down,
<td rowspan="4">
<hr>
</td>
Here's your updated code, https://jsfiddle.net/he84kv8n/10/
<hr> is a horizontal rule (divider), bending it to be a vertical rule (divider) is a use case that will likely be difficult for anyone looking at your code to decipher.
I would suggest using a CSS border attribute on the table cell, that will automatically be the correct size.
I am a beginner with HTML and I am trying to make a table layout. So far I have done the table rows, height, data etc. What I cant figure out is something like the six squares up on top (home, about me, product etc.) from the pictures. Any help would be appreciated.
Here is the code I have so far:
<!DOCTYPE HTML>
<html>
<head>
<title>WEB PAGE TITLE GOES HERE</title>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0">
<tr>
<!-- ============ HEADER SECTION ============== -->
<td colspan="3" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr>
<tr>
<!-- ============ LEFT COLUMN (MENU) ============== -->
<td width="20%" valign="top" bgcolor="#999f8e">
Menu link<br>
Menu link<br>
Menu link<br>
Menu link<br>
Menu link
</td>
<!-- ============ MIDDLE COLUMN (CONTENT) ============== -->
<td width="55%" valign="top" bgcolor="#d2d8c7">
</td>
<td width="25%" valign="top" bgcolor="#999f8e"> </td>
</tr>
<!-- ============ FOOTER SECTION ============== -->
<tr><td colspan="3" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr>
</table>
</body>
<html>
Welcome to Stack.
First of all, I STRONGLY advice you to waste some time and learn Bootstrap, table layouts are old fashionend and they're hard to apply maintenance.
table .menu div{
background: yellow;
color: blue;
display: block;
float: left;
width: 14.66666666666667%;
margin: 1%;
padding: 1px;
border: solid 4px blue;
box-sizing: border-box;
text-align: center;
}
I've developed this Code Pen showing how to create that kind of floating elements that you're seeking, but I've used some css styles (and I advice you to learn it too, It's extremely important nowadays).
Call me inbox if you want some tips or links to study :)
This will do the trick for the menu nav in a flexible layout.
HTML File:
<!DOCTYPE html>
<html>
<head>
<title>Menu Demo</title>
<link rel="Stylesheet" href="style.css">
</head>
<body>
<div id="container">
<nav>
<span class=menu_item>Home</span>
<span class=menu_item>About me</span>
<span class=menu_item>Product</span>
<span class=menu_item>Services</span>
<span class=menu_item>Maps</span>
<span class=menu_item>Contact me</span>
</nav>
</div>
</body>
</html>
CSS File:
body
{
font-size: 100%;
padding: 0;
border: 0;
margin: 0;
}
nav
{
display: flex;
width: 100%;
flex-flow: row nowrap;
justify-content: space-around;
background-color: cyan;
padding: 0 10px 30px 0;
}
.menu_item
{
font-size: 1em;
border: 3px solid blue;
color: blue;
margin: 3px;
min-height: 2.5em;
width: 14%;
text-align: center;
text-decoration: underline;
background-color: yellow;
}
#container
{
}
~Pat
This is how you would literally do what you are trying to accomplish (creating a tabular format of your website). I'd recommend you spend some time learning bootstrap though and building a proper navbar and a responsive webpage. It will serve you better than working on html tables.
<table class="table table-hover">
<thead>
<tr>
<td>Home</td>
<td>About Me</td>
<td>Product</td>
<td>Services</td>
<td>Maps</td>
<td>Contact Me</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">This area will contain the Local Navigation</td>
<td colspan="2">This area will contain information about me</td>
<td colspan="2">This area will contain statistics of customer satisfaction</td>
</tr>
</tbody>
</table>
Float:right specified for a div inside a table cell seems to have no effect in IE. I have also tried text-align right, among other things, to align the layer contents to the right, but without success in IE 7.
CSS snippet:
.workloadcell {
background-color: #E6D7E9;
padding: 0px;
width: 14px;
height: 16px;
text-align: right;
}
div.workload {
background-color: #E6D7E9;
text-align: right;
width: 14px;
float: right;
}
HTML snippet:
<td class="workloadcell">
<div class="workload">
1
</div>
</td>
Both the HTML and the CSS validate, and in Firefox the text aligns right, as it should. If you want to test the complete code by copy/pasting it, it's here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>Table Test</title>
<style type="text/css">
td {
border: 1px solid black;
}
.workloadcell {
background-color: #E6D7E9;
padding: 0px;
width: 14px;
height: 16px;
text-align: right;
}
div.workload {
background-color: #E6D7E9;
text-align: right;
width: 14px;
float: right;
}
</style>
</head>
<body>
<table>
<tr>
<td>
</td>
<td colspan="4">
<div>
2008
</div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div>
Q1
</div>
</td>
<td>
<div>
Q2
</div>
</td>
<td>
<div>
Q3
</div>
</td>
<td>
<div>
Q4
</div>
</td>
</tr>
<tr>
<td>
workload forecast
</td>
<td class="workloadcell">
<div class="workload">
1
</div>
</td>
<td class="workloadcell">
<div class="workload">
2
</div>
</td>
<td class="workloadcell">
<div class="workload">
2
</div>
</td>
<td class="workloadcell">
<div class="workload">
2
</div>
</td>
</tr>
<tr>
<td>
actual workload
</td>
<td class="workloadcell">
<div class="workload">
3
</div>
</td>
<td class="workloadcell">
<div class="workload">
3
</div>
</td>
<td class="workloadcell">
<div class="workload">
2
</div>
</td>
<td class="workloadcell">
<div class="workload">
3
</div>
</td>
</tr>
</table>
</body>
</html>
(I know that the CSS is are not optimal in the sense that the class declarations are repeated for several elements, but please don't comment on this, if it is not relevant to the problem.)
It should work the way you have it (or the way alexmeia suggests).
But, (this being IE), the headers Q1, Q2, etc. are pushing the table columns wider than the 14 px you've requested.
The columns are right justified within the 14px you've defined, but the divs are not moving to the right in IE. (The div is staying within the 14px defined for it even though the column is actually wider than 14px)
To illustrate this, you can either make the width say 28px or change the color of one of the backgrounds to demonstrate the difference between the td and the div within in.
.workloadcell {
background-color: #E6D7E9;
padding: 0px;
width: 14px;
height: 16px;
text-align: right;
}
div.workload {
background-color: #E6EEE9;
text-align: right;
width: 14px;
float: right;
}
The solution for IE is to either not define a width or to make it wide enough to accomodate the header.
You don't need to declare rules for the div.workload.
Use only this rules and everything will work fine:
td {
border: 1px solid black;
}
.workloadcell {
background-color: #E6D7E9;
padding: 0px;
width: 20px;
height: 16px;
text-align: right;
}
It's worth noting, that IE, especially v6 on pre SP1 XP, and older windows has serious rendering issues when you intermingle tables within divs, and divs within those tables. Once you exceed a certain complexity & nesting you may get a blank/white page.
If your needing to right-align text content in certain cells, I would suggest adding an additional class declaration to the td tag, not nesting a div. I would also suggest trying in IE8, and see if the issue persists. You didn't mention which versions you need to support.