How make 2 lines in <td> - asp.net

I want to show two lines in <td>. And it is showing, next to each other.
<td bgcolor="White">
First Name
(on external website)
</td>
I want to be like below.
1st line bold and 2nd line will be small letters.

You could add a <br/> to force a line break and define some CSS classes for the font-styling:
<style>
.name { font-weight: bold; }
.subtext { font-size: smaller; }
</style>
<td bgcolor="White" >
<span class="name">First Name</span> <br/>
<span class="subtext">(on external website)</span>
</td>
Update:
For completeness, I'm also including what others have suggested: instead of using a <br/> element, control the line-break via CSS. This has the advantage, that you can change the behavior (remove the line-break) by simply editing the CSS:
<style>
.name { font-weight: bold; display:block; }
.subtext { font-size: smaller; }
</style>
<td bgcolor="White" >
<span class="name">First Name</span>
<span class="subtext">(on external website)</span>
</td>
Instead of using span elements, you could also use divs, which have the line-break by default (but it can be disabled by setting display:inline in the CSS).

<td bgcolor="White" >
<span style="font-weight:bold;">First Name</span> <br/>
<span style="font-size:6px;">(on external website)</span>
</td>
like that I suppose

As you want to style the lines differently, you need to put them in separate elements anyway, so if you use block elements they will end up as separate lines:
<td style="background: white;" >
<div style="font-weight: bold;">First Name</div>
<div style="font-size: 70%;">(on external website)</div>
</td>

Use <span></span> with the block attribute or <p></p>

<td bgcolor="White" >
<strong>First Name</strong><br />
<small>(on external website)</small>
</td>

You can put a p tag to indicate a newline like this.
<td>
First Name
<p>(on external website)</p>
</td>
Or use a br tag like this:
<td>
First Name <br />
(on external website)
</td>

The simplest solution is to add a <br /> as #M4N writes in his answer. But since it seems, that "First Name" is some sort of title, I would recommend to use the apropriate HTML tag. Also use CSS to style your table:
HTML:
<td class="white">
<h3>First Name</h3>
<span class="small">(on external website)</span>
</td>
CSS:
.white {
background-color: white;
}
.small {
font-size: .8em;
}
Note: Because <h3> is a block level element, the line break is "inserted" automatically

Related

How to fix this text problem in mail newsletter?

The text of every rss in the newsletter is going down and positioned to the left.
I tried to change to put two columns in order to avoid it, but then i'm couldn't get to change the column size and the text wrap down in mobile version.
<div style="text-align: left;">
<a href="https://contratocompraventavehiculo.co">
<img data-file-id="798535" height="60" src="https://gallery.mailchimp.com/fb081e42ac85d682d4bbec/images dd-8a84-47cd-b3e0-a23f612be.png" style="border: 0px ; width: 60px; height: 60px; float: left; margin: 0px 15px 0px 0px;" width="60" />
</a>
<span style="font-family:open sans,helvetica neue,helvetica,arial,sans-serif">
<span style="font-size:16px">
<span style="color:#000000">
Become an expert
</span>
<br />
<a href="https://contratocompraventavehiculo.co" target="_blank">
<span style="color:#000000">
<strong>Discover new opportunities</strong>
</span>
</a>
</span>
</span>
</div>
In the next link you can view that the text is going down and not aligned with the first part of text: https://i.imgur.com/Pez3jGp.png
HTML code has changed a lot from how it started out 20 years ago.
At the beginning (20 years ago), we made tables. Tables for everything. These days we use <div> tags and <aside> tags - but back then, everything was in a table structure. To position things precisely, we put <tables> inside <table> cells. That is what you must still do - for emails only.:
<table>
<tr>
<td>
<table><tr><td>some data</td></tr></table>
</td>
</tr>
</table>
Also, tables in email support only limited CSS. And your CSS cannot be inside <style> tags - it must be inline, like this:
<td style="text-align:right">
Not like this:
<style>
td{text-align:right;}
</style>
References:
https://www.w3schools.com/html/html_tables.asp
https://www.sitepoint.com/how-to-code-html-email-newsletters/
https://emailmonks.com/blog/email-coding/step-step-guide-create-html-email/

coloring table cell descendants

I am doing this on my own personal browser, viewing a pbulic website. as such, I can't change their html. I am using chrome, and stylebot to apply the CSS style. I need a CSS solution to the following:
<tr class="bg_small_yellow">
<td class="row1" valign="middle" align="center" width="20">
<img class="icon_folder" src="/eaforum/images/transp.gif" alt="">
</td>
<td class="row1" width="100%">
<span class="topictitle">
<a href="/eaforum/posts/list/9578017.page" id="topic_link_9578017" title="SimCity Traffic">
SimCity Traffic
</a>
</span>
</td>
How can I apply color: gray; to the <a> link if and only if the <img> is class .icon_folder ?
Here is a jsFiddle page to play with. I want a solution only in the CSS pane. http://jsfiddle.net/hZr9b/
I am looking for something like this, but that actually works:
(td > img.icon_folder) + td a:link { color: gray; }
If the markup cannot be changed, then it is not possible using only CSS because the image and anchor aren't siblings, and there is no parent selector in CSS2/3 to help navigate between these two elements.
If they were siblings, it could be as easy as this:
HTML:
<img class="icon_folder" src="/eaforum/images/transp.gif" alt="">
SimCity Traffic
CSS:
img[class="icon_folder"] + a {
color:grey;
}
But as you mentioned you cannot change the markup in this instance, unfortunately you'll have to use JavaScript.

