This is indeed a very nice example and reminds of the way that we implement round borders at work at the moment, which works across Firefox, Internet Explorer 5/5.5/6.0/7. Opera, Safari…
Then you just wrap all 4 layers within each other from .box-topleft to box-bottomright and place the content in the innermost div and add some padding and you are done. Alot of other nice stuff can be done this way, like applying shadow borders and stuff like that, though some more css needs to be added then, like can be seen here http://www.webtoolkit.info/css-drop-shadow.html .
About structure/presentation: Yup, structure and presentation are to totally different things. The structure can and should mostly remain the same and the presentation changes through the stylesheet.
Regards from a happy 24 ways advent calendar reader.
Jens
Jens Nedal
This is indeed a very nice example and reminds of the way that we implement round borders at work at the moment, which works across Firefox, Internet Explorer 5/5.5/6.0/7. Opera, Safari…
.....
.box-topleft { background: url(top-left.gif) no-repeat top left;
}
.box-topright { background: url(top-right.gif) no-repeat top right;
}
.box-bottomleft { background: url(bottom-left.gif) no-repeat bottom left;
}
.box-bottomright { background: url(bottom-right.gif) no-repeat bottom right;
}
Then you just wrap all 4 layers within each other from .box-topleft to box-bottomright and place the content in the innermost div and add some padding and you are done. Alot of other nice stuff can be done this way, like applying shadow borders and stuff like that, though some more css needs to be added then, like can be seen here http://www.webtoolkit.info/css-drop-shadow.html .
About structure/presentation: Yup, structure and presentation are to totally different things. The structure can and should mostly remain the same and the presentation changes through the stylesheet.
Regards from a happy 24 ways advent calendar reader.
Jens