Member Avatar for OmniX

Here are a few examples:

http://www.quincy.com.au/

Now I dont know what is the name for it?
(anyone help me with the offical name, much appreciated)

What I have analysed is that it is a image broken into 4 parts, top right, bottom and left.
Then within those border images are the navigation bar and the content.

Combined images to make a nice border affect.
Now how is this achieved?

Also achieved is the centering of the 'box' also?
This is an affect I would like to achieve also.

If someone could give me an empty box tutorial, code, etc.
It would be much appreciated.

Thanks, Regards X

  • 4 Contributors
  • 5 Replies
  • 103 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ccube921

Dani AI

Generated

That framed “broken image box” is usually called a nine‑slice or border‑image frame. Modern CSS provides border-image (the cleanest approach); older sites used sliced bitmaps plus extra wrappers or multiple background images. Inspecting the source, as suggested, helps, but using border-image simplifies the markup and avoids lots of nested DIVs.

A minimal border-image example:

<div class="frame">Inner content</div>

.frame {
  border: 24px solid transparent;    /* match this to your slice size */
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;                    /* horizontal centering */
  box-sizing: border-box;
  border-image-source: url("frame.png");
  border-image-slice: 24 fill;       /* slices the artwork into corners/edges */
  border-image-repeat: round;
}

If you need an older-browser fallback (or want to use four corner graphics), multiple CSS background layers are an easy alternative without extra markup:

.frame {
  background:
    url("tl.png") no-repeat top left,
    url("tr.png") no-repeat top right,
    url("bl.png") no-repeat bottom left,
    url("br.png") no-repeat bottom right,
    #fff;
  padding: 40px;   /* leave room for corner art */
  max-width: 800px;
  margin: 0 auto;
  box-sizing: border-box;
}

Troubleshooting tips: ensure the border width equals your slice values (mismatches cause gaps or stretched corners); use fill if the center should be drawn from the image; test on real devices (high-DPI images may be needed). For cross‑browser support and details see the MDN border-image docs (MDN border-image) and status on feature support (Can I Use: border-image). Kudos to and for raising cross‑browser/centering concerns — progressive enhancement with fallbacks is a practical approach.

Recommended Answers

All 5 Replies

Member Avatar for buddylee17

It's just a bunch of divs nested together with an external CSS file. You should be able to view the source code and see how it is done. You'll also want to look at the css file to see how the elements have been styled. It's all there.

Member Avatar for OmniX

I have done that but there are still missing parts that I cannot get around :(

Member Avatar for OmniX

Ill just work off the website's code and hope for the best...

Member Avatar for jbennet

Works for me in FF3...

Member Avatar for ccube921

cross browser problems, that leaves me with more than enough to chew on, but if it is positioning problems here are some things to be known: use margins AND padding (IE only does margins), I posted a compatible centering code here( the last post on the page ). As buddylee said, it was a bunch of nested divs.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.