I am using asp.net and C#.
I have a image and three line. Which I want to place like this
Like the one you can see in this below URL .
http://www.campaignmonitor.com/gallery/
Image is on the left side and parallel to image we can write text.
I know that the same can be acheived by HTML table / ASP.NET table like this
<table>
<tr>
<td>
<img src="#"/>
</td>
<td>
first line <br />
second line <br/>
third line <br />
</td>
</tr>
</table>
but my problem is that I can't use table, so please let me know how can i acheive the above task without using tables.
Might be <span> or <div> tag can do the trick. but I am really dumb in html. and I can't ever search the exact answer to my problem on google..
Using CSS, you can float the image to the left, which will cause the text to appear to the image's right.
For example, take the following:
<html>
<head><title>Example</title></head>
<body>
<div style="float:left"> <!-- I've floated the div containing the image to the left -->
<img src="http://www.google.com/images/srpr/nav_logo13.png">
</div>
This is text that is to the right of the image.
</body>
</html>
Related
i tried below code.
code1:
<table><tr>
<td><table>table1</table></td>
<td><table>table2</table></td>
</table>
It works fine, But after certain height introduces page break, which i want to avoid.So im trying below code,
Code2:
<div style="width:650px">
<table align="right" style="width:500px;">table1</table>
<table align="left" style="width:125px;">table2</table>
</div>
This is not working in outlook mail, Please can anybody suggest me How to make 2nd code work in outlook? or How to overcome pagebreak problem in first code?
Depending on your content and space, you can use floats or inline display:
<div style="width:650px">
<table style="display:inline-block;">table1</table>
<table style="float: left;">table2</table>
</div>
Demo
I want this layout where I have a rectangular box. And inside the box on the left there is a text and on the right there is an image. This looks fine in the browser, but when sent out as an html email, in outlook the float right doesn't seem to work. It puts the image in the next line under the text. Any ideas on how to make this work? (I am trying to avoid using tables.)
<div style="width: 100%;border-style:solid;overflow: hidden;">
<span style="float: left;">
<h3> Your appointment Details</h3>
</span>
<span style="float: right;">
<img src="someImage"/>
</span>
</div>
Very late to the conversation, but here is how to "float" in html email using align="" instead.
Example here
Also, if you are looking for resources on html email (I assume you are as the answer you marked correct is very general), here is a huge list of resources.
This is a really good guide from Mail Chimp on Coding for HTML Emails:
http://kb.mailchimp.com/article/how-to-code-html-emails
Some basic tips:
Use tables for layout.
Set your widest table to be maximum of 600px wide.
Don't try and use JavaScript or Flash
Don't use CSS in a style tag as some mail clients will discard it.
Use inline CSS styles only.
Basically code your emails as if it was roughly 2003.
CampaignMonitor provide this rather brilliant guide to all CSS support across multiple email clients, which is also available as a pdf or xls download.
As the answers above say, email support for CSS is very limited, mostly due to Microsoft's descision to use Word as its html rendering engine.
Simple floating images can be like
<img src="yourimage" align="left" />
BUT that way you won't get solid results with padding between text and image, outlook removes margin and padding and your text will stick right next to the image. So try this:
<div style="text-align:justify;">
...a lot of text here untill you want to insert an image that floats left...
<table cellpadding="0" cellspacing="0" align="left" style="float: left;">
<tr>
<td>
<img src="yourimage" align="left" vspace="4" />
</td>
<td width="15"> </td>
</tr>
</table>
...a lot more text here until you need an image that floats right...
<table cellpadding="0" cellspacing="0" align="right" style="float: right;">
<tr>
<td width="15"> </td>
<td>
<img src="yourimage" align="left" vspace="4" />
</td>
</tr>
</table>
... a lot more text here...
</div>
You need to wrap a 'table' element around it to get the padding-margin effect to work in Gmail, Outlook (online), Microsoft Outlook (desktop client),...
Give the table an align=left or right attribute. (Edit answer here: in addition and fallback for other email clients also give the table a float value so do both. They are back-ups to each other. Some clients understand "float", others understand "align", some understand both,...) Your table will float in the text almost like an image does. The only difference is that in outlook a table generates an automatic line break in the text where an image with align left or right does not generate breaks.
For setting the margin, since we are now working with a table, add an extra "td" with a width="15" to the left or right of your image cell and a non-breaking-space in it. (or a transparant gif -> spacer.gif)
You better not leave cells empty because otherwise the width of your cell will not be respected in certain email clients
For top and bottom margin we can use the 'vspace' attribute, don't forget to give the image an align = left or right attribute. Otherwise the 'vspace' will not work.
I've found a way to apply float on Outlook.com.
Just capitalize the tag like Float:left.
<span style="Float:left;">Content to float</span>
Maybe you should use !important too;
I tested it and it worked.
check out https://www.campaignmonitor.com/css/ here it has listed what are all the things supported and not supported in email
Instead of float you can use an outer table and put contents you want to float left in left td of outer table.
this is not an elegant answer but I did it this way
When you are floating something to the right of something the right floating element should allways apear first in code. Like this:
<div style="width: 100%;border-style:solid;overflow: hidden;">
<img src="someImage" style="float: right;"/>
<h3> Your appointment Details</h3>
</div>
I have a really frustating problem im stuck with, I googled around a lot, maybe im searching for wrong phrases, but cant find a solution.
So i have table inside a div (a box), which is scrollable in the inside and the parent is also scrollable. The layout works fine with other tablets, but on ASUS Transformer i have the following problem:
If i scroll the body of the document and try to click on the link in the table (the table cells contain forms with hidden fields and a link) the clickable area moves. It seems like scrolling also moves the links, but the link labels, the hidden fields and the parent div stays in the correct position. It is only visibile due to the wrong position of the link outlines (and of course, that the links dont work if i click them after scrolling).
I was thinking about some weird margin collapse effect, but the elements inside are cleared, and overflow:auto is added to the parent. Maybe its some ASUS related bug?
The content is HTML5.
This is the part which fills the table with the links. WebView is used for displaying the content.
<div class="table_content_back" >
<div class="scrollable_content" >
<!-- BLOCK CONTENT STARTS HERE -->
<div class="table_content">
<table cellpadding="5" cellspacing="0" class="table" >
<tr id="t_h">
<th class="ta_left t_header"><%= message("siteName")%></th>
</tr>
<i:foreach var="ListItem" index="i" list="${sites}">
<tr>
<td class="ta_left" id="site_list">
<form name="Site-${i}" >
<input type="hidden" name="actionid" value="SharePoint/Flow" />
<input type="hidden" name="flow" value="sitebrowser" />
<input type="hidden" name="sitename" value="${ListItem.title}" />
<input type="hidden" name="siteurl" value="${ListItem.url}" />
${ListItem.title}
</form>
</td>
</tr>
</i:foreach>
</table>
</div>
</div>
</div>
I tried to do this to insert a few blank lines in my web page (to separate my text from an image displayed through a script) but it didn't work:
<asp:ContentPlaceHolder ID="ContentText" runat="server">
</asp:ContentPlaceHolder>
<p></p><p></p><p></p><p></p><p></p>
<script type="text/javascript"><!--
...
If you have time to explain to me why the series of p's and closing p's didn't work, that'll be great. Otherwise, please just tell me how to insert some space there. Thanks.
Try this
<div style="height: 100px"></div>
You need <br /> which is a line break.
<p> are for paragraphs and will separate any text between the opening and closing tag with any other elements, as they are all empty there is no effect.
Investigate <div> and <span> as there are countless ways to separate elements rather than just a blank line.
Wouln't it be better to use CSS to achieve what you want? If you only need a vertical spacing between your text and your image. I would add a top margin to the image you are inserting throught javascript.
For example:
<asp:ContentPlaceHolder ID="ContentText" runat="server">
Your text is here
</asp:ContentPlaceHolder>
<img src="javascript-inserted-image.jpg" width="100" height="100" style="margin-top: 50px;" />
In real life, I would be using a CSS class that I would assign to the image instead of applying the margin to the style attribute of the image.
Edited:
Your image would also need to be displayed as a block element (CSS style display: block;) if your the content of your place holder is not a block element like a p, div, blockquote, etc...
Here's the site: www.red-tuxedo.com
I want the "Red Tuxedo" text to sit next to the logo, not below, and I want to get rid of that hard rule that runs through the logo. My CSS / HTML skills aren't up to it. I completely destroy the column layout when I change the text and I can't find the hard rule in the code. Tried adjusting the gif (cut off the bottom in Photoshop) and that didn't help.
I did write to the person who created the template; haven't heard back after several days. Would like to get this fixed before I start adding more pages.
thx
One way is to move the logo within the #logo div:
<div id="header-logo">
<div id="logo"><img height="60" width="60" alt="Red Tuxedo Logo" src="logo_red_tuxedo.gif" id="logo_red_tuxedo"/><span class="red">Red</span>Tuxedo</div>
<form action="#" class="search" method="post">
<p><input type="text" class="textbox" name="search_query"/>
<input type="submit" value="Search" class="searchbutton" name="search"/></p>
</form>
</div>
Try changing the div (id=logo) so that it includes the logo image and the text and add align='absmiddle' to the image. I'd suggest CSS but it looks like it has fixed attributes on it anyway. The "rule" looks like it is coming from the background image for the body element. You'd need to update the file bg.gif to modify it, I think.
<div id="logo">
<img id="logo_red_tuxedo" src="logo_red_tuxedo.gif"
alt="Red Tuxedo Logo" align="absmiddle" height="60" width="60">
<span class="red">Red</span>Tuxedo
</div>
To move the text, I'd put the image inside the logo div, the way dmondark suggested. As for the hard rule, it's part of the background image for the body, bg.gif. Here's an edited version I made that doesn't have it.