Journal CSS: Snazzy borders - updt!

Here we have but one technique (with a few variations) you could use to get some snazzy borders happening in your journal.

You might have seen this sort of thing in some of the templates those awesome deviants have made available for you, but unlike their method, which probably used many div tags, I've managed to remove most of the div tags and replace them with img tags - a minor improvement that means less code is needed each time you want to use a snazzy box. It's also a neat bit of CSS acrobatics that I couldn't resist

With some smart use of Cascade (Cascading Style Sheets remember?) you can also easily create alternate box designs.

It's not as copy+paste friendly as the other examples I've shown so far, but I'll hold your hand through the code examples

They will stretch vertically until infinity and beyond, though how far wide they stretch depends on the width of some of the images. The CSS will stop it from going wider than designed though, so no one will ever see broken seams.

All my examples use alpha transparent PNG images - but you don't have to if your journal's background is a solid colour. If you have a background image on your journal though, you're going to have to use PNGs. Sucks to be IE

Das Snazzy box


Das Exploded Images


Das HTML
<div class="mydiv"><div class="body">

Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law.

<img class="left" /><img class="top" /><img class="tcorner" /><img class="footer" /><img class="fcorner" /></div></div>

Das CSS
.mydiv {
max-width: 475px;
position: relative;
margin: 35px auto 35px auto
}

.mydiv .body{
background: url( :link:i.koopseht.net/box/right.png: ) right;
padding-right: 50px;
margin-left: 46px;
_background: none!important;
}

.mydiv.scroll .body{height: 300px; overflow: auto}

.mydiv .left{
background: url( :link:i.koopseht.net/box/left.png: );
width: 46px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
_display: none!important
}

.mydiv .fcorner{
background:url( :link:i.koopseht.net/box/botcorner.p…: );
width: 48px;
height: 48px;
position: absolute;
bottom: -48px;
left: 0;
_display: none!important
}

.mydiv .footer{
height: 48px;
background: url( :link:i.koopseht.net/box/foot.png: ) no-repeat right;
position: absolute;
display: block;
bottom: -48px;
right: 0;
left: 48px;
_display: none!important
}

.mydiv .tcorner{
background: url( :link:i.koopseht.net/box/topcorner.p…: );
width: 48px;
height: 48px;
position: absolute;
top: -48px;
left: 0;
_display: none!important
}

.mydiv .top{
height: 48px;
background:url( :link:i.koopseht.net/box/top.png: ) no-repeat right;
position: absolute;
display: block;
top: -48px;
right: 0;
left: 48px;
_display: none!important
}

WTF?
Okay. Some pretty crazy stuff going on here at first glance, but I'll do my best to explain.

The max-width of .mydiv is there so that your boxes can't expand wider than your images allow. It would be possible, using the same techniques already used, to make it so your boxes stretch as wide as you like. Journals don't look too good when they get too wide IMO (noticed this yet? ) though, so I haven't bothered with this - though if you beg ask nicely I'll share.

All of the graphics that make up the border images are applied as backgrounds to a group of image tags (.left, .fcorner, .footer, .tcorner, .top), and the .body div.

The width/height values applied to the images are to give them dimentions. Because we're applying background images to blank image tags, you have to force the width/height otherwise they'll be 0px by 0px (ie invisible).

There are some things you need to watch out for with the CSS for the image tags:

1. The header and footer pairs need to be the same height. You can make the corner images different widths if you like, but, for instance, .tcorner and .top need to be the same height, otherwise you'll find things overlap and look odd
2. Following on from the last point, the left of .top and .footer is the width of the corner images. This makes sure .top doesn't overlap .tcorner.
3. Those negative values in top and bottom are the height of the footer/top images. You change this value to push the images down/up into place.

Those dimmed properties with the underscores prefixed are a hack. They're actually not valid properties but IE is stupid and applies them anyhow - which is good for us because it means we can target it specifically and hide the stuff it does wrong. Very handy. You could for instance create a STOP USING A CRAPOLA BROWSER message, use display:none to hide it in good browsers, and then _display:block/inline to make it visible in IE. WIN!

Das Snazzy box wit scrollable area


To make the body scrollable, add the classname 'scroll' to the .mydiv div - "<div class="mydiv scroll">". If you want to change the height of the box when set to scroll, change it in the CSS.

Das Snazzy box wit background and nesting so you sees PNG


To nest them, as in my example above, place the next box inside the .body of the last:

<div class="mydiv"><div class="body">

Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law.

<div class="mydiv"><div class="body">

Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law.

<img class="left" /><img class="top" /><img class="tcorner" /><img class="footer" /><img class="fcorner" /></div></div>

<img class="left" /><img class="top" /><img class="tcorner" /><img class="footer" /><img class="fcorner" /></div></div>

If you nest too many and someone views your journal on a lower resolution - or on your userpage where everything is narrower - things will start to get real tiny, so keep that in mind

Das Snazzy fixed-width box wit alternate graphix
It's fixed width because of the gradient - it'd look wrong if allowed to change width. It's not ideal to use fixed width boxes on deviantart... especially since our userpages squash things up all the time, but it's up to you.



The HTML is slightly different to the rest - with the corner and 'left' images removed (since it's fixed width they're not needed anymore) :

<div class="mydiv mydiv_alt"><div class="body">

Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law.

<img class="top" /><img class="footer" /></div></div>

For the CSS, you still use the normal CSS above, but this set of styles is added in addition to it. Place the following BELOW the normal fancy box CSS.

.mydiv_alt{width:448px}
.mydiv_alt .body   {background: url( :link:i.koopseht.net/altbox/body.png: ) repeat-y center; margin-left: 0; padding-left: 50px; left: 5px}
.mydiv_alt .footer {background: url( :link:i.koopseht.net/altbox/foot.png: ) center; left: 0}
.mydiv_alt .top    {background: url( :link:i.koopseht.net/altbox/head.png: ) center; left:0}

oh, and one final note. If you want to make a div with a fixed width and height, and want to know how to apply fancy border to it, it's like so:

background:url(...)



hoo roo