What I'm trying to do is make the red arrows align with the text on the right in the "In this issue, you can:" section of http://jsfiddle.net/me42hfkw/. In other words, I want the ›s of rows like
<td valign="top" style="font-family:Helvetica,Arial;padding-right:10px;padding-bottom:20px;">
<p valign="top" style="color:#FF0000;font-size:36px;font-weight:bold;margin-top:0;">›</p>
</td>
<td valign="top" style="font-family:Helvetica,Arial;padding-bottom:20px;">
<p style="color:#666666;line-height:18px;margin-top:0;">Learn about the IT and business trends driving walk-up service centers.</p>
</td>
</tr>
to be aligned at the top of their cell. I can't figure out why it's not working; for I was able to make it work on http://jsfiddle.net/qprc69z1/. What am I missing?
This is for an HTML email, by the way, so that I need to use as primitive of styles as possible.
http://jsfiddle.net/me42hfkw/1/
You can decrease the line height of your p tag to adjust the position of the text. With a font-size as large as you're using there is a lot of white space to account for. Decreasing the line height will eliminate that white space.
The difference between the fiddle's you provided is that the one didn't have a p tag it was inside of a td which "plays" a little better when using vertical align.
Related
Hi im having trouble with some money number alignment. I want my data do be aligned to the left side of the columns BUT the numbers of the money have to look relative to each other like in the screenshot.
This screenshot is what I have atm:
This is what I want to do:
Here is my structure:
<tr>
<td style="text-align: left">name</td>
<td style="text-align: right">money</td>
<td style="text-align: center">date</td>
</tr>
And the only css atm that I use for positioning is setting the widht of every of those td's to 30%
At first I thought I could position them simply by putting a <p> in there that would align the content to the right and give the rest its relative widht, however that way would be possible but then I get a ball of js or jquery that I prefer not to have.
I have bootstrap installed but as of now I havent really touched it in this project except for the column grid positioning.
Does anyone have some kind of way to achieve what I am trying, or can someone push me in the right direction? Thanks in advance.
ADDITION: Semi complete code sample:
Codepen
The above code is the whole section the table is located in but I copied all css relative to the issue and not every single css class my problem is reconstructed there exactly even the random <p> tag I tried is in there.
You should use two columns:
<div class="row">
<div class="col-lg-6">List of money values</div>
<div class="col-lg-6">[Empty]</div>
</div>
And align text to right in the first one:
<p class="text-right">Your text.</p>
I am working on a web project that involves a simple HTML table. The elements in the table display fine and all when the page is wide enough, but when the page is too narrow to display the elements on the same line, the overflow jumps to the next line, but below the table header, which is too far left from the start of the element. This also happens when line breaks are introduced. I want to be able to stop this from happening and keep the multi-line elements in a sort of fixed box where the line breaks don't ignore rules defined in the css properties, but without completely reworking the table. Please help make this happen. I have provided an example of this below.
Markup:
<table class="rwd-table">
<tr>
<td data-th="Column 1"><span>Example 1</span></td>
<td data-th="Column 2"><span>Hello World</span></td>
<td data-th="Column 3"><span>I am a long span element. </span></td>
<td data-th="Column 4"><span>I am an even longer span element in this table. New lines will jump to the very left of the table when the page is small enough.</span>
<td data-th="Column 5"><span>I am a long span element too.<br>I am also bugged :(</span></td>
<td data-th="Column 6"><span>1234567890</span></td>
</table>
A working example: https://codepen.io/Spotlightsrule/pen/EXoJdB
Okay, I have an exam on friday on html basics, the only problem I still have is that the hspace and vspace attribute in combination with an iframe, it just does not give me space between the iframe and the tekst next to it... if it try it with an image it works super. I will give an example.
<img src="image.jpg" align="left" hspace="10"> gives me 10 pixels of space
<iframe src="something.html" align="left" hspace="10"> gives me an ifram to the left to a text (what is what I want) but it does not give me the 10 px of whitespace
we are nonly alowed to use html in this test. Can somebody please help me? Thanks!
The iframe element never had hspace and vspace attributes, or anything like that, in any specification or implementation.
If you need to do things with HTML alone, no CSS allowed, presumably as an odd exercise, then you need to resort to rather ugly tricks. To set spacing on all sides of an iframe element, you could use a single-cell table with cell padding set:
<table cellpadding="10" align="left"><tr>
<td><iframe src="about:blank"></iframe>
</table>
Hello world!
But if you need spacing e.g. only to the right of the iframe element, you can use a different table trick, with a 10px wide cell between it and the text. Note that this affects the overall layout, since now you have the stuff in a table.
<table cellpadding="0" cellspacing="0">
<tr valign="top">
<td><iframe src="about:blank"></iframe></td>
<td width="10"></td>
<td>Hello world!</td>
</table>
I've been tasked with creating a clean template for our HTML newsletter with circulates to about 70k subscribers. As expected, they're hoping for it to be as consistent across as many e-mail clients as possible, so I'm following widely suggested HTML e-mail practice and using nested tables and in-line style.
I'm trying to set a bgcolor to each <td> that displays an image - the reason being that if someone has the images on their e-mail client turned off, they'll still be able to see the shape of the table cells (and their experience will still be somewhat visual), but I'm having difficulty keeping the bgcolor within the cell, it seems to bleed into the space between cells. Here's an example:
<tr>
<td width="200" height="200" bgcolor="#CCCCCC">
<img src="image.png" height="200" width="200" alt="Image!">
</td>
</tr>
From this code, instead of the background being invisible under the image when the image is visible because they're both 200x200, I see about 10px of the grey pushing down into the bottom and right side of the image and intruding into the white space around the cells. What is going on and how can I fix this?
EDIT: Here's an image of what it's doing:
Have you set the css style of the table to border-collapse? Like so:
<table style="border-collapse: collapse;">
If that has no effect, and there is no margin on the images, have you tried setting padding to 0?
Have you set the cellpadding and cellspacing properties on the table tag?
http://www.w3schools.com/tags/att_table_cellspacing.asp
A simple question but large impact on appearance.
I want text indented from cell border and have tried style=text-indent: 4px (not formatted so it displays properly here) but while the first line is indented, the lines after the <br> tags are not indenting. Please help. I need to use div because of some Javascript. Here is flawed code:
<td>
<div id="navbar" style="text-indent:4px"><b>View by:</b><br>
Popular<br>
Trending<br>
</div>
</td>
text-indent is only supposed to touch the first line. Use margin (or margin-left or padding or etc) if you want to adjust the entire block.
Try adding paddding to element, that holds your text you want to indent.
<td style="padding:5px;">text</td>