I will be making a series of CSS Journal tutorials/helps/tip and tricks, so if you like them, make sure to keep an eye out on my journal.
Kind of a second part to the Make your CSS Journal but not making a whole journal though.
Just some tips and tricks.
Sub headings
Make sub headings like the one above can be used with extra divs. With a subscriber, you are allowed to use div tags in your journal, so how do we make a sub-heading like above? Well if you add this to where you want your heading to go
< div class="subhead">Heading Title< /div>
Note: Spaces between the < and div should be taken out.
And add something like this into the CSS box, changing anything you want.
.subhead{
border-bottom: 2px solid #821122;
font-family: Courier New, Courier, tahoma, arial, verdana, sans-serif;
font-size: 16px;
}
This is the css that I used for the sub heading above.
More internal divs
Time to learn more about internal divs, these are divs that we use inside the journal but not pre-made ones like the journal itself. What about making areas for thumbnails or featured news, etc? Making them a different colour.
Well first off, add another div class naming it "thumbnails" or something (like we did with the subhead) and the CSS is as follows.
.thumbnails{
background: #333333;
color: #CCCCCC;
text-align: center;
}
This will turn our like this.
Styling the thumbnails
We can style these thumbnails if you like with adding an extra border around them to make them stand out more, and also having the border change colour on mouse over.
.thumbnails img{
border: 6px solid #FCFCFC;
}
.thumbnails img:hover{
border: 6px solid #821122;
Scrollable divs
Pretty simple. But what if you're showing a lot of thumbnails but don't want the journal to be so long? Well a simple CSS styles div will help with this making a div box scrollable.
.scroll{
position: relative !important;
overflow: auto!important;
width: 100%;
height: 200px;
text-align: center;
background: #561420;
}
The div goes on just like the others.
!Important
If you look at a lot of CSS for the journals made by others. You'll probably notice that they add !important at the end of just about all of their CSS statements, for example, background: transparent !important;
It is a fact that you do not need to add this to your CSS, so it's a waste of time. Don't do it
Ok so that's it for now. Now you should be able to make your own basic Journal CSS and also add a few of your own div elements into it. With the next part, we'll start using images in our journal, and learn about the margin and padding elements as well as a few bits more.
Live Preview
Edited by nitr0x, 01 March 2007 - 06:21 AM.