How To Create Cleaner More Attractive Articles
- April 7th, 2008
- COMMENTS 2
As I write more and more on Elite By Design, there will always be methods I have to make my workflow quicker and more efficient.
Up until this point, I have always been using the <hr> code to separate items in my list posts. It worked at first, but soon got to be quite daunting and looked very unprofessional.
So I finally added in the few lines of code I needed to create a much more professional look to list posts. A great example of a website that uses this same method is PSD Tuts.
1. In your style.css file, add in these few lines of code:
.postlist {
background-color:#6edfed;
border:1px solid #cacaca;
padding:12px;
text-align:center;
margin-bottom:12px;
}
2. Next time you are writing a post and you want to separate your content, simply add this code into your article:
Your writing up here
<div class="postlist">
This will be in its own nifty section
</div>
Continue your article
Don’t be afraid to play with background colors, text alignment, image alignment, borders, and anything else that suits your needs. Click Here to see a great example of this code in action!
Thanks! I was working on an article early today and had a question about this. Helpful info!
Oh man
The simplicity of it. Actually, I have been fiddling with something similar to this on my site, created some div boxes that I put important content into. But it’s a bit messy, and they tend to collapse on me… I know the reason, but regardless.
Like this bit of code, it’s cool. So have stolen it thank you very much. Does this not collapse if you just have an image in the box? Mine is OK when I have a paragraph, but if its just a pic, then I have to insert some ‘cleared’ and ‘block’ classes to ensure it see’s the image. JUst be good to know if your little snippit recognises just an image minus text>?