Why is my gray div only showing half? This is my code :-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div style="margin-top: 10px;font-family: helvetica,sans-serif;color: white;background: #212121;" class="round" >
<center>
<h4 style="font-family: Verdana;font-style: italic;">Alumni Activities</h4>
</center>
<div style="margin-left: 10px;">
<p>
The institution has an alumni association that performs various activities to disseminate knowledge among students regarding Education, Technology, Trends and Industry. Apart from this, it organizes technical competitions for students to effectively develop their competitive skills and arranges alumni programs that promote effective networks amongst its members.</p>
<p>
Events organized by Alumni Association of are as given below:</p>
<table align="left" border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="40">
<p>
1.</p>
</td>
<td valign="top" width="363">
<p>
<strong>Event Name: </strong>Alumni Meet 2010</p>
<p>
<strong>Date of Event: </strong> 27-Feb-2010</p>
<p>
<strong>Purpose: </strong> Annual General Meeting and Get together</p>
<p>
<strong>Number of Alumni Present: </strong> 75</p>
</td>
</tr>
<tr>
<td valign="top" width="40">
<p>
2</p>
</td>
<td valign="top" width="363">
<p>
<strong>Event Name: </strong> Expert Talk</p>
<p>
<strong>Name of the Alumni: </strong> Mr. Nachiket Patel, Essar Ltd.</p>
<p>
<strong>Date of Event: </strong> 22-Sep-2009</p>
<p>
<strong>Purpose: </strong> To enhance the knowledge of students</p>
</td>
</tr>
</table>
<p>
</p> </div>
</div>
</div>
It looks to me like the classic 'collapsed parent' problem, created by a floated element. In your case it's the align=left attribute on the table.
Removing this attribute is the easiest solution, otherwise there are four CSS solutions, although one of the main two should work for you:
Either add the css overflow:hidden to your main div, or add a clear float, e.g. <div style="clear:both;"></div> as the last thing inside your main div.
This article explains the theory and the other two possible solutions:
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
Problem was in messy align="left" property in table tag. See normal version: http://www.jsfiddle.net/pereskokov/UMUFt/1/
May I know the round class? I think the div is floated. When you use float div, you need to "clear:both" the div to clear the float element so the other tag won't float too.
First of all you are specifying the Transitional DTD level which is the highest level and requires apart of well formed document, that you use only HTML elements winch are accepted for such level, second you have a div that is closed but not opened, third remove the align="left" attribute of your table:
<div style="margin-top: 10px;font-family: helvetica,sans-serif;color: white; background:#212121;"
<center>
<h4 style="font-family: Verdana;font-style: italic;">Title</h4>
</center>
<div style="margin-left: 10px; " >
<table border="1" cellpadding="0" cellspacing="0">
<tr><td/>Cell Content</td></tr>
</table>
</div>
Related
I'm trying to send the image as position absolute with the html text behind the image but when I send it to gmail or other email it show image then in bottom the html text. The absolute css is not working.
Below is the template
<template name="welcome">
<html>
<head>
</head>
<body style="font-family: 'Roboto Slab', serif;">
<div class='container-fluid'>
<img src="http://qa.couchfashion.com/images/mailer.png" style=" position: relative;width: 100%;left: 0;">
<div style="top: -44px;position: absolute;z-index: 999999;">
<div class='mailer-name text-center' >
<h3 style=" font-size: 80px;"> Hey {{receiverName}} </h3>
</div>
<div class="mailer-content" style="margin-top: 120px;
text-align: center;
text-align: justify;
padding-left: 10%;
padding-right: 10%;">
<h1 class="text-center"> Welcome to the COUCH </h1>
<hr>
<h3 class="text-center"> How To use Couch? </h3>
<h2 class="text-center"> STEP 1 </h2>
<h3 class="text-center"> Browse Products & Articles </h3>
<p>Congratulations ladies! You've successfully made it to the first step of Couch. THis step is the
easiest
step. We are sure you will have great time browsing through our products and articles as we get you
the
best of them. We make sure best gets the best! </p>
<h2 class="text-center"> STEP 2 </h2>
<h3 class="text-center"> Collect things you Love </h3>
<p>
Hello again! So here we are on the second step. Well this is easy too. You just have to click on the
love
button to collect your favourite products and articles there. And there you go. You have your very
own
personalized collection. Woo-Hoo!
</p>
<h2 class="text-center"> STEP 3 </h2>
<h3 class="text-center"> Get Appreciation </h3>
<p>This is the best step. It will help you flaunt your beautiful talents ladies! People can see your
closet
and have a glance at your choice. Isn't that cool? You can promote your style and make it popular.
Let's
get started ladies!</p>
<h3 class="text-center"> Thanks for signing up </h3>
<h3 class="text-center"> All the Love & Regards </h3>
<h4 class="text-center"> Team COUCH </h4>
</div>
</div>
</div>
</body>
</html>
CSS position is not supported in most email clients (both relative and absolute). Best way to achieve this is by making the image a background image:
<table role="presentation" aria-hidden="true" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
<tr>
<td background="http://qa.couchfashion.com/images/mailer.png" bgcolor="#222222" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;">
<div>
<table role="presentation" aria-hidden="true" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="middle" style="text-align: center; padding: 15%ont-family: sans-serif; font-size: 15px;">
>> Place your text layout in tables instead of divs <<
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
It's also still safer to use <table>s instead of <div>s for email, unless Gmail is the only client you have to support.
Ted is right in his answer regarding that table is the way for structuring in email HTML. His solution is supposed to work well.
The reason you use tables instead of divs is that rendering engines have limited support for many properties in divs. Eg. Word-based Outlooks do not support width and padding on div elements without which it is impossible to define layouts. However these properties are well-supported on td elements. That is why we have to use tables.
If you go on using this method, there are a couple of best practices you should also follow:
Set the cellpadding="0" and cellspacing="0" to avoid non-expected spacings by some clients.
Use only one class for a HTML element. If you use multiple, then only the first will be applied.
Don't use complex CSS selectors (eg. this will not work in Word-based Outlooks: .bg-brown td { ### CSS ### } . You should stick to simple class definitions.
Lastly, background images only work in Word-based Outlooks intd elements, when you apply them with VML.
The code below is an example for background images with text in front we use in our tutorial about background images.
<table cellpadding="0" cellspacing="0" border="0" width="100%"
style="width:100%;min-height:50px; height:50px;border: ###
BORDER PROPERTIES ###" background="### SRC of BACKGROUND
IMAGE ###">
<tr>
<td style="### FONT PROPERTIES ###">
<!--[if gte mso 9]>
<v:rect style="width:540px;height:50px;"
strokecolor="none">
<v:fill type="tile" color="#363636"
src="### SRC of BACKGROUND IMAGE ###" /></v:fill>
</v:rect>
<v:shape id="NameHere"
style="position:absolute;width:540px;height:50px;">
<![endif]-->
<p>table background="...." + vml fixed width background</p>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
Unfortunately, positioning is not covered, but it still may help to avoid some pitfalls. You can use Campaign Monitor's background tool to produce the VML code, or craft it on your own, based on corresponding tutorials.
I know I am missing a simple line fix.
I have tried <td align ="center"> while <p style="text-align:left;"> and vise versa. I have also played with simple align="left" for <p> as well.
How do I make all the text centered in the <td> but the links are left aligned in the center?
So far the text is left align but isn't centered inside the <td>
I also tried adding a centered div as you will see in my code. Didn't work
<td align="center" width="50%" style = "margin-left:50%">
<p align="center"><font size="5"><b>Classified Ads</b></font></p>
<br />
<div align="center">
<strong><!--edited 6/10/2015-->
<p style="text-align:left;">
Search Classified Ads</p>
<p style="text-align:left;">
Add or Delete Classified Ad</p>
<p style="text-align:left;">
Update Existing Classified Ad</p>
<p style="text-align:left;">
All Classified Ads</p>
<p style="text-align:left;">
About this Application</p>
</strong>
</div>
<p>
</p>
<p>
</p>
<p align="center">
<strong>
<font size="+1">Note: Classified Ads will expire after 30 days.</font>
<br />
Today's date is
<asp:Label ID="DateLabel" runat="server"></asp:Label>
</strong>
</p>
</td>
UPDATE:
I seem to be explaining what I want wrong. I want it to look like this
<div>
<p style="text-align:center"><font size="5"><b>Classified Ads</b></font></p>
<br />
<div style="width:300px; margin: 0 auto;">
<strong><!--edited 6/10/2015-->
<p>
Search Classified Ads</p>
<p>
Add or Delete Classified Ad</p>
<p>
Update Existing Classified Ad</p>
<p>
All Classified Ads</p>
<p>
About this Application</p>
</strong>
</div>
<p>
</p>
<p style="text-align:center">
<strong>
<font size="+1">Note: Classified Ads will expire after 30 days.</font>
<br />
Today's date is
</strong>
</p>
</div>
I think it is what you need. First of all, when you use align or text-align it automatically will be used on all child elements. If you want to align elements align only those, which needs it. The second thing is centering. You can center a block by using margin: 0 auto (also you need to define a width otherwise it will not work).
P.S: I strongly recommend you not to use td outside of table and not to use align attribute. Read this to write a cleaner html: http://learn.shayhowe.com/html-css/
I have created a table with four links, what I want is to make the pages I linked show inside the table each time I click on the link. I want the content of each page show in this table. Thanks awaiting your help.
This is the HTML code for the table:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#0000FF"><div align="left">Data Model</div></td>
<td bgcolor="#0000FF"><div align="left">Skill Acquisition</div></td>
<td bgcolor="#0000FF"><div align="left">Business Dev.</div></td>
<td bgcolor="#0000FF"><div align="left">E-book Sales</div></td>
</tr>
<tr>
<td colspan="4"><div align="left">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div></td>
</tr>
</table>
Put an iframe in ur website,
Put the table in a separate html file, and load this file into the iframe. That way the new website would be opened in thr place where the table is (in the iframe)
I have this html
<style type="text/css">
#DownloadLeaflet {
bottom: 0px;
}
</style>
<table style="width:97%" summary="">
<tbody>
<tr>
<td style="width:100px" width="118">
<img style="border-bottom:0px solid;border-left:0px solid;border-top:0px solid;border-right:0px solid" src="http://www.banqueaudi.com/RetailBanking/PublishingImages/2008/adsl.png" border="0">
</td>
<td style="width:100%" width="776">
<div style="height:52px">
<span class="title">ADSL Service</span><br>
<em class="Slogan">Be Fast Ahead with Our ADSL Service</em>
</div>
<p>
The new high-speed ADSL connection is now available with privileged conditions
</p>
<p>
Everybody is getting connected, what are you waiting for? Guarantee your peace of mind in a simple 1-step procedure with a reliable internet service from a trusted source.
</p>
<p>
you will gain the communication edge with a high-performance internet connection at an efficient cost.
</p>
<img id="DownloadLeaflet" style="border-bottom:0px solid;border-left:0px solid;border-top:0px solid;border-right:0px solid" src="http://www.banqueaudi.com/PublishingImages/Shared/DownloadLeaflet.png" border="0">
</td>
</tr>
</tbody>
</table>
I have tried everything possible with css , but it seems im not a CSS fan
I want to align the download button to the bottom of the cell, see this fiddle.
you have to give table relative and image absolute and bottom:0
http://jsfiddle.net/JfZZD/44/
check the fiddle
I have this:
<html>
<head>
<link rel="icon" type="image/ico" href="../images/logo.ico" />
<title> About Dideban </title>
</head>
<body>
<table cellpadding="0" align="center">
<tr>
<td> <img src="../images/header.jpg" width="800" align="center" /> </td>
</tr>
</table>
<table border="1" cellpadding="0" style="font-family:tahoma; font-size:12; margin-left:130; margin-bottom:200">
<tr>
<td >
<br>
<b> txt </b> txt txt
<br>
txttxttxttxttxttxt
<br>
txttxttxttxttxt
<br>
txttxttxt
<br>
txttxttxttxttxttxttxttxt
<b> Snort </b>.
<br><br>
<b> Dideban Team </b>
<li> <font color="blue"> Manager: </font> Dr. Masood Hashemi</li>
<li> <font color="blue"> Designer&Developer:</font>txttxt</li>
<li> <font color="blue"> Supporter:</font>txttxt</li>
<li> <font color="blue"> Developer:</font> txttxt</li>
<li> <font color="blue"> Designer:</font> txttxttxt</li>
<br>
<!--<input class="but" type="button" value="close" onclick="window.close();" style="margin-top:200">-->
</td>
</tr>
</table>
</body>
<table cellpadding="0" align="center">
<tr>
<td><img src="../images/footer.jpg" width="800" align="center" /> </td>
</tr>
</table>
</html>
My problem is that when I see it the table is in the center and bottom of my above image
I want the table be in the left hand but when i tried align="left"
in the table tag nothing changed what can i do?
in my linux system it shows me right but in XP it is not fixed.
Thanks In advance.
Try to insert your "header" table in the body tag. The formating works only for tables that are within it. The head tag is not for your web page header. It's a header for a web browser to provide information about your page and etc - more
That should work:
<html>
<head />
<body>
<table cellpadding="0" align="center">
<tr>
<td> <img src="../images/header.jpg" width="800" align="center" /> </td>
</tr>
</table>
<table border="1" cellpadding="0" style="font-family:tahoma; font-size:12px; margin-left:130px; margin-bottom:200px">
<tr>
<td >
<br>
<b> Sometext </b> Sometext
</td>
</tr>
</table>
<table cellpadding="0" align="center">
<tr>
<td><img src="../images/footer.jpg" width="800" align="center" /> </td>
</tr>
</table>
</body>
</html>
I don't understand anything after this edits. Everything looks fine. Remember that you have margin-left:130 in your content table. This is why it is not glued to the left side of the page. Was that the case?
The problems you are having with the browsers rendering your page differently are caused by errors in your code. The markup is not correct and the browsers have a hard time guessing what you actually want them to do.
Some of the problems with your code include:
<li> tags with no <ul> or <ol> parent
invalid style declarations: values should also include the measure units ( margin-left:130px; )
Instead of copying and pasting different solutions found over the internet, you should take your time and learn the basics of HTML. There are many tutorials on the web that are actually outdated by today's standards (the font tag is deprecated in HTML4 and should be replaced with CSS styles) so you should be careful in the resources you read.
This is a great resource for learning about HTML and it's relatives (CSS and JS):
https://developer.mozilla.org/en-US/learn
You can also use this validate your code:
http://validator.w3.org/
If you don't take your time to learn the proper way of coding webpages, you will have no luck finding developers willing to help you.