HOME | DD
kuschelirmel-stock β Journal CSS - Part 2
Published: 2006-11-10 16:19:51 +0000 UTC; Views: 38297; 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
thanksssssssssssssssssssssssssssssssss
a million thanks dear, you are the best
π: 0 β©: 1
awwww
looks great!
π: 0 β©: 1
π: 0 β©: 0
Thank you for laying this out in a way that I can understand. Your tutorials are always so helpful, so thank you so much for creating them and helping me learn this.
π: 0 β©: 1
before dA I had been playing with css, but in a different way and the dA-way had me confuzzled like hell (that was when css was admin priviledge only). So I only really got into it when it was released for everyone and the little helpers like ^thespook 's journal structure reference or Β’mynti 's templates were released.
π: 0 β©: 0
Thank you! This was very helpful!
π: 0 β©: 0
.awesome {
award: 14px emmy gold;
π: 0 β©: 2
you forgot your closing }!!! XD
π: 0 β©: 1
you're most welcome
π: 0 β©: 0
Thank you so much for sharing this!! I can't even begin to tell you how helpful this is!!
π: 0 β©: 1
π: 0 β©: 0
Gibts das Tutorial nicht in Deutsch? 
Aber nice
π: 0 β©: 1
nur auf englisch, sorry
π: 0 β©: 1
Schade
Naja...
π: 0 β©: 0
would you happen to know how to position text to the right? i saw someone who wasn't subscribed with it like that but forgot to ask them.
π: 0 β©: 0
This is a great tutorial, I will definately use it
π: 0 β©: 0
does this only work if you payed the extra money for a SPECIAL DA account?
π: 0 β©: 0
For some reason when I tried to use the code for your two columns it didn't work until I looked at the template you used this CSS for, but it was probably just me. I applied the code you wrote in my Journal but for some reason I still don't think it came out right.
π: 0 β©: 1
looks good to me
π: 0 β©: 0
Thanks for the great tutorial
I made this: [link]
π: 0 β©: 1
thanks for the link, looks great
π: 0 β©: 1
I've always wanted to know how to make that right column. Both the guides have been really helpful
Very clearly explained too
π: 0 β©: 1
glad I could help
π: 0 β©: 0
Okay, another question. I can't get the right bar to work! I mean, its only appearing at the top. this is the code(s) I'm using
.right {
width: 140px;
padding: 40px 0px;
text-align:center;
float:right;
}
.content {
background: url([link] ) repeat-y top right;
margin:0 145px 0 0;
padding:0 20px 0 5px;
}
π: 0 β©: 1
I'm sorry I do not have time to go through your code like this. please use #csshelp on dAmn for this kind of stuff.
thank you for understanding
π: 0 β©: 1
YOU.... ARE...
AWESOME!!!!!!!!!!!!!!!!!!!!
This helped so much! When I make my journal, I'll tell you okay?
Thanks so much!
π: 0 β©: 1
you're welcome
π: 0 β©: 0
I used both of your tutorials to make this: [link] Out of all the tutorials on dA, yours and :devbarigna:'s were the most helpful. I just love how user friendly it is and how you explain things, it is most helpful! I was wondering if you could help me fix a few things I have to fix on mine, on my main page my comment/previous journals links show but not in full view. Also my moods are messed up on the bottom and run into the cat and such. And up top where the space is between the heading and then my text/right menu, I was wondering if there is a way to fix that at all? Thank you so much!! I really really appreciate you making these
π: 0 β©: 1
It looks all right to me.
If you need on the spot help, please visit #csshelp on dAmn, they will surely be able to help you out.
π: 0 β©: 1
Aw thanks, I didn't know they had that on dAmn, that really helps! Thank you
π: 0 β©: 0
Thanks so much for the tutorial, i finally got my side menu to work thanks to this. Well, it doesn't work in explorer, and i have no idea why... But i guess i'm half way there
π: 0 β©: 1
I just ckecked a journal in which I knew a deviant had it working in IE as well - it's *autumnights and in the code, the only difference is that he has the line "position:relative;" added to the .right div... that might do it for IE.
if you try, please tell me if it worked, I need to get my code right as well
π: 0 β©: 1
Oh wow, that did it! Thanks so much
π: 0 β©: 1
π: 0 β©: 0
I cant seem to get the .right and .content working I looked at the code and I cant see anything wrong
this is what happened on my journal =J-Ro-20
π: 0 β©: 1
π: 0 β©: 1
my girlfriend fixed it for me
π: 0 β©: 1
there still seems to be a problem with IE I didn't know about when writing the code - you need to include position:relative; in the .right css, then it will work
π: 0 β©: 0
Thankyou sooooo much for this... here is my edited version.. [link]
π: 0 β©: 1
π: 0 β©: 0
<= Prev | | Next =>