When I changed the width from 1080px to 100% the video will take up the entire screen. I tried controlling the height with the height tag but no success.
jsfiddle.net
jsfiddle.net
Is there a way to get text below the video without the video taking up the entire screen leaving the text on the video? I want the full width taken up but not the entire height so the text scrolls across a black background at the bottom.
body {width:100%; height:100%; overflow:hidden; margin:0; background-color:black;}
html {width:100%; height:100%; overflow:hidden; }
#custom-message {
font-family: verdana;
font-size:18pt;
color: rgb(230, 200, 98);
z-index:1;
}
<table style="width:100%;height:100%;background-color:#000">
<tr valign="top">
<td width="100%" valign="top" align="center">
<video width="100%" src="http://henriksjokvist.net/examples/html5-video/video.ogg" autoplay loop></video>
</td>
</tr>
<tr>
<td style="color:white;height:120px"><marquee direction="right" speed="normal" behavior="loop" class="result" id="custom-message">text</marquee></td>
</tr>
</table>
change width of video tag from 1080px to 100% ,and remove the absolute positioning property of text tag.
body {width:100%; height:100%; /*overflow:hidden*/; margin:0; background-color:black;}
html {width:100%; height:100%; /*overflow:hidden;*/ }
#custom-message {
/*position:absolute;*/
font-family: verdana;
font-size:18pt;
color: rgb(230, 200, 98);
z-index:1;
bottom:1%;
}
<table style="width:100%;height:100%;background-color:#000">
<tr valign="top">
<td width="100%" valign="top" align="center">
<video width="100%" src="http://henriksjokvist.net/examples/html5-video/video.ogg" autoplay loop></video>
</td>
</tr>
<tr>
<td style="color:white"><marquee direction="right" speed="normal" behavior="loop" class="result" id="custom-message">text</marquee></td>
</tr>
</table>
I think, you can't do it without javascript/jQuery.
Demo
I'm using the FitVid Plugin like this:
$("video").fitVids();
Loaded from jsdelivr: https://cdn.jsdelivr.net/fitvids/1.1.0/jquery.fitvids.js
Related
I have a table within a table. I have set table background-color to white.
The inner table's background is to remain white while all other cells of the outer table are set to lightgrey.
However, the outer table's white background-color is showing up as a border around all its <td> cells which I cannot figure out how to get rid of - all grey cells should be borderless. I have tried setting the border property of all elements to none without success. Any help would be appreciated.
Here is a jsfiddle
<style>
body{
background-color: lightcyan;
}
.gems {
margin:0 8px;
padding:0;
}
.gems table{
width:100%;
background-color:white;
}
.gems td {
padding:0px 1px;
margin:0;
}
.gems tr.filelist {
margin:5px;
background-color: lightgrey;
}
.gems tr.tools {
background-color: lightgrey;
}
div.textarea {
background-color: white;
}
</style>
<body>
<div class="gems">
<table>
<tr class="filelist">
<td>filelist</td>
<td>filelist</td>
</tr>
<tr class="tools">
<td>tools</td>
<td>
<div class="textarea">
This is a table
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
<table cellspacing="0">
Add this property in your table tag.
Im creating a responsive table which contains a vertical divider. I want that divider to move along with the text according to all screen sizes. left and right td are responsive just the divider is creating problem.
The CSS is
.divider{
position: absolute;
left:30.5%;
top:6%;
bottom:25%;
border-left:2px solid #333;
overflow:hidden;
}
and the related html is
<table width="100%">
<tr>
<td>
this is test
</td>
<td><div class="divider"></div></td>
<td>
This is test2
</td>
</tr>
</table>
The problem is when I change the position from absolute to anything else in css it hides the divider.
In your case....its happening because i feel that your are giving position only to the div and not the containing <td>....give this parent td a position first
add height, width to html,body and your are good to go...
solution
CSS
html, body {
height:100%; /* added */
width:100%;/* added */
}
.divider {
position: relative; /* changed*/
left:30.5%;
top:6%;
bottom:25%;
border-left:2px solid #333;
overflow:hidden;
}
td.r {
position:absolute;/* added */
height:100%;/* added */
width:100%;/* added */
}
HTML
<table width="100%" border=1>
<tr>
<td>this is test</td>
<td class="r"> <!-- notice the added class-->
<div class="divider"></div>
</td>
<td>This is test2</td>
</tr>
</table>
EDIT
A much simpler and cleaner way to create divider is to use td only for divider, not the div....check this demo
Remove the div creating the divider and instead, add the divider class to td itself!
<table width="100%" border=0>
<tr>
<td>this is test</td>
<td class="divider"></td>
<td>This is test2</td>
</tr>
</table>
CSS
td {
text-align:center
}
td.divider {
position:absolute;
height:100%;
width:1px;
border:1px solid #000;
background:#000;
}
Is there a way I can achieve the position and formatting of this iframe with only css and divs instead of the table that I am using? I tired using 3 separate divs and applied css to them and could only partially achieve this format however the bottom of the iframe would overflow and it wasn't possible to view the bottom content of the page included.
<style>
body {
margin:0;
background-color:#efefef;
}
.frame{
width:100%;
height:100%;
margin:0px;
border-spacing:0;
border-collapse:collapse;
overflow:hidden;
}
.frame_leftspace{
width:250px;
}
.frame_topspace{
height:70px;
}
</style>
<table class="frame" width="100%">
<tr>
<td class="frame_topspace" colspan="2"></td>
</tr>
<tr>
<td class="frame_leftspace"></td>
<td>
<iframe style="width:100%; height:100%;" src="http://www.reddit.com/" frameborder="0"></iframe>
</td>
</tr>
</table>
This fiddle will show how to achieve this. First is your original code, then how I'd recreate it:
HTML:
<div class="topspace"></div>
<div class="iframe">
<iframe id="reddit" src="http://www.reddit.com/" frameborder="0"></iframe>
</div>
CSS:
.topspace { height: 70px; }
.iframe { padding-left: 250px; }
#reddit { height: 100%; width: 100%; }
Hope that helps.
Using the following ASP.net/iTextSharp code to parse the contents of an HTML file into a PDF and dump it into the response stream:
Response.Clear();
Response.ContentType = "application/pdf";
using (Document doc = new Document())
{
PdfWriter writer = PdfWriter.GetInstance(doc, Response.OutputStream);
doc.Open();
using (TextReader reader = File.OpenText(Server.MapPath("~/Test.htm")))
{
XMLWorkerHelper.GetInstance().ParseXHtml(writer, doc, reader);
}
doc.Close();
}
Response.End();
This works, but the resulting PDF isn't styled anything like the original HTML page. For starters, the built-in css parser appears to only be able to work with direct tag styles and classes (no chaining like: thead th { background-color:#999; }).
Second, it appears borders are an all-or-nothing deal. It has no concept of border-top, border-bottom, etc, and border-collapse doesn't collapse the borders of adjoining cells so the borders end up being twice as thick as I want them.
Last, I cannot figure out how to align a table to the left- or right-side of the document. It is always centered. I tried wrapping in a div with text-align, tried setting the align attribute, tried setting text-align directly on the table. Can't figure that one out?
Here is my demo document I'm trying to use as a proof-of-concept:
<!DOCTYPE html>
<html>
<head>
<title>This is the title</title>
<meta name="description" content="This is the description" />
<meta name="keywords" content="abc, 123, xyz" />
<style type="text/css">
body { font-family:Arial, Verdana, Sans-Serif; font-size:9pt; }
.dataGrid { font-family:Arial, Verdana, Sans-Serif; font-size:9pt; border-collapse: collapse; border:1px solid #000; width:80%; margin:0; text-align:left; }
th { padding:3px 4px; font-weight:bold; border:1px solid #000; }
td { padding:3px 4px; border:1px solid #000; }
.head { border-bottom:2px solid #000; background-color:#9BBA1F; font-weight:bold; }
.odd { background-color:#fff; }
.even { background-color:#D6EB87; }
.foot { border-top:2px solid #000; background-color:#BAB0C4; font-weight:bold; }
h1 { font-size:14pt; color:#FFA200; text-align:center; }
.right { text-align:right; }
.center { text-align:center; }
.left { text-align:left; }
</style>
</head>
<body>
<h1>Sample Document</h1>
<div style="text-align:left;">
<table class="dataGrid" align="left">
<thead>
<tr class="head">
<th width="70%">Name</th>
<th width="15%" class="center">Qty</th>
<th width="15%" class="center">Price</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>ABC</td>
<td class="center">2</td>
<td class="right">$5.00</td>
</tr>
<tr class="even">
<td>XYZ</td>
<td class="center">1</td>
<td class="right">$10.00</td>
</tr>
<tr class="odd">
<td>123</td>
<td class="center">3</td>
<td class="right">$2.00</td>
</tr>
<tr class="even">
<td>789</td>
<td class="center">1</td>
<td class="right">$4.00</td>
</tr>
</tbody>
<tfoot>
<tr class="foot">
<td class="right">Totals</td>
<td class="center">7</td>
<td class="right">$30.00</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
After spending a bunch of time on this I couldn't get it to work properly. As such, I ended up switching to another tool: wkHtmlToPdf. I used the Codaxy wrapper class available in Nuget to help create the calls, and am seeing much better results than I saw with iTextSharp. It mostly understands CSS selectors, and automatically handles things like images and links.
how can i show panel over iframe. I have tried using z-Index but its not working check out the sample image. We'll I didn't tried using css i use Z-Index but it is not working.
Below is my code...
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr align="left"><td align="left"><iframe width="70%" frameborder="0" height="770" id="myframe" runat="server" src="about:blank"></iframe></td></tr></table>
<div class="slide-out-div"><a class="handle" href="http://link-for-non-js-users">Content</a><h3 class="style1">Menu Items</h3><table border="0">
<tr style=" float:left; height:39px"><td><ul><li>Special Instructions</li></ul></td></tr>
<tr style=" float:left; height:39px"><td><ul><li>Processing Exception</li></ul></td></tr>
<tr style=" float:left; height:39px"><td><ul><li>Account Coding</li></ul></td></tr>
<tr style=" float:left; height:39px"><td><ul><li>View My Notes</li></ul></td></tr>
<tr style=" float:left; height:39px"><td><ul><li>Approve/Disapprove</li></ul></td></tr>
<tr style=" float:left; height:39px"><td><ul><li>Save & Close</li></ul></td></tr>
</table>
</div>
You should look at using the position:absolute CSS styling.
Here is an example...
<div id="straddle">
Here is the straddling div<br/>
Here is the straddling div
</div>
<iframe id="myframe" src="about:blank"></iframe>
With the following example CSS...
#myframe {
height:100px;
width:200px;
margin-left:100px;
}
#straddle {
position:absolute;
width:200px;
border:1px solid red;
}
Please see this jsfiddle live demo