Image in a span issue

Discussion in 'HTML' started by Michael Laplante, Jul 13, 2006.

  1. This is probably an easy thing that I'm overlooking.

    What I'm trying to accomplish:
    An image surrounded by white padding, surrounded by a black border. An image
    caption would appear INSIDE the black border, giving the whole thing a kind
    of annotated "photo" look.

    The images will be either to the left or right with main body text flowing
    around them, or in the center of the page with no text flowing around them,
    i.e. as their own paragraph.

    The code:

    ..floatingright {
    float:right;
    border-style:solid;
    border-width:1px;
    padding:10px;
    margin:5px;
    text-align: center;
    }

    The code above produces the first effect I'm trying to achieve very nicely,
    i.e. captioned photos with main body text flowing nicely around them.

    In the main body, the code is:
    <p><span class="floatingright"><img....><h2>Image caption<h2></span></p>


    However, the code below doesn't work:
    ..centre {
    float:none;
    border-style:solid;
    border-width:1px;
    padding:10px;
    margin:5px;
    text-align: center;
    background-color: White;
    }

    <p align="center"><span class="centre"><img....><h2>Image
    caption<h2></span></p>

    I get the image in the centre of the page, but it isn't surrounded by white
    padding or black border. Instead the padding and border appear in a small
    band at the bottom and behind the image -- as if the image is "too big" for
    the container. Make sense?

    This page is on my hard drive, so no example online posted but I can do, if
    no one can figure it out.

    Must be something easy I'm missing right?

    M
    Michael Laplante, Jul 13, 2006
    #1
    1. Advertising

  2. "Michael Laplante" <> wrote in message
    news:F4wtg.140115$771.108924@edtnps89...
    > This is probably an easy thing that I'm overlooking.


    Belay all. Solved the issue -- using a block level element inside another.
    Using <b> instead of <h2> solves the problem.

    M
    Michael Laplante, Jul 13, 2006
    #2
    1. Advertising

  3. Michael Laplante wrote:
    > "Michael Laplante" <> wrote in message
    > news:F4wtg.140115$771.108924@edtnps89...
    >> This is probably an easy thing that I'm overlooking.

    >
    > Belay all. Solved the issue -- using a block level element inside another.
    > Using <b> instead of <h2> solves the problem.
    >


    Sort of your problem was trying to put a *block* element inside an
    *inline* element. A standard class for me (I use combination of 2
    classes to float images left or right...

    STYLE:
    ..pixbox {
    margin-bottom: 1em; padding: 1em; border: 1px solid black;
    color: black; background-color: silver;
    font-size: .8em; font-family: arial, helvetica, sans-serif;
    }
    ..pixbox IMG { display: block; margin: auto; }
    ..pushright { float: right; margin-left: 1em; }
    ..pushleft { float: left; margin-right: 1em; }



    CODE:

    <div class="pixbox pushright">
    <img src="somepix.jpg" alt=My Pix">
    The caption for pix floated right
    </div>


    or

    <div class="pixbox pushleft">
    <img src="somepix.jpg" alt=My Pix">
    The caption for pix floated left
    </div>


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jul 13, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Fulio Open

    Can span include span?

    Fulio Open, Jun 26, 2009, in forum: HTML
    Replies:
    5
    Views:
    546
    dorayme
    Jun 26, 2009
  2. Stéphane Klein
    Replies:
    2
    Views:
    1,752
    John Nagle
    Mar 30, 2010
  3. Stefan Behnel
    Replies:
    0
    Views:
    482
    Stefan Behnel
    Mar 29, 2010
  4. Dan Bishop

    DataGrid (body only) contained in <span>...</span> tags

    Dan Bishop, Jun 7, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    2
    Views:
    276
    Kilic Beg
    Jun 7, 2004
  5. Wang, Jay
    Replies:
    5
    Views:
    467
    Wang, Jay
    May 25, 2004
Loading...

Share This Page