Question: Aligning an image + text

Discussion in 'HTML' started by Ridefort, Jan 25, 2006.

  1. Ridefort

    Ridefort Guest

    Good evening;

    I need to align an image with some text underneath it, i have made
    something like this:

    <p><img align=right vspace="3" hspace="5" src="image.jpg" alt=""><br>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    Unfortunatly it doesnt do the trick.

    Can someone explain to me how i can align an image to the left/right
    and have some text beneath that is equally aligned as the image?!
    No need to bother with browsertypes or whatever, its just for
    personnal use.

    TIA
    Andre Linoge
    Ridefort, Jan 25, 2006
    #1
    1. Advertising

  2. Ridefort wrote:

    > Good evening;
    >
    > I need to align an image with some text underneath it, i have made
    > something like this:
    >
    > <p><img align=right vspace="3" hspace="5" src="image.jpg" alt=""><br>
    > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    >
    > Unfortunatly it doesnt do the trick.
    >
    > Can someone explain to me how i can align an image to the left/right
    > and have some text beneath that is equally aligned as the image?!
    > No need to bother with browsertypes or whatever, its just for
    > personnal use.
    >
    > TIA
    > Andre Linoge


    CSS:
    ..pixboxleft {
    float: left; margin: 0 .5em .5em 0; border: 1px solid black;
    }
    ..pixboxleft IMG {
    display: block;
    }
    ..pixboxright {
    float: right; margin: 0 0 .5em .5em; border: 1px solid black;
    }
    ..pixboxright IMG {
    display: block;
    }



    HTML:
    <div class="pixboxleft">
    <img src="SomeImage.jpg" alt="some image">
    Just some text about the image
    </div>

    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ...


    I use a border to show you what it was doing, if your want to constrain
    the image text to the width of the image, i.e., make it wrap rather than
    expand the DIV, then you need to explicitly set a width to the DIV
    accordingly

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jan 25, 2006
    #2
    1. Advertising

  3. Ridefort

    dorayme Guest

    In article <>,
    Ridefort <> wrote:

    > Good evening;
    >
    > I need to align an image with some text underneath it, i have made
    > something like this:
    >
    > <p><img align=right vspace="3" hspace="5" src="image.jpg" alt=""><br>
    > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    >
    > Unfortunatly it doesnt do the trick.
    >
    > Can someone explain to me how i can align an image to the left/right
    > and have some text beneath that is equally aligned as the image?!


    When you say equally aligned, this might mean "underneath the
    picture" wherever the pic is. There is a further thing you might
    be wanting: where (left, right, or centred) under the pic.

    If you want quick and simple and on the left and text left under
    pic, this should work:

    <div style="width:Wpx">
    <img src="image.jpg" width="W" height="H" alt="some text"></br>
    Text beneath
    </div>

    If you want the pic and text to have some grace from the margin,
    you can use some extras in the css style like style="width:Wpx;
    margin-left:20px"

    If you want better control altogether, and better practice, take
    Jonathan's advice. In which case you better make a separate css
    sheet and link it in the head to the html...

    --
    dorayme
    dorayme, Jan 25, 2006
    #3
  4. Ridefort

    David Graham Guest

    > CSS:
    > .pixboxleft IMG {
    > display: block;
    > }


    Hi
    I understand your css OK but what is the display: block; for?
    I commented this out and it doesn't seem to do anything. Why can't the img
    element remain an inline element?
    thanks
    David
    David Graham, Jan 26, 2006
    #4
  5. Ridefort

    David Graham Guest

    "David Graham" <> wrote in message
    news:U%3Cf.65283$...
    > > CSS:
    > > .pixboxleft IMG {
    > > display: block;
    > > }

    >
    > Hi
    > I understand your css OK but what is the display: block; for?
    > I commented this out and it doesn't seem to do anything. Why can't the img
    > element remain an inline element?
    > thanks
    > David
    >
    >
    >

    More detail.........
    The display: block does not do anything when the css is used for displaying
    the image on the right. Without the display block when the div is floated to
    the left, the image sits along side the text within the floated div as you
    would expext. Funny thing is though, the text within the floated div always
    sits below the image when the div is floated right, regardless of the
    instruction display: block - why is this?
    thanks
    David
    David Graham, Jan 26, 2006
    #5
  6. David Graham wrote:

    >>CSS:
    >>.pixboxleft IMG {
    >>display: block;
    >>}

    >
    >
    > Hi
    > I understand your css OK but what is the display: block; for?
    > I commented this out and it doesn't seem to do anything. Why can't the img
    > element remain an inline element?
    > thanks
    > David
    >
    >
    >

    Because images are displayed inline by default, if you do not explicitly
    set the width of the containing block element and with viewport is is
    wide enough the text will not wrap under image

    +------DIV-------+ The rest of
    |[ IMAGE ] text | your page
    +----------------+ content ...

    Image as block

    +----DIV--+ The rest of your
    |[ IMAGE ]| page content ...
    | text |
    +---------+


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jan 26, 2006
    #6
  7. Ridefort

    David Graham Guest

    "Jonathan N. Little" <> wrote in message
    news:43d8f174$0$8299$...
    > David Graham wrote:
    >
    > >>CSS:
    > >>.pixboxleft IMG {
    > >>display: block;
    > >>}

    > >
    > >
    > > Hi
    > > I understand your css OK but what is the display: block; for?
    > > I commented this out and it doesn't seem to do anything. Why can't the

    img
    > > element remain an inline element?
    > > thanks
    > > David
    > >
    > >
    > >

    > Because images are displayed inline by default, if you do not explicitly
    > set the width of the containing block element and with viewport is is
    > wide enough the text will not wrap under image
    >
    > +------DIV-------+ The rest of
    > |[ IMAGE ] text | your page
    > +----------------+ content ...
    >
    > Image as block
    >
    > +----DIV--+ The rest of your
    > |[ IMAGE ]| page content ...
    > | text |
    > +---------+
    >
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIO
    > http://www.LittleWorksStudio.com

    Thanks for that Jonathan but did you see my later post about float right not
    affected by display: block, it always behaves like that regardless of
    whether it is stipulated in the css or not were as float left does need the
    rule display:block. Why?
    David Graham, Jan 26, 2006
    #7
  8. David Graham wrote:
    > "Jonathan N. Little" <> wrote in message
    > news:43d8f174$0$8299$...
    >
    >>David Graham wrote:
    >>
    >>
    >>>>CSS:
    >>>>.pixboxleft IMG {
    >>>>display: block;
    >>>>}
    >>>
    >>>
    >>>Hi
    >>>I understand your css OK but what is the display: block; for?
    >>>I commented this out and it doesn't seem to do anything. Why can't the

    >
    > img
    >
    >>>element remain an inline element?
    >>>thanks
    >>>David
    >>>
    >>>
    >>>

    >>
    >>Because images are displayed inline by default, if you do not explicitly
    >>set the width of the containing block element and with viewport is is
    >>wide enough the text will not wrap under image
    >>
    >>+------DIV-------+ The rest of
    >>|[ IMAGE ] text | your page
    >>+----------------+ content ...
    >>
    >> Image as block
    >>
    >>+----DIV--+ The rest of your
    >>|[ IMAGE ]| page content ...
    >>| text |
    >>+---------+
    >>


    >
    > Thanks for that Jonathan but did you see my later post about float right not
    > affected by display: block, it always behaves like that regardless of
    > whether it is stipulated in the css or not were as float left does need the
    > rule display:block. Why?
    >
    >


    ..pixboxright {
    float: right; margin: 0 0 .5em .5em; border: 1px solid black;
    }

    /*
    With IMG to block disabled
    ..pixboxright IMG { display: block; }
    */

    Produces:

    The rest of +------DIV-------+
    your page |[ IMAGE ] text |
    content ... +----------------+

    if view port is wide enough (Moz 1.7.12, FF1.5, O7.5 NN7.2 IE5.0-6.0 Of
    course float broken in IE4.0 & NN4.x on Win2K)

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jan 26, 2006
    #8
    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. Onur Bozkurt

    Re: aligning text in a asp label

    Onur Bozkurt, Jul 25, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    760
    Onur Bozkurt
    Jul 25, 2003
  2. BGW
    Replies:
    3
    Views:
    448
  3. shank

    image and aligning text

    shank, Oct 3, 2003, in forum: HTML
    Replies:
    0
    Views:
    374
    shank
    Oct 3, 2003
  4. TheStonge
    Replies:
    9
    Views:
    427
    Edwin van der Vaart
    May 24, 2004
  5. Steven Bethard

    aligning text with space-normalized text

    Steven Bethard, Jun 30, 2005, in forum: Python
    Replies:
    6
    Views:
    377
    Steven Bethard
    Jul 1, 2005
Loading...

Share This Page