My question is : I have word document i need to convert as html/css. How can i make different margin in my first page.
Thanks for your helps
This is my code
<cfcontent type="application/msword">
<cfheader name="Content-Disposition" value="attachment; filename=myDoc.doc">
<html>
<title></title>
<style>
}
#page Section1{
size:8.5in 11.0in;
margin:0in 0in 0in 0in;
mso-paper-source:0;
}
div.Section1{
page:Section1;
}
#page Section2{
size:8.5in 11.0in;
margin:0.5in 0.5in 0.5in 0.5in;
mso-paper-source:0;
}
div.Section2{
page:Section2;
}
div.pageBreak {
page-break-before:always;
</style>
</head>
<body style='tab-interval:.5in'>
<div class="Section1" style="margin: 0in 0in 0in 0in;">
Something page 1
<div class="pageBreak"></div>
</div>
<div class="Section2">
Something page 2
<div class="pageBreak"></div>
</div>
</body>
</html>
Related
What I want to do is make it so I have one paragraph on the top of the screen and one right under it, but a bit smaller. But when I execute this there is a big gap in between the paragraphs that I dont want. How do I fix?
<!DOCTYPE html>
<html>
<body>
<style>
.p1 {
color: blue;
}
.p2 {
color: red;
}
</style>
<p class="p1" align="center"><font size="10">Welcome To Plieaxploits!</p>
<p class="p2" align="center"><font size="5" vertical-align="top">We Are The Home
Of Roblox Exploits!</p>
</body>
</html>
You can set margin:0 for both .p1 and .p2 classes.It will look like something like this :
Another thing is that you missing closing font tag in your code so with margins and closing font tag it will be:
<!DOCTYPE html>
<html>
<body>
<style>
.p1 {
color: blue;margin:0;
}
.p2 {
color: red;margin:0;
}
</style>
<p class="p1" align="center"><font size="10">Welcome To Plieaxploits!</font></p>
<p class="p2" align="center"><font size="5" vertical-align="top">We Are The Home
Of Roblox Exploits!</font></p>
</body>
</html>
Hope it helps you.
PS: If not do share what exactly you require and also read this Font tag
You can use the margin:auto property. Hope this helps!
<!DOCTYPE html>
<html>
<body>
<style>
.p1 {
color: blue;margin:auto;
}
.p2 {
color: red;margin:auto;
}
</style>
<p class="p1" align="center"><font size="10">Welcome To Plieaxploits!</p>
<p class="p2" align="center"><font size="5" vertical-align="top">We Are The Home
Of Roblox Exploits!</p>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Data Retrieve</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap.css">
<style>
#demo{
background-color:purple;
color: white;
width: 100%;
}
#home{
width: 45px;
}
#back{
width: 25px;
}
#header{
width:100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12">
<table id="info_table" class="table">
<tr>
<td id="header">
<p align="center"><span style="float: left"><img src="back.png" id="back"></span><b>মন্ত্রণালয়</b><span style="float: right"><img src="home.png" id="home"></span><span style="float: right"><img src="refresh.png" id="refresh"></span></p>
</td>
</tr>
<tr>
<td id="demo" align="center"><td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
<script>
var bn_num = new Array('০','১','২','৩','৪','৫','৬','৭','৮','৯');
function bn_num_convert(num){
//console.log(num.length);
var bn_val = '';
for(i=0;i<num.length;i++){
//console.log(num[i] + '/' + bn_num[num[i]]);
bn_val = bn_val + bn_num[num[i]];
}
//console.log(bn_val);
return bn_val;
}
$.getJSON("http://localhost/directory/ministri.json",function(obj){
var info ='';
//alert(obj.data.length);
var count = obj.data.length;
document.getElementById("demo").innerHTML ='মোট মন্ত্রণালয় ('+bn_num_convert(count.toString())+')';
var count = obj.data.length;
$.each(obj.data,function(key,value){
info += '<tr>';
info +='<td>'+value.sitename_bn+'<span style="float: right"> > </span>'+ '</td>';
info += '</tr>';
[This is the corresponding output of the code.][1]
});
$('#info_table').append(info);
});
</script>
Firstly here purple background color doesn't get the full wide.if i inspect the background there shows an empty td which cause the problem.if i delete the empty td then i get perfect result.but there is no empty td in my code.plz see the code and show me the error.
Secondly there is no horizontal line at the end of the output result.why last line doesn't get horizontal line?
You are not closing the td, thats why empty td is appending.
<td id="demo" align="center"></td>
Close the td like in above code
and remove margin and padding as other posts suggested in case if you want full width till ends.
Set body margin paddding to 0px
body {
padding: 0px;
margin: 0px;
}
Just put in demo id td, it will show.
See thishttps://jsfiddle.net/v6mwpz89/3/
Cheers!
I really need to optimize this page (http://filipcz.ideatech.cz/mproj/components/tisk.php) for printing on a paper (standard A4 paper size). My page works quite good in Chrome, IE or Edge, but Firefox displays it badly.
//Edit: Trying to describe clearer, what I really need to achive: I replaced <i>Střední průmyslová škola Edvarda Beneše<br>a Obchodní akademie Břeclav</i> with Some text on the left and <i>Seznam projektů</i> with Text on the right side.
Code:
...
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Databáze maturitních projektů</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
td { padding-left: 15px; padding-right: 15px; }
#media print{
.netisk{
visibility: hidden;
}
}
</style>
...
...
<div align="center" class="netisk">
<input type="button" value="Vytisknout" onclick="window.print();">
<input type="button" value="Zavřít okno" onclick="window.close();">
<hr style="width:30%;">
</div>
<div style="float: left;">
<i>Some text on the left</i>
</div>
<div style="float: right;">
<i>Text on the right side</i>
</div>
<hr style="width:100%;">
<div align="center">
<table cellspacing='0'><thead><tr><th> ID </th><th> Název projektu </th><th> Kategorie </th><th> Autor </th><th> Třída </th><th> Rok </th><th> Vedoucí práce </th></tr></thead><tbody><tr><td>1</td><td>Databáze projektů (PHP + MySQL)</td><td>Webové stránky</td><td>Filip Krolop</td><td>EL 4.A</td><td>2015/2016</td><td>zavodny</td></tr><tr><td>2</td><td>Vytvoření jednoduchého herníhu prostředí v Unreal Enginu 4</td><td>Unity</td><td>Viktor Krčma</td><td>EL 4.A</td><td>2015/2016</td><td>kotlarik</td></tr><tr><td>3</td><td>Návrh podnikové sítě a její simulace v Packet tracer</td><td>Sítě</td><td>Michal Kubík</td><td>EL 4.A</td><td>2015/2016</td><td>kotlarik</td></tr></tbody></table>
</div>
...
Is there any way to fix this using CSS or HTML?
Thank You very much for any help.
try this, I only removed the floats & added HTML, head & body tags
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Databáze maturitních projektů</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
td { padding-left: 15px; padding-right: 15px; }
</style>
</head>
<body>
<div align="center" class="netisk">
<input type="button" value="Vytisknout" onclick="window.print();">
<input type="button" value="Zavřít okno" onclick="window.close();">
<hr style="width:30%;">
</div>
<div>
<i>Střední průmyslová škola Edvarda Beneše<br>
a Obchodní akademie Břeclav</i>
</div>
<div>
<i>Seznam projektů</i>
</div>
<hr style="width:100%;">
<div align="center">
<table cellspacing='0'><thead><tr><th> ID </th><th> Název projektu </th> <th> Kategorie </th><th> Autor </th><th> Třída </th><th> Rok </th><th> Vedoucí práce </th></tr></thead><tbody><tr><td>1</td><td>Databáze projektů (PHP + MySQL)</td><td>Webové stránky</td><td>Filip Krolop</td><td>EL 4.A</td><td>2015/2016</td><td>zavodny</td></tr><tr><td>2</td><td>Vytvoření jednoduchého herníhu prostředí v Unreal Enginu 4</td><td>Unity</td><td>Viktor Krčma</td><td>EL 4.A</td><td>2015/2016</td><td>kotlarik</td></tr><tr><td>3</td><td>Návrh podnikové sítě a její simulace v Packet tracer</td><td>Sítě</td><td>Michal Kubík</td><td>EL 4.A</td><td>2015/2016</td><td>kotlarik</td></tr></tbody></table>
</div>
</body>
</html>
if you want this to show to the right, just change this in the code. I put "Seznam projektů" in the same div and floated it to the right
<div>
<i>Střední průmyslová škola Edvarda Beneše<br>
a Obchodní akademie Břeclav</i>
<i style="float:right">Seznam projektů</i>
</div>
Maybe try float left on the broken div.
remove the float:left from the left div, and add inline-block to the following divs.
this works for chrome and firefox.
<div style="display:inline-block">
<i>Střední průmyslová škola Edvarda Beneše<br>
a Obchodní akademie Břeclav</i>
</div>
<div style="display:inline-block; float:right">
<i>Seznam projektů</i>
</div>
I recently began construction of my first website, I'm still a beginner in html. My site has three buttons on the side, "Games", "Chat", and "About". They all have custom pictures, but it seems like there is a very small hyperlinked "-" in the bottom right of the button. Like a hyperlink, it turns red when clicked. Here is a picture of my clicking the "Games" button: As you can see, there is a small "-" hyperlink on the bottom right of the button.
Here is ALL my code for the games page:
<html>
<header>
<title>CBgames.com</title>
</header>
<body bgcolor=#474747 text=#FFFFFF>
<center>
<img src="siteimages/title.gif">
</center>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/games.html">
<img src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" />
</a>
<br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/chat.html">
<img src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" />
</a>
<br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/about.html">
<img src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" >
</a>
<br>
<br>
<table Align="left" Border="1" Width="300">
<tr>
<td><center>Our Newest Games:</center></TD>
</tr>
<tr>
<td>
<center>Game</center>
<center>Game</center>
<center>Game</center>
</td>
</tr>
</table>
<style type="text/css">
body {
margin:0px;
padding-bottom:25px;
}
#footer {
color:white;
font:George, "Times New Roman", Times, serif;
font-size:16px;
width:1920px;
height:20px;
line-height:20px;
background-color:#474747;
text-align:center;
position:fixed;
bottom:0px;
}
</style>
<head>
<body>
<div id="footer">
COPYRIGHT © 2015 CB-GAMES.NET [SA] - ALL RIGHTS RESERVED
</div>
</body>
</body>
</html>
I'm still a newbie at this, sorry for any troubles.
This is the syntax for adding a URL in HTML
link text
An example of adding "Example" website URL would be like the following
Click here to direct to Example site
You have spaces between the start tag for the anchor and the image inside of it (and between the image and the end tag).
Spaces are text.
Text in a link gets underlined.
Reformat your HTML to remove the spaces.
There is still an awful lot wrong with your markup but here is a quick attempt of moving you along in the right direction:
<!doctype html>
<html>
<head>
<title>CBgames.com</title>
<style type="text/stylesheet">
BODY {
background-color:#474747;
color:#FFF;
margin:0;
padding-bottom:25px;
}
.titleimage { text-align:center; }
.buttons {
margin-bottom: 2em;
}
.buttons A { display:block; }
.table1 { text-align:left; border:solid 1px #000; width: 300px; }
#footer {
color:white;
font:George, "Times New Roman", Times, serif;
font-size:16px;
height:20px;
line-height:20px;
background-color:#474747;
text-align:center;
position:fixed;
left:0;right:0;bottom:0;
}
</style>
</head>
<body>
<dIv class="titleimage"><img src="siteimages/title.gif"></div>
<div class="buttons">
<a href="games.html"><img
src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" /></a>
<a href="chat.html"><img
src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" /></a>
<a href="about.html"><img
src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" ></a>
<div>
<table class="table1">
<tr><td>Our Newest Games:</td></tr>
<tr>
<td>
<div>Game</div>
<div>Game</div>
<div>Game</div>
</td>
</tr>
</table>
<footer id="footer">
COPYRIGHT © 2015 CB-GAMES.NET [SA] - ALL RIGHTS RESERVED
</footer>
</body>
</html>
I am generating "Word document" with a header on the first page as HTML code. <style>
tag contains:
#page Section {
size:8.5in 11.0in;
margin: 0.7in 0.9in 0.7in 0.9in;
mso-header-margin: 0.0in;
mso-footer-margin: 0.0in;
mso-title-page: yes;
mso-first-header: fh1;
mso-paper-source: 0;
}
div.Section {
page: Section;
}
and <body>:
<div class="Section" style="font-family: Verdana, sans-serif;">
<![if supportFields]>
<div style="mso-element:header" id="fh1">
<p class="MsoHeader">
header
</p>
</div>
<![endif]>
</div>
It shows the "header" text both in header and in the document's main body. The resources (http://techsynapse.blogspot.com/2007/03/generating-word-document-dynamically.html and http://www.pbdr.com/ostips/wordfoot.htm) I have found say that there is no way of avoiding this effect without using an additional header file which is not an option for me.
And there goes my question: do you know any work-around for that problem? How can I hide the occurence of the header in main document but leave it in its place at the top of the page? Thanks in advance for any piece of advice.
This worked for me:
<html
xmlns:o='urn:schemas-microsoft-com:office:office'
xmlns:w='urn:schemas-microsoft-com:office:word'
xmlns='http://www.w3.org/TR/REC-html40'>
<head><title></title>
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Print</w:View>
<w:Zoom>90</w:Zoom>
</w:WordDocument>
</xml><![endif]-->
<style>
p.MsoFooter, li.MsoFooter, div.MsoFooter
{
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
tab-stops:center 3.0in right 6.0in;
font-size:12.0pt;
}
<style>
<!-- /* Style Definitions */
#page Section1
{
size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-title-page:yes;
mso-header: h1;
mso-footer: f1;
mso-first-header: fh1;
mso-first-footer: ff1;
mso-paper-source:0;
}
div.Section1
{
page:Section1;
}
table#hrdftrtbl
{
margin:0in 0in 0in 900in;
width:1px;
height:1px;
overflow:hidden;
}
-->
</style></head>
<body lang=EN-US style='tab-interval:.5in'>
<div class=Section1>
<p> CONTENT </p>
<br/>
<table id='hrdftrtbl' border='0' cellspacing='0' cellpadding='0'>
<tr><td>
<div style='mso-element:header' id=h1 >
<p class=MsoHeader ><p> HEADER-TITLE</p></p>
</div>
</td>
<td>
<div style='mso-element:footer' id=f1>
<p> FOOTER-TITLE</p>
<p class=MsoFooter>
<span style=mso-tab-count:2'></span>
Page <span style='mso-field-code: PAGE '><span style='mso-no-proof:yes'></span></span> of <span style='mso-field-code: NUMPAGES '></span>
</p>
</div>
<div style='mso-element:header' id=fh1>
<p class=MsoHeader><span lang=EN-US style='mso-ansi-language:EN-US'> FIRST-HEADER-TITLE<o:p></o:p></span></p>
</div>
<div style='mso-element:footer' id=ff1>
<p class=MsoFooter><span lang=EN-US style='mso-ansi-language:EN-US'> FIRST-FOOTER-TITLE<o:p></o:p></span></p>
</div>
</td></tr>
</table>
</body></html>
To update on above answer by vencedor and remove the extra empty character encoding added to your header/footer images/text you can do something like this:
<html
xmlns:o='urn:schemas-microsoft-com:office:office'
xmlns:w='urn:schemas-microsoft-com:office:word'
xmlns='http://www.w3.org/TR/REC-html40'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Print</w:View>
<w:Zoom>100</w:Zoom>
</w:WordDocument>
</xml><![endif]-->
<style>
<!-- /* Style Definitions */
p.MsoHeader, li.MsoHeader, div.MsoHeader{
margin:0in;
margin-top:.0001pt;
mso-pagination:widow-orphan;
tab-stops:center 3.0in right 6.0in;
}
p.MsoFooter, li.MsoFooter, div.MsoFooter{
margin:0in 0in 1in 0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
tab-stops:center 3.0in right 6.0in;
}
.footer {
font-size: 9pt;
}
#page Section1{
size:8.5in 11.0in;
margin:0.5in 0.5in 0.5in 0.5in;
mso-header-margin:0.5in;
mso-header:h1;
mso-footer:f1;
mso-footer-margin:0.5in;
mso-paper-source:0;
}
div.Section1{
page:Section1;
}
table#hrdftrtbl{
margin:0in 0in 0in 9in;
}
-->
</style>
<style type="text/css" media="screen,print">
body {
font-family: "Calibri", "Verdana","HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size:12pt;
}
pageBreak {
clear:all;
page-break-before:always;
mso-special-character:line-break;
}
</style>
</head>
<body style='tab-interval:.5in'>
<div class="Section1">
Something page 1
<div class="pageBreak"></div>
Something page 2
<div class="pageBreak"></div>
<table id='hrdftrtbl' border='1' cellspacing='0' cellpadding='0'>
<tr>
<td>
<div style='mso-element:header' id="h1" >
<p class="MsoHeader">
<table border="0" width="100%">
<tr>
<td>
YOUR_HEADER IMAGE/TEXT
</td>
</tr>
</table>
</p>
</div>
</td>
<td>
<div style='mso-element:footer' id="f1">
<p class="MsoFooter">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="footer">
YOUR_FOOTER_TEXT
<g:message code="offer.letter.page.label"/> <span style='mso-field-code: PAGE '></span> of <span style='mso-field-code: NUMPAGES '></span>
</td>
</tr>
</table>
</p>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
This now includes full css components for header and footer segments.
The trick that actually removes the extra encoding is declaring yet another table within the MsoFooter and MsoHeader sections.
You can hide extra space following this answer
Limiting table's height:
<table id='hrdftrtbl' border='1' cellspacing='0' cellpadding='0' style='margin-left:50in;'>
<tr style='height:1pt;mso-height-rule:exactly'>
<td>
<div style='mso-element:header' id="h1" dir="ltr" >
<p class="MsoHeader">
<table border="0" width="100%" style="margin-bottom: 15pt;">
<tr>
<td width="50%">
Some text goes here
</td>
<td width="50%" style="text-align: left">
<img height="auto" src="">
</td>
</tr>
</table>
</p>
</div>
</td>
<td>
<div style='mso-element:footer' id="f1">
<p class="MsoFooter">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="footer" dir="ltr">
<g:message code="offer.letter.page.label"/> <span style='mso-field-code: PAGE '></span> / <span style='mso-field-code: NUMPAGES '></span>
</td>
</tr>
</table>
</p>
</div>
</td>
</tr>
</table>