XHTML/CSS2 image borders.

Discussion in 'HTML' started by Jean-Fran?ois Lacrampe, Jun 24, 2004.

  1. Hello,

    I'm going slightly mad with a simple (should be simple anyway because
    it's quite usual) problem here: I want to make a box with custom
    top-left, top-right, bottom-left, bottom-right images and top, bottom,
    left a,d right borders (each has to be an image, unique for the four
    borders, repeated for the rest), my problem is that I want to do that
    with pure XHTML/CSS2, without using tables.

    Since I'm not sure my presentation of the problem makes sense (English
    is not my mother language and it shows when I'm getting technical),
    here is a quick drawing.

    +------------------------+
    | |
    | content |
    | goes |
    | here |
    | |
    +------------------------+

    Each plus sign should display a different image, namely
    mainbox-nw.png, mainbox-ne.png, mainbox-sw.png and mainbox-se.png
    (24*24px), the top minus and bottom minus are repeated horizontally
    (mainbox-n.png & mainbox-s.png, 1*24px), and the left and right pipes
    are repeated vertically (mainbox-e.png and mainbox-w.png).

    From what I've read, it will be really easy to do with CSS3, since it
    implements tags to do just that
    (<http://www.w3.org/TR/2002/WD-css3-border-20021107/>). It's less
    trivial in CSS2.

    I could do that pretty easily with tables (untested code):

    <TABLE>
    <TR>
    <TD>
    <IMG SRC="mainbox-nw.png" WIDTH="24" HEIGHT="24">
    </TD>
    <TD style="background:mainbox-n.png;background-repeat: repeat-x;">
    </TD>
    <TD>
    <IMG SRC="mainbox-ne.png WIDTH="24" HEIGHT="24">
    </TD>
    </TR>
    <TR>
    <TD>
    TD style="background:mainbox-w.png;background-repeat:
    repeat-y;">
    </TD>
    <TD>
    <IMG SRC="content goes here WIDTH="24" HEIGHT="24">
    </TD>
    <TD>
    <TD style="background:mainbox-e.png;background-repeat:
    repeat-y;">
    </TD>
    </TR>
    <TR>
    <TD>
    <IMG SRC="mainbox-sw.png WIDTH="24" HEIGHT="24">
    </TD>
    <TD>
    <TD style="background:mainbox-s.png;background-repeat:
    repeat-x;">
    </TD>
    <TD>
    <IMG SRC="mainbox-se.png WIDTH="24" HEIGHT="24">
    </TD>
    </TR>
    </TABLE>

    Well... That's a brand new site and I want it to validate as an
    XHTML1.1/CSS2 document. I know I can use tables in XHTML, but they are
    deprecated for layout. And I value code elegance more than anything,
    so I'd be grateful to anyone who would give me any info (URL,
    directives, anything) for doing that in an elegant fashion.

    Thanks in advance,
    JFLac
     
    Jean-Fran?ois Lacrampe, Jun 24, 2004
    #1
    1. Advertising

  2. Jean-Fran?ois Lacrampe

    rf Guest

    "Jean-Fran?ois Lacrampe" <> wrote in message
    news:...
    > Hello,
    >
    > I'm going slightly mad with a simple (should be simple anyway because
    > it's quite usual) problem here: I want to make a box with custom
    > top-left, top-right, bottom-left, bottom-right images and top, bottom,
    > left a,d right borders (each has to be an image, unique for the four
    > borders, repeated for the rest), my problem is that I want to do that
    > with pure XHTML/CSS2, without using tables.


    <snip>

    > Well... That's a brand new site and I want it to validate as an
    > XHTML1.1/CSS2 document. I know I can use tables in XHTML, but they are
    > deprecated for layout.


    No, tables are not deprecated for layout, just not recommended.

    > And I value code elegance more than anything,


    Sometimes one has to sacrifice elegance so as to get the job done. However:

    Google for "css round corners". There are quite a number of hits there that
    do exactly what you want.

    --
    Cheers
    Richard.
     
    rf, Jun 24, 2004
    #2
    1. Advertising

  3. *Jean-Fran?ois Lacrampe* wrote:
    > Hello,
    >
    > I'm going slightly mad with a simple (should be simple anyway because
    > it's quite usual) problem here: I want to make a box with custom
    > top-left, top-right, bottom-left, bottom-right images and top, bottom,
    > left a,d right borders (each has to be an image, unique for the four
    > borders, repeated for the rest), my problem is that I want to do that
    > with pure XHTML/CSS2, without using tables.


    [snip]

    Sounds like the popular 'Custom Corners' approach, e.g.:
    http://www.alistapart.com/articles/customcorners/
    --
    Andrew Urquhart
    - FAQ: www.html-faq.com
    - Archive: www.google.com/groups?q=alt.html
    - My reply address is invalid, use: www.andrewu.co.uk/contact/
     
    Andrew Urquhart, Jun 24, 2004
    #3
  4. Helle JF,

    Jean-Fran?ois Lacrampe wrote:

    > Hello,
    >
    > I'm going slightly mad with a simple (should be simple anyway because
    > it's quite usual) problem here:

    it's not that simple
    you could take some inspiration from
    http://users.skynet.be/derex/_test/NL_frame.htm

    it's css compliant and use objects and iframes to display content in the
    staging area (cetral information area)
    I only did it for the banner
    you might have to do things recursively
    and twisted at 90degrees


    > top-left, top-right, bottom-left, bottom-right images and top, bottom,
    > left a,d right borders (each has to be an image, unique for the four
    > borders, repeated for the rest), my problem is that I want to do that
    > with pure XHTML/CSS2, without using tables.


    The point is does it have to be a "liquid display" because that was my
    main concern

    derek
     
    derek giroulle, Jun 24, 2004
    #4
  5. "rf" <> wrote in message news:<qZoCc.59262$>...

    > Google for "css round corners". There are quite a number of hits there that
    > do exactly what you want.


    Those were the terms to use, indeed. I'm usually good at googling
    things, but I didn't figure that 'round' was the search term to use.
    Thanks for that!

    Thanks also to Andrew for his link to
    <http://www.alistapart.com/articles/customcorners/>. I didn't like it
    that much, though, because it relies on a big background image. What
    if someone browses my site at 1200*1600 (or even at 1200*3200 on a
    dual-screen setup)? Fairly unusual, but I don't like the idea.

    Finally I rolled my own code by modifying code examples found on
    Google. Probably not the most optimized XHTML code in the world, but
    it 1. validates as valide XHTML 1.1, 2. is easy to read and understand
    and 3. works in IE/Windows, FireFox Windows & Linux and Safari/OS X
    (and probably all other CSS2 browsers, but I've tried those ones).

    Here it is, for the record. And of course, suggestions / corrections /
    improvements are more than welcome.

    The XHTML code:

    <div class="mainbox-container">
    <div class="mainbox-n">
    <div class="mainbox-e">
    <div class="mainbox-s">
    <div class="mainbox-w">
    <div class="mainbox-nw">
    <div class="mainbox-ne">
    <div class="mainbox-se">
    <div class="mainbox-sw">
    <div class="mainbox-padding">
    <div class="mainbox-content">
    Content goes here.
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="clr"></div>

    ....and the related CSS:

    div.mainbox-container {
    padding: 0px 10px;
    }

    div.mainbox-e, div.mainbox-w {
    background-repeat: repeat-y;
    }
    div.mainbox-nw,div.mainbox-ne,div.mainbox-se,div.mainbox-sw {
    background-repeat: no-repeat;
    }

    div.mainbox-n {
    background: #ffffff;
    background-image: url("images/mainbox-n.png");
    background-position: top;
    background-repeat: repeat-x;
    }

    div.mainbox-e {
    background-image: url("images/mainbox-e.png");
    background-position: top right;
    }

    div.mainbox-s {
    background-image: url("images/mainbox-s.png");
    background-position: bottom;
    background-repeat: repeat-x;
    }

    div.mainbox-w {
    background-image: url("images/mainbox-w.png");
    background-position: left;
    }

    div.mainbox-nw {
    background-image: url("images/mainbox-nw.png");
    background-position: top left;
    }

    div.mainbox-ne {
    background-image: url("images/mainbox-ne.png");
    background-position: top right;
    }

    div.mainbox-se {
    background-image: url("images/mainbox-se.png");
    background-position: bottom right;
    }

    div.mainbox-sw {
    background-image: url("images/mainbox-sw.png");
    background-position: bottom left;
    }

    div.mainbox-content {
    padding: 15px 15px 15px 15px;
    }

    div.clr {
    clear:both;
    }
     
    Jean-Fran?ois Lacrampe, Jun 24, 2004
    #5
    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. Mark

    XHTML + CSS2 Layout Problem

    Mark, Oct 6, 2005, in forum: ASP .Net
    Replies:
    5
    Views:
    495
    gerry
    Oct 8, 2005
  2. oulan bator

    CSS or CSS2 and XML in Java

    oulan bator, Dec 15, 2005, in forum: Java
    Replies:
    14
    Views:
    1,094
    Oliver Wong
    Dec 20, 2005
  3. George
    Replies:
    9
    Views:
    5,048
    George
    Oct 25, 2004
  4. Bernhard Sturm

    IE 5.6 XHTML/CSS2.0

    Bernhard Sturm, Mar 13, 2005, in forum: HTML
    Replies:
    10
    Views:
    863
    Bernhard Sturm
    Mar 14, 2005
  5. mark | r

    xhtml frame borders?

    mark | r, Apr 8, 2005, in forum: HTML
    Replies:
    5
    Views:
    1,148
    Toby Inkster
    Apr 9, 2005
Loading...

Share This Page