This is my simple webpage :-
<html>
<head>
<style type="text/css">
.body{
max-width:3072px;
min-width:3072px;
margin:0px auto;
background: url('Stripes.png') no-repeat #293231;
background-attachment:fixed;
background-position:0% 25%;
}
.back{
z:index:0;
}
</style>
</head>
<body class="body">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img src='Main.jpg' class="back"/>
</td>
<td>
<img src='Page2.jpg'/>
</td>
<td>
<img src='Page3.jpg'/>
</td>
</tr>
<tr>
<td>
<img src='MiddleLeft.png'/>
</td>
<td>
<img src='MiddleMiddle.png'/>
</td>
<td>
<img src='MiddleRight.png'/>
</td>
</tr>
<tr>
<td>
<img src='footer.jpg'/>
</td>
<td>
<img src='footer.jpg'/>
</td>
<td>
<img src='footer.jpg'/>
</td>
</tr>
</table>
</body>
</html>
Problem here is due to my large monitor the footer doesn't appear at the bottom of the monitor. It appears somewhere in the middle. How do i ensure that footer appears only at the bottom of the screen irrespective of the size of the screen?
Have a look at:
A Bulletproof Sticky Footer, Woohoo!
Related
I am tring to get word file from HTML . The problem I am facing is that the header and footer repeating on first page of word in body.Is there is work around to remove or hide the table.
I have tried using margin property but that left empty space between header and body (I will show in screen shot).
enter image description here
The code that I am using :
HTML :
<div class="main">
<table id='hrdftrtbl' border='1' cellspacing='0' cellpadding='0'>
<tr>
<td>
<div class="header" style='mso-element:header' id="header1">
<p class="MsoHeader">
<table style="float: right;width: 100%;">
<tbody>
<tr>
<td align="right">
<!--<img src="{!URLFOR($Resource.PDF,'PDF/AdaniPort.png')}" style="float: right;" />-->
<img src="https://adanicf--portsdev--c.cs5.content.force.com/servlet/servlet.ImageServer?id=015O00000031R1i&oid=00DO000000555mR&lastMod=1565955266000" height='80' width='60' style="float: right;width=2% !important;height=6% !important"/>
</td>
</tr>
<tr>
<td align="right"><b>{!LogoPortName}</b>
</td>
</tr>
<tr>
<td>
<hr size="2" style="color: black;" />
</td>
</tr>
</tbody>
</table></p>
</div>
</td>
<td>
<div class="footer" style='mso-element:footer' id="footer1">
<p class="MsoFooter">
<!-- <div>Page <span class="pagenumber"/> of <span class="pagecount"/></div> -->
<table id="ftrtbl" style="float: right;width: 100%;">
<tr>
<td colspan="2">
<hr size="2" style="color: black;" />
</td>
</tr>
<tr>
<td style="width:40%;font-size:14px;" align="left" >This Document is strictly confidential</td>
<td style="width:40%;font-size:14px;" align="left" >{!quote.Ref_No__c}</td>
<td style="width:20%;font-size:14px;" align="right"> Page <span style='mso-field-code: PAGE '></span> of <span style='mso-field-code: NUMPAGES '></span><span class="pagenumber" />
</td>
</tr>
</table>
</p>
</div>
</td>
</tr>
CSS (using margin):
#page main {
mso-header:header1;
mso-footer:footer1;
mso-paper-source:0;
mso-header-margin:0.5in;
mso-footer-margin:0.5in;
}
div.main {
page:main;
}
p.MsoFooter, li.MsoFooter, div.MsoFooter {
mso-pagination:widow-orphan;
tab-stops:center 216.0pt right 432.0pt;
}
p.MsoHeader, li.MsoHeader, div.MsoHeader {
mso-pagination:widow-orphan;
width:1px;
height:1px;
}
table#hrdftrtbl{
margin:50in 0in 0in 15in;}
Already Answered kindly check the link
How to use HTML to print header and footer on every printed page of a document?
thead: this is for the repeated header.
tfoot: the repeated footer.
tbody: the content.
I have not found the proper solution but the trick worked for me is I changed the position of header-footer code below the body tag so that the empty space will be shifted from first page to last page.
exp:
Before:
<div class="main">
---------
-----------
</div>
<body>
----------
----------
</body>
After:
<body>
----------
----------
</body>
<div class="main">
---------
-----------
</div>
The first should have vertical scroll bar when it's longer than 50% but it didn't work. I want to fix the 50% and if the text is longer it should show the scroll bar from the overflow.
<!DOCTYPE html>
<html>
<head>
</head>
<style>
html, body { height: 100%; }
</style>
<body>
<table style="height:100%; width:100%" border=1>
<tr style="height:50%">
<td style="width:30%;">
<div style="width:100px; height:50% overflow:auto;">
<table>
<tr><td>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</td></tr>
</table>
</div>
</td>
<td width="70%"></td>
</tr>
<tr style="height:50%"><td></td><td></td></tr>
</table>
</body>
</html>
You are doing almost right ... just ,missing a huge comma :P <div style="width:100px; height:50% ;overflow:auto;">
<!DOCTYPE html>
<html>
<head>
</head>
<style>
html, body { height: 100%; }
</style>
<body>
<table style="height:100%; width:100%" border=1>
<tr style="height:50%">
<td style="width:30%;">
<div style="width:100px; height:50% ;overflow:auto;">
<table>
<tr><td>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</td></tr>
</table>
</div>
</td>
<td width="70%"></td>
</tr>
<tr style="height:50%"><td></td><td></td></tr>
</table>
</body>
</html>
I'm working on a HTML page which I intend to use with PHP later however I have encountered some issues with the height scaling.
My tables and also the elements within the tables are not abiding by the height limits I have set within a container.
I do not want it to extend beyond the page as that would require a scroll bar. Anybody have any suggestions? (Other feedback is welcome)
Code HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="summonerTable.css"/>
<link rel="stylesheet" type="text/css" href="navBar.css"/>
</head>
<body>
<div class="summonerContainer">
<div class="navbar">
</div>
<div id="gameDetails">
</div>
<table border="1" id="summonerTeams">
<tr height="100%">
<!-- Begin Definitions !-->
<td>
<table width="100%" id="summonerTeamsDetails" height="100%">
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Summoner Name
</p>
</td>
</tr>
<tr height="10%">
<td>
<table width="100%" height="100%" id="summonerTeamDetailsInterior" bgcolor="red">
<tr>
<!-- <td width="50%" background="ChampionIcon.png" id="summonerImg" alt="Hello">-->
<td width="25%" bgcolor="aqua">
<img src="ChampionIcon.png" id="summonerImg2" alt="Hello"/>
</td>
<td width="12%">
<table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="aqua">
<tr>
<!-- <td background="summonerSpell.png" id="summonerImg">-->
<td style="vertical-align:bottom;">
<img src="summonerSpell.png" id="summonerImg" alt="Hello"/>
</td>
</tr>
<tr>
<!-- <td background="summonerSpell.png" id="summonerImg"> -->
<td style="vertical-align:top;">
<img src="summonerSpell.png" id="summonerImg" alt="Hello"/>
</td>
</tor>
</table>
</td>
<td width="75%">
<table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="red">
<tr>
<td bgcolor="black">
<p>
tryndamere
</p>
</td>
</tr>
<tr>
<td>
<p>
K/D/A: 1000/1000/1000
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Champion Games
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
KDR
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Ranking
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Series
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Runes
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Masteries
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Ranked Wins
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Normal Wins
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Show Champion Counters
</p>
</td>
</tr>
</table>
</td>
<!-- End Definitions !-->
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
</tr>
</table>
<div id="summonerMiddleBar">
</div>
<table border="1" id="summonerTeams">
<!-- Summoner Details Table (2) !-->
<tr height="100%">
<!-- Begin Definitions !-->
<td>
<table width="100%" id="summonerTeamsDetails" height="100%">
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Summoner Name
</p>
</td>
</tr>
<tr height="20%">
<td>
<table width="100%" height="100%" id="summonerTeamDetailsInterior" bgcolor="red">
<tr>
<!-- <td width="50%" background="ChampionIcon.png" id="summonerImg" alt="Hello">-->
<td width="25%" bgcolor="aqua">
<img src="ChampionIcon.png" id="summonerImg2" alt="Hello"/>
</td>
<td width="12%">
<table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="aqua">
<tr>
<!-- <td background="summonerSpell.png" id="summonerImg">-->
<td style="vertical-align:bottom;">
<img src="summonerSpell.png" id="summonerImg" alt="Hello"/>
</td>
</tr>
<tr>
<!-- <td background="summonerSpell.png" id="summonerImg"> -->
<td style="vertical-align:top;">
<img src="summonerSpell.png" id="summonerImg" alt="Hello"/>
</td>
</tr>
</table>
</td>
<td width="75%">
<table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="red">
<tr>
<td bgcolor="black">
<p>
tryndamere
</p>
</td>
</tr>
<tr>
<td>
<p>
K/D/A: 1000/1000/1000
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Champion Games
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
KDR
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Ranking
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Series
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Runes
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Masteries
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Ranked Wins
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Normal Wins
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Show Champion Counters
</p>
</td>
</tr>
</table>
</td>
<!-- End Definitions !-->
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
</tr>
</table>
<div class="footer">
</div>
</div>
</body>
</html>
CSS Code:
#charset "utf-8";
/* CSS Document */
html, body
{
height:100%;
width:100%;
font:"Courier New", Courier, monospace;
color:white;
}
.summonerContainer
{
width:100%;
height:100%;
padding:0;
margin:0;
resize:none;
}
#summonerTeams
{
width:100%;
margin:0;
padding:0;
table-layout:fixed;
padding:0;
margin:0;
border-collapse:collapse;
height:38%;
}
#summonerTeamsDetails
{
padding:0;
margin:0;
border-spacing:0;
}
#summonerTeamDetailsInterior
{
padding:0;
margin:0;
border-spacing:0;
border-collapse:collapse;
}
#summonerMiddleBar
{
background-color:#000;
color:white;
height:5%;
width:100%;
}
#gameDetails
{
background-color:aqua;
color:white;
height:5%;
width:100%;
}
p
{
font-size:1.5vw;
margin:0;
padding:0;
text-align:center;
}
body
{
padding:0;
margin:0;
}
#summonerImg
{
max-width:100%;
width:100%;
background-size:cover;
/*display:block;*/
}
#summonerImg2
{
max-width:100%;
width:100%;
background-size:cover;
/*display:block;*/
}
table
{
}
Other CSS Code:
#charset "utf-8";
/* CSS Document */
.navbar
{
background-color:#000;
color:white;
height:10%;
width:100%;
}
.footer
{
background-color:#000;
color:white;
height:4%;
width:100%;
}
Basically what is happening is that there comes a point at which the height of 5% for the table cell is too small for the text that is contained inside so, instead of disappearing it ignores the height of the container.
To workaround this you would have to use media queries to rearrange the table - though i recommend not using a table as it will make this bit easier - so that the height is of a size that wont create scroll bars.
See here for a tutorial on media queries: http://www.youtube.com/watch?v=fA1NW-T1QXc
I think the following lines should be corrected:
html, body {
color: white; }
Setting the text color to white is a bad idea as both the text and background would have the same color, making it impossible to read some text (like the AAAAAAAAAA) and also difficult for you to decipher errors easily.
To improve on markup, it is always recommended you seperate html and css code into files of their own. That also makes the code very easy to understand. In addition, you can always view all markup errors on the web console: ctrl+shif+k on most mordern browsers.
On my site, I have banner, menubar + buttons(in table), one table, with 2 columns. and I want to place footer below that table. I have my table in separate div. I am puttingmy footer to another div, right after the table div ends. Howerver, it isnt positioning below my table. My footer stays at the top of my table and I cant even see the whole footer image. What did I do wrong please?
HTML:
<body>
<div class = "page " align ="center">
<div class="header">
<img id="bannerimg">
<img id="menubar">
</div>
<div class="menu">
<table id="menubtns" border="0">
<tr>
<td><img id="projekt"></td>
<td><img id="eshop"></td>
<td><img id="foto"></td>
<td><img id="video"></td>
</tr>
</table>
</div>
<div class= "content">
<table id= "obsah" border="0">
<tr>
<td><img id="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
<td><img id="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
</tr>
<tr>
<td><img id="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
<td><img id="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
</tr>
</div>
<div class= "footer">
<img id="footerimg">
</div>
</div>
</body>
</html>
my CSS file:
body {
background-image:url('img/bg_image.png');
background-repeat:no-repeat;
background-attachement:fixed;
}
.page
{
position= "relative";
}
.header #bannerimg
{
background-image:url('img/banner.png');
width: 1040px;
height: 594px;
background-repeat:no-repeat;
}
.content
{
margin-top: 80px;
margin-right: 50px;
font-family: "Verdana";
font-size: 20px;
position: relative;
}
.content #buybtn
{
background-image:url('img/kupit.png');
height: 36px;
width: 140px;
}
.content #obsah
{
border-spacing: 60px 30px;
}
.footer
{
position:absolute;
bottom:0;
}
.footer #footerimg
{
background-image:url('img/footer.png');
height: 200x;
width: 992px;
}
.page -> position="relative"; change to position:relative;
footerimg -> height:200x; change it to height:200px;
You want have footer always at bottom of page?
...
<tr>
<td><img id="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
<td><img id="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
</tr>
**</table>**
</div>
Second.
Change that:
<div class= "footer">
<img id="footerimg">
</div>
To:
<div id="footer"></div>
And css:
#footer {
position:absolute;
left:0;
bottom:0;
width:992px;
height:200px;
background-image:url('img/footer.png');
}
Your markup shouldn't validate for many reasons. There is not a closing tag on the second table. Use .buybtn instead of #buybtn (an ID does not repeat on the same document). That table with the id #obsah should read like this:
<table id= "obsah" border="0">
<tr>
<td><img class="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
<td><img class="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
</tr>
<tr>
<td><img class="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
<td><img class="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
</tr>
<!-- and this is when we cue to... -->
</table>
Using a background image for an img tag is redundant and non-semantic. The element with the id of #footerimg should be a div tag, or the img tag with the actual image.
<img src="img/footer.png" alt="footer image">
One, or the other. Not both.
i have a html page which has a table and whose header is not same when printed as is displayed
the green div tag and table footer text is just printed with no background
please help me
my code is
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.cnt
{
padding-top:10px;
padding-bottom:10px;
}
</style>
</head>
<body>
<div style="width:21cm; margin-left:auto; margin-right:auto; padding-top:0px; position:relative;">
<div style="width:90%; margin-left:auto; margin-right:auto;">
<div style="color:#FFF; background-color:green; padding:5px; font:20px bolder Verdana, Geneva, sans-serif; text-align:center;">
Receipt Details
</div>
<div>
<table border="1" cellspacing="2" cellpadding="2" width="100%">
<tbody><tr bgcolor="#000" style="color:#FFF; text-align:center;">
<td>
Receipt No.
</td>
<td>
Date
</td>
<td>
Amount Paid
</td>
<td>
Amount Due
</td>
<td>
Remark
</td>
</tr>
<tr style="text-align:center;">
<td>
</td>
<td>
</td>
<td>
500/-
</td>
<td>
</td>
<td>
Registration
</td>
</tr>
<tr style="text-align:center;">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
Fee Payment
</td>
</tr>
<tr style="text-align:center;">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
Fee Payment
</td>
</tr>
<tr style="text-align:center;">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
Fee Payment
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</body></html>
<link href="/automin/90617406afeb35403b4c010c2cdd4071.css" type="text/css" title="default" rel="stylesheet" media="screen, projection, print">
Make sure your stylesheet is set to the print media.
Also, when you print, make sure "Print background colors is checked"