XHTML/CSS2 image borders.

  • Thread starter Jean-Fran?ois Lacrampe
  • Start date
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
 
R

rf

Jean-Fran?ois Lacrampe said:
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.

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.
 
A

Andrew Urquhart

*Jean-Fran?ois Lacrampe* said:
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/
 
D

derek giroulle

Helle JF,

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

Jean-Fran?ois Lacrampe

rf said:
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;
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top