I have an iframe that has a an aspx page being loaded into it and I can't figure out the page that is being loaded won't fill in the iFrame.
The page being loaded has a div container, inside the grid is a toolbar and a grid, here is the code for the container
<div id="container" style="width:100%; height:100%; border:1px solid green;">
..Toolbar and Grid is in here
</div>
This is what it looks like when I run it, don't pay any attention at the border colors, those are there for me to make sure that the iFrame is filling the div. The grid and toolbar is bordered with green for a reference.
I remember a long time ago that I was able to pull this of before, that was a very long time ago and I don't remember how I did it. So the question is how do I get the page to fill up the iframe?
Thanks
The default styling of the body element, across browsers, has some padding: this will apply inside an ifame as well.
Thus you need to add some styling:
body, html {
padding 0;
margin: 0;
}
to the CSS of the page inside the iframe.
Related
The page in question is this: http://amytdatta.com/ironic-bironic (password: tyma) - it's a pre-release page for a new album I worked on, sorry!
I'd like to have the video and the text nav below scale and center to the browser window without the need for a scrollbar. I've tried all kinds of approaches using min height / max height but just can't seem to get the intended result. I'm guessing that I don't know which elements to target and how to target them.
Any advice for a good solid approach would be really appreciated. Also, since i'm using Virb I can only do overrides to the CSS, so I can't delete lines.
Thanks very much.
Without actually seeing your website since it's password protected I would suggest something along the lines of the folllowing:
You set a wrapper around your elements, in your case the nav and the video. And then set the CSS for the video and nav to have an auto margin. Which should center it both horizontally and verically. You might want to add a wrapper for the 2 components to keep them nicely stacked together and then put an auto margin on that wrapper, but the below should already work.
Html:
<div id="container">
<div id="nav"><!-- nav here --></div>
<div id="video"><!--video here--></div>
</div>
CSS:
#container {
width:100%;
height:100%;
}
#video{
margin:auto;
}
#nav {
margin:auto;
}
Alright, I understand that the purpose of a DIV is to contain its inner elements - I didn't want to upset anyone by saying otherwise. However, please consider the following scenario:
My web page (which only takes up a width of 70% of the entire page) is surrounded by a container (a div). However, under my navigation bar which is at the top of the page, I would like to create w banner that takes up 100% of the width of the entire page (which means it will have to extend outside the bounds of its container as the container is only taking up 70% of the page's width).
This is the basic idea that I am trying to accomplish: http://www.petersonassociates.biz/
Does anyone have any suggestions for how I could accomplish this? I'd appreciate any help.
Evan
If you just want the background of the element to extend across the whole page this can also be achieved with negative margins.
In a nutshell (correction from comment):
.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
That gives you horizontal scroll bars which you remove with:
body {overflow-x: hidden; }
There is a guide at http://www.sitepoint.com/css-extend-full-width-bars/.
It might be more semantic to do this with psuedo elements: http://css-tricks.com/full-browser-width-bars/
EDIT (2019):
There is a new trick to get a full bleed using this CSS utility:
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
I guess all solutions are kind of outdated.
The easiest way to escape the bounds of an element is by adding:
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
discussion can be found here and here. There is also a nice solution for the upcoming grid-layouts.
If I understood correctly,
style="width: 100%; position:absolute;"
should achieve what you're going for.
There are a couple of ways you could do this.
Absolute Positioning
Like others have suggested, if you give the element that you want to stretch across the page CSS properties of 100% width and absolute position, it will span the entire width of the page.
However, it will also be situated at the top of the page, probably obscuring your other content, which won't make room for your now 100% content. Absolute positioning removes the element from the document flow, so it will act as though your newly positioned content doesn't exist. Unless you're prepared to calculate exactly where your new element should be and make room for it, this is probably not the best way.
Images: you can also use a collection of images to get at what you want, but good luck updating it or making changes to the height of any part of your page, etc. Again, not great for maintainability.
Nested DIVs
This is how I would suggest you do it. Before we worry about any of the 100% width stuff, I'll first show you how to set up the 70% centered look.
<div class="header">
<div class="center">
// Header content
</div>
</div>
<div class="mainContent">
<div class="center">
// Main content
</div>
</div>
<div class="footer">
<div class="center">
// Footer content
</div>
</div>
With CSS like this:
.center {
width: 70%;
margin: 0 auto;
}
Now you have what appears to be a container around your centered content, when in reality each row of content moving down the page is made up of a containing div, with a semantic and descriptive class (like header, mainContent, etc.), with a "center" class inside of it.
With that set up, making the header appear to "break out of the container div" is as easy as:
.header {
background-color: navy;
}
And the color reaches to the edges of the page. If for some reason you want the content itself to stretch across the page, you could do:
.header .center {
width: auto;
}
And that style would override the .center style, and make the header's content extend to the edges of the page.
Good luck!
The more semantically correct way of doing this is to put your header outside of your main container, avoiding the position:absolute.
Example:
<html>
<head>
<title>A title</title>
<style type="text/css">
.main-content {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header><!-- Some header stuff --></header>
<section class="main-content"><!-- Content you already have that takes up 70% --></section>
<body>
</html>
The other method (keeping it in <section class="main-content">) is as you said, incorrect, as a div (or section) is supposed to contain elements, not have them extend out of bounds of their parent div/section. You'll also face problems in IE (I believe anything 7 or below, this might just be IE6 or less though) if your child div extends outside the parent div.
I have a feeling this is another impossible request, but... Is it possible to override the width of an iframe friend selector element using only an external stylesheet?
I have a page that uses the iframe friends selector, but I cannot edit the HTML in any way, or use JavaScript. The code looks essentially like this in Firebug:
<div id="container">
<fb:serverfbml class="fb_iframe_widget" width="718px">
<script type="text/fbml">
<span>
<iframe id="fdf5a6b542baf6" class="fb_ltr" scrolling="no" name="f19fe08b5aec2e4" style="border: medium none; overflow: hidden; width: 718px; height: 555px;" src="about:blank">
</span>
</fb:serverfbml>
</div>
The issue is that my container is only 500px wide, and hides any overflow:
#container { width:500px; overflow:hidden; }
Which results in the invite box being cut off.
I have managed to override the inline styles on both the fb control and the iframe like this:
.fb_iframe_widget[style], #container iframe[style] {
width:500px !important; /* yes, I know, but it really doesn't work otherwise */
}
But inside the iframe there is an element called #fb_multi_friend_selector that is being forced to a width of 718px by a CSS file ending in a PHP extension. I'm assuming that this is a dynamic CSS file that is somehow reading the style attribute of the iframe and forcing that width value, but I have no idea how to override it from my stylesheet. Is it possible to do this?
You cannot access the contents of an iframe that is not from your own domain due to the same origin policy. This is to prevent cross-site scripting attacks.
I'm trying to make a web page that only has content within the page itself. The page itself should not have scrollbars (although individual parts should have scrollbars). I want it to look very similar to how the Java API is laid out here, http://java.sun.com/javase/6/docs/api/, but without frames.
The page needs to also be able to dynamically load content.
Right now, I'm trying to get it to work with the ASP !UpdatePanel for the dynamically loaded content and a div for the sizing and panel display, but the panels never cover the screen. For example, I'll have:
<body style="height: 100%; margin: 0; padding: 0;">
<form id="form1" runat="server">
<div style="width: 100%; height: 100%;">
<div style="overflow: auto; height: 100%; border-style: groove; border-width: medium;">
<asp:UpdatePanel ID="TOC" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Panel ID="Display" Height="100%" ScrollBars="Auto" runat="server" />
</ContentTemplate>
</asp>
</div>
</div>
</form>
</body>
But this doesn't cover the entire height of the panel. The width is fine. But it creates a small border at the top of the page, then this expands when content gets filled in on a button press. Then the border changes. I'd much prefer the border remain static.
Is there anyway to do this with divs?
EDIT: I just tried this in Firefox and it worked perfectly (excluding the .NET specific things since I was on Linux without the ability to create ASP.NET pages). I need this to work with Internet Explorer 7 though (and probably Internet Explorer 6 too). Is there any neat hack around IE7 completely ignoring the css height property?
As far as I know, the only sure way to achieve this is with some javascript.
Using jQuery:
$(document).ready(function() { // Wait for the HTML to finish loading.
var resize = function() {
var height = $(window).height(); // Get the height of the browser window area.
var element = $("body"); // Find the element to resize.
element.height(height); // Set the element's height.
}
resize();
$(window).bind("resize", resize);
});
If you're covering multiple browsers, you may need to tweak this a bit.
In order to use the width:100% CSS property on an element, the element's parent needs to have a defined height.
The parent div of your main div is body. So you need to apply height: 100% to the body tag:
<body style="height: 100%">
EDIT: to make sure nothing overflows, you also want to apply margin: 0 and padding: 0 to body.
I am writing a footer div that displays info from the database. The footer has a different background color than the rest of the page, and will have a height that depends on how much content the database throws to it. When I generate the content with php and call for a border around the footer div, the content appears and is, let's say, 400px high, but the div border appears as a 1px high rectangle at the top of the div.
How do I get the height to auto-fit the content?
<div id="footer">
<?php
$an_array=array();
$tasks=mysql_query("select stuff from the db");
while($row=mysql_fetch_assoc($tasks)){
extract($taskrow);
$an_array[]=$task;
}
$an_array=array_chunk($an_array,4);
foreach($an_array as $dtkey=>$dtval){
echo "<dl>";
foreach($dtval as $dtvkey=>$dtvval){
echo "<dt>".$dtvval."</dt>";
}
echo "</dl>";
}
?>
</div>
This is what I get. The area below the red border should be filled with a color.
border image http://www.kevtrout.com/tortus/div.png
By popular demand, here is the css:
#footer{
border-top: 10px solid #d8d8d8;
background:#5b5b5b;
/*overflow:auto;*///Added this after seeing your answers, it worked
}
dl.tr{
width: 255px;
height:160px;
background: #5b5b5b;
margin:0px;
float:left;
padding: 10px;
}
dt.tr{
font-weight: normal;
font-size: 14px;
color: #d8d8d8;
line-height: 28px;
}
edit: I am using firefox on a mac
Check your footer CSS... if you have overflow set to anything but auto/scroll, then the DIV won't grow.
If not try using something other than DL/DT since DT's are inline elements, they won't push your div to fit content.*
e.g. just try using a DIV instead, if the footer grows, you have your answer.
(note: I revised order of suggestions)
*(I realize spec-wise, that this Shouldn't be an issue, but there wasn't an indication of which browsers this was occuring in, thus I would not be at all surprised if IE was rendering differently than expected for example)
Without seeing the CSS, my guess would be that your <dl>s are floated to get them side-by-side. The containing <div> then won't expand to contain them. If this is the case adding a clear:both; before the final </div> should fix it, like this:
<div style='clear:both;'></div>
The browser doesn't care if your content is generated by PHP or comes from a static HTML file.
The issue will most likely be in your CSS. Either the content you put in the footer has positioning properties (like float:left or position:absolute) that place them "outside" the div or the div has a fixed size and/or overflow properties set.
I'd suggest posting your CSS file here or (if it's too large) put it up somewhere where we can take a look. The finished HTML (you could just save a static copy of the output if your system isn't online yet) wouldn't hurt either.
By the way, your use of the <dl> element is wrong: you are missing the <dd> element. Items in the definition list always consist of one definition term and one or more definitions (which, in your code, are missing).
Also, rather than using <div style='clear:both;'></div> as suggested by Steve, I'd suggest explicitly stating the height of your <dt> elements. This way, the floats don't have to be cleared.