how to make a div with a pic...

Discussion in 'HTML' started by -, Jul 13, 2007.

  1. -

    - Guest

    .... and text is flowing around nicely?

    Pic could be left or right or in the center.

    Can someone post a sample?

    Thanks in advance...
     
    -, Jul 13, 2007
    #1
    1. Advertising

  2. -

    dorayme Guest

    In article
    <4696e055$0$12852$>,
    - <"bgyuobhjo[i"@hotmail.com> wrote:

    > ... and text is flowing around nicely?
    >
    > Pic could be left or right or in the center.
    >
    > Can someone post a sample?
    >
    > Thanks in advance...


    http://tinyurl.com/2dcgfx

    --
    dorayme
     
    dorayme, Jul 13, 2007
    #2
    1. Advertising

  3. -

    Guest

    On Jul 12, 10:16 pm, - <"bgyuobhjo[i"@hotmail.com> wrote:
    > ... and text is flowing around nicely?
    >
    > Pic could be left or right or in the center.
    >
    > Can someone post a sample?
    >
    > Thanks in advance...


    you can use the "align" attribute of the img tag to position the image
    left, right or center within the text or
    use the float inline style on the img tag to position the image to the
    left or right within the text

    <div>
    [text]
    <img src="pic.jpg" align="center" />
    [text]
    </div>

    <div>
    [text]
    <img src="pic.jpg" style="float: left;" />
    [text]
    </div>
     
    , Jul 13, 2007
    #3
  4. wrote:
    > On Jul 12, 10:16 pm, - <"bgyuobhjo[i"@hotmail.com> wrote:
    >> ... and text is flowing around nicely?
    >>
    >> Pic could be left or right or in the center.
    >>
    >> Can someone post a sample?
    >>
    >> Thanks in advance...

    >
    > you can use the "align" attribute of the img tag to position the image
    > left, right or center within the text or
    > use the float inline style on the img tag to position the image to the
    > left or right within the text
    >
    > <div>
    > [text]
    > <img src="pic.jpg" align="center" />
    > [text]
    > </div>
    >


    Does not do what you expect, it does not put the image in the center of
    the page, but aligns the image within *one* line of text vertically with
    respect to the baseline of that text line. Also deprecated, with CSS is
    is <img src="pic.jpg" style="vertical-align: middle" alt="the pic">


    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo
    volutpat augue. Morbi hendrerit, lorem vel iaculis congue, orci est
    +---------------+
    | |
    vehicula | IMAGE | mi, scelerisque hendrerit urna leo tempus
    | |
    +---------------+
    justo. Integer lacinia, dolor id lacinia pulvinar, lacus odio tempus
    mauris, sit amet porta eros justo id mauris. Nam dolor erat, cursus non,
    fringilla ...


    It will *not* produce:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo
    volutpat augue. Morbi hendrerit, lorem vel iaculis congue, orci est
    vehicula mi, scelerisque +---------------+ hendrerit urna leo tempus
    justo. Integer lacinia, | | dolor id lacinia pulvinar,
    lacus odio tempus mauris,| IMAGE | sit amet porta eros justo
    id mauris. Nam dolor erat| | cursus non, fringilla
    commodo, convallis sceler+---------------+ isque, massa. Duis ac ligula
    Nulla aliquet. Vivamus porttitor ligula dictum elit. Ut sagittis pede
    ....




    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jul 13, 2007
    #4
  5. -

    - Guest

    dorayme wrote:
    > In article
    > <4696e055$0$12852$>,
    > - <"bgyuobhjo[i"@hotmail.com> wrote:
    >
    >> ... and text is flowing around nicely?
    >>
    >> Pic could be left or right or in the center.
    >>
    >> Can someone post a sample?
    >>
    >> Thanks in advance...

    >
    > http://tinyurl.com/2dcgfx
    >



    Basically such line is easiest way to do it!

    <img style="border: 2px solid rgb(102, 102, 102); float: left; margin:
    15px;" src="camelSkinTrader_files/smallCamel.jpg" alt="a camel"
    height="200" width="146">

    Many thanks!
     
    -, Jul 15, 2007
    #5
  6. -

    dorayme Guest

    In article
    <469990bb$0$12806$>,
    - <"bgyuobhjo[i"@hotmail.com> wrote:

    > dorayme wrote:
    > > In article
    > > <4696e055$0$12852$>,
    > > - <"bgyuobhjo[i"@hotmail.com> wrote:
    > >
    > >> ... and text is flowing around nicely?
    > >>
    > >> Pic could be left or right or in the center.
    > >>
    > >> Can someone post a sample?
    > >>
    > >> Thanks in advance...

    > >
    > > http://tinyurl.com/2dcgfx
    > >

    >
    >
    > Basically such line is easiest way to do it!
    >
    > <img style="border: 2px solid rgb(102, 102, 102); float: left; margin:
    > 15px;" src="camelSkinTrader_files/smallCamel.jpg" alt="a camel"
    > height="200" width="146">
    >
    > Many thanks!


    You remind me to add a couple of px or so padding too to allow
    some grace...

    --
    dorayme
     
    dorayme, Jul 15, 2007
    #6
  7. Scripsit dorayme:

    >>> http://tinyurl.com/2dcgfx

    >>
    >> Basically such line is easiest way to do it!
    >>
    >> <img style="border: 2px solid rgb(102, 102, 102); float: left;
    >> margin: 15px;" src="camelSkinTrader_files/smallCamel.jpg" alt="a
    >> camel" height="200" width="146">


    This seems to be a quotation from the page mentioned; its real address is
    http://members.optushome.com.au/droovies/binHassad/camelSkinTrader.html

    >> Many thanks!

    >
    > You remind me to add a couple of px or so padding too to allow
    > some grace...


    Well, wouldn't it be simpler to use your favorite image processing program
    to add a border to the image itself? Then you would see the bordered image
    before putting it onto your page, and you would be reminded, by your own
    eyes, about the need to add some padding between the camel and the borders.
    This would cost a few bytes in image size, but on the other hand, you would
    not need the CSS code for padding and border. Besides, your image would
    appear with the border even when CSS is off.

    You get 5 minus points for alt="a camel". It results on those silly words
    appearing between paragraphs of text, when the image is not displayed, for
    one reason or another - i.e., in the situation for which the alt attribute
    should be written for! The correct value is alt="" (i.e., empty string). You
    are allowed to add title="a camel", if you think that someone who sees the
    image might not recognize it as a camel and might accidentally wave his hand
    so that the pointer moves over the image (and might actually notice the tiny
    "tooltip"). But you are allowed to do this only after reading and
    understanding the treatise on alt texts:
    http://www.cs.tut.fi/~jkorpela/html/alt.html

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jul 15, 2007
    #7
  8. -

    dorayme Guest

    In article <o7kmi.191920$>,
    "Jukka K. Korpela" <> wrote:

    > Scripsit dorayme:
    >
    > >>> http://tinyurl.com/2dcgfx


    > > You remind me to add a couple of px or so padding too to allow
    > > some grace...

    >
    > Well, wouldn't it be simpler to use your favorite image processing program
    > to add a border to the image itself? Then you would see the bordered image
    > before putting it onto your page, and you would be reminded, by your own
    > eyes, about the need to add some padding between the camel and the borders.
    > This would cost a few bytes in image size, but on the other hand, you would
    > not need the CSS code for padding and border. Besides, your image would
    > appear with the border even when CSS is off.
    >


    Let us put aside the particular issue of this pic because you
    raise an interesting general point with which I both agree and
    disagree with in different respects.

    The pic of the camel is already possibly the most unimportant pic
    in the whole wwc [1]. It has so little going for it that taking
    even flexibility from it would be a crime! Which brings me to the
    serious issue.

    The power of css is such that one can add padding and borders to
    things in a most simple way, including pictures. Once you fix
    something into a picture, that is it, it loses all practical
    flexibility. CSS is for styling. Borders and padding are style
    issues. (Perhaps one can manage the css and divs to cut off real
    borders with tricks but let us leave such complications aside. In
    css it is easier to give than to take away and flexibility is the
    topic here).

    Let us just concentrate on padding for now to make a point about
    trade-offs. If there is no real inbuilt padding, author has
    maximum flexibility. He might want no padding for some pages on
    which a particular pic appears and lots on another. He might want
    it one way on a particular page at one time, but not at another
    time. I am sure you understand this.

    Now, there is an issue with css being turned off. [2] In this
    situation the author is faced with a dilemma, to build a padding
    inside the pic as a safety net for such a situation and to
    forego, as a direct result, flexibility or to follow the
    teachings of our church and to truly separate style from content
    and trust to the gods.

    Talking about flexibility, I am reminded further, I must turn
    that pic into a gif and include transparency and make it even
    more flexible.

    > You get 5 minus points for alt="a camel". It results on those silly words
    > appearing between paragraphs of text,


    You have me on that one. (5! Your scale is very severe!) Look,
    that page and pic was done before I started taking alt text pills
    (which pills were, in turn, made by a chemist who I gave specific
    instructions to base them on your writings on this subject).

    See my correction at http://tinyurl.com/2dcgfx

    -------------
    1. wide world of camels

    2. Helpfully, IE provides a 3px gap. At least up until recently
    this has meant that at least there is a 3px gap on at least one
    side for a majority of viewers. This note is to tease Bergamot
    who thinks it is a bug.

    --
    dorayme
     
    dorayme, Jul 15, 2007
    #8
  9. Scripsit dorayme:

    > The power of css is such that one can add padding and borders to
    > things in a most simple way, including pictures.


    I don't think CSS was really meant for any image processing. It is true that
    you can use it for very elementary operations on images

    > Once you fix
    > something into a picture, that is it, it loses all practical
    > flexibility.


    Padding and borders are, more or less, part of image design, just like the
    colors and the shapes of the image. Surely it is one of the most trivial
    parts of image design, but it should not be ignored in image design.

    If you are thinking about re-using the same images in different contexts on
    different pages, fine. But you should always check, for each use, whether
    the image really fits, esthetically and pragmatically. You may need to
    modify the image, e.g. resize it, pick up a different part from an original
    photograph, or change the colors of a drwawing to fit into a particular
    color scheme on a page. This is a job for an image processing program, not
    CSS code. The same applies to padding and border.

    (Confession: I have sometimes forgotten to add borders in an image
    processing program and then "fixed" this using border="1". But I'm not
    saying that this was right.)

    > CSS is for styling.


    Not for styling of images.

    > Borders and padding are style issues.


    So are colors and shapes in an image.

    > Now, there is an issue with css being turned off. [2]

    - -
    > 2. Helpfully, IE provides a 3px gap.


    In Quirks Mode.

    > At least up until recently
    > this has meant that at least there is a 3px gap on at least one
    > side for a majority of viewers.


    Some other browsers do some other odd things in Quirks Mode.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jul 16, 2007
    #9
  10. -

    dorayme Guest

    In article <9QImi.192552$>,
    "Jukka K. Korpela" <> wrote:

    > Scripsit dorayme:
    >
    > > The power of css is such that one can add padding and borders to
    > > things in a most simple way, including pictures.

    >
    > I don't think CSS was really meant for any image processing. It is true that
    > you can use it for very elementary operations on images
    >
    > > Once you fix
    > > something into a picture, that is it, it loses all practical
    > > flexibility.

    >
    > Padding and borders are, more or less, part of image design, just like the
    > colors and the shapes of the image. Surely it is one of the most trivial
    > parts of image design, but it should not be ignored in image design.


    I both agree with you and not. I have spent about a quarter of my
    life worrying about borders and frames and the mounting of my own
    photographs and I regard it as part and parcel of the whole show,
    very important indeed. But it is not a fruitful question whether
    it is part of image design. It is part of image exhibition. If
    you would kindly bear with me a moment.

    When getting a photographic pic ready for exhibition, one can
    make decisions about borders in the process of enlargement (e.g.
    I had a negative carrier that I filed specially to be a tiny bit
    bigger than the neg so that a little light would shine through
    and make a border photographically. It was in a certain period of
    my photography). Later I preferred not to do this but to have the
    flexibility to not have the border or have it by other means (I
    would use Indian ink on the photo white space or the mounting
    board).

    The situation with a web page is not that much different in
    respect to the placing of a basic border or padding, it does not
    really matter when the decision is made to do this with many
    types of images, leaving it to the css seems to me a perfectly
    rational one in many cases. Perhaps not in all cases (here I am
    thinking of borders that might strain the types available in css).

    In other words, I do not think your action (see below in your
    confession) was wrong at all. What matters is the aesthetic
    decision and the easiest and most flexible way to implement it.

    >
    > If you are thinking about re-using the same images in different contexts on
    > different pages, fine. But you should always check, for each use, whether
    > the image really fits, esthetically and pragmatically. You may need to
    > modify the image, e.g. resize it, pick up a different part from an original
    > photograph, or change the colors of a drwawing to fit into a particular
    > color scheme on a page. This is a job for an image processing program, not
    > CSS code. The same applies to padding and border.
    >
    > (Confession: I have sometimes forgotten to add borders in an image
    > processing program and then "fixed" this using border="1". But I'm not
    > saying that this was right.)
    >
    > > CSS is for styling.

    >
    > Not for styling of images.
    >
    > > Borders and padding are style issues.

    >
    > So are colors and shapes in an image.


    The point I am making is that while they are both aesthetic
    matters, that does not mean that one is not best handled by image
    software (clearly, colours and shapes are) or that borders and
    padding can be handled by other means in many cases.

    --
    dorayme
     
    dorayme, Jul 17, 2007
    #10
    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. Dixon
    Replies:
    4
    Views:
    565
    Piotr Dobrowolski
    Jan 30, 2006
  2. Onur Bozkurt
    Replies:
    0
    Views:
    392
    Onur Bozkurt
    Jun 30, 2003
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    755
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    194
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    317
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page