HOME | DD
kuschelirmel-stock — Journal CSS - Part 2
Published: 2006-11-10 16:19:51 +0000 UTC; Views: 38299; Favourites: 900; Downloads: 226
Redirect to original
Description
EDIT Jan 2014: This way to code, while still valid to a degree, is rather outdated.You can find an updated guide here:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Part 2 of 2 - the corresponding template can be found here www.deviantart.com/deviation/4…
This tutorial deals with custom divs: how to set them up, what can be used, what code is needed in the journal etc.
You might want to read Journal CSS Part 1 first:
it deals with the process of designing a CSS journal and of how to get the basics coded.
If you have no idea what CSS is, I suggest you read up on the basics before tackling this tutorial.
In here, I just assume you know what a div is...
EDIT: To make the right colum work properly in IE as well, add position:relative; to the div called .right - I'll update the file to reflect this asap!
Also try these links:
thespook is compiling a CSS guide (I'll link it here when it's finished), he also has a nifty Journal structur reference in his gallery.
If you speak German (or French), you can try selfHTML.org - it's not only great for learning HTML, CSS, Javascript,... but also offers quick references on the code you can use.
zilla774 wrote a news article Journal CSS Resources which has some more links to things you might find useful.
And last but not least, the link to the Lorem Ipsum Generator which also explains where that text comes from.
Related content
Comments: 185
of all the tutorials on dA that I've read, this one was the best! thank you so much!
👍: 0 ⏩: 1
awwww - thank you for the sweet compliment
👍: 0 ⏩: 0
Thankyou so much!
This is a beautiful tutorial and I have used this and the scorpion full layout in making my journal.
👍: 0 ⏩: 1
glad I could help
👍: 0 ⏩: 0
this looks interesting and useful 
nice one!
👍: 0 ⏩: 1
Again, great job~! I'm very impressed... the first time I started making a tutorial, my hard drive broke before I could make a backup, so I've never done a completed one. 
Keep up the great work...
~Blood~
👍: 0 ⏩: 1
👍: 0 ⏩: 1
Great tutorial again
Reading the tutorial and analysing the temlate at the same times really helped me 
Thank you for providing it
👍: 0 ⏩: 1
👍: 0 ⏩: 1
Me again (other account
I used your tutorial to create: [link]
Thanks ^^
👍: 0 ⏩: 0
its very helpfull !, im so stupid in deviant
thanks a lot
👍: 0 ⏩: 1
you're welcome
👍: 0 ⏩: 0
Lots of info provided here, and arranged rather nicely. I've taught myself some rudimentary CSS, and this is helping me to learn more.
Quick issue though: I can get everything to look exactly as the image, using the template and images provided, just I can't get the right column to work. I can get the 'space' to appear there, but I can't get any of the images or any sort of text to appear there. It's just... blank.
Other than that though, everything seems to be working fine. Just that one part.
Also, I'll just ask this here. Is it possible, in the dA journals, to position divider boxes so that I can have a box on the left, and one to the right of it, and the same underneath?
👍: 0 ⏩: 1
hmmm... *thinking*
you did the
if so, check your code if you forgot the ; somewhere or if you forgot to close some brackets {}
if none of these are the reason, it would be good if you could use the css in your journal so I can take a look at the code... it's sometimes hard to find a mistake without looking at that I'm afraid.
as for your second question: can you draw something to show me what it is that you want exactly? css is nearly limitless, so chances are you will be able to put it in your journal, but to give you some code I'd need to know what it is that you want
👍: 0 ⏩: 1
Hmm... nevermind about the 'float' thing. Turns out it was working the whole time, just IE wasn't showing them for some reason. 
And the second question: If the link works, this is what I'm talking about > [link] . Although I'm not sure if that could be done on the dA journals, but maybe... Possibly using floats again?
👍: 0 ⏩: 1
IE doesn't display them? hmpf, of course, damn thing
it can be done alright - the problem I see there is that the width of the journal isn't really big especially on the userpage.
you'd have to adjust the content and right div and just use them twice...
👍: 0 ⏩: 1
IE... it's weird. It has them, just they are 'behind' the background it seems. If I put the mouse over the area, the little pop-up title I chose still comes up... Oh well, if anyone's looking at it with Firefox I don't think they'll have any problems.
And for the second thing, I'll try messing around with the divs, see if I can get it to work in the arrangement I want. It's not a real problem about the small userpage size; it's a sorta 'rank' journal for a club, consisting of avatars in the boxes, and it'd only really be viewed on the journal page, which has a bit more space.
Thanks for the tutorial. Very helpful.
👍: 0 ⏩: 1
hmmm, perhaps giving that div a high z-index will fix things... try adding: z-index: 60;
might help...
and if you need help on the css for the club, let me know
👍: 0 ⏩: 0
hey! just need to ask you something..how do i modify the font size of the text in the journal?
👍: 0 ⏩: 2
al right, let's see:
the text and background color and everything else that is supposed to affect the whole journal is best changed in .journalbox (thats the very first thing in part one of the tutorial)
look for the .journalbox div and change the text size here:
font:12px Verdana...;
change the 12px to whatever you like.
the background color is changed in there too, but I think you've found that line already? (background-color:#??????
one more thing I'd like to show you for the header is that you can center the text as well as the background image using:
.journaltop {
background:url(...) top center no-repeat #ffffff;
text-align:center;
...
}
leave out the large padding to the left, just set it to
padding:5px;
for example to get the same distance from all borders for the text.
hope this helps,
Jasmin
👍: 0 ⏩: 2
hey thank you very much for your help! i managed to centre the title...and i also added a bottom pic...what do u think?
however, i can't see to centre the date :/
👍: 0 ⏩: 1
I just noticed I forgot to say you need to change the text alignment for .journaltop as well as .journaltop h2
- this will push the date to the middle, too
👍: 0 ⏩: 1
thanks! should you need the css of my journal for anything, just note me ok?
👍: 0 ⏩: 1
oh wow! thank you very much!!! I was going to ask you that centre thing!! 
👍: 0 ⏩: 0
ok! to this i managed! thanks for reading on!
👍: 0 ⏩: 0
YaY...now to save and re-read after I have coffee and can comprehend <> {/ speech. haha
👍: 0 ⏩: 1
*goes to make some*
if you need anything for your css, just tell me. As long as I can make some time, I'm always willing to help.
👍: 0 ⏩: 0
girl you are a WIZ!!!
and i promise to upload mine in the very near
future.
thanks so much for sharing!
👍: 0 ⏩: 1
WIZ?
I'll just assume it's something positive coming from you hehehe
near future
you can take your time... though I'd love to brag with your layout LOL
and you know me, I'm a sharer... erm... sharing-irmel... erm, you get the drift
👍: 0 ⏩: 0
<= Prev |