Making a css play button on video thumbnail

I have a site that generates related video's to a topic. I have 4 thumbnails and I want to add a css play button on the thumbnails, which can be done with this code: ► | It will be like this: http://i47.tinypic.com/250qis9.png
Here is a demo: http://jsfiddle.net/vtPhZ/2/
The problem is that it won't recognize the a:before tags that I gave it to. What am I doing wrong?
The HTML snippet which generates the list:
<div id="youtubeThumbs">
<ul class="ytlist">
<li>
<table cellspacing="3" cellpadding="3" border="0">
<tbody>
<tr>
<td valign="top" rowspan="2">
<a class="clip" style="cursor: pointer;">
<span>
<img src="http://i.ytimg.com/vi/1q47bOtV3-Y/hqdefault.jpg">
<em></em>
</span>
</a>
</td>
<td valign="top">
</tr>
</tbody>
</table>
</li>
And the CSS I tried to use (without success):
.ytlist li > a:before {
content: "►";
}
How can I make it work?
I can't explain why but for some reason your change of methods for declaring a child element is causing the problem. Using my first two recommendations of using the unicode entity for the content and using the pseudo element rather than the pseudo class, the CSS should work. However, it did not initially work. When I removed > from the first line the CSS worked.
Here's a demo: http://jsfiddle.net/vtPhZ/4/
Your method was strange but the fact that it didn't work was even more strange...

How to overflow specific content inside an <td>?

I start with a td cell like this
<td>
<span>123</span>
<input style="display:none;">
</td>
I'm looking for a way to style this so that the orignal content is hidden, the input box is shown and overflowing instead of resizing the td, and keeping the td sized to just its original content.
State A, which I have now, looks like this
[123][45aaaaaaaaaaaaaaa6][7aaaaaa89]
I want state B to look like this
[*input text field*aaaaaaaaa6][7aaaaaa89]
<td>
<span>123</span>
<input style="display:none;">
</td>
Is the correction for your markup, but what exactly is the effect you want to achieve and what have you tried so far?
<td>
<span>123</span>
<div id="hidden">
<input type="text" />
</div>
</td>
in style define :
#hidden{
display:none;
position:absolute;
margin:.5em;
}
make script that shows the div on over (you will need to include jquery js ...)
<script type="text/javascript">
$(document).ready(function(){
$('table tr td').children().find('div').hover(function(){
$(this).show();
}
)
});
</script>
Figured it out. What I did not realize is that an element with position:absolute cannot be assumed to be defaulting to a 0,0 position, so I need to set the Left to 0 explicitly
<td>
<div style="position: relative;">
<span style="visibility:hidden;">123</span>
<input style="position: absolute; left:0; display:inline;">
</div>
</td>

CSS Only Tooltip Problem

Have been using a simple CSS only tooltip.
Working Example
css:
.tip
{
position:relative;
}
.tip span.tooltip
{
display:none;
background:#ff5112;
border:1px solid #9C0;
}
.tip:hover span.tooltip
{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: center
}
html:
<span class="tip">
<table><tr>
<td>Working Tip</td><span class="tooltip">Tip</span>
</tr></table>
</span>
Not working example:
html:
<table><tr>
<span class="tip"><td>Not working TIP</td><span class="tooltip">Tip</span></span>
</tr></table>
And a Live example
Your problem is the table element - you cannot have a span that wraps <td>. Get rid of the table and everything will work.
I don't see your tooltip css class, try adding one
table within a span is not allowed, try fixing that
I think that maybe I see your question but since the question is omitted, I'll take a shot. The second example is mal-formatted if you really wanted something to that extent it should be more like:
<span class="tip">
<table>
<tr>
<td>Working Tip</td>
</tr>
</table>
<span class="tooltip">Tip</span>
</span>
If you are going to wrap the entire table the "tip" should be after the table tag.
<span class="tooltip"> needs to go inside of <td class="tip"> for your current CSS to work as expected...
<table><tr>
<td class="tip">
Working Tip
<span class="tooltip">Tip</span>
</td>
</tr></table>
The solution that worked for me:
<table><tr><td>
<a href="blah.php" class="tip">
Blah Blah Text
<span class="tooltip">Blah Blah Tip</span>
</a>
</td></tr></table>
But this looks really bad with css turned off, so the way to go will be using the title attribute and then adding mootools or such libs on the top.
Thank you guys.

Resources