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/
Related
For some reason Jsoup is incorrectly parsing an html document, specifically a paragraph that contains a group of paragraph in a table.
Input:
<table>
<tr>
<td>
<p>
<p> Title <br/> New</p>
<p> Content new </p>
</p>
</td>
</tr>
</table>
After parsing:
<table>
<tr>
<td>
<p> </p>
<p> Title <br> New</p>
<p> Content new </p>
<p></p>
</td>
</tr>
</table>
Do you know what may be causing this and how I can solve it?
Thanks.
This is the correct parsing behaviour. Because <p> elements are block-level elements, they cannot be nested inside other <p> elements.
According to the MDN documentation:
Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag.
A possible solution is using another element such as a <section> or <div>. For example:
<table>
<tr>
<td>
<div>
<p> Title <br/> New</p>
<p> Content new </p>
</div>
</td>
</tr>
</table>
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'm trying to build a newsletter with table (I have to cause some emailclients ignore div boxes etc ).
The problem that I have is that I would like to have the text " Test test " on the same height beginning like the pic left to it. and the blue button should also be on the same height. I made a pic from the Photoshop layout how it should look like and on js fiddle so you see how it is now.
<tr style="background-color:#deeef4;">
<td width="250" cellpadding="0" colspan="2" valign="top" style="padding:15px 25px;">
<p style="display:inline;color:#00668a;">OBERTAUERN <span style="color:#a9a9a9;font-size:13px">Gültigkeit der Pauschale: 22.03. – 12.04.2014 & 19.04. – 04.05.2014</span>
</p>
<br>
<img src="http://www.awesom-media.de/linie.png">
</td>
<tr style="background-color:#deeef4;">
<td width="300" style="padding:10px 25px;display:inline;">
<img src="http://www.awesom-media.de/ab1.jpg">
</td>
<td width="400" style="text-align:left">
<p>Test Test</p>
<ul>
<li>7 Tage Aufenhthalt inkl. Frühstück</li>
<li>6-Tages-Skipass für die Skiregion Obertauern</li>
</ul><img src="http://www.awesom-media.de/button.png" width="345" height="35" border="0">
</td>
</tr>
</tr>
jsfiddle
I updated your JSFiddle: http://jsfiddle.net/sBaNL/1/
I did two things:
Remove the top margin from the <p> surrounding Test Text
Make the surrounding <td> to vertically align its contents to the top:
.
<td width="400" style="text-align:left; vertical-align: top;">
<p style="margin-top: 0px;">Test Test </p>
...
</td>
To avoid all such uncessary margin, padding etc to all elements, you do the following in the beginning of the css files
*:{margin:0px;padding:0px;...}
This will overright all the browser's default properties.
It is due to p default display:block property which takes some margin by default.
Change it to display:inline and you can also remove the margin-top
p{
display:inline;
margin-top : 0px
}
Js Fiddle Demo
for image button you can add the margin-top style="margin-top:15px"
I'm trying to make three columns with the titles "Friday", "Saturday", and "Sunday". Each column will have a series of images that are embedded via embedly (which end up as <img> tags where I have a href in case you're wondering).
I'm having trouble getting the images to center nicely directly underneath the column headers because the images are different aspect ratios (not sure if I'm using the term correctly).
For example this picture is much wider than this picture.
Here is my code so far.
<table>
<tr>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<td><div class="featuredGame">
<p> Subway Series </p>
</div>
</td>
<td>
<div class="featuredGame">
<p> Subway Series </p>
</div>
</td>
<td>
<div class="featuredGame">
<p> Subway Series </p>
</div>
</td>
</tr>
<tr>
<td><div class="featuredGame">
<p> Subway Series </p>
</div>
</td>
<td>
<div class="featuredGame">
<p> Subway Series </p>
</div>
</td>
<td>
<div class="featuredGame">
<p> Subway Series </p>
</div>
</td>
</tr>
</table>
And the css for featuredGame:
NOTE the #featured tag is intentional. This table is encased within <div id="featured">
#featured .featuredGame {
position: relative;
height: auto;
width: 150px;
font-size: 1.0em;
}
th td {text-align:center;}
In you css block put
margin-left:auto;
margin-right:auto;
that should center it
your style rule is trying to apply styles to an element with an id="featured" AND a class="featuredGame. That's part of the reason it is failing. (At least without the embedly.) Remove the id and the styles start to work.
The images are very large Does embedly shrink them? If not, your table design will not hold them well in a standard resolution browser.
Try changing
th td {text-align:center;}
to
th, td {text-align:center;}
http://jsfiddle.net/blineberry/ubmW3/
Is that what you're looking for?
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>