Decorating div boxes with CSS

Discussion in 'HTML' started by Paul B, Apr 12, 2006.

  1. Paul B

    Paul B Guest

    I hope at least some of this makes sense...

    Here is my CSS:
    .tl{
    position:absolute;
    left:0px;
    right:auto;
    top:0px;
    bottom:auto;
    width:15px;
    height:15px;
    background-image:url('tl.png');
    }
    .t{
    position:absolute;
    left:15px;
    right:15px;
    top:0px;
    bottom:auto;
    width:auto;
    height:15px;
    background-image:url('t.png');
    }
    .tr{
    position:absolute;
    left:auto;
    right:0px;
    top:0px;
    bottom:auto;
    width:15px;
    height:15px;
    background-image:url('tr.png');
    }
    .l{
    position:absolute;
    left:0px;
    right:auto;
    top:15px;
    bottom:15px;
    width:15px;
    height:auto;
    background-image:url('l.png');
    }
    .c{
    position:absolute;
    left:15px;
    right:15px;
    top:15px;
    bottom:15px;
    width:auto;
    height:auto;
    background-color:black;
    color:yellow;
    }
    .r{
    position:absolute;
    left:auto;
    right:0px;
    top:15px;
    bottom:15px;
    width:15px;
    height:auto;
    background-image:url('r.png');
    }
    .bl{
    position:absolute;
    left:0px;
    right:auto;
    top:auto;
    bottom:0px;
    width:15px;
    height:15px;
    background-image:url('bl.png');
    }
    .b{
    position:absolute;
    left:15px;
    right:15px;
    top:auto;
    bottom:0px;
    width:auto;
    height:15px;
    background-image:url('b.png');
    }
    .br{
    position:absolute;
    left:auto;
    right:0px;
    top:auto;
    bottom:0px;
    width:15px;
    height:15px;
    background-image:url('br.png');
    }

    #box1{
    position:absolute;
    left:0px;
    right:auto;
    top:0px;
    bottom:auto;
    width:250px;
    height:250px;
    }
    The point of it is that a 'content box' will have 4 'empty' divs before
    it and 4 after it. The block of text in the centre will then be
    surrounded by 8 images. In my case its a kind of fading black into
    white effect. And here is the HTML:
    <div id="box1">
    <div class="tl">
    </div>
    <div class="t">
    </div>
    <div class="tr">
    </div>
    <div class="l">
    </div>
    <div class="c">
    Lots of text lots of text lots of text lots of text lots of
    text lots of text lots of text
    </div>
    <div class="r">
    </div>
    <div class="bl">
    </div>
    <div class="b">
    </div>
    <div class="br">
    </div>
    </div>

    And (in my opinion) it looks really good... but it only works if I know
    what size to make the box. If there is too much text in the centre bit
    it flows off out the bottom and looks stupid. But as the edge bits are
    stuck in place using absolute positioning it only works if the box they
    are in are positioned absolutely. So i'm wondering if there is a way to
    create a similar effect but without absolute positioning?

    Any ideas?

    Paul
     
    Paul B, Apr 12, 2006
    #1
    1. Advertising

  2. Paul B

    Andy Dingley Guest

    Paul B wrote:
    > I hope at least some of this makes sense...


    No, because you posted it to Usenet (a text-only medium) rather than
    uploading it as a web site.

    How many people do you think will bother to read it, split and and
    upload it to their own servers so that they can see what your post is
    about?

    People who are useful are likely to be busy. The people most likely to
    have free time are the trolls. Your choice.
     
    Andy Dingley, Apr 12, 2006
    #2
    1. Advertising

  3. Paul B

    JDS Guest

    JDS, Apr 12, 2006
    #3
  4. Paul B

    Paul B Guest

    On 12 Apr 2006 10:14:11 -0700
    "Andy Dingley" <> wrote:

    >
    > Paul B wrote:
    > > I hope at least some of this makes sense...

    >
    > No, because you posted it to Usenet (a text-only medium) rather than
    > uploading it as a web site.
    >
    > How many people do you think will bother to read it, split and and
    > upload it to their own servers so that they can see what your post is
    > about?
    >
    > People who are useful are likely to be busy. The people most likely to
    > have free time are the trolls. Your choice.
    >


    Yes, apologies. I understand now. Here it is:
    http://www.seventynine.net/testing/test100.html
     
    Paul B, Apr 12, 2006
    #4
  5. Paul B

    Nik Coughlin Guest

    Paul B wrote:
    > I hope at least some of this makes sense...


    Something like this you mean?

    http://nrkn.com/round/
     
    Nik Coughlin, Apr 12, 2006
    #5
  6. Paul B

    dorayme Guest

    In article <>,
    Paul B <> wrote:

    > http://www.seventynine.net/testing/test100.html


    This url, combined with your previous

    "The point of it is that a 'content box' will have 4 'empty' divs
    before it and 4 after it. The block of text in the centre will
    then be surrounded by 8 images. In my case its a kind of fading
    black into white effect."

    and

    "And (in my opinion) it looks really good... but it only works if
    I know what size to make the box. If there is too much text in
    the centre bit it flows off out the bottom and looks stupid. But
    as the edge bits are stuck in place using absolute positioning it
    only works if the box they are in are positioned absolutely. So
    i'm wondering if there is a way to create a similar effect but
    without absolute positioning?"

    would have to make this one of the most baffling explanations
    ever offered to alt.html in order to get an answer to

    "Any ideas?"

    See http://www.dorayme.150m.com/pics/baffling.png for how it
    looks on my browsers...

    --
    dorayme
     
    dorayme, Apr 13, 2006
    #6
  7. Paul B

    Paul B Guest

    On Thu, 13 Apr 2006 10:03:27 +1200
    "Nik Coughlin" <> wrote:

    > Paul B wrote:
    > > I hope at least some of this makes sense...

    >
    > Something like this you mean?
    >
    > http://nrkn.com/round/
    >
    >

    That's great. I think that'll do the job, thanks.
     
    Paul B, Apr 13, 2006
    #7
  8. Paul B wrote:

    > On Thu, 13 Apr 2006 10:03:27 +1200
    > "Nik Coughlin" <> wrote:
    >
    >>Paul B wrote:
    >>>I hope at least some of this makes sense...

    >>Something like this you mean?
    >>http://nrkn.com/round/


    > That's great. I think that'll do the job, thanks.


    You can get simple rounded corners without graphics or javascript:

    http://www.spiffycorners.com/

    Mike
     
    Mike Scirocco, Apr 13, 2006
    #8
  9. Paul B

    Nik Coughlin Guest

    Mike Scirocco wrote:
    > Paul B wrote:
    >
    >> On Thu, 13 Apr 2006 10:03:27 +1200
    >> "Nik Coughlin" <> wrote:
    >>
    >>> Paul B wrote:
    >>>> I hope at least some of this makes sense...
    >>> Something like this you mean?
    >>> http://nrkn.com/round/

    >
    >> That's great. I think that'll do the job, thanks.

    >
    > You can get simple rounded corners without graphics or javascript:
    >
    > http://www.spiffycorners.com/
    >
    > Mike


    Clever trick that.
     
    Nik Coughlin, Apr 14, 2006
    #9
  10. Paul B

    Martin Jay Guest

    In message <>, Mike
    Scirocco <> writes
    >You can get simple rounded corners without graphics or javascript:


    >http://www.spiffycorners.com/


    It breaks in IE5.5, but the effect still looks quite pretty. :)
    --
    Martin Jay
     
    Martin Jay, Apr 14, 2006
    #10
  11. Martin Jay wrote:
    > In message <>, Mike
    > Scirocco <> writes
    >> You can get simple rounded corners without graphics or javascript:

    >
    >> http://www.spiffycorners.com/

    >
    > It breaks in IE5.5, but the effect still looks quite pretty. :)


    Many things break in IE5.5, one being your computer when used for web
    surfing ;-)

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 14, 2006
    #11
    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. Stefan Mueller
    Replies:
    5
    Views:
    12,402
    jamesxa
    Jun 16, 2009
  2. Bengt Richter

    decorating classes with metaclass

    Bengt Richter, Mar 14, 2005, in forum: Python
    Replies:
    1
    Views:
    370
    Simon Percivall
    Mar 15, 2005
  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