I need help finding a way to overlay a div (100% screen width and 20% height) on top of an iframe that takes up the entire screen width and height. The layout should resemble this:
__________________________
|| Overlay DIV ||
||_______________________||
| |
| Iframe |
| |
|_________________________|
It's really easy..
You just need to place an iframe and a header div inside a single container div.
Make sure to set position:relative on the container, and position:absolute with top:0 on the header div.
Here's how you can do it:
<div class="holder">
<div class="bar"></div>
<iframe class="frame"></iframe>
</div>
For styling in CSS:
.holder{
width: 400px;
height: 300px;
position: relative;
}
.frame{
width: 100%;
height: 100%;
}
.bar{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
}
Check out the link for a live demo!
The concept behind Rodik's answer is commendable, however, the execution appears to have some flaws.
Include an iframe and a header div within a single container div.
Apply position:relative to the container, and position:absolute with top:0 to the header div.
http://jsfiddle.net/eayr9pup/2/
.holder {
width: 400px;
height: 300px;
position: relative
}
.frame {
width: 100%;
height: 100%;
background-color: blue;
}
.bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
background-color: red;
}<div class="holder">
<iframe class="frame"></iframe>
<div class="bar"></div>
</div>Is it achievable? What seems to be the issue?
Ensure that the position property is defined as absolute (or fixed, based on your requirements) and adjust the appropriate z-index if needed. Also, make necessary changes to the width and height.
I am facing an issue on my webpage where I have a drop-down select box with a default value of (empty). The problem arises when the user selects an entry, and the appropriate form for that entry type should be displayed. However, there are a couple of iss ...
Adding Negative Values to Tailwind CSS Utility Plugin Quick Summary: I've developed a custom Tailwind utility plugin that includes numeric values. I'm looking for a way to introduce negative numbers by adding a - at the start of the class, simi ...
I am working on a project where I need to display HTML content offline within a Windows Application. The application, developed in Autoplay Media Studio, includes an iexplore box to load the HTML. Before the application loads, I have set up a silent insta ...
Possible Duplicate: Exploring ways to bypass the same-origin policy I'm facing a scenario where I have a form on my website that requires validation of a number. The validation process involves checking this number against another website where e ...
Currently, I am utilizing a jQuery popup plugin that opens a popup window using the anchor's href. For example: <a href="/some/site?hello=hi" class="popup">link</a> There could be an unlimited number of these on my page, each pointing to ...
Whenever I hover over the purple text, I want it to increase in size using the zoom property. Here is an example: I am facing two issues: The time duration does not seem to work even when I try to apply it within the hover and non-hover classes. Wh ...
Currently, I am developing a website where one of the pages has tabular data fetched from the backend. To filter this table, I utilized Mui filters from datagrid({...data}components={{ toolbar: CustomToolbar }}). Among these filters is a GridToolbarColumns ...
I created a table that displays pizza names, types, and prices using a loop to populate the table dynamically. <form action="Cart.php" method="post"> <table border="1" cellpadding="10"> <tr> <th>Pizza name</th> <th>Pizz ...
I am encountering an issue with a RequiredFieldValidator's text property. In my ASP web form, I have a Panel where I create a table with a textbox and a RequiredFieldValidator during the overridden OnPreInit event. This table is then stored in a sessi ...
I've been working on setting up a simple button in my Angular application that should display a dropdown menu with various options when clicked. I copied and pasted some Bootstrap template code, made some modifications to match the style of my app, bu ...
When submitting a form with two components, only the first form 'School' and the submit button itself are successfully submitted. The second form 'pool' seems to disappear somehow. <form method='get'> <select nam ...
Currently, I am working on a small Russian project and facing some challenges with the mobile version of my website: php8098.github.io/breakfast. The issue lies within the first slider where the play button should trigger a modal window to open. I urgentl ...
span { background-color: red; } .only-whitespace { display: inline-flex; white-space: pre; } .trailing-whitespace { display: inline-flex; white-space: pre; } only whitespace: <span class="only-whitespace"> </span> <br/> trail ...
My goal is to create a responsive design where the padding-left of my box gradually decreases as the website width changes. I want the decrease in padding to stop once it reaches 0. For instance, if the screen size changes by 1px, then the padding-left sh ...
When using the HTML5 date picker, I have encountered an issue where after choosing a date, the ng-model displays an older date instead of the current one selected. <input type="date" ng-model="dateModel" /> For example, when selecting the current d ...
Hey there! I've been working on a simple animation for my webpage, but I'm having some trouble getting it to work the way I want. You can check out my page at . What I'm trying to achieve is having each image appear at its final position an ...
How can I display the account name instead of the accountId property value from my list of transaction items? I have a list of transactionitems with an accountId property, and all accounts are loaded in the accounts$ array. However, I am having trouble us ...
Check out my blog Lately, I've noticed that some of my Blogger posts are not displaying thumbnails in the home menu when using a custom template. However, after testing with different custom templates, I don't believe the issue lies with the tem ...
I am aiming to achieve a function where hovering over a div with the "rectangle" class will display another div with the "description" class. Initially, the description div will have a display value of "none", but upon hovering, it should become visible. ...
Currently, I am working on an application using ASP.Net MVC4, jquery 1.9, and CSS 2.1. However, I have encountered an issue with the horizontal menu display. Whenever a form with a jquery component is shown, some buttons seem to disappear behind the menu, ...