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
Related
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
Images usually have a gap below them. To avoid that, I give them display:block but if I do that in a table, the image goes to the left.
How to have the image in the center and with no gap below it?
(I use inline CSS because I use it in a mail)
I have it here to play: https://jsfiddle.net/rc6jzvx2/
<table style="margin:0 auto; width:80%;">
<tr>
<td style="background-color:gray">
<img style="display:block; margin:0; padding:0; text-align:center;" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</td>
</table>
You can use margin:0 auto instead of text-align to center the image. It works fine with display:block:
<table style="margin:0 auto; width:80%;">
<tr>
<td style="background-color:gray">
<img style="display:block; margin:0; padding:0; margin:0 auto;" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</td>
</tr>
</table>
You can get rid of the gap below the image and center it by setting the vertical-align property of the image to top and setting the text align to center on the table cell, not the image:
table {
margin: 0 auto;
width: 80%;
}
td {
background-color: gray;
text-align: center;
}
img {
vertical-align: top;
}
<table>
<tr>
<td>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</td>
</tr>
</table>
<table style="margin:0 auto; width:80%;">
<tr>
<table style="margin:0 auto; width:80%;">
<tr>
<td >
<div style="background-color:gray;text-align:center">
<img style="" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</div>
</td>
</table>
</table>
EDIT:
If you use it for a mail, as I just read, then it is fine to use the inline-styles.
SOLUTION:
You can just use display: block and margin: 0 auto; in your image for it to center in its container.
You can create a class which you can later on keep using when you need the same style for different images:
.img-center {
display: block;
margin: 0 auto;
}
Also, I recommend you remove your inline-styles and add them in an external css file for separation of concerns and reusability.
JSFIDDLE
CODE SNIPPET:
.my-table {
margin: 0 auto;
width: 80%;
}
.img-center {
display: block;
margin: 0 auto;
}
.bg-gray {
background-color: gray;
}
<table class="my-table">
<tr>
<td class="bg-gray">
<img class="img-center" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</td>
</table>
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.
I'm trying to create a layout with 4 small images and a label centered vertically, the label could have multiple lines. The label sits on top of and obscures the images. The label will be dynamically toggled.
I have done this with divs or tables but run into the same problem. Here is my table version as close as I can get:
p.label
{
position: absolute;
background: black;
color:white;
font-weight: bold;
text-align:center;
bottom:50%;
margin:0;
word-wrap: break-word;
}
table.groupbox
{
position:relative;
}
<table class="groupbox" cellspacing=0 cellpadding=0>
<tr>
<td><p class="label">two line<br>label</p>
<img src="A.jpg" height=80 width=80></td>
<td><img src="B.jpg" height=80 width=80></td>
</tr>
<tr>
<td><img src="C.jpg" height=80 width=80></td>
<td><img src="D.jpg" height=80 width=80></td>
</tr>
</table>
This correctly has the label spanning the full table, but it puts the bottom edge of the label at the vertical center. If I change the label's margin to something like this:
margin: 0 0 -20px 0;
I can hand center the label, but it won't work for different size labels.
Two Answers
The answers by Nathan Manousos and Rob W both seem to work well.
This piece of code will produce a square with a 160x160 size. You can adjust the width and height to your wishes.
CSS:
.groupbox, .groupbox .label-container {
width: 160px;
height: 160px;
}
.groupbox {
position: relative;
}
.groupbox .label-container {
display: table;
position: absolute;
}
.groupbox .A, .groupbox .B, .groupbox .C, .groupbox .D{
width: 50%;
height: 50%;
background-position: center;
position: absolute;
background-repeat: no-repeat;
}
.groupbox .A{background-image:url("A.jpg");top:0;left:0;}
.groupbox .B{background-image:url("B.jpg");top:0;right:0;}
.groupbox .C{background-image:url("C.jpg");bottom:0;left:0;}
.groupbox .D{background-image:url("D.jpg");bottom:0;right:0;}
.groupbox .label {
display: table-cell;
text-align: center;
vertical-align: middle;
}
HTML:
<div class="groupbox">
<div class="A"></div><div class="B"></div>
<div class="C"></div><div class="D"></div>
<div class="label-container">
<div class="label">Any text<br />With multiple lines</div>
</div>
</div>
Final edit
Keep in mind that background should be a background. The text should not become unreadable because of the background. To accomplish this, you can create a 1x1 transparent image:
.groupbox .label-container {
background:url("transparent.png") repeat transparent;
}
You can also use background-color:rgba(1,1,1,0.2) where 0.2 is the transparency level (0=invisible, 1=fully visible). This CSS attrbute is available for FF 3+, Chrome, Safari 3+, Opera 10+ and IE 9+.
Okay, based on the updated diagram, here is a solution that requires knowing the height of the whole box.
Here it is in action: http://jsfiddle.net/raySU/
CSS:
*{margin:0;padding:0;}
#wrap{width:200px; height:200px; position:relative;}
#wrap #images{position:absolute;}
#wrap #images img{float:left;}
#wrap #label{position:absolute; width:200px; height:200px;}
#wrap #label table{width:100%; height:100%;}
#wrap #label p{background-color:#eee;}
HTML:
<div id="wrap">
<div id="images">
<img src="http://placekitten.com/100" width="100" height="100" />
<img src="http://placekitten.com/100" width="100" height="100" />
<img src="http://placekitten.com/100" width="100" height="100" />
<img src="http://placekitten.com/100" width="100" height="100" />
</div>
<div id="label">
<table cellspacing="0" cellpadding="0">
<tr>
<td valign="center">
<p>This is my label here isnt it great yes it is</p>
</td>
</tr>
</table>
</div>
</div>
If you add a container around your table, you should be able to do this pretty easily.
<div class="container">
<table class="groupbox" cellspacing=0 cellpadding=0>
<tr>
<td>
<p class="label">two line<br>label</p>
<img src="A.jpg" height=80 width=80>
</td>
<td><img src="B.jpg" height=80 width=80></td>
</tr>
<tr>
<td><img src="C.jpg" height=80 width=80></td>
<td><img src="D.jpg" height=80 width=80></td>
</tr>
</table>
<p class="label">Your text here</p>
</div>
.container {
position: relative;
float: left; }
.label {
position: absolute;
top: 50%;
right: 0;
height: 18px; /* fixed height */
margin: -9px 0 0; }