Ok 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;
background: #FCFCFC;
}
.divright{
display: inline;
width: 48%;
float: right;
}
.divclear{
clear: both
}
<div class="divcontain"><div class="divleft">Left Side Here</div><div class="divright">Right Side Here</div><div class="divclear"> </div></div>
Pretty simple right?
Image Hover
Swap images when they get hovered over, great for buttons as you can see
in this journal.
This is the image I used,
view here. As you can see, it's got the two buttons, one under the other, the top on is what will show, the bottom button is what will show when it's hovered over, Yes, they are one image, we can use CSS to change the
position of the background.
And the CSS
.menu a{
display: block;
background: transparent url('[link]) no-repeat;
width: 147px;
height: 22px;
text-decoration: none !important;
padding-left: 17px;
padding-top: 7px;
color: #ffffff;
font-weight: bold;
}
.menu a:hover{
background-position: 0 -29px;
color: #84534c;
}
<div class="menu"><a href="http://janoo-bachaa.deviantart.com/gallery/">My Gallery</a></div>
Simple right? All that's happening is the whole background image can't be seen because out div isn't big enough to show the bottom half, but when the div is hovered over with the mouse, we change the position of the background, the 0 means 0 pixels to the left, and the -29px is -29 pixels up, so we show the bottom half of the button instead.
Well as I said, there wasn't much in this one, but they can be helpful things to use though, so I thought I should share them.
And as usual, Journal CSS!
=
eldris - Has a very nice colour scheme.
=
JLStock - It's a very long journal and maybe some CSS Scroll boxes could help, but it's a nice look.
*
kuschelirmel-stock - Certainly one you'll have to check, and take a look at her custom journals too.
One more thing
Oh yes, there is one more thing I would to add, later today, I will be creating a new deviantART account under the name of "silvercss" - This account will hold all of my CSS Articles, and also all CSS journals that I have created, and will also offer:
1. Free Journal CSS available to download
2. Custom made journal CSS for free.
So keep a look out for that account to start up.
Devious Comments
--
Check my latest News
Check my latest!
There is a certain way it should be made, and it shown in the example.
--
Check my latest News
Check my latest!
--
Check my latest News
Check my latest!
--
"You're so short you're 2-dimensional!!!!!!!!"
--Edward Elric
DON'T STEAL MELLO'S CHOCOLATE!!!
Maybe in your next article put a link to all of the previous articles? It would make life easier.
--
Icon credits: =bad-blood and =BoffinbraiN.
-
Popcorn-pops: n. feminine; 1Absolute Crazy 2Addictive3The best movie snack around.
[link]
--
NO. in my icon, that is not a penguin screaming! It is my OC, Bird McCreepy and for info: [link]
Pretty random, but oh well:
The Angels are the best team ever!
Previous PageNext Page