I have a HTML part that looks like this:
Is it possible to have an equal border with for every word? And how can I achieve a line break after "Köln"? I tried <br/>, but it doesn't work. Something that looks like this:
Here is the HTML codepart:
function openLink(url) {
window.open(url);
}
#sideNavBox {
display: none
}
#contentBox {
margin-left: 0px
}
.dd13:hover {
cursor: pointer;
}
.dd13 {
color: #FFFFFF;
Font: 12px Arial background-color:: #48A040;
Padding: 3px 3px 3px 3px;
}
<font size="3"><b>Seminare nach Standort filtern</b></font>
<div>
<font size="3"><b><br/></b></font>
<div>
<br/>
<table class="dd13">
<tbody>
<tr>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Ulm</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Taufkirchen');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Taufkirchen</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Oberkochen');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Oberkochen</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Köln');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Köln</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Friedrichshafen');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Friedrichshafen</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Wetzlar');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Wetzlar</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Kiel');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Kiel</td>
</tr>
</tbody>
</table>
<p>
<br/>
</p>
<p>To register yourself to a seminar please click on this icon
<a title="Book for me" class="book-for-me-button"></a>. To register someone else to a seminar, please click on this icon
<a title="Book for me" class="book-for-user-button"></a>.<br/></p>
</div>
</div>
I suggest you to forget the "table" element for these cards, then try it with "span" and flexbox. you can set fixed width to it easily and it automatically breaks the line itself.
.container {
display: flex;
flex-wrap: wrap;
}
.card {
display: flex;
width: 200px;
margin: 5px;
border-radius: 4px;
background: #aaa;
border: 1px solid greenyellow;
text-align: center;
padding: 5px;
}
<div class="container">
<span class="card">example 1</span>
<span class="card">Lorem Ipsum Dolor</span>
<span class="card">example</span>
<span class="card">test</span>
<span class="card">paragraph</span>
<span class="card">Day</span>
<span class="card">Night</span>
</div>
Have a look at flex
Note the click below does not open a page because the stacksnippet sandbox is blocking new windows
window.addEventListener("load", function() {
document.getElementById("nav").addEventListener("click", function(e) {
var tgt = e.target;
if (tgt.classList.contains("link")) {
window.open(tgt.getAttribute("data-link"));
[...document.querySelectorAll(".link.active")].forEach(lnk => lnk.classList.remove("active"));
tgt.classList.add("active");
}
})
})
#nav {
display: flex;
flex-wrap: wrap;
flex: 1 1 0px
}
.link {
max-width: 150px;
padding: 3px;
margin: 10px;
border: 2px solid lime;
border-radius: 15px;
flex-basis: 100%;
text-align: center;
cursor: pointer;
}
.active {
background-color: lime
}
<h3><b>Seminare nach Standort filtern</b></h3>
<div id="nav">
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm">Ulm</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Taufkirchen">Taufkirchen</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Oberkochen">Oberkochen</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Köln">Köln</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Friedrichshafen">Friedrichshafen</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Wetzlar">Wetzlar</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Kiel">Kiel</div>
</div>
<div id="register">
<p>To register yourself to a seminar please click on this icon
<a title="Book for me" class="book-for-me-button"></a>. To register someone else to a seminar, please click on this icon
<a title="Book for me" class="book-for-user-button"></a>.<br/></p>
</div>
When you are using table, every row should be in a <tr>. So for line break it's better to add a new <tr>. and if you want to have same width for your cells, you can set width for <td>. For example:
<style>
table {
table-layout: fixed ;
width: 100% ;
}
td {
width: 25% ;
text-align: center;
color: black;
border: 3px solid limegreen;
font-size: 17px
}
</style>
and your table:
<table class="dd13">
<tbody>
<tr>
<td onclick="openLink(#);" class="dd13">Ulm</td>
<td onclick="openLink(#);" class="dd13">Taufkirchen</td>
<td onclick="openLink(#);" class="dd13">Oberkochen</td>
<td onclick="openLink(#);" class="dd13">Köln</td>
</tr>
<tr>
<td onclick="openLink(#);" class="dd13">Friedrichshafen</td>
<td onclick="openLink(#);" class="dd13">Wetzlar</td>
<td onclick="openLink(#);" class="dd13">Kiel</td>
</tr>
</tbody>
</table>
I have a weird question, and perhaps it's more suitable for the CSS fans out there, but why would content inside an absolute positioned div overflow out past everything else?
The example provided here (as a picture) shows that the content overflows out the blue bordered div. The content inside this box should rightfully define the the div's height no? How can this be remedied so that my 'blue' box fits to its content?
Here's the markup in question:
* {
box-sizing: border-box;
font-family: Verdana, Arial, sans-serif;
font-size: 9pt;
}
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
background: rgb(105, 105, 105);
}
#table-container {
display: table;
text-align: center;
width: 100%;
height: 100%;
}
#container {
display: table-cell;
vertical-align: middle;
}
#wrapper {
padding: 25px;
}
.tabs {
position: relative;
margin: 40px 0 25px;
}
.tab {
float: left;
}
.tab label {
background: rgb(105, 105, 105);
padding: 10px;
border: 1px solid transparent;
color: #FFF;
margin-left: -1px;
position: relative;
left: 1px;
top: -26px;
}
.tab label:hover {
background: #000;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: -1px;
left: 0;
background: rgb(222, 222, 222);
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid transparent;
opacity: 0;
color: rgb(58, 58, 58);
}
[type=radio]:checked~label {
background: rgb(222, 222, 222);
font-weight: bold;
border-bottom: 1px solid transparent;
color: #000;
z-index: 2;
}
[type=radio]:checked~label~.content {
z-index: 1;
opacity: 1;
}
/* CSS for Table and Field styling */
.table {
width: 100%;
padding: 0;
margin: 0;
text-align: left;
}
.table td {
border: 1px solid #000;
}
.inputbox {
border: 1px solid rgb(170, 170, 170);
width: 100%;
}
.inputbox:hover {
border: 1px solid rgb(109, 109, 109);
}
.input {
border-style: none;
border-color: inherit;
border-width: 0;
padding: 3px;
height: 20px;
}
input[type="text"],
textarea {
width: 100%;
box-sizing: border-box;
}
.input:focus {
background: rgb(255, 255, 196);
}
<div id="table-container">
<div id="container">
<div id="wrapper">
<div style="border: 1px solid red; text-align: left; font-size: 8pt; color: #fff;">Choose language/Choisissez langue:</div>
<div style="border: 1px solid blue; height: 100%;">
<div class="tabs">
<!-- TAB [1] -->
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1">English</label>
<div class="content">
<table class="table">
<tr>
<td>Traveller's Name:</td>
<td colspan="2">
<div class="inputbox"><input type="text" id="tname" class="input" name="Name of Traveler" tabindex="1" /></div>
</td>
<td style="width: 15%;"></td>
<td>Tan #:</td>
<td></td>
</tr>
<tr>
<td>Destination:</td>
<td colspan="2">
<div class="inputbox"><input type="text" id="location" class="input" name="Location" tabindex="2" /></div>
</td>
<td></td>
<td>Status:</td>
<td></td>
</tr>
<tr>
<td>iTravel Trip Number:</td>
<td colspan="2">
<div class="inputbox"><input type="text" id="location" class="input" name="Location" tabindex="2" /></div>
</td>
<td></td>
<td>Date Issued:</td>
<td>
<div class="inputbox"><input type="text" id="dissued" class="input" disabled/></div>
</td>
</tr>
<tr>
<td>Event Plan ID Code:</td>
<td colspan="2">
<div class="inputbox"><input type="text" id="evt-plan-code" class="input" name="Event Plan ID Code" tabindex="4" /></div>
</td>
<td></td>
<td>Issued by:</td>
<td>
<div class="inputbox"><input type="text" id="issuer" class="input" disabled/></div>
</td>
</tr>
<tr>
<td>Dates of Travel</td>
<td>From:</td>
<td>
<div id="ddate" name="Departure Date" tabindex="5"></div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td>To:</td>
<td>
<div id="rdate" name="Return Date" tabindex="6"></div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Trip Purpose</td>
<td colspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2">Français</label>
<div class="content">
tab2
</div>
</div>
</div>
</div>
<div style="border: 1px solid green; text-align: left;">
<input type="button" value="Issue TAN" id="issue">
<input type="button" value="Reset form" id="issue">
<input type="button" value="Save changes" id="issue">
</div>
</div>
<!-- end of div #wrapper -->
</div>
<!-- end of div #container -->
</div>
<!-- end of div #table-container -->
The absolute-positioned div doesn't affect the container div's size since setting position to absolute removes it from the document flow. It's essentially the same behaviour as when position is set to fixed, except it stays at the same place in the page when you scroll. More info can be found here and here.
As for how to fix the height of your div, the short answer is that it can't be done with CSS unless you use a different value for position, perhaps relative in your case but that will depend on the structure of your html. This question covers some other ways that you could go about it.
I am creating a form with table in Mailchimp Advanced mode. I can't divide the 2 columns 50% - 50%. I don't know why the left column takes more space than the right.
.formLabel {
vertical-align: top;
font-size: 14px;
color: #4d858d;
font-weight: bold;
text-align: left;
margin: 22px;
padding: 10 15 10 15;
width: auto;
}
.container {
background-color: #FFFFFF;
width: 700px;
border: none;
padding: 5 5 15 5;
margin-left: auto;
margin-right: auto;
}
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #FFFFFF;
font-family: verdana;
font-size: 12px;
text-align: center;
min-width: 700px;
margin: 20 0 0 0;
}
input[type="text"] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
border-width: 0px;
border-style: solid;
width: 100%;
max-width: 100%;
font-size: 14px;
padding: 6 10 6 10;
box-sizing: border-box;
font-weight: normal;
box-shadow: 0 3px 0px rgba(0, 0, 0, 0.075);
}
.select-small {
width: 100%;
height: 27;
webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
border-width: 0px;
border-style: solid;
width: 100%;
max-width: 100%;
box-shadow: 0 3px 0px rgba(0, 0, 0, 0.075);
}
<tr>
<td align="left" class="formLabel">Anrede <span class="req asterisk">*</span>
<br>
<div class="interestgroup_field radio-group" id="MERGE3">
<label class="radio" for="MERGE3-0">
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-0" value="Herr" class="av-radio"><span>Herr</span></label>
<label class="radio" for="MERGE3-1">
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-1" value="Herr" class="av-radio"><span>Frau</span></label>
<label class="radio" for="MERGE3-2">
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-2" value="Dr" class="av-radio"><span>Dr</span></label>
</div>
<br>
<div class="error">*|HTML:MMERGE3ERROR|*</div>
</td>
</tr>
<tr>
<td align="left" class="formLabel">Vorname <span class="req asterisk">*</span>
<br>
<input type="text" name="MERGE1" id="MERGE1" size="35" value="*|MERGE1|*">
<br>
<div class="error">*|HTML:FNAMEERROR|*</div>
</td>
<td align="left" class="formLabel">Nachname <span class="req asterisk">*</span>
<br>
<input type="text" name="MERGE2" id="MERGE2" size="35" value="*|MERGE2|*">
<br>
<div class="error">*|HTML:LNAMEERROR|*</div>
</td>
</tr>
<tr>
<td align="left" class="formLabel">Position
<br>
<input type="text" name="MERGE5" id="MERGE5" value="*|MERGE5|*">
<br>
<div class="error">*|HTML:MMERGE5ERROR|*</div>
</td>
<td align="left" class="formLabel">Firma <span class="req asterisk">*</span>
<br>
<input type="text" name="MERGE6" id="MERGE6" value="*|MERGE6|*">
<br>
<div class="error">*|HTML:MMERGE6ERROR|*</div>
</td>
</tr>
There are two things wrong with this code
You are missing the code to start and end a table <table width="100%" border="0" cellspacing="0" cellpadding="0"> and </table>
Your HTML closes before the the style tags.
Fix those two things and your form takes shape.
<html>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" align="left" class="formLabel">Anrede <span class="req asterisk">*</span><br>
<div class="interestgroup_field radio-group" id="MERGE3"> <label class="radio" for="MERGE3-0"><input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-0" value="Herr" class="av-radio"><span>Herr</span></label><label class="radio" for="MERGE3-1"><input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-1" value="Herr" class="av-radio"><span>Frau</span></label><label class="radio" for="MERGE3-2"><input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-2" value="Dr" class="av-radio"><span>Dr</span></label> </div>
<br><div class="error">*|HTML:MMERGE3ERROR|*</div>
</td>
</tr>
<tr>
<td align="left" class="formLabel">Vorname <span class="req asterisk">*</span><br>
<input type="text" name="MERGE1" id="MERGE1" size="35" value="*|MERGE1|*">
<br> <div class="error">*|HTML:FNAMEERROR|*</div>
</td>
<td align="left" class="formLabel">Nachname <span class="req asterisk">*</span><br>
<input type="text" name="MERGE2" id="MERGE2" size="35" value="*|MERGE2|*">
<br> <div class="error">*|HTML:LNAMEERROR|*</div>
</td>
</tr>
<tr>
<td align="left" class="formLabel">Position <br>
<input type="text" name="MERGE5" id="MERGE5" value="*|MERGE5|*">
<br> <div class="error">*|HTML:MMERGE5ERROR|*</div>
</td>
<td align="left" class="formLabel">Firma <span class="req asterisk">*</span><br>
<input type="text" name="MERGE6" id="MERGE6" value="*|MERGE6|*">
<br> <div class="error">*|HTML:MMERGE6ERROR|*</div>
</td>
</tr>
</tr>
</table>
<style> .formLabel {
vertical-align: top;
font-size: 14px;
color: #4d858d;
font-weight: bold;
text-align: left;
/*margin: 22px;
padding: 10 15 10 15;*/
width: auto;
border:1px solid #000000;
}
.container {
background-color: #FFFFFF;
width: 700px;
border: none;
/*padding: 5 5 15 5;*/
margin-left: auto;
margin-right: auto;
} ul,
li {
margin: 0;
padding: 0;
list-style: none;
} body {
background-color: #FFFFFF;
font-family:verdana;
font-size: 12px;
text-align: center;
min-width: 700px;
margin: 20 0 0 0;
} input[type="text"] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
border-width: 0px;
border-style: solid;
width: 100%;
max-width: 100%;
font-size: 14px;
padding: 6 10 6 10;
box-sizing: border-box;
font-weight: normal;
box-shadow: 0 3px 0px rgba(0, 0, 0, 0.075); }
.select-small {
width: 100%;
height: 27;
webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
border-width: 0px;
border-style: solid;
width: 100%;
max-width: 100%;
box-shadow: 0 3px 0px rgba(0, 0, 0, 0.075); }
</style></html>
Let me know if this is what you were after.
I'm trying to print a page for which the fiddle is here http://jsfiddle.net/3J8TD/7/show/. The issue is, it is not aligned to center and it is not printing the header in every page. Look at this screenshot.
HTML:
<div style="" class="invoice-parent">
<div class="logo-container">
<div class="float-left"><img width="115" height="86" src="http://fc06.deviantart.net/fs70/i/2010/131/5/8/Dummy_company__Sample_logo_PSD_by_SolidSilver.jpg" ></div>
<div style="margin-top: 35px" class="float-left"><h1>Sample HEALTHCARE</h1></div>
</div>
<br clear="all" style="margin: 60px;">
<div class="left-address">
<u>C&F</u>: 21A/3, XXXXXX Street,<br>
<div style="margin-left:30px">
Collectorate,<br>
Abccde-324245,<br>
Qds dfs.<br>
Contact no. +91- 999999999999.<br>
Email: info#sampledomain.ext
</div>
</div>
<div class="right-address">
<u style="padding-right: 25px;">Corporate office:</u>
<div class="float-right">
78,8th Cross st,<br>
OMR,Koppasa,<br>
Chansoi -224 097.
</div>
</div>
<br clear="all">
<div id="bill_type">INVOICE</div>
<hr>
<div id="tin_cst_dll">
<span id="id-center">CST: 1085914</span>
</div>
<span style="margin-top: -16px;" class="float-left" id="id-left">TIN: 33893767761</span>
<span style="margin-top: -16px;" class="float-right" id="id-right">DL: TRT 2605/20B/2436/21B</span>
<hr>
<table width="100%" border="1" cellspacing="0" cellpadding="0" class="invoice-related">
<tbody><tr>
<td valign="top">
To: <strong id="to_name">Peter Agency</strong>,<br>
<div id="to_addresses">No.4, Fernanderz lane,<br>
Pandy street,<br>
Hobai - 982198. 0782-4379540
</div>
<strong>
<div id="customer_tin" class="float-left">Tin : 33893767754</div>
<div id="customer_dl" style="text-align: right;" class="float-right">DL no. : TRT 2605/20B/5342/21B</div>
<strong>
</strong></strong></td>
<td valign="top">
<div class="float-left" id="invnum"></div> <div class="float-right">Date: 12-07-2014</div><br>
</td>
</tr>
</tbody></table>
<div id="replacement_period" style="visibility: hidden;">Product Replacement for the period 01-03-2014 to 31-03-2014</div>
<table width="100%" border="1" align="left" cellspacing="0" cellpadding="0" class="invoice-related">
<tbody><tr>
<th valign="top">
S.no.
</th>
<th valign="top">
Product name
</th>
<th valign="top">
Packing
</th>
<th valign="top">
Batch no.
</th>
<th valign="top">
MFG Date
</th>
<th valign="top">
EXP date
</th>
<th valign="top">
MRP
</th>
<th valign="top">
Qty
</th>
<th valign="top" id="pts_head">
PTS
</th>
<th valign="top" id="amount_head">
Amount
</th>
</tr>
<tr class="item-row">
<td valign="top">
<div style="" class="delete-wpr"><a class="delete" href="javascript:;" title="Remove row">X</a></div><div class="sl_no">1</div>
</td>
<td valign="top">
CLOPS-75
</td>
<td valign="top">
<div class="packing">12</div>
</td>
<td valign="top">
<div class="batch">CL75</div>
</td>
<td valign="top">
<div class="mfg_date">06/2006</div>
</td>
<td valign="top">
<div class="exp_date">06/2022</div>
</td>
<td valign="top">
<div class="cost">575</div>
</td>
<td valign="top">8</td>
<td valign="top">
<div class="pts">414.00</div>
</td>
<td valign="top">
<div class="price">3312.00</div>
</td>
</tr><tr class="item-row"> <td valign="top"> <div style="" class="delete-wpr"><a class="delete" href="javascript:;" title="Remove row">X</a></div><div class="sl_no">2</div></td> <td valign="top">CLOPS-A </td> <td valign="top"> <div class="packing">12</div> </td> <td valign="top"> <div class="batch">CLA</div> </td> <td valign="top"> <div class="mfg_date">06/2006</div> </td> <td valign="top"> <div class="exp_date">06/2022</div> </td> <td valign="top"> <div class="cost">575</div> </td> <td valign="top">2</td> <td valign="top"> <div class="pts">414.00</div> </td> <td valign="top"> <div class="price">828.00</div> </td> </tr>
<tr class="item-calc">
<td class="blank vishide" colspan="8">By Cheque or Cash or DD.</td>
<td class="total-line balance">Subtotal</td>
<td class="total-value blank-value"><div id="sub_total">4140.00</div></td>
</tr>
<tr class="item-calc">
<td style="visibility: visible;" class="blank vishide" colspan="8">
Amount in words: <span id="number_in_words">Four thousand three hundred and forty seven rupees only </span>
</td>
<td class="total-line balance">Vat (5%)</td>
<td class="total-value blank-value"><div id="vat">207.00</div></td>
</tr>
<tr class="item-calc">
<td class="blank blank-bottom" colspan="8"> </td>
<td class="total-line balance">Grand Total</td>
<td class="total-value blank-value"><div id="grand_total">4347.00</div></td>
</tr>
</tbody></table>
<br clear="all">
<br clear="all">
<div id="tandc">
<u><b>Terms & Conditions</b></u>
<ul>
<li>All disputes subject to Chanso Jurisdiction only.</li>
<li>Certified that the particulars given above are true and correct.</li>
<li>And the amount indicated represents the price actually charged. </li>
<li>Cheques are subject to realisation for Aura Healthcare.</li>
</ul>
</div>
<div id="aura-signature">
For Sample Healthcare,<br><br><br>
<b>Authorised</b> <b>signatory.</b>
</div>
</div>
CSS:
#media print {
body * {
visibility: hidden;
}
div.invoice-parent, div.invoice-parent * {
visibility: visible;
}
div.invoice-parent {
left: 0;
top: 0;
position: absolute;
}
}
body { font-family: "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif"; }
div.invoice-parent { width: 80%; margin: 0 auto; }
div.logo-container { width: 63%; margin: 0 auto; }
div.left-address { float: left; font-size: 15px;}
div.right-address { float: right; font-size: 15px;}
div#to_addresses { margin-left:30px; }
div#replacement_period { font-weight:bold; margin: 10px 0 10px 0; text-align: center; }
div#bill_type { font-size: 15px; font-weight: bold; margin: 20px; text-align: center; }
div#tandc { float: left; font-size: 12px; margin-top: 10px; width: 500px; }
div#aura-signature { margin-top:30px; float:right; }
hr { color: #4B78BB; margin: 20px 0;}
h1 { font-size: 35px; }
.float-left { float: left; }
.float-right { float: right; }
div#tin_cst_dll { left: 50%;
text-align: center;
top: 50%; }
span#id-center { margin:0 auto }
table.invoice-related { border-collapse: collapse; font-size: 13px;}
table.invoice-related td, table.invoice-related th {
border: 1px solid #000000;
padding: 5px;
}
table.invoice-related tr.item-calc {
height: 32px;
border-left: 1px solid #fff;
}
table.invoice-related td.blank {
border: 0 none;
}
table.invoice-related td.blank-value {
border-left: 0 none;
}
table.invoice-related td.blank-bottom {
border-bottom: 1px solid #FFFFFF;
}
table.invoice-related td.total-line {
border-right: 0 none;
text-align: right;
}
textarea { border: 0; overflow: hidden; resize: none; }
input.qty { border: 0 none; width: 40px; }
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
input.qty:hover, input.qty:focus { border: 0 none; overflow: hidden; resize: none; background-color: #EEFF88;}
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
I tried giving various styles for both the parent and child divs. And for priting the header on every page, i tried giving the header fixed. But the logo is overlapping the content from second page. Any kind of help on this is appreciated. Please help.
Note: Please check the print preview of http://jsfiddle.net/3J8TD/7/show/ and not the HTML.
Make some changes in your code,
Decrease the top margin of div to 25px and remove the margin of <h1>
<div style="margin-top: 25px" class="float-left">
<h1 style="margin: 0">Sample HEALTHCARE</h1>
</div>
Add overflow:hidden; to div.logo-container and make the width: 100%
div.logo-container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
Check this Demo
Actual View is Here http://jsfiddle.net/amoljawale/3J8TD/8/show/
I've got a popup window that looks like this
Now I want to top part where the color is green and it says "Sök efter ärende" to strech all the way of the window so that the X that is used to close the window is right at the very right. I tried setting colspan to a larger value but that did not work. Do you have any idea what I could do? This is my HTML for the window
<div class="popup" id="popupF"
style="display: none;" >
<table width="100%" border="0" cellspacing="0" cellpadding="2"
align="center" class="TB_nb">
<tr>
<td colspan="3" class="pusher TB_nb"><h2>Sök efter ärende</h2>
</td>
<td><a href="javascript:void(0)"
onclick="document.getElementById('popupF').style.display = 'none';">X</a>
</td>
</tr>
</table>
<br>
<br>
<h2 class="pusher">Sök efter ärende</h2>
<div id="FVsok">
<div
style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;">
<span
onClick="getElementById('FsokF').style.display='', getElementById('FbottomA').style.display='none', getElementById('FbottomV').style.display='', getElementById('FVsok').style.display='none'"
class="link_sm">Visa sökformulär</span>
</div>
</div>
<div id="FsokF">
<div
style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;; padding-bottom: 5px;">
<span
onClick="getElementById('FsokF').style.display='none', getElementById('FbottomA').style.display='none', getElementById('FbottomV').style.display='', getElementById('FVsok').style.display=''"
class="link_sm">Dölj sökformulär</span>
</div>
<div style="width: 100%; margin-left: 15px; margin-right: 80px;"
class="fontS80">
<div class="fl30"> Sök efter ärende</div>
<div class="clear"></div>
<div class="fl30">
<input type="text" size="60"
name="searchArende">
</div>
<div class="clear"></div>
<div class="fl30">
<input type="button" value="Avbryt">
</div>
<div class="fl10">
<input type="button" value=" Sök "
onclick="javascript:doSubmit('Arendesokning', 'search')">
</div>
<div class="clear"> </div>
</div>
</div>
<div style="width: 100%; margin-left: 15px; margin-right: 15px;">
<table width="100%" border="0" cellspacing="0" cellpadding="4"
align="center">
<tr>
<td><h3>Sökresultat:</h3>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4">En massa text <span class="link">Hjälp!</span>
</td>
</tr>
<tr>
<td><input type="button" value="Visa alla">
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="smallb">
<td>Antal ärenden: 0</td>
<td> </td>
<td>Visa ärenden: <a class="link"
href="javascript:doSubmit('MenyNavigation', 'REW_includes/fullfoljd_fran_sok.jsp')">
</a> <a class="link"
href="javascript:doSubmit('MenyNavigation', 'FWD_includes/fullfoljd_fran_sok.jsp')">
</a></td>
<td> </td>
</tr>
</table>
<table width="100%" cellspacing="0" align="center" class="sortable"
id="unique_id">
<tr>
<th class="thkant">Ärende</th>
<th class="thkant">Ingivningsdag</th>
<th class="thkant">Sökande1</th>
<th class="thkant">Uppfinnare1</th>
<th class="thkant">Ombud1</th>
<!--
<th class="thkant">Region</th>
<th class="thkant">Land</th>
<th class="thkant">Telefonnummer</th>-->
</tr>
<tr class="g2"
onmouseover="javascript:setStoreStyle(this)"
; onmouseout="javascript:getStoreStyle(this)"
onclick="javascript:goToOversikt('','','','','','')"
style="cursor: pointer;">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr class="g2"
onmouseover="javascript:setStoreStyle(this)"
; onmouseout="javascript:getStoreStyle(this)"
onclick="javascript:goToOversikt('','','','','','')"
style="cursor: pointer;">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr class="g2"
onmouseover="javascript:setStoreStyle(this)"
; onmouseout="javascript:getStoreStyle(this)"
onclick="javascript:goToOversikt('','','','','','')"
style="cursor: pointer;">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr class="g2"
onmouseover="javascript:setStoreStyle(this)"
; onmouseout="javascript:getStoreStyle(this)"
onclick="javascript:goToOversikt('','','','','','')"
style="cursor: pointer;">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr class="g2"
onmouseover="javascript:setStoreStyle(this)"
; onmouseout="javascript:getStoreStyle(this)"
onclick="javascript:goToOversikt('','','','','','')"
style="cursor: pointer;">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr class="g2"
onmouseover="javascript:setStoreStyle(this)"
; onmouseout="javascript:getStoreStyle(this)"
onclick="javascript:goToOversikt('','','','','','')"
style="cursor: pointer;">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr class="g2"
onmouseover="javascript:setStoreStyle(this)"
; onmouseout="javascript:getStoreStyle(this)"
onclick="javascript:goToOversikt('','','','','','')"
style="cursor: pointer;">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr class="g2"
onmouseover="javascript:setStoreStyle(this)"
; onmouseout="javascript:getStoreStyle(this)"
onclick="javascript:goToOversikt('','','','','','')"
style="cursor: pointer;">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr class="g2"
onmouseover="javascript:setStoreStyle(this)"
; onmouseout="javascript:getStoreStyle(this)"
onclick="javascript:goToOversikt('','','','','','')"
style="cursor: pointer;">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr class="g2"
onmouseover="javascript:setStoreStyle(this)"
; onmouseout="javascript:getStoreStyle(this)"
onclick="javascript:goToOversikt('','','','','','')"
style="cursor: pointer;">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<div id="FbottomV">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" id="visaknapp"
value="Visa" disabled style="width: 150px;"
onClick="getElementById('sokR').style.display='', getElementById('bottomA').style.display='', getElementById('bottomV').style.display='none', getElementById('Vsok').style.display='', getElementById('sokF').style.display='none'">
</td>
<td align="right"><input type="button" value="Avbryt"
style="width: 150px;" class="checkmargin"><input
type="button" value="Infoga" disabled style="width: 150px;">
</td>
</tr>
</table>
</div>
<div id="FbottomA" style="display: none">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button"
value="Ändra i register" style="width: 150px;">
</td>
<td align="right"><input type="button" value="Avbryt"
style="width: 150px;" class="checkmargin"><input
type="button" value="Infoga" style="width: 150px;">
</td>
</tr>
</table>
</div>
</div>
</div>
And this is the CSS
* {font-family:arial;}
.avnamn{
color: #90002b;
font-size: 140%;
display: inline;
vertical-align: 3%;
margin-left: 1%;
}
.b{border:1px solid #000;}
.readonly{background-color: #CCC;}
.Webdings{
font-family: Webdings;
}
ul{margin-top: 0px}
.mt3{margin-top:-3px;}
.mt5p{margin-top:5px;}
.fontS80 {font-size: 80%;}
a:link{color:#000; text-decoration:none; }
a:visited{color:#000; text-decoration:none; }
a:hover{color:#000; text-decoration:none; }
a:active{color:#000; text-decoration:none; }
.fontS75 {font-size: 75%;}
.link{color: #003366;
text-decoration: underline;
cursor: pointer;
font-weight: bold;}
.link_sm{color: #003366;
text-decoration: underline;
cursor: pointer;}
.link_sm{font-size: 70%;cursor: pointer;}
.small{font-size: 75%;}
.smallg{font-size: 75%;
color: #555;}
.ssmall{
font-size: 65%;
font-weight: bold;
color: #555;
}
.small60{font-size: 60%;}
.small50{
font-size: 50%;
color: #333;
}
.smallb{font-size: 85%;}
table{display:inline;}
h1{font-size: 130%;display:inline;}
h2{font-size: 100%;display:inline;}
h3{
font-size: 80%;
display:inline;
font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}
h4{font-size: 70%;display:inline;}
h5{
font-size: 80%;
display:inline;
font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}
.hthin{
font-size: 125%;
}
.th {text-align: left;}
td, th{font-size: 75%;
vertical-align: text-top;}
.td_link{cursor: pointer;}
.td40{height:40px;}
.td60{height:60px;}
.thkant{
border-top: 1px solid #000;
border-bottom: 1px solid #000;
font-size: 70%;
text-align: left;
}
.labb{F0F0E3; c1c1b3 }
.bb{border-bottom: 1px solid #000;}
.bbV{border-bottom: 1px solid #FFF;}
.TB_nbA {background-color:#CCC;}
.TB_bt, .TB_nb, .TB_db, .TB_bb {background-color:#efefdc;}
.hk {background-color:#d9ddb3;}
.hknot {background-color:#f9faf2;}
/*<!--F8F8F1-->*/
.TB_bt{border-top: 1px solid #FFF;}
.TB_bt5{border-top: 5px solid #FFF;}
.TB_bb{border-bottom: 1px solid #999;}
.TB_bb2{border-bottom: 2px solid #c1c1b3;}
.TB_db{border-bottom: 1px solid #000; border-top: 1px solid #000;}
.TB_tb{border-top: 2px solid #efefdc;}
.TB_bo{border: 2px solid #efefdc;}
.TB_bo_hk{border-top: 1px solid #efefdc;}
.TB_bo2{border: 1px solid #efefdc;}
.TB_bo2B{
border-top: 2px solid #c1c1b3;
border-left: 3px solid #efefdc;
border-right: 3px solid #efefdc;
border-bottom: 2px solid #c1c1b3;
}
.TD_bo{
border-right: 1px solid #c1c1b3;
width: 9%;
font-size: 70%;
text-align: center;
}
.TD_bo2{
border-right: 0;
width: 9%;
font-size: 70%;
text-align: center;
}
.ytb{
border-left:3px solid #efefdc;
border-right:3px solid #efefdc;
}
.datum {
font-size: 70%;
padding-right: 5px;
vertical-align: text-top;}
.sub {background:#EAEAEA;}
.sub_meny, .sub_meny_r, .sub_meny_active, .sub_meny_sm{
font-size: 70%;
padding-left: 20px;
padding-right: 20px;
vertical-align: text-top;}
.sub_meny_sm {
font-size: 60%;
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
}
.sub_meny_r{
float:right;
font-size: 70%;
padding-left: 8px;
padding-right: 8px;}
.sub_meny_rm{margin-top:4px;}
.sub_meny_active{font-weight: bold;}
.flikkant1 {
background-image: url(../images/fl1k.jpg);
background-position: center;
z-index: -1;}
.inl_namn{
font-weight: bold;
font-size: 70%;
color: Black;
text-decoration: none;}
.th{text-align: left;}
.tr{text-align: right;}
.g1{
background-color: #FFF;
line-height: 20px;
}
.g2{
background-color: #EEE;
line-height: 20px;
}
.g3{
background-color: #DCDCDC;
line-height: 20px;
font-weight: bold;
font-size: 100%;
}
.g4{
background-color: #CCC;
line-height: 20px;
}
.popup{
border-color: #000;
border-style: groove;
border-width: 2px;
padding: 0px;
background-color: #FFF;
font-size: 70%;
}
.popuphandlaggare{
border-color: #000;
border-style: groove;
border-width: 2px;
padding: 0px;
background-color: #FFF;
font-size: 70%;
position: absolute;
top: 900px;
}
.popupN{
background-color: #F0F0E3;
color: #000;
width: 100%;
display: inline;
font-weight: bold;
height: auto;
padding: 2px;
border-bottom: 1px solid #000;
}
.pin{padding: 6px;}
.fl10, .fl20, .fl30, .fl40, .fl50, .fl60, .fl70, .fl80, .fl90, .fl100 {
padding-bottom:4px;color: #000000;
}
.over{
background-color: #EFEFDC;
line-height: 20px;
}
.half{
line-height:50%;
}
.quarter{
line-height:25%;
}
.lh10{
line-height:10%;
}
.checkmargin {margin-right: 25px;}
.checkmarginL {margin-left: 25px;}
.pusher {padding-left: 15px;"}
.pusherR {margin-right: 40px;"}
.rand3{background-color: #FFF; line-height: 3px;}
.rand1{background-color: #FFF; line-height: 1px;}
.whiteborder { color: #ffffff; border: 4px solid #ffffff; padding: 10px; margin: 10px; }
#details { width: 700; color: #ffffff; }
.column1 { color: #000000; margin: 0; padding: 0; width: 600px; border:0; float: left; }
.column2 { color: #000000;margin: 0; padding: 0; border:0; width: 80px; float: right; }
.f200 {
color: #000000;
}
.f210 {
color: #000000;float: left;
}
.f220 {
width: 400;
}
.f1450 {
width: 600;
float:left;
}
.f1550 {
width: 150;
float:left;
padding:15px;
}
.paddedcell {
padding:15px;
}
.b2{border:2px solid #efefdc;}
.inp_sel{width: 80%;}
.fl21{float:left; padding:5px; margin:5px; width:150px;} .fl455{float:left; padding:5px; margin:5px; width:120px;}
.form-bg {
background: #eeefdf;
width:1000px;
overflow:hidden;
}
.form-bg2 {
background: #eeefdf;
width:100%;
overflow:hidden;
}
.data-bar {
border-bottom:1px solid #fbfbf7;
display:inline-block;
padding:10px 10px;
}
.left {
float:left;
width:200px;
}
.discount {
float:right;
width:500px;
}
.discounts {
width:900px;
}
.right {
float:right;
width:700px;
}
.yta20 {
background: #eeefdf;
width:1100px;
}
.yta2 {
width:1100px;
}
.data-box {
width:650px;
height:100px;
border:1px solid #cbcbcb;
}
#table td {
margin:120px;
}
#personName { float:left; width:300px; } #otherDetails { float:right; width:450px; }
.th_rad_sort {border-bottom: 2px solid #000000; text-decoration: none;"}
a img { border: 0; outline:0;}
.horizontal-gradient2 {
background: #1a2adb; /* Old browsers */
background: -moz-linear-gradient(left, #1a2adb 0%, #a1e6ed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1a2adb), color-stop(100%,#a1e6ed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #1a2adb 0%,#a1e6ed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #1a2adb 0%,#a1e6ed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #1a2adb 0%,#a1e6ed 100%); /* IE10+ */
background: linear-gradient(left, #1a2adb 0%,#a1e6ed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a2adb', endColorstr='#a1e6ed',GradientType=1 ); /* IE6-9 */
color: white;
width: 1015px;
}
.f { float: right; color: white; }
.handlaggare { width: 1000px; }
div.data-box-nat{
margin-bottom: 10px;
border: 2px solid gray;
width: 600px;
}
div.data-box-pct{
margin-bottom: 10px;
border: 2px solid gray;
width: 600px;
}
.newpopup {
z-index:100;
position: absolute;
top:50%;
left:50%;
background-color:#ffffff; //not working
}
Change the top (troublesome) table to div:
<div id="topBar">
<span class="pusher TB_nb"><h2>Sök efter ärende</h2></span>
<span id="close">
X
</span>
</div>
Then add this css:
#topBar {width:100%; background-color:#EFEFDC;}
#close {position:absolute; right:5px;}
Heres an example: http://jsfiddle.net/FSra3/
On a side note, you really should not be using tables. Tables are for tabular data only, not to be used for layout.
Hey now add some code add your first table as like this
replace this code of your first table
<table width="100%" border="0" cellspacing="0" cellpadding="2"
align="center" class="TB_nb" style="display:table;">
<tr>
<td width="75%" class="pusher TB_nb"><h2>Sök efter ärende</h2>
</td>
<td width="25%" style="text-align:right;"><a href="javascript:void(0)"
onclick="document.getElementById('popupF').style.display = 'none';">X</a>
</td>
</tr>
</table>
Live demo
Just in case you still want to use table. In css file, you make display style of table as inline table{display:inline;} This makes the table shrink to fit its content. Use this instead: table{display:block;}