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.
Related
Here is the code for aligning contact details:
<html>
<body>
<table width="900" class="contact-details">
<tr>
<td><img src="./images/Mobile.png"></td>
<td>
<p>832.674.6834</p>
</td>
<td><img src="./images/fax.png"></td>
<td>
<p>271.217.4981</p>
</td>
<td><img src="./images/email.png"></td>
<td>
<p>test#testpineced.com</p>
</td>
<td><img src="./images/address.png"></td>
<td>
<p>1055 Loremips Tr. Kity, TX</p>
</td>
</tr>
</table>
<style>
img {
/* width: 100%; */
display: block;
}
</style>
</body>
</html>
You can see there is gap difference in between images and text content. Can you please help me to make equal gap difference and fit full content inside the table class.
Please see the screenshot attached: https://imgur.com/a/tjd9UOo
use css class for td and for each td can specify the inline width & height
.img {
background-repeat:no-repeat;
background-size: cover;
}
<table width="900" class="contact-details">
<tr>
<td style="background-image:url(./images/Mobile.png); width: 50px; height: 80px;"> </td>
<td><p>832.674.6834</p></td>
<td class="img" style="background-image:url(./images/fax.png); width: 50px; height: 80px;"> </td>
<td><p>271.217.4981</p></td>
<td class="img" style="background-image:url(./images/email.png); width: 50px; height: 80px;"> </td>
<td><p>test#testpineced.com</p></td>
<td class="img" style="background-image:url(./images/address.png); width: 50px; height: 80px;"> </td>
<td><p>1055 Loremips Tr. Kity, TX</p></td>
</tr>
</table>
<table width="900" class="contact-details" >
<tr>
<td style='width: 30px'><img style='width: 30px' src="./images/Mobile.png"></td>
<td>832.674.6834</td>
<td style='width: 30px'><img style='width: 30px' src="./images/fax.png"></td>
<td>271.217.4981</td>
<td style='width: 30px'><img style='width: 30px' src="./images/email.png"></td>
<td>test#testpineced.com</td>
<td style='width: 30px'><img style='width: 30px' src="./images/address.png"></td>
<td>1055 Loremips Tr. Kity, TX</td>
</tr>
just change the width px according to the image width
**You have to remove width="900" and add padding to <td> element**
<html>
<head>
<style>
img {
/* width: 100%; */
display: block;
}
table{
margin:0 auto;
}
td{
padding-top:5%;
padding-left: 1%;
}
</style>
</head>
<body>
<table class="contact-details">
<tr>
<td><img src="./images/Mobile.png"></td>
<td>
<p>832.674.6834</p>
</td>
<td><img src="./images/fax.png"></td>
<td>
<p>271.217.4981</p>
</td>
<td><img src="./images/email.png"></td>
<td>
<p>test#testpineced.com</p>
</td>
<td><img src="./images/address.png"></td>
<td>
<p>1055 Loremips Tr. Kity, TX</p>
</td>
</tr>
</table>
</body>
</html>
This question already has an answer here:
How to avoid White line between img and td bottom?
(1 answer)
Closed 6 years ago.
Here is the code:
Fiddle
I believe I have removed all spacing, but the td is still 305px and the img is 300px height.
Even if I try:
<td height="300">
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
or
<tr height="300">
On the containing <tr>.
This is completely ignored and the td stays at 305px?
because img is an inline element and has vertical-align:baseline therefore creates a gap.
So you either can:
display:block in img
or set
vertical-align:bottom
Also you don't need 2 styles tag, neither don't you need to duplicate the body rule with new properties, just put all in one body rule.
Note: careful if you are creating this for html-email, the CSS which is not inline (above body) some email clients such as gmail will strip it, make sure you put it all inline or you use some toll that will do that for you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Battersea Studios</title>
<style type="text/css">
#outlook a {
padding: 0;
}
body {
width: 100% !important;
margin: 0;
padding: 0;
font-family: Arial;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img {
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
border: 0;
display: block
}
a {
border: 0;
}
hr {
width: 20px;
text-align: left
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" align="center" style="width:600px;font-size:20px">
<tr>
<td>
<table cellspacing="0" cellpadding="0" style="color:white;">
<tr>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
<td style="background-color:#E66977;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-pink.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>urtyryhry</strong>
</td>
</tr>
<tr>
<td>
<img src="imgs/spacer-pink.jpg" alt="">
</td>
</tr>
<tr>
<td>
ryhryhjtyhjty
<br>tyjtyjtyjty
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color:#1EA553;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-green.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>F</strong>
</td>
<tr>
<td>
<img src="imgs/spacer-green.jpg" alt="">
</td>
</tr>
<tr>
<td>
rthrthrth
<br>ryhryhryht
<br>hryhryhryt
</td>
</tr>
</table>
</td>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
</tr>
<tr>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
<td style="background-color:#EA752E;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-orange.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>rtyryry</strong>
</td>
</tr>
<tr>
<td>
<img src="imgs/spacer-orange.jpg" alt="">
</td>
</tr>
<tr>
<td>
rryu56u
<br>ryuryuy
<br>uryuryuyrt
<br>ytyutyuty
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
img is inline element and it takes few extra pixels on bottom by default. Use display: block for img to remove this space:
table img {
display: block;
}
I have two images inside a cell. I want one to be aligned in the middle of the cell and another in the top right corner of the cell. The right top corner image should overlay the centered imaged.
I want it to make it look exactly like this
https://jsfiddle.net/5bL56a34/
but without specifying the left margin since centered image can have a different size.
Here is the HTML code I got right now
<table border="1" bgcolor="black">
<tr>
<td>
<img src="http://i.imgur.com/zjp0GlD.png" class="centered">
<img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/zjp0GlD.png" class="centered">
<img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
</td>
</tr>
</table>
and CSS
.topRight
{
position:absolute;
left:495px;
}
I guess you want something like this
.topRight {
position: absolute;
top: 0;
right: 0;
}
td{position: relative;}
<table border="1" bgcolor="black">
<tr>
<td>
<img src="http://i.imgur.com/zjp0GlD.png" class="centered">
<img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/zjp0GlD.png" class="centered">
<img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
</td>
</tr>
</table>
You can use right property instead of left and the give position:relative; to the td element.
.topRight {
position: absolute;
right: 1px;
top: 1px;
}
td
{
position: relative;
}
<table border="1" bgcolor="black">
<tr>
<td>
<img src="http://i.imgur.com/zjp0GlD.png" class="centered">
<img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/zjp0GlD.png" class="centered">
<img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
</td>
</tr>
</table>
Jsfiddle
I want to place text on top of an image that I placed in a table cell.
I tried to use the z-index but the text keeps appearing under the image.
I created a class called p1 that positioned the image relative(not sure how I should handle this inside of a table) and the z-index -1.
I then added the class id in the table cell tag.
What I have so far:
.font1 {
font-family: Verdana, Geneva, sans-serif;
font-size: small;
text-align: left;
}
.hangingindent {
padding-left: 100px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
.hangingindent2 {
padding-left: 75px;
}
.p1 {
position: relative;
z-index: -1;
}
.backbox {
z-index: -1;
position: relative;
left: 0;
right: 0;
botton: 0;
}
.text {
z-index 100;
color: #0000000;
font-size: 14px;
position: absolute;
top: 100px;
right: 200px;
overflow: hidden;
}
<table width="1013" border="0" align="center" cellpadding="0">
<tr>
<td colspan="5">
<img src="images/images2/header.gif" width="1013" height="642" />
</td>
</tr>
<tr>
<td colspan="5">
<img src="images/images2/menu-grid.gif" width="1013" height="232" />
</td>
</tr>
<tr>
<td width="55"> </td>
<td width="231">
<img src="images/images2/solutions.jpg" width="204" height="46" />
</td>
<td width="233">
<img src="images/images2/capabilities.jpg" width="204" height="46" />
</td>
<td width="232">
<img src="images/images2/art services.jpg" width="204" height="46" />
</td>
<td width="254">
<img src="images/images2/contact us.jpg" width="204" height="46" />
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5" class="hangingindent2">
<img src="images/images2/WELCOME.gif" width="500" height="100" />
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5" class="hangingindent">
<p>Since 1968, Packaging Products Corporation (PPC) has been a leader in the flexographic printing and converting industry.
<br />Our focus on emerging technologies in film substrates, ink systems, and controlled atmosphere packaging, enables us to
<br />provide the highest quality products at the most competitive prices.</p>
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5">
<div class="backbox">
<img src="images/images2/bottom2.gif" width="1013" height="810" />
<div class="text">This is a test to see where the text will land</div>
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
As I got from your question is you want to put text over an image. So to do it, there is no need to use z-index. you can do it by setting absolute position of p tag and make td tag as position relative.
demo for it is you can use the link
<table>
<tr>
<td>
<p>Hello</p>
<img src="http://www.freakypic.in/wp-content/uploads/2014/08/flower-images.jpg" />
</td>
</tr>
</table>
CSS:
img {
width:200px;
}
td {
border:2px solid red;
position:relative;
}
p {
position:absolute;
color:yellow;
font-size:30px;
top:0px;
left:70px;
}
You can change the markup little bit.!Z-index will work with position set to other than static (which is default).
Here, you can remove the <img> tag & display the image as background image.
Other solution wrap the text in <p> or <div> & make it position: absolute & immediate parent <td> as position:relative (This is mentioned earlier already)
little code explanation
exp1 -- background-image
td {
background-image: url("");
background-position: left top fixed;
}
exp1 - HTML markup
<td>Data to be there on top of the image</td>
Please check this link! - JSFIDDLE
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!