Box with Image + Footer; how to avoid max-width, max-height?

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Sven C. Koehler
    #1

    Box with Image + Footer; how to avoid max-width, max-height?

    Hello,

    the html below displays a box (#container) with a #footer and
    an #image inside. Is there any way how I could get rid of
    declaring max-width and max-height for the #image?
    The #image should fill up all the space left in the #container.

    <html><head></head><body><sty le type="text/css">
    #image { max-width: 200px; max-height: 90px; }
    #container { position: fixed; width: 200px;
    height: 100px; background-color: gray; }
    #footer { position: absolute; bottom: 5px; }
    </style>
    <div id='container'>
    <img id='image' src="http://www.google.com/intl/en_ALL/images/
    logo.gif"/>
    <div id='footer'>foo ter</div>
    </div>

    I'd be very thankful for any help with this issue.

    Best,

    Sven

    Tags: None
    • dorayme
      #2
      Re: Box with Image + Footer; how to avoid max-width, max-height?

      In article
      <1176302228.132 030.59820@d57g2 000hsg.googlegr oups.com>,
      "Sven C. Koehler" <skoehler@gmail .comwrote:
      Hello,
      >
      the html below displays a box (#container) with a #footer and
      an #image inside. Is there any way how I could get rid of
      declaring max-width and max-height for the #image?
      The #image should fill up all the space left in the #container.
      >
      <html><head></head><body><sty le type="text/css">
      #image { max-width: 200px; max-height: 90px; }
      #container { position: fixed; width: 200px;
      height: 100px; background-color: gray; }
      #footer { position: absolute; bottom: 5px; }
      </style>
      <div id='container'>
      <img id='image' src="http://www.google.com/intl/en_ALL/images/
      logo.gif"/>
      <div id='footer'>foo ter</div>
      </div>
      >
      I'd be very thankful for any help with this issue.
      >
      Best,
      >
      Sven
      Why are you putting the footer in the container? Or the style
      below the head? If you want to get rid of the max-width, what is
      stopping you? Nothing is stopping you from using width instead.

      Is this what you want:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <title>Cats in sinks</title>

      <style type="text/css">
      #image {width: 100%; height: 100%; }
      #container { position: fixed; width: 200px;
      height: 100px; background-color: gray; }
      #footer { position: absolute; bottom: 5px; }
      </style>
      </head>

      <body>
      <div id="container" >
      <img id='image'
      src="http://www.google.com/intl/en_all/images/logo.gif"
      alt="google logo"></div>
      <div id="footer">foo ter</div>

      </body>
      </html>

      ?

      Oops... I forgot, John Hosking is dealing with the case of cats
      in sinks.

      --
      dorayme

        Comment

        • John Hosking
          #3
          Re: Box with Image + Footer; how to avoid max-width, max-height?

          dorayme wrote:
          Why are you putting the footer in the container? Or the style
          below the head? If you want to get rid of the max-width, what is
          stopping you? Nothing is stopping you from using width instead.
          >
          Is this what you want:
          >
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">
          <html>
          <head>
          <title>Cats in sinks</title>
          ....
          >
          <body>
          <div id="container" >
          <img id='image'
          src="http://www.google.com/intl/en_all/images/logo.gif"
          alt="google logo"></div>
          <div id="footer">foo ter</div>
          </body>
          </html>
          ?
          >
          Oops... I forgot, John Hosking is dealing with the case of cats
          in sinks.
          LOL

          Actually, I ended up deciding to put the cats on the <tableand let the
          chips fall where they may.

          You are welcome to put any footers under the container and the cat under
          the sink, as you feel appropriate.

          --
          John

            Comment

            • Sven C. Koehler
              #4
              Re: Box with Image + Footer; how to avoid max-width, max-height?

              On Apr 11, 11:49 pm, dorayme <doraymeRidT... @optusnet.com.a uwrote:
              #image {width: 100%; height: 100%; }
              Heh.

              #image {max-width: 100%; max-height: 100%}

              That's what I wanted to do. Thanks for pointing out the obvious!

              -S.

                Comment

                Previous template Next
                Working...