| Deviant Login | Shop | Join deviantART for FREE  |
Take the Tour  |
Make your CSS Journal #2So in the first one, we learned how to create our first basic CSS Journal. But now it's time to learn a bit more yes? Make your CSS Journal stand out a bit more with adding some of your own bits and pieces into it. In the this article, I will be replacing all < and > with the characters [ and ] so that the code will show properly.
Sub Headings
With CSS Journals allowing internal divs, it's very easy add extra bits into it. A comment usage is sub heading, just like using the bold text on news to define a certain area of the article. You can find them almost every where.
.subhead{
border-bottom: 2px solid #821122;
font-
Make your CSS Journal #7 {Special Edition}That's right, as it says in the title, this article is a special edition one. Why? Because I'm going to give you the CSS Code to one of my journals, the Silver Skin which you can find here as a live preview.
Now it's not exactly the easiest skin to make, so bear with me on this, but you will understand a lot of things after, I will give as much details as I can on each block of code.
The Images
Now before we can even start, we need to get our images right? Here's the images we will be using for this journal.
Top/Bottom Bar
Background
Sub-Heading
And also the icons on the right thanks to Dave Lanham for them.
Getting the box do
Make your CSS Journal #6Ok ok, i confess, this was meant to be a special edition one, but I haven't yet completed that, the special edition one will be on creating a full CSS Journal layout using dreamweaver first, I did start it, and it's about half done, but now I'm thinking of changing the look to a better one, so it will be re-done.
Now on for the sixth part in our series, there isn't much to tell at the moment, here are some bits.
Two Columns
Would you like to have two columns any where on your journal? These are actually widely used, so here's how you do them.
.divcontain{
width: 100%;
}
.divleft{
display: inline;
width: 48%;
float: left;
back
Make your CSS Journal #5So we're coming quite a way for creating journals and customization. But still, there are more you can do, possibilities are almost endless. In this part, we will be doing some extra bits you can add into your journal. But unfortunately, half of these do not work in IE.
About this journal
The "About this journal" is to have a section on your journal that says a quick words about your journal, this includes the design, what it's about, etc. When on mouse hover, another big expands saying about it. Useful for a vary of things. Here is how you do that.
.expand sup{
display:none;
}
.expand:hover sup{
display:block;
width: 200px;
back
Sta.sh
