I want to show the below html content centered on the page:
Date : xxxx/xx/xx
Time : 12:22
xx : xxxxx
xxxxx : xxxxx
x : xxxxxxx
code:
<!DOCTYPE html>
<html>
<head><title>Notification</title></head>
<body style="text-align:center;border:1px solid black">
<br>
<p style="text-algin:center">
Day:Friday
<br>
Date:December 5,1997
<br>
Time:3.00pm
<br>
Speaker:Dr.Nicolas Lam
<br>
Venue:WC 311
</p>
<p style="text-align:right">Head of the Department</p>
</body>
The result of my code:
Day:Friday
Date:December 5,1997
Time:3.00pm
Lr:Dr.Nicolas Lam
Venue:WC 311
use table tag to do proper alignment
Here's the core for what you want to do
<!DOCTYPE html>
<html>
<head><title>Notification</title></head>
<body style="text-align:center;border:1px solid black">
<b>Community College(Autonomous)</b>
<br>
<span>HKUSPACE</span>
<br>
<b>Department of Computer Science</b>
<br>
<b>Seminar on HTML Programming</b>
<br>
<br>
<span>The Department of Computer Science, in its continuing effort to impart knowledge on the latest topic to students, is arranging the following seminar of HTML programming.</span>
<br>
<p style="text-align:center">
<table align="center">
<tr>
<td>Date</td>
<td> : </td>
<td>xxxx/xx/xx</td>
</tr>
<tr>
<td>Time</td>
<td> : </td>
<td>12:22</td>
</tr>
<tr>
<td>xx</td>
<td> : </td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td> : </td>
<td>xxxxx</td>
</tr>
<tr>
<td>x</td>
<td> : </td>
<td>xxxxxxx</td>
</tr>
</table>
</p>
<p style="text-align:right">Head of the Department</p>
</body>
<html>
First a couple of small notes:
Don't use inline styling. Put your styles into a <style> block or into a separate CSS file loaded with a <link> tag.
The <b> tag is deprecated in HTML 5. You should use another tag, such as <em> or <strong>. I have used <strong> in my example below.
To align things the way you want, you need to use a table. Here is a working example with the above items incorporated, and using a table to format the 3-column block you are trying to achieve.
I also made a fiddle.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
border: 1px solid black;
}
.table-div {
display: table;
margin: 0 auto;
}
.left-align {
text-align: left;
}
.right-align {
text-align: right;
}
</style>
</head>
<body>
<strong>Community College(Autonomous)</strong>
<br>
<span>HKUSPACE</span>
<br>
<strong>Department of Computer Science</strong>
<br>
<strong>Seminar on HTML Programming</strong>
<br>
<br>
<span>The Department of Computer Science, in its continuing effort to impart knowledge on the latest topic to students, is arranging the following seminar of HTML programming.</span>
<br>
<div class="table-div">
<table class="left-align">
<tr>
<td>Day</td><td>:</td><td>Friday</td>
</tr>
<tr>
<td>Date</td><td>:</td><td>December 5, 1997</td>
</tr>
<tr>
<td>Time</td><td>:</td><td>3.00pm</td>
</tr>
<tr>
<td>Speaker</td><td>:</td><td>Dr. Nicolas Lam</td>
</tr>
<tr>
<td>Venue</td><td>:</td><td>WC 311</td>
</tr>
</table>
</div>
<p class="right-align">Head of the Department</p>
</body>
</html>
Easier way to do this is put the data you want to center in some block element and center that block instead.
I changed from text-align: center; to text-align: left; and added margin: auto; and display: table; to div element.
(and also moved text-align to div too)
So you must change from:
<p style="text-algin:center">
Day:Friday
<br>
Date:December 5,1997
<br>
Time:3.00pm
<br>
Speaker:Dr.Nicolas Lam
<br>
Venue:WC 311
</p>
to:
<div style="margin: auto; display: table; text-align: left;">
<p>
Day:Friday
<br>
Date:December 5,1997
<br>
Time:3.00pm
<br>
Speaker:Dr.Nicolas Lam
<br>
Venue:WC 311
</p>
</div>
and you will get the result as you want :)
Note: you can change the width to any value that you want.
result (image)
edited: some typo and change from setting width to use table instead.
Put all of the text inside a div and center the div
Put all of the text inside an additional <p> and center the new <p>
<p style="text-align:center">
<p style="text-align:left">
Day:Friday
<br>
Date:December 5,1997
<br>
Time:3.00pm
<br>
Speaker:Dr.Nicolas Lam
<br>
Venue:WC 311
</p>
</p>
PS: don't use inline styles
Related
So, I have the code below and ideally the goal is to have any images present hit a maximum width of 120px for browsers with viewports of 641px+ and then only a maximum width of 27px. The odd part is that if I remove the resizing coding and put it in a separate code block at the bottom of my site it will resize all images on the page, but not how it's supposed to. When I remove the portion of coding, the coding seems to try and work a little more, but not exactly. Maybe there's a different way to do the resizing coding?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#media screen and ( min-width: 641px ){
img {
width: 120px;
height: auto;
}
}
#media screen and ( max-width: 640px ){
img {
width: 27px;
height: auto;
}
</style>
</head>
<body>
<!--VGC Year-->
<p style="font-size: 30px">
<b>
VGC 2015
</b>
</p>
<!-- Acronym-->
<table>
<tr>
<td>
<b style="font-size: 20px">
CHALK - - -
</b>
</td>
<!--Arconym Pokemon-->
<td>
<img src="https://www.serebii.net/art/th/488.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/485.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/591.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/645-s.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/115-m.png">
</td>
</tr>
</table>
<!--Arconym descption-->
<p>
This acronym refers to a five Pokemon core consisting of Cresselia, Heatran, Amoonguss, Landorus-Therian, and Mega Kangaskhan with the sixth and final Pokemon being up to a Trainer's personal preference. This sixth Pokemon was typically added on to the end of the acronym and was considered a variant on this standard core. For example, Thundurus-Incarnate was a popular sixth option resulting in the term CHALK-T.
</p>
<!-- Acronym-->
<table>
<tbody>
<tr>
<td>
<p style="font-size: 20px">
<b>
Japan Sand - - -
</b>
</p>
</td>
<!--Arconym Pokemon-->
<td>
<img src="https://www.serebii.net/art/th/373-m.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/248.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/530.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/591.png">
</td>
</tr>
</tbody>
</table>
<!--Arconym descption-->
<p>
Japan Sand was a team popularized in Japan - hence the name - and almost always featured the four Pokemon core of Mega Salamence, Tyranitar, Excadrill and Amoonguss. A common fifth Pokemon added to the team was Belly Drum Huge Power Azumarill to pair with Amoonguss.
</p>
</body>
</html>
I put a link in a table cell, and it didn't work. I tried it with a javascript function to open a window, which I would prefer, but that didn't work either. So I looked around for info and found this SO page: How can I make a link from a <td> table cell.
I tried every method there that seemed applicable, plus some variations on those methods, but none of them worked at all; although I did get a simple demo to work. The suggestion made to me on that page is that something else in my code is causing the problem, which seems likely to me.
I'm putting the code below, and maybe someone can help? I don't care what kind of link it is --- whether the entire cell, or just the words -- as long as it takes me to the desired page.
<table style = "width: 100%; margin-top: 20px">
<tr>
<td>
<a class = "headscript"> Your Communications</a>
<p class = "nextscript"> There is a lot of correspondence blah, blah...
<ul class = "nextscript" style = "list-style-position: inside; margin-left: -20px">
<li>Item 1 text stuff </li>
<li>Item 2 more text </li>
<p style = "border-bottom-height:1px; border-bottom-color: #1E6655; border-bottom-style: inset; "> </p>
<li>Item 3 yet more text</li>
</ul>
</p>
</td>
<td style = "padding-left:20px;">
<a class = "headscript"> Your Cost </a>
<p class = "nextscript"> some text here</p>
<table style = "width: 100%; border-collapse: collapse; table-layout:fixed" class = "nextscript">
<tr>
<td> <b> Your annual revenue</b></td>
<td> <b>Your costs </b> </td>
</tr>
<tr>
<td> Up to $50</td>
<td> $whatever </td>
</tr>
Here is where I want the link -- the code shown is one of the suggestions, but it doesn't work for me:
<tr>
<td style = "padding: 0"> additional charges
<a href="overcharges.cfm">
<div style="height:100%;width:100%"> more info
</div>
</a>
</td>
<td> lots of text here, so this cell is much longer than the one with the desired link
</td
</tr>
(Hoping the above code is correct. Small errors in the tr and td tags don't seem to make a difference, but could be misleading.)
Error is related to element structure. 'P' element can not be child of 'ul'. Others are due to similar tag and scope mismatch.
Just refined the code. It's working here
Blockquote
<body>
<table style = "width: 100%; margin-top: 20px">
<tr>
<td>
<a class = "headscript"> Your Communications</a>
<div class = "nextscript"> There is a lot of correspondence blah, blah...
<ul class = "nextscript" style = "list-style-position: inside; margin-left: -20px">
<li>Item 1 text stuff </li>
<li>Item 2 more text </li>
<li style = "border-bottom-height:1px; border-bottom-color: #1E6655; border-bottom-style: inset; ">Item 3 yet more text</li>
</ul>
</div>
</td>
<td style = "padding-left:20px;">
<a class = "headscript"> Your Cost </a>
<p class = "nextscript"> some text here</p>
<table style = "width: 100%; border-collapse: collapse; table-layout:fixed" class = "nextscript">
<tr>
<td> <b> Your annual revenue</b></td>
<td> <b>Your costs </b> </td>
</tr>
<tr>
<td> Up to $50</td>
<td> $whatever </td>
</tr>
<tr>
<td style = "padding: 0"> additional charges
<a href="overcharges.cfm">
<div style="height:100%;width:100%"> more info
</div>
</a>
</td>
<td> lots of text here, so this cell is much longer than the one with the desired link
</td>
</tr>
</table>
</td>
</tr>
</table>
working example here
https://jsfiddle.net/aman9753/jya5L1t5/
I am creating a newsletter template with full CodePen example
I have a few Table rows as follows:
<tr>
<td class="snip" valign="top">
<table class="snip" style="padding-left: 8px;">
<tr>
<td>
<img src="http://placehold.it/40x32" style="padding: 4px">
</td>
</tr>
<tr>
<td>
THIS IS THE TITLE 1
</td>
</tr>
<tr>
<td>
<span>THIS IS THE LINK 1 FOR TITLE 1</span>
<br>
<span>THIS IS THE LINK 2 FOR TITLE 1</span>
<br>
<span>YET ANOTHER LINK FOR TITLE 1</span>
<br>
<span>ONE MORE LINK FOR TITLE 1</span>
<br>
<span>AND THE LAST LINK FOR TITLE 1</span>
</td>
</tr>
</table>
</td>
</tr>
Somehow when I resize the browser to a specific width I get:
You can see that the last TD goes to a next row ...
How can I solve this problem? I can't find the solution ...
look this, I set two different tr with class
http://codepen.io/anon/pen/iyEmK
#media only screen and (max-width : 600px) {
tr.myTR {float:none;display:block;clear:both} }
Use min-width instead of width
table[class="snip"] {
min-width: 50% !important;
}
http://codepen.io/anon/pen/dzGKo
You can add
td[class="snip"]:nth-child(2n+1) {
clear: left;
}
so that the narrow screens have rows of two elements.
Demo at http://codepen.io/gpetrioli/pen/lbxEe
I am creating pdf using HTML
i want to give style to input type but it is not working.
I have following code
$data='<!DOCTYPE html>
<html>
<head>
<style>
.formcontent{margin:0 auto;width:800px;}
.inputType{border-top:0px;border-bottom:1px solid black;border-left:0px;border-right:0px;width:25%;}
.custom_para{display:inline;}
.content{
margin-top: 4%;
text-align:justify;
text-justify:inter-word;
}
</style>
</head>
<body>
<div class="formcontent">
<table width="800px">
<tr>
<td>
<table width="800px">
<tr>
<td colspan="3">
<h1 style="text-align:center;">LEASE</h1>
<h2 style="text-align:center;"> LEASE LEASE LEASE LEASE</h2></td>
</tr>
<tr>
<td colspan="3">
<p class="custom_para">This Rental Agreement or Residential Lease shall evidence the complete terms and conditions under which the parties</p>
<p class="custom_para">whose signatures appear below have agreed. Landlord/Lessor/Agent,<input type="text" class="inputType">,shall be</p>
<p class="custom_para">referred to as "OWNER" and Tenant(s)/Lessee,<input type="text" class="inputType">,shall be referred to as</p>
<p class="custom_para">"RESIDENT." As consideration for this agreement, OWNER agrees to rent/lease to RESIDENT and RESIDENT</p>
<p class="custom_para">agrees to rent/lease from OWNER for use solely as a private residence, the premises located at <input type="text" class="inputType"></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>';
require_once('mpdf.php');
$mpdf = new mPDF();
$b=stripslashes($data);
$mpdf->WriteHTML($b);
$mpdf->Output();
i am giving style on html input type it is working on html page but
when I put it to mpdf for styling its not working
please help
I had the same issue for designing the page through MPDF library
but unfortunatelly mpdf library does not supports all designing(css/tags)
it supports basic html tags and styling to design mPDF.
I've got 5 images I'd like to organize in an ASP.NET MVC view. So what I need is an HTML+CSS solution (I prefer not to use jQuery for this, for maximal compatibility).
I want to organize the images like so:
Image1 Image2
Image3 Image4
Image5
At first I tried using tables, with the HTML being:
<div class="table1">
<table border=1>
<tbody>
<tr>
<td>
<img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Body.Contouring.jpg" />
</td>
<td>
<p class="ImageCenterContainer">
<img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Breast.jpg" />
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table2">
<table border=1>
<tbody>
<tr>
<td>
<p class="ImageCenterContainer">
<img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Skin.jpg" />
</p>
</td>
<td>
<p class="ImageCenterContainer">
<img class="mainArticleImage" src="../../images/fixedImages/Dr_teman_Articles_Face.jpg" />
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table3">
<table border=5>
<tbody>
<tr>
<td>
<p class="ImageCenterContainer">
<img class="mainArticleImage" alt="" src="../../images/fixedImages/Dr_teman_Articles_Face.jpg" />
</p>
</td>
</tr>
</tbody>
</table>
</div>
and the css part:
.mainArticleImage {
height: 95px;
width: 120px;
}
.ImageCenterContainer {
margin: 0 auto;
margin-top:0px;
margin-bottom:0px;
padding:0px;
text-align:center;
}
but that doesn't work on IE.
This approach also didn't work too well either.
What is the best, simplest, cross-browser way to carry out what would seem to be an easy task?
How about this: http://jsfiddle.net/um6d7/
#Brian Flanagan
(this reply was too long for a comment)
I'm using IE8, but this solution should work for older IE versions as well. Shouldn't it to be fairly simple to organize 5 pictures on a screen? :-P
I should also mention that I didn't copy and paste your solution "as is", since I didn't want my css to refer to general tags such as img and div, but the changes are meaningless in terms of logic. The actual code I used:
HTML:
<div id="imagesContainer">
<img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
<img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
<img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
<img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
<img class="articleImage middle" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG"/>
</div>
CSS:
#imagesContainer {width:550px; overflow:hidden;}
.articleImage {width:180px; float:left; display:inline; margin:15px;}
.middle {margin:15px 90px;}
any suggestions?