Loading ...
Sorry, an error occurred while loading the content.

Fluid height embed between fixed height head/foot

Expand Messages
  • Neil Creek
    It s been a little while since I ve done any html, and specifically any css layouts, and this one has me scratching my head. I ve been searching online for a
    Message 1 of 11 , Apr 1, 2007
    • 0 Attachment
      It's been a little while since I've done any html, and specifically
      any css layouts, and this one has me scratching my head. I've been
      searching online for a few hours and can't find anything that seems to
      deal with this specific question.

      I have an <embed>ed QTVR panorama that I want to show as big as
      possible in a page, which has a fixed height header and footer. You
      can see it as it currently looks here:
      http://neil.creek.name/panoramas/creek-061112-045-pano.html

      My question is, how do I make the middle <div> fill the space between
      the header and footer on varying resolutions on different screens?
      Something like height:auto would be great, but doesn't exist. If I say
      height:100% then it makes it the height of the full viewport, causing
      the footer to be displayed below the viewport and a scroll bar to
      appear. A lower percentage will only work for one specific viewport size.

      This is stripped code of what I'm currently doing:

      <html>
      <head></head>
      <body style="margin:0;padding:0;">

      <div style="width:100%;height:75px;margin:0;padding:0;">header</div>

      <div style="width:100%;height:auto;margin:0;padding:0;">

      <div style="width:100%;height:100%;"><embed
      src="media/creek-061112-045-pano.mov" width="100%" height="100%"
      autoplay="true" scale="tofit"></div>

      </div>

      <div style="width:100%;height:75px;margin:0;padding:0;">Footer</div>

      </body>
      </html>

      Any suggestions?
    • Flemming V. Larsen
      You can use instead of
      Message 2 of 11 , Apr 2, 2007
      • 0 Attachment
        You can use <table> instead of <div>

        <table style="width:100%;height:100%;margin:0;padding:0;border:none;">
        <tr>
        <td style="width:100%;height:75px;margin:0;padding:0;">header</td>
        </tr>
        <tr>
        <td style="width:100%;height:100%;"><embed
        src="media/creek-061112-045-pano.mov" width="100%" height="100%"
        autoplay="true" scale="tofit"></td>
        </tr>
        <tr>
        <td style="width:100%;height:75px;margin:0;padding:0;">Footer</td>
        </table>


        ----- Original Message -----
        From: "Neil Creek"

        > This is stripped code of what I'm currently doing:
        >
        > <html>
        > <head></head>
        > <body style="margin:0;padding:0;">
        >
        > <div style="width:100%;height:75px;margin:0;padding:0;">header</div>
        >
        > <div style="width:100%;height:auto;margin:0;padding:0;">
        >
        > <div style="width:100%;height:100%;"><embed
        > src="media/creek-061112-045-pano.mov" width="100%" height="100%"
        > autoplay="true" scale="tofit"></div>
        >
        > </div>
        >
        > <div style="width:100%;height:75px;margin:0;padding:0;">Footer</div>
        >
        > </body>
        > </html>
        >
        > Any suggestions?
        >
        >
      • Neil Creek
        Thank you for the suggestion. I had another suggestion from a different formula, and this is how I have resolved it:
        Message 3 of 11 , Apr 2, 2007
        • 0 Attachment
          Thank you for the suggestion. I had another suggestion from a
          different formula, and this is how I have resolved it:

          <html>
          <head></head>
          <body style="margin:0;padding:0;">

          <div
          style="position:fixed;top:0pxwidth:100%;height:75px;margin:0;padding:0;">header</div>

          <div style="width:100%;height:auto;margin:0;padding:0;">

          <div style="width:100%;height:100%;"><embed
          src="media/creek-061112-045-pano.mov" width="100%" height="100%"
          autoplay="true" scale="tofit"></div>

          </div>

          <div
          style="position:fixed;bottom:0px;width:100%;height:75px;margin:0;padding:0;">Footer</div>

          </body>
          </html>

          --- In PanoToolsNG@yahoogroups.com, "Flemming V. Larsen" <fvl@...> wrote:
          >
          > You can use <table> instead of <div>
          >
          > <table style="width:100%;height:100%;margin:0;padding:0;border:none;">
          > <tr>
          > <td style="width:100%;height:75px;margin:0;padding:0;">header</td>
          > </tr>
          > <tr>
          > <td style="width:100%;height:100%;"><embed
          > src="media/creek-061112-045-pano.mov" width="100%" height="100%"
          > autoplay="true" scale="tofit"></td>
          > </tr>
          > <tr>
          > <td style="width:100%;height:75px;margin:0;padding:0;">Footer</td>
          > </table>
          >
        • Yuval Levy
          the embed does not display in IE. you d need to add an object tag for that. Yuv ... -- Copyright © 2007 Yuval Levy Verbatim copying and distribution on other
          Message 4 of 11 , Apr 2, 2007
          • 0 Attachment
            the embed does not display in IE. you'd need to add an object tag for that.

            Yuv


            Neil Creek wrote:
            > Thank you for the suggestion. I had another suggestion from a
            > different formula, and this is how I have resolved it:
            >
            > <html>
            > <head></head>
            > <body style="margin:0;padding:0;">
            >
            > <div
            > style="position:fixed;top:0pxwidth:100%;height:75px;margin:0;padding:0;">header</div>
            >
            > <div style="width:100%;height:auto;margin:0;padding:0;">
            >
            > <div style="width:100%;height:100%;"><embed
            > src="media/creek-061112-045-pano.mov" width="100%" height="100%"
            > autoplay="true" scale="tofit"></div>
            >
            > </div>
            >
            > <div
            > style="position:fixed;bottom:0px;width:100%;height:75px;margin:0;padding:0;">Footer</div>
            >
            > </body>
            > </html>
            >
            > --- In PanoToolsNG@yahoogroups.com, "Flemming V. Larsen" <fvl@...> wrote:
            >> You can use <table> instead of <div>
            >>
            >> <table style="width:100%;height:100%;margin:0;padding:0;border:none;">
            >> <tr>
            >> <td style="width:100%;height:75px;margin:0;padding:0;">header</td>
            >> </tr>
            >> <tr>
            >> <td style="width:100%;height:100%;"><embed
            >> src="media/creek-061112-045-pano.mov" width="100%" height="100%"
            >> autoplay="true" scale="tofit"></td>
            >> </tr>
            >> <tr>
            >> <td style="width:100%;height:75px;margin:0;padding:0;">Footer</td>
            >> </table>
            >>
            >
            >
            >


            --
            Copyright © 2007 Yuval Levy
            Verbatim copying and distribution on other medium than YahooGroup
            strictly forbidden.
          • Erik Krause
            ... This won t work for Internet Explorer 6 and IE 7 in Quirks mode. Here is a useful link BTW how to run multiple versions of IE:
            Message 5 of 11 , Apr 2, 2007
            • 0 Attachment
              On Monday, April 02, 2007 at 12:15, Neil Creek wrote:

              > style="position:fixed; ...

              This won't work for Internet Explorer 6 and IE 7 in Quirks mode.

              Here is a useful link BTW how to run multiple versions of IE:
              http://tredosoft.com/Multiple_IE

              best regards
              --
              Copyright (c) 2007 Erik Krause
              Verbatim copying and distribution strictly forbidden
              except those allowed in wiki.panotools.org/User_Guidelines
            • Neil Creek
              Ahh you re right. Thanks for pointing that out. I ve tried using the object tag, as shown in the panotools wiki (
              Message 6 of 11 , Apr 2, 2007
              • 0 Attachment
                Ahh you're right. Thanks for pointing that out.

                I've tried using the object tag, as shown in the panotools wiki (
                http://wiki.panotools.org/HTML_code_for_several_viewers#Fullscreen ),
                but it's still not showing up in MSIE6 (I haven't tested 7 yet). Have
                I don't anything wrong?

                http://neil.creek.name/panoramas/creek-061112-045-pano.html

                <div style="width:100%;height:100%;">
                <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
                codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="100%"
                height="100%">
                <param name="scale" value="tofit">
                <param name="kioskmode" value="true">
                <param name="controller" value="false">
                <param name="cache" value="false">
                <param name="src" value="media/creek-061112-045-pano.mov">
                <embed src="media/creek-061112-045-pano.mov" width="100%"
                height="100%" autoplay="true" scale="tofit"></embed>
                </object>
                </div>

                --- In PanoToolsNG@yahoogroups.com, Yuval Levy <yahoo06@...> wrote:
                >
                > the embed does not display in IE. you'd need to add an object tag
                for that.
                >
                > Yuv
                >
              • Yuval Levy
                maybe ? besides that, the code below looks good but does not display in MSIE7. Yuv ... -- Copyright © 2007 Yuval Levy
                Message 7 of 11 , Apr 2, 2007
                • 0 Attachment
                  maybe <param name="autoplay" value="true"> ?

                  besides that, the code below looks good but does not display in MSIE7.

                  Yuv


                  Neil Creek wrote:
                  > Ahh you're right. Thanks for pointing that out.
                  >
                  > I've tried using the object tag, as shown in the panotools wiki (
                  > http://wiki.panotools.org/HTML_code_for_several_viewers#Fullscreen ),
                  > but it's still not showing up in MSIE6 (I haven't tested 7 yet). Have
                  > I don't anything wrong?
                  >
                  > http://neil.creek.name/panoramas/creek-061112-045-pano.html
                  >
                  > <div style="width:100%;height:100%;">
                  > <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
                  > codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="100%"
                  > height="100%">
                  > <param name="scale" value="tofit">
                  > <param name="kioskmode" value="true">
                  > <param name="controller" value="false">
                  > <param name="cache" value="false">
                  > <param name="src" value="media/creek-061112-045-pano.mov">
                  > <embed src="media/creek-061112-045-pano.mov" width="100%"
                  > height="100%" autoplay="true" scale="tofit"></embed>
                  > </object>
                  > </div>
                  >
                  > --- In PanoToolsNG@yahoogroups.com, Yuval Levy <yahoo06@...> wrote:
                  >> the embed does not display in IE. you'd need to add an object tag
                  > for that.
                  >> Yuv
                  >>
                  >
                  >
                  >


                  --
                  Copyright © 2007 Yuval Levy
                  Verbatim copying and distribution on other medium than YahooGroup
                  strictly forbidden.
                • Sacha Griffin
                  You ve set a percentage as your heights and width, which must be calculated from their inherited container. If you haven t set a w & h of their inherited
                  Message 8 of 11 , Apr 3, 2007
                  • 0 Attachment
                    You've set a percentage as your heights and width, which must be calculated
                    from their inherited container.



                    If you haven't set a w & h of their inherited containers I would expect
                    this.



                    You probably have to go back to html body or something.



                    Do a google search for "100% height css" and you should find the right
                    parent css declaration.



                    If are you trying to use pure css, its necessary to stop and learn the core
                    basics so you don't tear your hair out every 10 minutes.



                    Sacha Griffin
                    Southern Digital Solutions LLC
                    www.southern-digital.com
                    www.seeit360.net
                    www.ezphotosafe.com
                    404-551-4275
                    404-731-7798

                    _____

                    From: Yuval Levy [mailto:yahoo06@...]
                    Sent: Tuesday, April 03, 2007 12:01 AM
                    To: PanoToolsNG@yahoogroups.com
                    Subject: Re: [PanoToolsNG] Re: Fluid height embed between fixed height
                    head/foot



                    maybe <param name="autoplay" value="true"> ?

                    besides that, the code below looks good but does not display in MSIE7.

                    Yuv

                    Neil Creek wrote:
                    > Ahh you're right. Thanks for pointing that out.
                    >
                    > I've tried using the object tag, as shown in the panotools wiki (
                    > http://wiki.
                    <http://wiki.panotools.org/HTML_code_for_several_viewers#Fullscreen>
                    panotools.org/HTML_code_for_several_viewers#Fullscreen ),
                    > but it's still not showing up in MSIE6 (I haven't tested 7 yet). Have
                    > I don't anything wrong?
                    >
                    > http://neil. <http://neil.creek.name/panoramas/creek-061112-045-pano.html>
                    creek.name/panoramas/creek-061112-045-pano.html
                    >
                    > <div style="width:100%;height:100%;">
                    > <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
                    > codebase="http://www.apple. <http://www.apple.com/qtactivex/qtplugin.cab>
                    com/qtactivex/qtplugin.cab" width="100%"
                    > height="100%">
                    > <param name="scale" value="tofit">
                    > <param name="kioskmode" value="true">
                    > <param name="controller" value="false">
                    > <param name="cache" value="false">
                    > <param name="src" value="media/creek-061112-045-pano.mov">
                    > <embed src="media/creek-061112-045-pano.mov" width="100%"
                    > height="100%" autoplay="true" scale="tofit"></embed>
                    > </object>
                    > </div>
                    >
                    > --- In PanoToolsNG@ <mailto:PanoToolsNG%40yahoogroups.com>
                    yahoogroups.com, Yuval Levy <yahoo06@...> wrote:
                    >> the embed does not display in IE. you'd need to add an object tag
                    > for that.
                    >> Yuv
                    >>
                    >
                    >
                    >

                    --
                    Copyright C 2007 Yuval Levy
                    Verbatim copying and distribution on other medium than YahooGroup
                    strictly forbidden.





                    [Non-text portions of this message have been removed]
                  • Neil Creek
                    In the end, I ve used a table to get the effect I want. It s simple, it s cross-platofrm compatible, and it s easy to debug. This is the simplified code I
                    Message 9 of 11 , Apr 3, 2007
                    • 0 Attachment
                      In the end, I've used a table to get the effect I want. It's simple,
                      it's cross-platofrm compatible, and it's easy to debug. This is the
                      simplified code I ended up using.

                      http://neil.creek.name/panoramas/creek-061112-045-pano.html

                      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
                      <html>
                      <head>
                      </head>
                      <body style="background-color:#4A4253;margin:0;padding:0;">

                      <table cellpadding="0" cellspacing="0" width="100%" height="100%
                      border="0">

                      <tr><td height="75px" background="../images/pano-header.gif">
                      Header
                      </td></tr>

                      <tr><td height="*">
                      <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
                      codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="100%"
                      height="100%">
                      <param name="scale" value="tofit">
                      <param name="cache" value="false">
                      <param name="src" value="media/creek-061112-045-pano.mov">
                      <embed src="media/creek-061112-045-pano.mov" width="100%"
                      height="100%" scale="tofit"></embed>
                      </object>
                      </td></tr>

                      <tr><td height="75px" background="../images/pano-footer.gif">

                      <table width="100%" cellpadding="5px" border="0px">
                      <tr>
                      <td>Footer</td>
                      </tr></table>

                      </td></tr>
                      </table>

                      </body>
                      </html>
                    • Flemming V. Larsen
                      The table setup works fine - but IE(6) shows a scrollbar! Don t understand why? Anyone know how to deal with that? Would it help to set the table height to
                      Message 10 of 11 , Apr 4, 2007
                      • 0 Attachment
                        The table setup works fine - but IE(6) shows a scrollbar! Don't understand
                        why?
                        Anyone know how to deal with that? Would it help to set the table height to
                        99%?

                        And about your panorama: It could do with some retouching of nadir and
                        zenith.

                        - Flemming
                      • Sacha Griffin
                        Scroll = no in the body tag. It can be in the tag or your css. Sacha Griffin Southern Digital Solutions LLC www.southern-digital.com www.seeit360.net
                        Message 11 of 11 , Apr 4, 2007
                        • 0 Attachment
                          Scroll = no in the body tag.



                          It can be in the tag or your css.



                          Sacha Griffin
                          Southern Digital Solutions LLC
                          www.southern-digital.com
                          www.seeit360.net
                          www.ezphotosafe.com
                          404-551-4275
                          404-731-7798

                          _____

                          From: Flemming V. Larsen [mailto:fvl@...]
                          Sent: Wednesday, April 04, 2007 5:12 AM
                          To: PanoToolsNG@yahoogroups.com
                          Subject: Re: [PanoToolsNG] Re: Fluid height embed between fixed height
                          head/foot



                          The table setup works fine - but IE(6) shows a scrollbar! Don't understand
                          why?
                          Anyone know how to deal with that? Would it help to set the table height to
                          99%?

                          And about your panorama: It could do with some retouching of nadir and
                          zenith.

                          - Flemming





                          [Non-text portions of this message have been removed]
                        Your message has been successfully submitted and would be delivered to recipients shortly.