Favorites » His Blog
-
-
How to draw a box in your posts
I sometimes get asked how I draw the boxes in my posts. The method involves using in-line CSS code within any of the HTML tags allowable by the SU code filter. I use the 'center' tag usually. If you want to know more about Cascading StyleSheets (CSS) here's a handy reference.
< center style="border: 1px solid rgb(0, 0, 0); float: none; margin: 20px; padding: 40px; background: rgb(255, 255, 255) none repeat scroll 0% 50%; width: 550px; text-align: justify; color: rgb(0, 0, 0); font-family: Verdana,sans-serif; line-height: 180%; font-size: 85%; letter-spacing: 0.05em; ">
Remember to remove the space after the '<' to enable the center tag. If you want to center the box within the page enclose it within another center tag and close it after everything else.
There is more code here than you need to simply draw a box. You can see attributes to control text size, font, color, background color which you can ignore or play with.
To simply draw a box all you need to set is the border attribute. It is now set to solid black one pixel. You will want some padding between the content and the border. It is set here to 40px. You will also want some margin between the box and other content. It is set here to 20 pixels but I more usually use 40 or more. Increasing the amount of space between graphic elements makes them easier to see so be generous.
Enjoy.
-seb
|
his Favorites
Add him as a friend >
