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

placing images inline with each other

Expand Messages
  • Mike Breiding - Morgantown WV
    Howdy! Can anyone tell me how to place more than one image inline here: http://juniornaturecamp.org/2011/voice/ CSS:
    Message 1 of 13 , Oct 29, 2011
    • 0 Attachment
      Howdy!
      Can anyone tell me how to place more than one image inline here:

      http://juniornaturecamp.org/2011/voice/
      CSS: http://juniornaturecamp.org/2011/voice/php-nav-index_style.css

      The single images are in a centered <div> and I would like to have the
      multiple images inline and centered as well.

      Thanks,
      -Mike
    • loro
      ... Do you mean you want them side by side in a row, not one under the other as they are where it says Copperheads by Sean, Caroline and Donae ? If so, don t
      Message 2 of 13 , Oct 29, 2011
      • 0 Attachment
        At 22:53 2011-10-29, you wrote:
        >Howdy!
        >Can anyone tell me how to place more than one image inline here:
        >
        >http://juniornaturecamp.org/2011/voice/
        >CSS: http://juniornaturecamp.org/2011/voice/php-nav-index_style.css
        >
        >The single images are in a centered <div> and I would like to have the
        >multiple images inline and centered as well.

        Do you mean you want them side by side in a row, not one under the
        other as they are where it says "Copperheads by Sean, Caroline and
        Donae"? If so, don't make them display: block as they are now.

        Lotta
      • fw7oaks
        Isn t the place to start looking ? fw ________________________________ From: Mike Breiding - Morgantown WV To: NoteTab HTML
        Message 3 of 13 , Oct 30, 2011
        • 0 Attachment
          Isn't <span> the place to start looking ?

          fw


          ________________________________
          From: Mike Breiding - Morgantown WV <mike@...>
          To: NoteTab HTML <ntb-HTML@...>
          Sent: Saturday, October 29, 2011 10:53 PM
          Subject: [NH] placing images inline with each other


           
          Howdy!
          Can anyone tell me how to place more than one image inline here:

          http://juniornaturecamp.org/2011/voice/
          CSS: http://juniornaturecamp.org/2011/voice/php-nav-index_style.css

          The single images are in a centered <div> and I would like to have the
          multiple images inline and centered as well.

          Thanks,
          -Mike



          [Non-text portions of this message have been removed]
        • Mike Breiding - Morgantown WV
          ... Yep. That s it. But, if I change that then the player graphics are inline as well. I tried wrapping the 3 camper images in
          Message 4 of 13 , Oct 30, 2011
          • 0 Attachment
            On 10/29/2011 5:19 PM, loro wrote:
            > At 22:53 2011-10-29, you wrote:
            >> Howdy!
            >> Can anyone tell me how to place more than one image inline here:
            >>
            >> http://juniornaturecamp.org/2011/voice/
            >> CSS: http://juniornaturecamp.org/2011/voice/php-nav-index_style.css
            >>
            >> The single images are in a centered<div> and I would like to have the
            >> multiple images inline and centered as well.
            >
            > Do you mean you want them side by side in a row, not one under the
            > other as they are where it says "Copperheads by Sean, Caroline and
            > Donae"? If so, don't make them display: block as they are now.


            Yep. That's it.
            But, if I change that then the player graphics are inline as well.
            I tried wrapping the 3 "camper" images in <div style="display: block">
            buy that had no effect.
            Thanks,
            -Mike
          • Mike Breiding - Morgantown WV
            ... I tried wrapping the 3 images in with this CSS .inline {display:block} But, it had no efffect. Thanks, -Mike
            Message 5 of 13 , Oct 30, 2011
            • 0 Attachment
              On 10/30/2011 4:25 AM, fw7oaks wrote:
              > Isn't<span> the place to start looking ?

              I tried wrapping the 3 images in <span class="inline"> with this CSS
              .inline {display:block}
              But, it had no efffect.

              Thanks,
              -Mike

              > ________________________________
              > From: Mike Breiding - Morgantown WV<mike@...>
              > To: NoteTab HTML<ntb-HTML@...>
              > Sent: Saturday, October 29, 2011 10:53 PM
              > Subject: [NH] placing images inline with each other
              >
              > Howdy!
              > Can anyone tell me how to place more than one image inline here:
              >
              > http://juniornaturecamp.org/2011/voice/
              > CSS: http://juniornaturecamp.org/2011/voice/php-nav-index_style.css
              >
              > The single images are in a centered<div> and I would like to have the
              > multiple images inline and centered as well.
              >
              > Thanks,
              > -Mike
            • Mike Breiding - Morgantown WV
              FYI I inserted a stitched graphic below the 3 horizontal images I would like to see inline. -mb
              Message 6 of 13 , Oct 30, 2011
              • 0 Attachment
                FYI
                I inserted a stitched graphic below the 3 horizontal images I would like
                to see inline.
                -mb
                ------------------------
                On 10/29/2011 4:53 PM, Mike Breiding - Morgantown WV wrote:
                > Howdy!
                > Can anyone tell me how to place more than one image inline here:
                >
                > http://juniornaturecamp.org/2011/voice/
                > CSS: http://juniornaturecamp.org/2011/voice/php-nav-index_style.css
                >
                > The single images are in a centered<div> and I would like to have the
                > multiple images inline and centered as well.
                >
                > Thanks,
                > -Mike
              • Margaret Peloquin
                You might try the suggestions in this article: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ This table is helpful
                Message 7 of 13 , Oct 30, 2011
                • 0 Attachment
                  You might try the suggestions in this article:
                  http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

                  This table is helpful for compatibility:
                  http://www.quirksmode.org/css/display.html


                  On Sun, Oct 30, 2011 at 4:50 AM, Mike Breiding - Morgantown WV <
                  mike@...> wrote:

                  > **
                  >
                  >
                  > FYI
                  > I inserted a stitched graphic below the 3 horizontal images I would like
                  > to see inline.
                  > -mb
                  > ------------------------
                  > On 10/29/2011 4:53 PM, Mike Breiding - Morgantown WV wrote:
                  > > Howdy!
                  > > Can anyone tell me how to place more than one image inline here:
                  > >
                  > > http://juniornaturecamp.org/2011/voice/
                  > > CSS: http://juniornaturecamp.org/2011/voice/php-nav-index_style.css
                  > >
                  > > The single images are in a centered<div> and I would like to have the
                  > > multiple images inline and centered as well.
                  > >
                  > > Thanks,
                  > > -Mike
                  >
                  >



                  --
                  ++++++++++++++++++++++++++++++++++++++++++++++++++++
                  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


                  [Non-text portions of this message have been removed]
                • Dave
                  Hi Mike why can t you a small table three in row and center the table. THANKYOU DAVE M ... From: Mike Breiding - Morgantown WV To:
                  Message 8 of 13 , Oct 30, 2011
                  • 0 Attachment
                    Hi Mike
                    why can"t you a small table three in row and center the table.
                    THANKYOU DAVE M

                    ----- Original Message -----
                    From: "Mike Breiding - Morgantown WV" <mike@...>
                    To: <ntb-html@yahoogroups.com>
                    Sent: Sunday, October 30, 2011 8:50 PM
                    Subject: Re: [NH] placing images inline with each other


                    > FYI
                    > I inserted a stitched graphic below the 3 horizontal images I would like
                    > to see inline.
                    > -mb
                    > ------------------------
                    > On 10/29/2011 4:53 PM, Mike Breiding - Morgantown WV wrote:
                    >> Howdy!
                    >> Can anyone tell me how to place more than one image inline here:
                    >>
                    >> http://juniornaturecamp.org/2011/voice/
                    >> CSS: http://juniornaturecamp.org/2011/voice/php-nav-index_style.css
                    >>
                    >> The single images are in a centered<div> and I would like to have the
                    >> multiple images inline and centered as well.
                    >>
                    >> Thanks,
                    >> -Mike
                    >
                    >
                    > ------------------------------------
                    >
                    > Fookes Software: http://www.fookes.com/
                    > NoteTab website: http://www.notetab.com/
                    > NoteTab Discussion Lists: http://www.notetab.com/groups.php
                    >
                    > ***
                    > Yahoo! Groups Links
                    >
                    >
                    >
                  • Mike Breiding - Morgantown WV
                    ... Good info, but way more than I want to get into for this use. I think I will just go with the stitched images. Thanks! -mb
                    Message 9 of 13 , Oct 30, 2011
                    • 0 Attachment
                      On 10/30/2011 8:28 AM, Margaret Peloquin wrote:
                      > You might try the suggestions in this article:
                      > http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

                      Good info, but way more than I want to get into for this use.
                      I think I will just go with the stitched images.

                      Thanks!
                      -mb



                      > This table is helpful for compatibility:
                      > http://www.quirksmode.org/css/display.html
                      >
                      >
                      > On Sun, Oct 30, 2011 at 4:50 AM, Mike Breiding - Morgantown WV<
                      > mike@...> wrote:
                      >
                      >> **
                      >>
                      >>
                      >> FYI
                      >> I inserted a stitched graphic below the 3 horizontal images I would like
                      >> to see inline.
                      >> -mb
                      >> ------------------------
                      >> On 10/29/2011 4:53 PM, Mike Breiding - Morgantown WV wrote:
                      >>> Howdy!
                      >>> Can anyone tell me how to place more than one image inline here:
                      >>>
                      >>> http://juniornaturecamp.org/2011/voice/
                      >>> CSS: http://juniornaturecamp.org/2011/voice/php-nav-index_style.css
                      >>>
                      >>> The single images are in a centered<div> and I would like to have the
                      >>> multiple images inline and centered as well.
                      >>>
                      >>> Thanks,
                      >>> -Mike
                      >>
                      >>
                      >
                      >
                      >
                    • Mick Housel
                      ... Mike, I think you missed the don t in this line in Lotta s reply : If so, don t make them display: block as they are now. Here s a quick and easy way to
                      Message 10 of 13 , Oct 30, 2011
                      • 0 Attachment
                        On 10/30/2011 2:38 AM, Mike Breiding - Morgantown WV wrote:
                        > On 10/29/2011 5:19 PM, loro wrote:
                        >> At 22:53 2011-10-29, you wrote:
                        >>> Howdy!
                        >>> Can anyone tell me how to place more than one image inline here:
                        >>>
                        >>> http://juniornaturecamp.org/2011/voice/
                        >>> CSS: http://juniornaturecamp.org/2011/voice/php-nav-index_style.css
                        >>>
                        >>> The single images are in a centered<div> and I would like to have the
                        >>> multiple images inline and centered as well.
                        >>
                        >> Do you mean you want them side by side in a row, not one under the
                        >> other as they are where it says "Copperheads by Sean, Caroline and
                        >> Donae"? If so, don't make them display: block as they are now.
                        >
                        >
                        > Yep. That's it.
                        > But, if I change that then the player graphics are inline as well.
                        > I tried wrapping the 3 "camper" images in<div style="display: block">
                        > buy that had no effect.
                        > Thanks,
                        > -Mike

                        Mike,

                        I think you missed the don't in this line in Lotta's reply :
                        "If so, don't make them display: block as they are now."

                        Here's a quick and easy way to see exactly what display does :
                        <longline>
                        http://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=inline
                        </longline>

                        In your CSS change :
                        .inline {display:block}
                        to
                        #imginline img {display:inline}

                        Move it down to the end of the file so it overrides #intro img, instead
                        of the other way around.

                        In your HTML :
                        Instead of the span, use a named div:
                        <div id="imginline" align="center">
                        . . . .
                        </div>

                        Fixed.

                        One of my favorite tools for debugging code in HTML pages is Firebug.
                        It's an extension for Firefox, there's also a lite version for Google
                        Chrome. With it, you can change your HTML or CSS on the fly and see
                        immediately how it affects the page. There's also many more ways in
                        which Firebug can help with site debugging, enough that I won't try to
                        list them :) Here's the page for the Firebug extension for FireFox :
                        http://getfirebug.com/

                        I also find the Web Developer Toolbar extension to be very useful to
                        help see what's really happening with a page. It can be found at :
                        https://addons.mozilla.org/en-US/firefox/addon/web-developer/developers

                        HTH. Have a great day!

                        Mick

                        I speak 3 different languages :
                        1> English
                        2> Sarcasm
                        3> Profanity
                      • Mike Breiding - Morgantown WV
                        ... Right you are! And thanks for pointing out my mis-read of Loro s fix. I used to have firebug installed by somewhere along the line it got whacked! Thanks
                        Message 11 of 13 , Oct 30, 2011
                        • 0 Attachment
                          On 10/30/2011 2:23 PM, Mick Housel wrote:

                          > Mike,
                          >
                          > I think you missed the don't in this line in Lotta's reply :
                          > "If so, don't make them display: block as they are now."
                          >
                          > Here's a quick and easy way to see exactly what display does :
                          > <longline>
                          > http://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=inline
                          > </longline>
                          >
                          > In your CSS change :
                          > .inline {display:block}
                          > to
                          > #imginline img {display:inline}
                          >
                          > Move it down to the end of the file so it overrides #intro img, instead
                          > of the other way around.
                          >
                          > In your HTML :
                          > Instead of the span, use a named div:
                          > <div id="imginline" align="center">
                          > . . . .
                          > </div>
                          >
                          > Fixed.


                          Right you are!
                          And thanks for pointing out my mis-read of Loro's fix.
                          I used to have firebug installed by somewhere along the line it got whacked!

                          Thanks to all.
                          -Mike


                          >
                          > One of my favorite tools for debugging code in HTML pages is Firebug.
                          > It's an extension for Firefox, there's also a lite version for Google
                          > Chrome. With it, you can change your HTML or CSS on the fly and see
                          > immediately how it affects the page. There's also many more ways in
                          > which Firebug can help with site debugging, enough that I won't try to
                          > list them :) Here's the page for the Firebug extension for FireFox :
                          > http://getfirebug.com/
                          >
                          > I also find the Web Developer Toolbar extension to be very useful to
                          > help see what's really happening with a page. It can be found at :
                          > https://addons.mozilla.org/en-US/firefox/addon/web-developer/developers
                          >
                          > HTH. Have a great day!
                          >
                          > Mick
                          >
                          > I speak 3 different languages :
                          > 1> English
                          > 2> Sarcasm
                          > 3> Profanity
                          >
                          >
                          >
                          > ------------------------------------
                          >
                          > Fookes Software: http://www.fookes.com/
                          > NoteTab website: http://www.notetab.com/
                          > NoteTab Discussion Lists: http://www.notetab.com/groups.php
                          >
                          > ***
                          > Yahoo! Groups Links
                          >
                          >
                          >
                          >
                          >
                        • Michael Rawley
                          Hi Mike, You might look at www.normist.co.uk/bungalow. It s done with CSS Regards, Michael rawley
                          Message 12 of 13 , Oct 30, 2011
                          • 0 Attachment
                            Hi Mike,

                            You might look at www.normist.co.uk/bungalow. It's done with CSS

                            Regards,
                            Michael rawley
                          • Mike Breiding - Morgantown WV
                            ... Thanks, Michael. -mb
                            Message 13 of 13 , Oct 30, 2011
                            • 0 Attachment
                              On 10/30/2011 5:22 PM, Michael Rawley wrote:
                              > Hi Mike,
                              > You might look at www.normist.co.uk/bungalow. It's done with CSS
                              > Regards, Michael rawley

                              Thanks, Michael.
                              -mb
                              >
                            Your message has been successfully submitted and would be delivered to recipients shortly.