www.webdeveloper.com
Results 1 to 6 of 6

Thread: Css background-images issue

  1. #1
    Join Date
    Feb 2005
    Posts
    200

    Css background-images issue

    Hi everybody.


    Css is complicated, when you go advanced it ain't easy anymore.

    Here's what I want to do:
    Code:
    <body>
    
    <div><p><span>text</span></p>
    <span id="brCorner">&nbsp;</span>
    </div>
    
    </body>

    I would like to insert 4 background-images for each corner of the "outer" box.
    Since the text can be resized I figured it's a bad idea to use just one background-image for the div, that fills the entire box, since it has to be aligned with a background pattern of the body and a text resize could throw the alignement off.

    That's why I figured it's better put one background-image in each of the <div> <p> <span>s. But the p and the spans are smaller than the div which means their corners will land in different places. Sorry to make this long, but do you know of a good way to use several background-images but make it look as if they formed just one image in just one element, and that is also robust?

    Thank you, hope you can help.

  2. #2
    Join Date
    Apr 2005
    Location
    Bathurst, NSW, Australia
    Posts
    3,357

  3. #3
    Join Date
    Feb 2005
    Posts
    200
    Still sort of complicated.

    Why can't you just give the containing div position: relative, and then simply place 4 <span>s in each of its corners by positioning them absolutely and then assign the corner images to the <span>s?

    Why mess with headers and <p>s if you think you don't need them, or why use more <divs> than needed? Divs look confusing, better use spans, one for each corner and place them by position: absolute within a relatively positioned div. (Haven't tried yet , but their method looks too verbose with ps, and divs, and hs, and ps, and divs, are they just trying to be fancy? )

  4. #4
    Join Date
    Apr 2005
    Location
    Bathurst, NSW, Australia
    Posts
    3,357
    Spans are inline elements and divs are block elements, so use divs, you can do something like this
    Code:
    <html>
    <head>
    <style type="text/css">
    .corners {
    margin: 0;
    padding: 0;
    }
    #tl { background: #000 url('images/tl.gif') no-repeat top left; }
    #tr { background: transparent url('images/tr.gif') no-repeat top right; }
    #bl { background: transparent url('images/bl.gif') no-repeat bottom left; }
    #br { background: transparent url('images/br.gif') no-repeat bottom right; }
    </style>
    </head>
    <body>
    <div id="tl" class="corners"><div id="tr" class="corners"><div id="bl class="corners"><div id="br class="corners">
    <p>lt is lop left, tr is top right, bl is bottom left and br is bottom right</p>
    </div></div></div></div>
    </body>
    </html>

  5. #5
    Join Date
    Jan 2006
    Posts
    29
    CSS code that I really like cos it works so well in most browsers and is really flexible is this one:
    http://www.456bereastreet.com/lab/teaser/flexible/

    Why mess with headers and <p>s if you think you don't need them, or why use more <divs> than needed? Divs look confusing, better use spans, one for each corner and place them by position: absolute within a relatively positioned div.
    I don't like using too much code to create boxes and the like either... to me it removes the purpose of separating the visual from the content a little, but I think that it makes it easier to deal with later.

  6. #6
    Join Date
    Feb 2005
    Posts
    200
    I'm checking it out. That latter one seems to be a good more simple solution than the ALA version, but again the ALA version used 5 images.

    Thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles