I've been trying to make a transparent box behind a table, that I can use as a background for it, but it appears left to right side of my page and not only behind the table. Any ideas how I can fix that?
Here is HTML:
<!DOCTYPE HTML>
<HEAD>
<LINK href="Menu/Menu.css" rel="stylesheet" type="text/css" />
<LINK href="Pictures/Background.css" rel="stylesheet" />
<LINK href="Style/Boxes.css" rel="stylesheet" />
</HEAD>
<BODY>
<nav class="nav">
<ul>
<li class="current"><b>MENU</b></li>
<li>BLOG</li>
<li>MUSIC</li>
<li>PHOTOGRAPHY</li>
<li>QUOTES & THOUGHTS</li>
<li>ABOUT ME</li>
</ul>
</nav><br><br><br><br><br>
<div class="BlueBox">
<TABLE border="0" align="center" width="60%">
<TR>
<TD ROWSPAN="2" > </TD>
<TD valign="bottom" align="center"><b><i><FONT SIZE="6" COLOR="FFFFFF">What can I say about myself...</FONT></i></b></TD>
<TD ROWSPAN="2" > </TD>
<TD ROWSPAN="2"><IMG SRC="Pictures/Me.JPG" height="400"></TD>
</TR>
<TR>
<TD valign="middle" align="left" >
TEXT
</TD>
</TR>
</TABLE>
</div>
</BODY>
</HTML>
Here is the CSS for the box:
.BlueBox{
position:fixed;
background-color:rgba(0,157,255,0.7);
padding:10px 10px 10px 10px;
border-radius:15px 15px 15px 15px;
}
Just simply remove **position:fixed;** from your css.
.BlueBox{
position:fixed;
background-color:rgba(0,157,255,0.7);
padding:10px 10px 10px 10px;
border-radius:15px 15px 15px 15px;
}
Your example is just a block element (table) inside another block element (div.bluebox)... nothing that should prevent your example from rendering as you expect it.
For debugging the design, I would recommend you to remove all other css files and the rowspans in the table to get a minimal example.
Related
Unable to place image even with the signature in table. The top pf the image should be the same level as the top of the text
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Email Signature</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" style="width: 100%;
max-width: 560px">
<tr>
<td width="5%" valign="middle">
<img href="https://www.pravoconstruction.com/" src="https://media-exp1.licdn.com/dms/image/C4E0BAQGQicp-n_FWzw/company-logo_200_200/0/1530564205372?e=2159024400&v=beta&t=OdxbaYftUNG_-cf8lLTWVA-voPANK8goWs3hiafOo84" style="width: 30%;min-width: 62px;
display: block;">
</td>
<td width="70%" valign="top">
<h4 style="margin:0 0 5px; font-size: 9px;font-family: arial;color:#99A3A4; line-height:1.2"><strong>test email</strong></h4>
<h5 style="margin:0 0 5px; font-size: 8px;font-family: arial;color:#99A3A4; line-height:1.2">job role | 123.456.7890</h5>
<h5 style="margin:0 0 5px; font-size: 8px;font-family: arial;color:#99A3A4; line-height:1.2">1234 anywhere lane | Texas,TX 77777</h5>
</td>
</tr>
</table>
</body>
</html>
Looks like your photo has some space inside the image which probably causes it to look not lined up. If you want to compensate for that I would suggest adding some padding to the top of the h4.
Also, you could crop the image so it doesn't have this space on the top.
I'v created a prestashop module in which it obtains airway bill numbers from an external API, This number I then add on a webpage and let users to print.
This bar code only appears on HTML page but does not visible on print preview dialog box
I use Smarty for html part since its by default uses by Prestashop.
Hear is my code,
<p style="font-family:IDAutomationHC39M;text-align: left">*{$order.other_data.awb}*</p>
any idea why this is happening? is there any solution for this?
UPDATE
{literal}
<style>
table { border-collapse: collapse;font-family:arial;}
td {padding: 8px;}
body { margin: 0;padding: 0;background-color: #FAFAFA;font: 12pt "Tahoma"; }
* {box-sizing: border-box;-moz-box-sizing: border-box; }
.page { width: 21cm;min-height: 29.7cm;padding: 1cm;margin: 0.5cm auto;border: 1px #D3D3D3 solid; border-radius: 5px;
background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
.subpage { padding: 0cm;border: 0px black solid;height: 256mm; }
#page { size: A4; margin: 0; }
#media print {.page {margin: 0;border: initial;border-radius: initial;width: initial;min-height: initial;box-shadow: initial;
background: initial;page-break-after: always;}}
</style>
{/literal}
{foreach from=$orders_array item=order}
<div class="page">
<div class="subpage">
<table border="3" style="border-style: solid;width:100%">
<tr>
<td>
<table border="0" style="border-style: solid;width:100%">
<tr>
<td><img src="{$order.other_data.logo}" alt="logo" height="100" width="300"></td>
<td>
<h3><u>{$order.other_data.service}</u></h3><br>
{$order.other_data.ppaddress}
<br>www.postaplus.com</td>
</tr>
</table>
<table border="1" style="border-style: solid;width:100%">
<tr>
<td style="width:40%"><b>From</b></td>
<td>
<b>{$order.other_data.shipper_name}</b>
<br>
{$order.other_data.shipper_address},<br>
{$order.other_data.shipper_country_code},<br>
Phone: {$order.other_data.shipper_phone},
</td>
</tr>
<tr>
<td><b>To</b></td>
<td>
<b>
</b><br>
{$order.params.SHIPINFO.Consignee.ToName},<br>
{$order.params.SHIPINFO.Consignee.ToAddress},
<br>
<b>Phone:</b> {$order.params.SHIPINFO.Consignee.ToMobile} / {$order.params.SHIPINFO.Consignee.ToTelPhone} <br>
<b>Civil Id:</b><br>
</td>
</tr>
<tr>
<td><b>Pay Type: {$order.params.original_order_array.payment_method}</b></td>
<td>Amount: {$order.params.original_order_array.total} - Currency - {$order.params.original_order_array.codcurrency} </td>
</tr>
<tr>
<td><b>Reference 1</b></td><td>{$order.params.original_order_array.reference} </td></tr>
<tr>
<td><b>Reference 2</b></td><td></td></tr>
<tr>
<td><b>Service</b></td><td>{$order.other_data.service}</td>
</tr>
<tr>
<td colspan="2">
<table width="100%">
<tr>
<td><b>Pieces:</b></td> <td>1</td> <td><b>Weight:</b></td> <td>{$order.other_data.total_weight} Kg</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><b>Remarks</b></td>
<td></td>
</tr>
<tr>
<td>
<b>Note 2</b></td><td>{$order.other_data.original_order_data.notes2}</td></tr>
<tr>
<td><b>Shipper Order Number:</b></td>
<td>
<p style="font-family:IDAutomationHC39M;text-align: left">*{$order.other_data.awb}*</p>
</td>
</tr>
<tr>
<td><b>Shipment Date:</b></td><td>{$order.other_data.awb_date}</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
{/foreach}
<script>
window.print();
</script>
screen shots
html view
print preview
Thanks in advance.
Roshan
Roshan save the below code in html format and check whether it shows barcode in your print preview . if it works than you should try changing your font or check your code again..it will be very helpful if you upload your code here as well.also check display background graphics checkbox in print preview menu
<!DOCTYPE html>
<html>
<head>
<link href='https://fontlibrary.org/face/idautomationhc39m-code-39-barcode'
rel='stylesheet'>
<style>
p.serif {
font-family: 'IDAHC39M Code 39 Barcode', Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
Look for the link to the font itself in the header. It should look like this:
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/idautomationhc39m-code-39-barcode" type="text/css"/>
Change the media="screen" to media="screen, print".
I would also recommend you try using 'IDAHC39M Code 39 Barcode' instead of IDAutomationHC39M for font family. (Make sure the quotes are there.)
I am writing an html email using inline styles since I'll be sending it in Outlook and read that's the best way to circumvent browser reformatting. I want to center the two links below, which I put into table cells because that's the only way I could get padding to work in Outlook. I would like the 2 links to appear centered with their background and padding on the page, but I don't know how to do that using inline styling and tables. Can anyone help? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "wall cuts, train stations, New York City"
</td>
</tr>
</table>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
<table>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
First, instead of using padding on each cell, you can just specify cellpadding attribute for a table tag -
<table cellpadding="10">
The cell content is centered by default -
<table cellpadding="10">
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
</table>
UPD
To center the whole table, set margin to 0 auto -
<table style="margin: 0 auto;">
To center only either a row or a column, apply accordingly -
<tr style="width: 50%; margin: 0 auto; display: table;"></tr>
or
<td style="width: 50%; margin: 0 auto; display: table;"></td>
You add an align attribute to the td cell.
<td align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;"> Your link
</td>
Adding margin to body tag, will that work for you.
<body style="margin-top:20%;margin-bottom:20%;margin-left:30%;">
Use text-align:center, vertical-align:middle,
table{width:100%;height:100%;}
td{width:100%;height:100%; text-align:center; vertical-align:middle; font-size: 14px; }
a, a:link, a:visited{padding:10px; display:inline-block; color: white; text-decoration: none;margin:10px; background: #3D87F5; }
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<div id="centerme">
<table>
<tr>
<td>
Watch my film "wall cuts, train stations, New York City"
<br/>
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
</div>
</body>
</html>
Check out this html. Appears fine to me.
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body style="height:height:500px;">
<table border="0" style="width:100%; text-align:center;">
<tr>
<td >
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;margin-top:10%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "wall cuts, train stations, New York City"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "red hook, rush hour"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
</td>
</tr>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
My table keeps show up in one cell, not sure what i did wrong. anyone willing to look and let me know where i went wrong.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css">
<title>Ironton Fire department Sponsors</title>
</head>
<body>
<div style="width:1020px; height:1020px; float:center; background- image:url(images/zombie_5k_TM_AP_stripped.png)">
<div class="home">
<img src='images/home_button.jpg' name="register" onMouseOver="this.src='images/home_button_hover.jpg'" onMouseOut="this.src='images/home_button.jpg'" onclick="location.href='index.html'"/>
</div>
<div class="register">
<img src='images/register_button.jpg' name="register" onMouseOver="this.src='images/register_button_hover.jpg'" onMouseOut="this.src='images/register_button.jpg'" onclick="location.href='register.html'"/>
</div>
<div class="sponsor">
<img src='images/sponsor_button.jpg' name="sponsor" onMouseOver="this.src='images/sponsor_button_hover.jpg'" onMouseOut="this.src='images/sponsor_button.jpg'" onclick="location.href='sponsors.html'"/>
</div>
<div class="gallery">
<img src='images/gallery_button.jpg' name="gallery" onMouseOver="this.src='images/gallery_button_hover.jpg'" onMouseOut="this.src='images/gallery_button.jpg'" onclick="location.href='gallery.html'" />
</div>
<div class="sponsors">
<table>
<tr>
<td align="center" width="250">Seth Jackson - Edward Jones</td>
<td align="center" width="250">Heritage Mechanical </td>
</tr>
<tr>
<td align="center" width="250">Mike Flanagan – Iron Range Auto </td>
<td align="center" width="250"> </td>
</tr>
</table>
</div>
<div class="sform">
< p align="center">
<a style="color: #D91D1F;"href="Images/ZX5K Sponsorship Agreement.pdf" target="_blank">ZX5K Sponsorship Agreement</a></p></div></div>
</body>
</html>
here is the css that covers the class .sponsors
.sponsors {
position: absolute;
top: 280px;
left: 340px;
}
here is the link to see what i am talking about, http://www.ifdauxzx5k.com/sponsors.html
Your table doesn't show up in one cell.
But all the cells are on top of eachother, because you have position: absolute; on your TD in your main.css line 62.
td{
color: #D91D1F;
position: absolute;
}
This is why every TD is going to the left top position of the table. Remove this line and it will behave correctly.
I am working on my website, http://www.isaveplus.com and I am having an issue of the table adding some space between each col (td) in it. My goal is to have the columns touching because I want the background color to blend in with each other. The picture below will show you what I meant by the space between them.
Thanks in advance!
<table style="width:inherit; margin-left:-5px; margin-top:-5px; " cellspacing="0">
<tr>
<td class="searchBar" align="left" >
<div id="ddtopmenubar" class="mattblackmenu" >
<ul>
<li><a style="vertical-align:bottom;">Best of Coupons</a></li>
<li>
<a style="vertical-align:bottom;"> Best of Travel</a>
<a style="vertical-align:bottom;">Grocery stores</a>
</li>
<li><a style="vertical-align:bottom;">Office Supplies</a></li>
<li><a style="vertical-align:bottom;"> Department <br /> stores </a></li>
<li><a style="vertical-align:bottom;">Drug <br /> stores</a></li>
</ul>
</div>
</td>
<td class="searchBar" align="left">
<asp:Button ID="whatIsIsavePlusButton" runat="server" onclick="whatIsIsavePlusButton_Click" style="color: #800000; font-weight: 700" Text="?" Visible="False" />
</td>
<td class="searchBar" align="left">social media right here!</td>
</tr>
</table>
And the css for searchbar is:
.searchBar
{
background-color: #414141;
color:White;
width:auto;
margin:-5px;
padding:0px;
}
Your links
<a style="vertical-align:bottom;">Best of Travel<a style="vertical-align:bottom;">Grocery stores</a>
have a
border-right: 1px solid white
defined in
.mattblackmenu li a
there you can set the width of these white spaces
Your code isn't displaying the same in my browser as in the picture you give. But essentially I think you either want to put a negative margin-right on the div ddtopmenubar or a border-left:1px solid white on the following td. There might be another way to do it but I think that'd work.
Have you tried the border-collapse property? http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-collapse
border-collapse: collapse;