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

setting width of a graphic

Expand Messages
  • Mike Breiding - Morgantown WV
    Greetings, I am trying to adjust the size of the weather sticker on this page: http://epicroadtrips.us/2014/az/temp/ I added: and
    Message 1 of 5 , Jan 19
    View Source
    • 0 Attachment
      Greetings,
      I am trying to adjust the size of the weather sticker on this page:
      http://epicroadtrips.us/2014/az/temp/

      I added: <div style="width: 250px">
      and changed the original SPAN width from 350 to 250px but this does has
      no effect.

      Any ideas?
      Thanks,
      -Mike

      ---
      This email is free from viruses and malware because avast! Antivirus protection is active.
      http://www.avast.com
    • Margaret Peloquin
      Mike, The width of your division block is indeed 250px. But content can expand beyond/over your block. Try applying a style to your image For example:
      Message 2 of 5 , Jan 19
      View Source
      • 0 Attachment
        Mike,   The width of your division block is indeed 250px.  But content can expand beyond/over your block.  Try applying a style to your image For example:
        <img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_clean2day_cond&amp;airportcode=KTUS&amp;ForcedCity=Green%20Valley&amp;ForcedState=AZ&amp;zip=85614&amp;language=EN" alt="Find more about Weather in Green Valley, AZ" style="width: 250px;" />

        This may not work exactly as you want and you may have to adjust the width of your image to fit within your division block.


        On Sun, Jan 19, 2014 at 8:27 AM, Mike Breiding - Morgantown WV <mike@...> wrote:
         


        Greetings,
        I am trying to adjust the size of the weather sticker on this page:
        http://epicroadtrips.us/2014/az/temp/

        I added: <div style="width: 250px">
        and changed the original SPAN width from 350 to 250px but this does has
        no effect.

        Any ideas?
        Thanks,
        -Mike

        ---
        This email is free from viruses and malware because avast! Antivirus protection is active.
        http://www.avast.com




        --
        ++++++++++++++++++++++++++++++++++++++++++++++++++++
        Margaret Peloquin, Head Librarian, Professor - EVC
        Austin Community College
        3401 Webberville Rd, Austin, Texas 78702
        512.223.5117) || Fax: 512.223.5111
        peloquin@... || http://library.austincc.edu
      • Mike Breiding - Morgantown WV
        ... bin/banner/ban/wxBanner?bannertype=wu_clean2day_cond&airportcode =KTUS&ForcedCity=Green%20Valley&ForcedState=AZ&zip=85614& ;language=EN
        Message 3 of 5 , Jan 19
        View Source
        • 0 Attachment
          On 1/19/2014 8:01 AM, Margaret Peloquin wrote:

          > <img src="http://weathersticker.wunderground.com/weathersticker/cgi-
          bin/banner/ban/wxBanner?bannertype=wu_clean2day_cond&airportcode
          =KTUS&ForcedCity=Green%20Valley&ForcedState=AZ&zip=85614&
          ;language=EN"
          > alt="Find more about Weather in Green Valley, AZ" style="width: 250px;"/>

          Thanks, Margaret.
          That did the trick and looks OK.
          But, at 800x600 it is too bit to fit the left column.
          I wonder if anyone used resolutions this low or not anymore.
          I know it used to be a big issue when laying out pages.
          Is it still?

          Thanks for the quick help.
          WV-Mike


          ---
          This email is free from viruses and malware because avast! Antivirus protection is active.
          http://www.avast.com
        • Marcelo Bastos
          Interviewed by CNN on 19/01/2014 12:27, Mike Breiding - Morgantown WV ... Well, as Margaret explained, setting the width of the container box won t affect
          Message 4 of 5 , Jan 19
          View Source
          • 0 Attachment
            Interviewed by CNN on 19/01/2014 12:27, Mike Breiding - Morgantown WV
            told the world:
            > Greetings,
            > I am trying to adjust the size of the weather sticker on this page:
            > http://epicroadtrips.us/2014/az/temp/
            >
            > I added: <div style="width: 250px">
            > and changed the original SPAN width from 350 to 250px but this does has
            > no effect.
            >
            > Any ideas?

            Well, as Margaret explained, setting the width of the container box
            won't affect automatically the width of the contained objects, if they
            have their own set widths.

            If the contained object/image is larger than the (fixed-size) container,
            the container won't be stretched; instead, the object will overflow the
            limits of the container. This can be better understood by setting
            visible, contrasting borders and/or background-colors for all involved
            objects and containers.

            In the case of images, even if you don't explicitly set width and height
            parameters, the browser will check the actual dimensions of the image
            file AND ACT AS IF THOSE WERE EXPLICITLY SUPPLIED and therefore treat
            the image as a fixed-size object. (Except that this information won't be
            available on the initial page load, causing a redraw when the browser
            finally gets around to download the image. Avoiding this redraw is the
            reason why supplying explicit dimensions for images is usually encouraged).

            However, there is a way to make an image adjust to the container. Just
            set the "width" parameter of the image to a percentage instead of a
            fixed value (say, "100%" if you want the image to take the full width of
            the container). This leverages the fact that browsers, when supplied
            with just *one* of the dimensions of a image, will resize the image
            proportionally in *both* dimensions in order to keep the image aspect
            ration.

            A pair of related styles that are very useful if you use percentage
            widths are "max-width" and "min-width."

            I use these to make auto-resizable images (and entire pages, for that
            matter).

            For instance, for text pieces, very long lines are tiresome to read, so
            I want to avoid 2000-px width columns on widescreen monitors. However,
            if I set a fixed width for the container (like, say, 900 px) I run the
            risk of introducing horizontal scrolling in a smartphone, which is an
            horrible user experience. So in many text-only pages I use this style:

            body {width:1oo%;
            max-width:900px;
            margin-left:auto;
            margin-right:auto;}

            Say now I have a large illustration in that text piece -- like, an
            800x600px image. I want it to shrink in small screens, but I don't want
            it to be actually stretched beyond the dimensions of the image (which
            often introduces unpleasant visual artifacts). So I place it like this:

            <div style="width:100%; max-width:800px; margin: 1em auto;">
            <img src="example.jpg" width="100%" alt="This is a sample">
            </div>


            --
            MCBastos

            This message has been protected with the 2ROT13 algorithm. Unauthorized use will be prosecuted under the DMCA.
            -=-=-
            ... Sent from my Z-Machine.
            * Added by TagZilla 0.7a1 running on Seamonkey 2.23 *
            Get it at http://xsidebar.mozdev.org/modifiedmailnews.html#tagzilla
          • Mike Breiding - Morgantown WV
            A most excellent tutorial on this topic! Thanks a bunch. -Mike ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... This email is free from viruses and malware because avast!
            Message 5 of 5 , Jan 19
            View Source
            • 0 Attachment
              A most excellent tutorial on this topic!
              Thanks a bunch.
              -Mike
              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

              On 1/19/2014 9:44 AM, Marcelo Bastos wrote:
              > Interviewed by CNN on 19/01/2014 12:27, Mike Breiding - Morgantown WV
              > told the world:
              > > Greetings,
              > > I am trying to adjust the size of the weather sticker on this page:
              > > http://epicroadtrips.us/2014/az/temp/
              > >
              > > I added: <div style="width: 250px">
              > > and changed the original SPAN width from 350 to 250px but this does has
              > > no effect.
              > >
              > > Any ideas?
              >
              > Well, as Margaret explained, setting the width of the container box
              > won't affect automatically the width of the contained objects, if they
              > have their own set widths.
              >
              > If the contained object/image is larger than the (fixed-size) container,
              > the container won't be stretched; instead, the object will overflow the
              > limits of the container. This can be better understood by setting
              > visible, contrasting borders and/or background-colors for all involved
              > objects and containers.
              >
              > In the case of images, even if you don't explicitly set width and height
              > parameters, the browser will check the actual dimensions of the image
              > file AND ACT AS IF THOSE WERE EXPLICITLY SUPPLIED and therefore treat
              > the image as a fixed-size object. (Except that this information won't be
              > available on the initial page load, causing a redraw when the browser
              > finally gets around to download the image. Avoiding this redraw is the
              > reason why supplying explicit dimensions for images is usually encouraged).
              >
              > However, there is a way to make an image adjust to the container. Just
              > set the "width" parameter of the image to a percentage instead of a
              > fixed value (say, "100%" if you want the image to take the full width of
              > the container). This leverages the fact that browsers, when supplied
              > with just *one* of the dimensions of a image, will resize the image
              > proportionally in *both* dimensions in order to keep the image aspect
              > ration.
              >
              > A pair of related styles that are very useful if you use percentage
              > widths are "max-width" and "min-width."
              >
              > I use these to make auto-resizable images (and entire pages, for that
              > matter).
              >
              > For instance, for text pieces, very long lines are tiresome to read, so
              > I want to avoid 2000-px width columns on widescreen monitors. However,
              > if I set a fixed width for the container (like, say, 900 px) I run the
              > risk of introducing horizontal scrolling in a smartphone, which is an
              > horrible user experience. So in many text-only pages I use this style:
              >
              > body {width:1oo%;
              > max-width:900px;
              > margin-left:auto;
              > margin-right:auto;}
              >
              > Say now I have a large illustration in that text piece -- like, an
              > 800x600px image. I want it to shrink in small screens, but I don't want
              > it to be actually stretched beyond the dimensions of the image (which
              > often introduces unpleasant visual artifacts). So I place it like this:
              >
              > <div style="width:100%; max-width:800px; margin: 1em auto;">
              > <img src="example.jpg" width="100%" alt="This is a sample">
              > </div>
              >
              > --
              > MCBastos

              ---
              This email is free from viruses and malware because avast! Antivirus protection is active.
              http://www.avast.com
            Your message has been successfully submitted and would be delivered to recipients shortly.