<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
#page {
size:A4 portrait;
}
</style>
<style type="text/arial" media="print">
#page {
margin: 75px 16px 75px 16px;
#PageBreak{
page-break:always;
page-break-inside:avoid;
}
}
div.headerqwe{
postion:running(headerqwe);
width:750px;
height:960px;
border-top:1.2px solid black;
border-bottom:1.2px solid black;
border-left:1.2px solid black;
border-right:1.2px solid black;
}
</style>
</head>
<div class="headerqwe">
<table border="2" cellspacing="0" cellpadding="0" >
<tr>
<td align="center">
<apex:outputText value="Page " style="font-face:verdana;font-size:0.68em;"/>
<span class="pagenumber" style="font-face:verdana;font-size:0.68em;"/>
<apex:outputText value="of" style="font-face:verdana;font-size:0.68em;padding-left:2px;padding-right:2px"/>
<span class="pagecount" style="font-face:verdana;font-size:0.68em;"/>
</td>
</tr>
</table>
</div>
I need to repeat <div> border on every page. Currently I'm getting the border only on the first page, and I need to get the border running on every page.
How can I do that?
1) if you want to get to for all the div's your using assign style to div tag
div{
border:1.2px solid black
}
2) if you apply styles for specified Div's append one class for that specified div's ..like BorderedDiv
div.BorderedDiv{
border:1.2px solid black
}
Related
I have a Text area field when I enter the text in textarea the data should automatically change
As soon as I enter text the color should automatically keeps on changing to green color
code:
<td colspan="2">
<textarea id="text" rows="10" cols="100" onClick="green();"></textarea>
</td>
I tried this code not working
<script>
function green()
{
document.getElementById("").style.color="#000000";
}
</script>
this is the entire code :
<html>
<head>
<title>AUTO EMAIL</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table align=center>
<tr>
<td colspan="2">
<textarea id="text" rows="10" cols="100" onClick="green();"></textarea>
</td>
</tr>
</table>
<script>
function green()
{
document.getElementById("text").style.color="#000000";
}
</script>
</body>
</html>
Your code will work if you pass text to your selector and pass different color except from black because default color of text is black.
function green()
{
document.getElementById("text").style.color="green";
}
<textarea id="text" rows="10" cols="100" onClick="green();"></textarea>
add textarea style :
<html>
<head>
<title>AUTO EMAIL</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
textarea {
color: green;
}
</style>
</head>
<body>
<table align=center>
<tr>
<td colspan="2">
<textarea id="text" rows="10" cols="100" ></textarea>
</td>
</tr>
</table>
</body>
</html>
Both other answers are not wrong but are either not clear enough or over complicate a simple solution.
Lets start with just setting the textarea's text color to green by default:
<textarea id="text" rows="10" cols="100" style="color:green;"></textarea>
now all text in the textarea will be green by default.
Your onClick solution is working as intended but it is ON CLICK meaning text being inserted does not generate a function call thus making that solution not relevant to your needs.
I have this code:
body {
background-color: #2c3e50;
}
#td_design {
background-color: #f39c12;
color: #FFFFFF;
}
<table>
<tr>
<td id="td_design">
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
</table>
I tried putting a color on the body to test if the TD's Color actually expands through. Here's the result:
I know this can be fixed by adding the id = "td_design" on the <table> instead on the <td> but I can't since I want to add different background-color to each td . How can I make the TD's color extend to the whole page?
Tables, by default, have some spacing between cells.
You can remove this spacing using one of the following:
border-collapse: collapse;
/* OR */
border-spacing: 0;
If your table has no borders then you can use whichever one you want. If you do start adding borders, then collapse will start merging borders together (which can lead to interesting effects...) while border-spacing will just put them side-by-side with no gap.
Here's some demos:
table {
margin-bottom: 16px;
background-color: black;
}
td {
background-color: #cfc;
}
#tbl_2 {border-spacing: 0}
#tbl_3 {border-collapse: collapse}
#tbl_4 td {border: 1px solid #3cf}
#tbl_5 {border-spacing: 0}
#tbl_5 td {border: 1px solid #3cf}
#tbl_6 {border-collapse: collapse}
#tbl_6 td {border: 1px solid #3cf}
#tbl_7 {border-collapse: collapse}
#tbl_7 td {border: 1px solid #3cf}
td.red {
border-color: #f66 !important;
background-color: #fcc !important;
}
td.red.fix {
border-style: double !important;
}
Default
<table id="tbl_1"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>
Spacing 0
<table id="tbl_2"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>
Collapse
<table id="tbl_3"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td>X2Y2</td></tr></table>
Default with cell borders
<table id="tbl_4"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>
Spacing 0 (note double width on middle borders, and blue/red together)
<table id="tbl_5"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>
Collapse (note loss of red borders in middle)
<table id="tbl_6"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red">X2Y2</td></tr></table>
Double-style "fix" to make the red border more "important" in collapse priority
<table id="tbl_7"><tr><td>X1Y1</td><td>X2Y1</td></tr><tr><td>X1Y2</td><td class="red fix">X2Y2</td></tr></table>
Make sure in your css that you have all spacing and padding set to 0px
Try this code:
I added different class as per requirement (different color for each TD).
added 3 classes namely td_design1, td_design2 and td_design3 each with different color.
So this will call different class style for different table TD.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
body {
background-color: #2c3e50;
}
#td_design1 {
background-color: #f39c12;
color: #FFFFFF;
}
#td_design2 {
background-color: #559542;
color: #FFFFFF;
}
#td_design3 {
background-color: #f00112;
color: #FFFFFF;
}
</style>
<table>
<tr>
<td id = "td_design1">
asdasd
</td>
<td id = "td_design2">
asdsajsakj
</td>
<td id = "td_design3">
asdqjwhdksad
</td>
</tr>
</table>
</body>
</html>
remove border from tr / td, this seems to be a border: 3px inset gray or close to...
body {
background-color: lightgray;
}
#td_design {
background-color: #f39c12;
color: #FFFFFF;
}
.withBorder {
border: 3px inset gray;
}
.withoutBorder{
border: none;
}
<table>
<tr>
<td id="td_design">
<h5>default navigator style</h5>
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
<tr>
<td id="td_design" class=withBorder>
<h5>with border styled</h5>
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
<tr>
<td id="td_design" class=withoutBorder>
<h5>with border none (like many browsers default)</h5>
asdasd<br/> asdsajsakj
<br/> asdqjwhdksad
<br/>
</td>
</tr>
</table>
<table border="1" class="sample">
<tr>
<th>Employee</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>EMP1</td>
<td>10000</td>
<td><input id="btn1" type="button" value="Submit">
</tr>
<tr>
<td>EMP2</td>
<td>12000</td>
<td><input id="btn2" type="button" value="Submit"></td>
</tr>
</table>
I've set the alternating color in the css. That is first row is white and second row is yellow.
The problem is the button in the second row is also getting yellow color. I've set Opacity to 0.5 so that it looks greyed out on pageload. How to remove this color overlap?
<style type="text/css">
table.sample {
border: 6px inset #8B8378;
-moz-border-radius: 6px;
}
table.sample td {
border: 1px solid black;
padding: 0.2em 2ex 0.2em 2ex;
color: black;
}
table.sample tr.d0 td {
background-color: #FCF6CF;
}
table.sample tr.d1 td {
background-color: #FEFEF2;
}
</style>
opacity makes your element see-through. An opacity of 0.5 will make the element appear 50% see-through.
The reason you can see your background colour through your input is because your input has this opacity. You're basically asking "I have added a window to my house but I can see through it, how can I prevent this?", and the answer is simply: remove the opacity.
Here is a JSFiddle demo showing 0.0 opacity, 0.5 opacity and no opacity in action: http://jsfiddle.net/JamesD/UQ48z/1.
If you want your button to have a different coloured background whilst retaining its opacity, what you can do is wrap it in a span and then give that span a background:
<td>
<span>
<input id="btn2" type="button" value="Submit">
</span>
</td>
td span { background:#fff; } /* New button background colour */
td span input { margin:0; } /* Remove the button's margins */
JSFiddle example.
Try this instead:
input {color: rgba(0,0,0,0.5);}
E.g. http://codepen.io/pageaffairs/pen/gGIiw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
table {
border: 6px inset #8B8378;
-moz-border-radius: 6px;
}
table td {
border: 1px solid black;
padding: 0.2em 2ex 0.2em 2ex;
color: black;
}
table tr td {
background-color: #FCF6CF;
}
table tr td {
background-color: #FEFEF2;
}
input {color: rgba(0,0,0,0.5);}
</style>
</head>
<body>
<table border="1" class="simple">
<tr>
<th>Employee</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>EMP1</td>
<td>10000</td>
<td><input id="btn1" type="button" value="Submit">
</tr>
<tr>
<td>EMP2</td>
<td>12000</td>
<td><input id="btn2" type="button" value="Submit"></td>
</tr>
</table>
</body>
</html>
Could you tell me how to limit content width to the screen boundary? For the following script i always get 2px width wider than screen (allowed space) width.
document.body.scrollWidth is always 2px wider than screen
<html>
<head>
<style>
* {margin: 0; padding: 0}
</style>
<script type="text/javascript">
function test(){
alert(document.body.scrollWidth);
alert(document.getElementById("hrtest").scrollWidth);
alert(document.getElementById("divtest").scrollWidth);
alert(screen.width);
}
</script>
</head>
<body onLoad="test()">
<div id="divtest">
<hr size="2" width="100%" id="hrtest" />
</div>
</body>
</html>
hr {
border-right : 0;
border-left: 0;
}
Should do it.
You may wish to add important to the style, or iterate through all hr in document and set in-line style.
I believe that the problem is the browser is adding a 1 px border to build the hr. Inspecting the hr with chrome shows us the following styles applied by default to all hr's:
display: block;
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
border-style: inset;
border-width: 1px;
Disabling the border-width: 1px; will give the expected results, but hides the hr. Anyway, removing the hr's width works :P
The default user agent stylesheet for the (Horizontal Line) HTML
element is :
hr {
display: block;
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
border-style: inset;
border-width: 1px;
}
If you want to fix horizontal scroll across the HTML document then follow the solution:
Solution#1:
hr{
width: 100%;
box-sizing: border-box;
}
Solution#2:
hr{
width: 100%;
border-left: 0px;
border-right: 0px;
}
Setting the border width to 0 will fix this.
http://jsfiddle.net/chuckplayer/AuC8b/
* {margin: 0; padding: 0; border: 0}
<div id="divtest" width="100%">
<hr size="2" width="100%" id="hrtest" />
</div>
alert(document.body.scrollWidth);
alert(document.getElementById("hrtest").scrollWidth);
alert(document.getElementById("divtest").scrollWidth);
If you really want the <hr> to match the exact width of the body then I would recommend hiding the border style of the <hr> and using a background-color with a height: 1px. You can view the code here: http://jsfiddle.net/helpinspireme/fg6Mp/3/
CSS
hr{
border-style: none;
background: #000;
height: 1px;}
jQuery
var body_width = $('body').width();
var div_width = $('div').width();
var hr_width = $('hr').width();
alert(body_width);
alert(div_width);
alert(hr_width);
HTML
<div>
<hr/>
</div>
Use a table as follows:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<!-- your htlm block -->
</td></tr>
<tr><td style="border-bottom: 1px solid black;" height="50">
</td></tr>
</table>
You can play with the height of the row or use border-top, each time you need a hr add this row in your table
I wonder how can i get a rounded corner div in IE with borders?
According to jquery plugin jquery.corner.js the job it would be very simple to achieve!
But, I can't make a rounded corner div "with border" working in internet explorer greater than 5...
The following code serves only for testing purposes.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>somepage</title>
<script type="text/javascript" src="classes/jquery.js"></script>
<script type="text/javascript" src="classes/jquery.corner.js"></script>
<script type="text/javascript">
$("#teste").corner("round 8px").parent().css('padding', '3px').corner("round 10px");
</script>
<style type="text/css">
.demo{
height: 34px;
width: 450px;
background: blue;
}
</style>
</head>
<body bgcolor="green">
<div id="teste" class="demo">
</div>
</body>
</html>
What am I doing wrong?
Many thanks, as always.
Have you tried CSS3PIE yet?
I would recommend that you go with a CSS way to do it.
You go here and select the colors for your corner.
http://www.spiffycorners.com/
Once done this will give you the css you need to put and sample code how to use it.
It should work very nicely in all browsers. I used it. No images required.
This is sample styles:
<style type="text/css">
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#b20000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #870000;
border-right:1px solid #870000;
background:#9f0000}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #6f0000;
border-right:1px solid #6f0000;
background:#a30000}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #a30000;
border-right:1px solid #a30000;}
.spiffy4{
border-left:1px solid #870000;
border-right:1px solid #870000}
.spiffy5{
border-left:1px solid #9f0000;
border-right:1px solid #9f0000}
.spiffyfg{
background:#b20000}
</style>
This is how to use it:
<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b></b>
<div class="spiffyfg">
<!-- content goes here -->
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
</div>
Happy styling!!