HOME | DD
kuschelirmel-stock — Journal CSS - Part 2
Published: 2006-11-10 16:19:51 +0000 UTC; Views: 38295; 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
Omg, your tutorial is amazing. Thank you so much for uploading it! I used your code to help me create [link] which is my journal for my page. 
👍: 0 ⏩: 1
👍: 0 ⏩: 0
This tutorial was great. It really helped me understand a lot about the custom div classes. I was able to get some good practice in and also make an nice little journal skin .
Hopefully, I'll be able to make more advanced skins in the future, but for now I'm happy with this.
Thanks a bunch!!
👍: 0 ⏩: 0
another great easy to understand tutorial! Thank you so much!
👍: 0 ⏩: 0
I used your awesome tutorial (part 1 and part 2) to make the CSS for my new group: [link] thanks!!
👍: 0 ⏩: 1
it looks great! I'm glad I could help!
👍: 0 ⏩: 0
Hmm I'm stuck on one thing. Links don't seem to work in my journal, why is that?
👍: 0 ⏩: 0
Oh, by the way, can you give text borders? D:
👍: 0 ⏩: 0
YOU ARE A WONDERFUL PERSON FOR MAKING THIS!!!!
If I was ever even a tiny bit interested in having a child, I would name them after you.
I will post my outcome later. : D
👍: 0 ⏩: 0
thanks for this tutorial.
It has helped me a lot.
I translate into Spanish
Do you agree?
(I will put the respective Copyright)
👍: 0 ⏩: 1
I do not want my tutorials translated into languages I do not understand because I cannot garantuee they've been translated correctly. So the answer is no, sorry.
👍: 0 ⏩: 1
Thank you very much for creating this tutorial (both part 1 and 2). It was very helpful.
Very easy to understand as well. :3
👍: 0 ⏩: 0
You have to be a member to use CSS right?
That's too bad XD Ah well, it's an awesome tutorial and I'm sure I'll use it someday when I got a membership :3
Thank u
👍: 0 ⏩: 0
When you look at the full view for mine, the header and footer get cut off.
How do I fix it = (
[link]
👍: 0 ⏩: 1
it's pretty simple: your image isn't wide enough. when the tutorial was written, people had smaller monitors
👍: 0 ⏩: 1
Really? = O It looks too wide to me, being cut off from the journal haha
What px size should the image be? And how can I fix it :/ Or is there anyway to adjust the journal size? xD
👍: 0 ⏩: 1
it depends on your monitor size what size of image would be best for you - your visitors have different monitor sizes and will view it differently. so there's no ideal size, something always gets cut off. try this [link] maybe it helps explain.
👍: 0 ⏩: 0
Well, this will be useful. I've always wondered how people customized their journals...
I've 
👍: 0 ⏩: 0
Oh my God... this is a fantastic tutorial! I am not technologically-minded and barring a few flase starts, I managed to use your tutorial to create my own journal [link]
Thank you
👍: 0 ⏩: 0
OMG this really helps
great tutorial >3<
and I get a lot of concepts of the CSS thing
but one question :U
What should I do to put the display image in the center?
because mine is small and I want it to be in the middle :3
👍: 0 ⏩: 0
Thanks alot, your CSS tutorial will help me alot ^^
👍: 0 ⏩: 0
Hi, thank you very much for the tutorial! You simply told me everything I need. ^^
👍: 0 ⏩: 1
That's awesome!
Really helpful
Thanks for sharing *hugs*
👍: 0 ⏩: 1
you're welcome
👍: 0 ⏩: 0
Hi!
First of all, thanks for making this tutorial - it really helped me with designing my own journal (here's the [link] ).
I do have a question, though: Is there a way to get my journal header to display correctly in IE? 'Cause it gets cut off right after the date. (it displays correctly on Firefox and Safari, though)
Again, thanks!
👍: 0 ⏩: 1
I'm sorry, I'd need to examine the code to find out which I don't have time to do - the original code should be compatible though
👍: 0 ⏩: 1
Actually, the original code wouldn't be that compatible with the layout. I already knew some css prior to this (though it only applied on wordpress templates - I didn't know how the journals worked), so I made a few...alterations. Guess I shouldn't have skipped that "IE compatibility" tutorial... 
Oh, well. Thanks for the help, though.
👍: 0 ⏩: 0
I don't know how it disappeared from my faves, but I've re-faved your Scorpion Raw template , thank you for creating it. I've enjoyed using it, but the vertical divider on the right has never shown up, in IE or FF. I followed your suggestions for modification (position;relative; ), but nothing I do will make that vertical divider show up. Any idea what I might be doing wrong? Thank you for your help (and the template!)
👍: 0 ⏩: 1
my guess is you didn't upload the image or linked it up wrong
👍: 0 ⏩: 1
Well, the image was uploaded; here's the snippet of code where I put it. Maybe you can spot the error (if you have the time and inclination?)
}
.right {
position:relative;
width:140px;
padding:40px 0px;
text-align:center;
float:right;
}
.right img {
margin:5px;
}
.right a {
color:#FFD700;
}
.right a:hover {
color:#DAA520;
}
.content {
background:url([link] ) no-repeat center right;
margin:0 60px 0 0;
padding:0 20px 0 5px;
👍: 0 ⏩: 1
I'm sorry, I can't tell you anything on the spot - have you tried using the original code and just inserting your image to see if it works then? it should, you know. so if it doesn't work now, you must've accidentally deleted or altered something.
👍: 0 ⏩: 1
Hmm, no, I didn't try that. Thanks!
👍: 0 ⏩: 0
I'm learning CSS by myself so since im self-taught i still have some gaps i need to fill, -mainly basic things- and i'd be really grateful if you could help me with this one:
How can you calculate distances when setting a padding/margin or widths/heights? for example, how did you calculate the right width for the side bar? Did you actually experimented till you found the right one or is there any easier/more practical way?
Same for images, if i want to draw a banner for my header, how can i know its width knowing everyone has a different window size? will the browser resize it to the size that person needs?
Thanks and sorry for the inconvenience
👍: 0 ⏩: 2
I always start in Photoshop and go from there: there you can see how many pixels you used for the sidebar (usually, somewhere between 100 and 150px - depending on if you want to be able to put stamps in - will be good) and then you have to put that as width. Though you have to subtract the left and right padding to make it work in firefox properly (IE uses the actual width you give it) -- I think I'll make a tutorial on that soon, it's not so easily explained.
Images will not scale, they will get cut off or leave empty space if the monitor resolution is very high and the image not wide enough. You can therefore either make the header image fade to the side so it will not look strange when the journal gets wider or you could try to make it tile (repeat). Or you could do what I do: use max-width: 850px; in the .journalbox so firefox will cut the journal off after a maximum of 850px -- downside is thhat IE doesn't get that.
I'll try to make some more tutorials about those things soon, I hope this was helpful to get you started though.
👍: 0 ⏩: 1
it was indeed! thanks a lot!
👍: 0 ⏩: 0
Regardess this two questions, i did learn a lot from your tut so ty ^^
👍: 0 ⏩: 0
this is awesome, actually im having an issue getting graphics to come up and I cant find more info on the exact semantics of the codes that are supposed to be used... any pointers?
👍: 0 ⏩: 1
how about trying a reference for html or css? google is your friend as I have no idea what your problem is. I can't read minds you know.
👍: 0 ⏩: 1
well I have all of the coding exactly the same as any jouranel css and have referenced the html aid and its still not showing up. Does it have to be up somewhere online other than dev art? the dev art addresses dont seem to include a file extension or the actual file name. I was wondering if that could be whats causing the issue.
👍: 0 ⏩: 1
you need to upload the images on the internet and you have to insert the url of the image and not the page it's on. for images hosted in your scraps, right click and choose "copy image url" (or something similar, I am on a German version of windows so I don't know exactly).
👍: 0 ⏩: 1
yeah i figured it out, photo buckets good for that, its painfully slow but it gives you four different tags for this kind of thing, the direct llink one works great for this... so um thanks for your time
👍: 0 ⏩: 0
| Next =>