J
Jean-Fran?ois Lacrampe
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
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