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

Re: [NH] placing images inline with each other

Expand Messages
  • 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 1 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 2 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 3 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 4 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.