Re: [css-d] iframes - who still uses them
Thanks - I've gotten good direct info from the list members on using php/SSI (include) for doing this, but my web needs to be both live on a server and viewable without hosting (off a CD, disk, etc). I realized soon after putting out the last email that iframes aren't really involved in the issue at all, and the same problem occurs without it included in the content div. The simple problem is that on a 100% height layout with header, content and footer, there seems to be no way to make the content div expand vertically to fill the space left between header and footer in the browser window? The wrapper div can be set to 100%, the header and footer to specific heights, but setting the content div to 100% makes it use the actual full browser height, not the 100% left in between the header and footer. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Zoe M. Gillenwater Sent: Tuesday, July 03, 2007 5:16 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] iframes - who still uses them Ray Gresko wrote: If you're referring to my IFRAMEs and max height post - I'd love to find a way to use a div with overflow to perform a similar function. My page design is essentially a menu shell that browses through content by setting the target of the iframe. Is there a way to do something similar with CSS (without having to copy the shell for each page of content)? No. CSS is about presentation, not controlling content or behavior. You can create a scrolling area of a page with CSS, but that scrolling area can't show a separate HTML document within it. Please see http://css-discuss.incutio.com/?page=OffTopic for other lists you can use to get ideas on how to use iframes or alternate programming methods to achieve the effect you are looking for. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] iframes - who still uses them
Hi Ross- If you're referring to my IFRAMEs and max height post - I'd love to find a way to use a div with overflow to perform a similar function. My page design is essentially a menu shell that browses through content by setting the target of the iframe. Is there a way to do something similar with CSS (without having to copy the shell for each page of content)? -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ross Sent: Monday, July 02, 2007 9:31 AM To: css-d@lists.css-discuss.org Subject: [css-d] iframes - who still uses them Hi, Looking at the last post it got me thinking. Does anyone still use frames or iframes? Is it a valid development technique? R. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IFRAMEs and max height
Hello All-
I have (what should be) a simple page layout with a header div (40px
height), footer div (50px height) and middle div containing an IFRAME
(600px min height). The whole page should have a minimum height of 690px
(40+600+50) but I want the IFRAME section to expand to fit vertically if
the browser window is taller (so, the footer will be aligned with the
bottom of the browser if the browser window is 690 or taller). I use
this page format as a shell that browses lots of different external html
files (hence the need for the IFRAME).
The main issue is that the IFRAME is set to 100% height but it seems to
default to looking at the full browser height instead of the div it is
contained within to arrive at what is 100% height. It was always
defaulting to being the full height of the browser window, and causing
scrolling by 90px (the combined height of the header and footer).
I actually found a hacky solution that works in IE7, but not in Firefox
(see example below). The thing that made it work was setting the html
bottom margin to 90px, which the IFRAME seems to be reading to scale
height properly. For Firefox, this is ignored and the bottom part of the
IFRAME and the footer are pushed off by 90px.
Any ideas on how to get this to work as it should in both IE and Firefox
with correct CSS would be much appreciated! At this point, I'm willing
to bag CSS and use a table if that would work and someone can help out
with how to do that.
-R
-snip
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
/
style type=text/css media=screen
html,body {
margin:0 0 90px 0;
padding:0;
height: 100%;
}
#wrapper {
width: 900px;
height: 100%;
margin: 0 auto 0 auto;
}
#header {
height: 40px;
background-color: #00CC66;
}
#content {
height: 100%;
width: 900px;
min-height: 600px;
}
#footer {
height: 50px;
background-color: #FF;
}
/style
/head
body
div id=wrapper
div id=headerHeader/div
div id=content
iframe name=contentiframe src=http://www.msn.com;
width=100% height=100% frameborder=0 /iframe
/div
div id=footerFooter/div
/div
/body
/html
snip ---
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] fixed header and footer, with expandable iFrame in center?
Hello all-
I'm trying to create a page with header and footer fixed to the top and bottom
of the browser window, with an iFrame in the center that expands vertically to
fill the space in-between. I've created a sample with just the iFrame center
working the way I'd like (see below), but I haven't been able to successfully
put in the header and footer without making the browser window start to scroll
(overflowing by the header and footer height). I only need a solution that
works with IE7 (and the latest Firefox as a plus). Any ideas?
Here's my sample (and a graphic showing my desired design is here -
http://s29.quicksharing.com/v/1407434/graphicLayout.jpg.html):
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
/
titleCSS Layout - 100% height/title
style type=text/css media=screen
html,body {
margin:0;
padding:0;
height: 100%;
background: gray;
}
#container {
width:900px;
height: 100%;
margin: 0 auto 0 auto;
}
#header {
background-image: header.jpg;
height: 40px;
}
#content {
height: 100%;
min-height: 568px;
background: white;
}
#footer {
background-image: footer.jpg;
height: 50px;
}
/style
/head
body
div id=container
!-- div id=header/div --
!-- div id=navbar/div --
div id=content
iframe name=contentiframe src=iframecontent.html width=100%
height=100% frameborder=0 /iframe
/div
!-- div id=footer/div --
/div
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Expandable iFrame in center with header and footer?
Hello all-
I'm trying to create a page with header fixed to the top of the browser,
an iFrame in the center that has a min-height but expands vertically to
fill the space in-between the header and a footer, with the footer
following after and mostly set to the bottom of the browser window
(unless the browser's height goes below the minheight of the
iframe+headerheight+footerheight). A graphic of what I'd like to do is
here- http://s29.quicksharing.com/v/1407434/graphicLayout.jpg.html.
I've created a sample with just the iFrame center working the way I'd
like (see below), but I haven't been able to successfully put in the
header and footer without making the browser window start to scroll
(overflowing by the header and footer height). I only need a solution
that works with IE7 (and the latest Firefox as a plus). Any ideas?
Here's my working sample so far (basically just want to get this working
as is, but with a header and footer attached):
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1 /
titleCSS Layout - 100% height/title
style type=text/css media=screen
html,body {
margin:0;
padding:0;
height: 100%;
background: gray;
}
#container {
width:900px;
height: 100%;
margin: 0 auto 0 auto;
}
#header {
background-image: header.jpg;
height: 40px;
}
#content {
height: 100%;
min-height: 568px;
background: white;
}
#footer {
background-image: footer.jpg;
height: 50px;
}
/style
/head
body
div id=container
!-- div id=header/div --
!-- div id=navbar/div --
div id=content
iframe name=contentiframe src=iframecontent.html
width=100% height=100% frameborder=0 /iframe /div
!-- div id=footer/div --
/div
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
