Need assistance adding padding to the main body text of this emailer so the text does not look quite so tight to the border.
It's probably a simple solution but I can't work out which table to add the cell padding property to.
live version -> http://garyrevell.co.uk/mercy2013/2013-temp/alt-april-mailer/index-purple-final.html
Pastebin of the code -> http://pastebin.com/PAbYgqXN
Help would be much appricated.
Always add padding the the table cell that the content is in. eg:
<td style="padding:30px;">
<singleline>your content</singleline>
</td>
It looks like your content however is living outside of tables in divs instead. You should lose the divs and put everything into td sections. Also, don't have a table next to text inside a parent td, instead have a table cell for each (use table rows if stacking them).
Related
I'm trying to make a blogpost into a forum-format, which i thought would be quite simple with html-tables and some css. I can't attach an image because this is my first question/answer here, but everyone knows the forum/disqus format: two-column with a narrow one on the left for the avatar and a wider one for the text.
Fact is that using just hmtml-css tables, the text floats to the left as soon as it (vertically) passes the image. That is solved by using "position:absolute", but then the whole image&text overlap each other AND most or everything that is beneath it, depending on how one resize the window.
Anyway, it's just the old forum-format, what am I doing wrong. Can't link to a page, not a live site yet. I'm using WP with the (modified) Blaskan theme.
It is isn't clear if you're trying to add a forum or just a table that looks like a forum-format table.
If you want to a forum in WP, then you might want to follow
http://wordpress.org/support/topic/add-forum-to-wordpress
http://wpmatter.com/top-5-wordpress-forum-plugins/
If you are trying to add a two column table, you'll need to post the html and css using.
For example, you can post like this http://jsfiddle.net/minerva/UJjup/. You must've added a "position: absolute" in the <td> tag and that is why your text is overlapping
Remove the position:absolute from the tag.
table td
{
position:absolute
}
Then add your css style specifically on the first column and or second column.
I'm having a stupid issue using a table, I hardly ever use tables and I'm not sure why the first image has a huge space after it. I tried setting a width, using "-margin" & Padding. I cant find anything to reduce the size.
<tr class="tblpadding">
<td>Character:</td>
<td class="tdchar"><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
<td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
<td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
</tr>
Best to see the fiddle to show the issue - http://jsfiddle.net/uh6j4/1/
Because the column cell has larger width because of the input type text boxes, just add colspan to that cell
Demo
Also, I just saw that you've inconsistent table cells in your
example, so make sure you fix them according to your requirement.
But as far as the explanation goes, you need to use colspan on the column which will contain those images.
Also I would like to point this out, it's invalid to use form element nested as a tr direct child, you should use that inside a td, always validate your markup here before you put your websites live... but as far as the idea goes, the signup form you are trying to build can be designed without tables..
actually, you should not be using table for creating a layout in the first place.
use div's instead.
to give the organized look that you have here, what you need to do is very simple use min-width on the labels for uniformity.
I've created the same look that your table have , using div's only.
if its the same, why bother? because my layout have a flexibility that yours dont have.
take a look here: http://jsfiddle.net/avrahamcool/uh6j4/7/
Please take a look at this fiddle: http://jsfiddle.net/d3uc9/4/
I have a problem with this, as the two divs, in a table, next to each other, are not on the same margin line, even thought they share the same css class etc.
What have I done wrong in the example, and must I change to make them on the same margin-top line?
Thanks, I have tried to be as clear as possible.
What I mean is that they should share the same margin-top line, but they don't, and what must I do to fix this?
You just need something like:
td { vertical-align: top;}
Example fiddle
This says that the content of a table cell is aligned to the top of the cell rather than to the middle. This is needed because your left hand div is not as big as the one on the right.
Also I notice that you are duplicating ids several times in your HTML (eg <div id="stylized" class="myform">). This is not valid HTML and can potentially cause unexpected behaviour in browsers. IDs must be unique and if you want to identify multiple elements in the same way for style purposes then you should use classes.
eg.
<div class="stylized myform">
Just add to your css:
td {vertical-align:top;}
Adding valign="top" will make the column on the left align to the top of the row.
The problem is the vertical alignment of the table. The easiest way to fix it is to add valign="top" to either the <tbody> or <tr>. You could also do it through css by specifying vertical-align:top for the <tr>.
I am designing a very simple table that contains a data element's properties. This element will be used to represent each element of a AJAX response in a kind of list.
The table is using "rowspan" and "colspan" to enlarge some cells. The problem, is that when I add an element below, this element overlaps the table, I don't know why. The HTML is valid, and the rowspan attributes indicate the exact amount of rows to merge.
I have deployed an example here: http://jsfiddle.net/vtortola/KzjKg/9/
As you can see, the green block overlaps the table, and that is the thing I want to avoid.
Any idea why is this happening?
Cheers.
You've attributed max-height:50px; to the div which contains the table. Remove this CSS declaration, and the table won't be overlapped any more.
I think the problem:
1) You maybe remove the max-height where your table is more than 50px.
div.mobileRow{
width:100%;
font-family:Arial;
margin:5px;}
So I have a table.
First thing I want to do is put some space between two rows of the table. I tried inserting a <br /> in between the two <tr> elements, but that only put space above the ENTIRE table (don't know why).
Second thing I want to do is center a picture in a column so it lines up in the middle of the text in the column below it. I tried placing an align=center on the <td> element to no avail.
Have you tried changing the CSS for the table rows and possibly adding a : padding-bottom: x px; or margin-bottom: x px; to gain the space that you would like in the table.
Also - I believe that you would need your "align=center" property to be a "text-align: center".
Putting spaces between the table rows won't work. All that content will be placed above or below the table. Styling the table must be done using CSS. Try something like:
td{
padding: 5px 0;
}
Use CSS, as HTML is for structure. Here is a link to W3C tutorial on styling tables with css In fact, if you are using tables for positioning, that is bad practice too - again use CSS.