Empty div for holding a background strip of pics...

Discussion in 'HTML' started by dorayme, Aug 24, 2006.

  1. dorayme

    dorayme Guest

    Is there any trouble or downside in using a div for the sole
    purpose of containing a background image, eg. a decorative
    horizontal strip, not very high, 50px at most. If the height is
    css'd at 50px and the pic is naturally 50px high, is it kosher to
    leave out not only width, (a div being 100% by default), but also
    repeat instructions. My tests work as I want.... but if there are
    downsides, I would like to know about them.

    --
    dorayme
    dorayme, Aug 24, 2006
    #1
    1. Advertising

  2. dorayme

    mbstevens Guest

    On Thu, 24 Aug 2006 13:29:17 +1000, dorayme wrote:

    > Is there any trouble or downside in using a div for the sole
    > purpose of containing a background image, eg. a decorative
    > horizontal strip, not very high, 50px at most. If the height is
    > css'd at 50px and the pic is naturally 50px high, is it kosher to
    > leave out not only width, (a div being 100% by default), but also
    > repeat instructions. My tests work as I want.... but if there are
    > downsides, I would like to know about them.


    It might be a good idea to explicitly specify the z-index
    to make sure that it stays on the bottom.
    (Assuming you want it to be on the bottom.
    I suppose that with a transparent
    image you might want it somewhere in the middle of the deck.)
    Divs are great fun to use decoratively simply by assigning them a
    background color and a z-index. Some people oppose this kind of
    use (for instance, like the extra divs at zen garden), but I think it
    is perhaps a lesser misdemeanor than many.
    --
    mbstevens
    http://www.mbstevens.com/hume/index.html
    mbstevens, Aug 24, 2006
    #2
    1. Advertising

  3. dorayme

    dorayme Guest

    In article <>,
    mbstevens <> wrote:

    > On Thu, 24 Aug 2006 13:29:17 +1000, dorayme wrote:
    >
    > > Is there any trouble or downside in using a div for the sole
    > > purpose of containing a background image, eg. a decorative
    > > horizontal strip, not very high, 50px at most. If the height is
    > > css'd at 50px and the pic is naturally 50px high, is it kosher to
    > > leave out not only width, (a div being 100% by default), but also
    > > repeat instructions. My tests work as I want.... but if there are
    > > downsides, I would like to know about them.

    >
    > It might be a good idea to explicitly specify the z-index
    > to make sure that it stays on the bottom.
    > (Assuming you want it to be on the bottom.
    > I suppose that with a transparent
    > image you might want it somewhere in the middle of the deck.)
    > Divs are great fun to use decoratively simply by assigning them a
    > background color and a z-index. Some people oppose this kind of
    > use (for instance, like the extra divs at zen garden), but I think it
    > is perhaps a lesser misdemeanor than many.
    > --


    Well, basically, in my case, there is no top and bottom to worry
    about... the pic is a made up one in a strip 50px high and about
    450px wide and looks natural when repeated horizontally.
    Originally I had a decorative strip on the page with the pic
    placed in the HTML but, now, as a background, it goes as wide as
    the browser window for little cost in bytes and looks quite nice
    (just under a header and horizontal strip on the home page).

    I am thinking now that purer would be to have the background on
    the parent of this proposed div, a parent that has other
    functions besides. Repeating for horiz only and setting top
    margins on children to be gracefully clear of the background
    image. But it would be more work and a touch awkward. I will
    stick with this empty div unless anyone informs me of trouble I
    could run into.

    I suppose the idea of an empty div like this has questionable
    semantic function but is it any more blight on accessibility than
    an easily ignored background image in an obviously useful div
    full of text content?

    About transparency, it is not a big issue here, I have a jpg (the
    strip is composed of little colour photos) with a background
    matching the background of the parent of the div; in any case
    very little is showing of this except tiny strips dividing the
    pics. All in a line, no top, no bottom. Like this:
    IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII except the black
    bits are wider and nice enough little colour pics...

    --
    dorayme
    dorayme, Aug 24, 2006
    #3
  4. dorayme

    mbstevens Guest

    On Thu, 24 Aug 2006 15:51:41 +1000, dorayme wrote:

    > I suppose the idea of an empty div like this has questionable
    > semantic function but is it any more blight on accessibility than
    > an easily ignored background image in an obviously useful div
    > full of text content?


    Not in my opinion. But the Xists might refuse to let you on the Saucer
    if you persist in your wicked ways. You may be forced to buy an
    indulgence.
    ;~)
    mbstevens, Aug 24, 2006
    #4
  5. dorayme

    dorayme Guest

    In article <>,
    mbstevens <> wrote:

    > On Thu, 24 Aug 2006 15:51:41 +1000, dorayme wrote:
    >
    > > I suppose the idea of an empty div like this has questionable
    > > semantic function but is it any more blight on accessibility than
    > > an easily ignored background image in an obviously useful div
    > > full of text content?

    >
    > Not in my opinion. But the Xists might refuse to let you on the Saucer
    > if you persist in your wicked ways. You may be forced to buy an
    > indulgence.
    > ;~)


    O ... I have long known my trip home is far from guaranteed... I
    have indulged far too much in this earthly paradise for the
    powers that be...

    --
    dorayme
    dorayme, Aug 24, 2006
    #5
  6. dorayme

    Neredbojias Guest

    To further the education of mankind, dorayme
    <> vouchsafed:

    > Is there any trouble or downside in using a div for the sole
    > purpose of containing a background image, eg. a decorative
    > horizontal strip, not very high, 50px at most. If the height is
    > css'd at 50px and the pic is naturally 50px high, is it kosher to
    > leave out not only width, (a div being 100% by default), but also
    > repeat instructions. My tests work as I want.... but if there are
    > downsides, I would like to know about them.


    Under some conditions, IE 6 has trouble with divs for which a width is not
    specified.

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, Aug 24, 2006
    #6
  7. dorayme

    dorayme Guest

    In article <Xns9829188A3CF7Fhttpwwwneredbojiasco@208.49.80.251>,
    Neredbojias <http://www.neredbojias.com/fliam.php?cat=alt.html>
    wrote:

    > To further the education of mankind, dorayme
    > <> vouchsafed:
    >
    > > Is there any trouble or downside in using a div for the sole
    > > purpose of containing a background image, eg. a decorative
    > > horizontal strip, not very high, 50px at most. If the height is
    > > css'd at 50px and the pic is naturally 50px high, is it kosher to
    > > leave out not only width, (a div being 100% by default), but also
    > > repeat instructions. My tests work as I want.... but if there are
    > > downsides, I would like to know about them.

    >
    > Under some conditions, IE 6 has trouble with divs for which a width is not
    > specified.


    What about the specific condition of a div that has nothing at
    all in it, is a child of the body that has no size specs and is
    css'd to have a background image, be 50px high and margined left
    1%. Shall I add width:100%?

    --
    dorayme
    dorayme, Aug 24, 2006
    #7
  8. dorayme

    Neredbojias Guest

    To further the education of mankind, dorayme
    <> vouchsafed:

    >> > Is there any trouble or downside in using a div for the sole
    >> > purpose of containing a background image, eg. a decorative
    >> > horizontal strip, not very high, 50px at most. If the height is
    >> > css'd at 50px and the pic is naturally 50px high, is it kosher to
    >> > leave out not only width, (a div being 100% by default), but also
    >> > repeat instructions. My tests work as I want.... but if there are
    >> > downsides, I would like to know about them.

    >>
    >> Under some conditions, IE 6 has trouble with divs for which a width
    >> is not specified.

    >
    > What about the specific condition of a div that has nothing at
    > all in it, is a child of the body that has no size specs and is
    > css'd to have a background image, be 50px high and margined left
    > 1%. Shall I add width:100%?


    If you did, it would cause a horizontal scrollbar (I think).

    Most of the width problems I've run across occurred in IE 6 and a primary
    div like you mentioned most likely wouldn't be a problem, anyway.

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, Aug 25, 2006
    #8
  9. dorayme

    dorayme Guest

    In article <Xns9829E3FF9BD96httpwwwneredbojiasco@208.49.80.251>,
    Neredbojias <http://www.neredbojias.com/fliam.php?cat=alt.html>
    wrote:

    > > What about the specific condition of a div that has nothing at
    > > all in it, is a child of the body that has no size specs and is
    > > css'd to have a background image, be 50px high and margined left
    > > 1%. Shall I add width:100%?

    >
    > If you did, it would cause a horizontal scrollbar (I think).


    In that case I will leave it as is... , if I have time I will
    consider my own suggestion a few posts back about not having a
    special div for this... am working on a photo section of a
    website now, after that I am done, and the client can have it and
    pay me. It is for a charity (as it happens... and I agreed to
    throw in 30 hrs free. Only my incompetence and distraction has
    allowed this voluntary section to blow out to much more, it won't
    count when I get to the Gates of St Peter's. But the 30 hours
    should keep me away from the likes of you in your cell.... I saw
    what happened to you in BdeZ's killfile! Where is she? I miss
    her. One can grow fond of one's captors. It's a well known
    phenemona, I think it even has a name, something bonding... I now
    look back fondly on my days in her dungeons.

    --
    dorayme
    dorayme, Aug 25, 2006
    #9
  10. dorayme

    Neredbojias Guest

    To further the education of mankind, dorayme
    <> vouchsafed:

    > In article <Xns9829E3FF9BD96httpwwwneredbojiasco@208.49.80.251>,
    > Neredbojias <http://www.neredbojias.com/fliam.php?cat=alt.html>
    > wrote:
    >
    >> > What about the specific condition of a div that has nothing at
    >> > all in it, is a child of the body that has no size specs and is
    >> > css'd to have a background image, be 50px high and margined left
    >> > 1%. Shall I add width:100%?

    >>
    >> If you did, it would cause a horizontal scrollbar (I think).

    >
    > In that case I will leave it as is... , if I have time I will
    > consider my own suggestion a few posts back about not having a
    > special div for this... am working on a photo section of a
    > website now, after that I am done, and the client can have it and
    > pay me. It is for a charity (as it happens... and I agreed to
    > throw in 30 hrs free. Only my incompetence and distraction has
    > allowed this voluntary section to blow out to much more, it won't
    > count when I get to the Gates of St Peter's. But the 30 hours
    > should keep me away from the likes of you in your cell.... I saw
    > what happened to you in BdeZ's killfile! Where is she? I miss
    > her. One can grow fond of one's captors. It's a well known
    > phenemona, I think it even has a name, something bonding... I now
    > look back fondly on my days in her dungeons.


    BdeZ had seemed to become nicer her last several posts that I saw. Maybe
    she realized that her personal prejudices and dogmae weren't as sacrosanct
    as she once assumed. However, it's hard to be sure. You know women...

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, Aug 27, 2006
    #10
  11. dorayme

    dorayme Guest

    In article <Xns982BB53B24155httpwwwneredbojiasco@208.49.80.251>,
    Neredbojias <http://www.neredbojias.com/fliam.php?cat=alt.html>
    wrote:

    > To further the education of mankind, dorayme
    > <> vouchsafed:
    >
    > > In article <Xns9829E3FF9BD96httpwwwneredbojiasco@208.49.80.251>,
    > > Neredbojias <http://www.neredbojias.com/fliam.php?cat=alt.html>
    > > wrote:
    > >
    > >> > What about the specific condition of a div that has nothing at
    > >> > all in it, is a child of the body that has no size specs and is
    > >> > css'd to have a background image, be 50px high and margined left
    > >> > 1%. Shall I add width:100%?
    > >>
    > >> If you did, it would cause a horizontal scrollbar (I think).


    I came across a baffling little thing today in respect to this.
    In all browsers I have bar one, the background image in this div
    shows fine. But quite missing in Mac IE! Stumped me for a while
    but in between teasing the hell out of Luigi, I kept coming back
    to it and it was that it was the only browser that did not like
    the single quotes around the reference to the pic concerned

    It alone did not understand

    background: #fffcdf url('pics/montageStrip50.jpg');

    As it happened there was no need not to put in doubles, this
    fixed it.

    I like to be nice to this browser in spite of never using it in
    anger any more.

    --
    dorayme
    dorayme, Aug 27, 2006
    #11
  12. dorayme

    Neredbojias Guest

    To further the education of mankind, dorayme
    <> vouchsafed:

    > In article <Xns982BB53B24155httpwwwneredbojiasco@208.49.80.251>,
    > Neredbojias <http://www.neredbojias.com/fliam.php?cat=alt.html>
    > wrote:
    >
    >> To further the education of mankind, dorayme
    >> <> vouchsafed:
    >>
    >> > In article <Xns9829E3FF9BD96httpwwwneredbojiasco@208.49.80.251>,
    >> > Neredbojias <http://www.neredbojias.com/fliam.php?cat=alt.html>
    >> > wrote:
    >> >
    >> >> > What about the specific condition of a div that has nothing at
    >> >> > all in it, is a child of the body that has no size specs and is
    >> >> > css'd to have a background image, be 50px high and margined left
    >> >> > 1%. Shall I add width:100%?
    >> >>
    >> >> If you did, it would cause a horizontal scrollbar (I think).

    >
    > I came across a baffling little thing today in respect to this.
    > In all browsers I have bar one, the background image in this div
    > shows fine. But quite missing in Mac IE! Stumped me for a while
    > but in between teasing the hell out of Luigi, I kept coming back
    > to it and it was that it was the only browser that did not like
    > the single quotes around the reference to the pic concerned
    >
    > It alone did not understand
    >
    > background: #fffcdf url('pics/montageStrip50.jpg');
    >
    > As it happened there was no need not to put in doubles, this
    > fixed it.
    >
    > I like to be nice to this browser in spite of never using it in
    > anger any more.


    I've had trouble with quotes on background images, too. Was long ago and I
    can't remember the exact circumstances, though I never used a Mac or Mac
    browser. Anyway, removing the quotes solved the problem and since then I
    don't use any quotes and haven't had any mishaps.

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, Aug 27, 2006
    #12
    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. freemont

    pics floated right in a div

    freemont, Jun 18, 2007, in forum: HTML
    Replies:
    1
    Views:
    310
    freemont
    Jun 18, 2007
  2. jc
    Replies:
    3
    Views:
    1,710
  3. jc
    Replies:
    1
    Views:
    1,351
    Neredbojias
    Mar 19, 2008
  4. Aquila
    Replies:
    35
    Views:
    437
    Mathieu Bouchard
    Mar 31, 2005
  5. yelipolok
    Replies:
    4
    Views:
    238
    John W. Krahn
    Jan 27, 2010
Loading...

Share This Page