HOME | DD
kuschelirmel-stock β Journal CSS - Part 1
Published: 2006-11-05 20:55:55 +0000 UTC; Views: 75278; Favourites: 1750; Downloads: 373
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 1 of 2 - the corresponding template can be found here www.deviantart.com/deviation/4β¦
This tutorial deals with the process of designing a CSS journal and of how to get the thing coded.
It only covers the basics, custom divs will be dealt with in Part 2 - which can be found here .
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...
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.
The quote I used from zilla774 is taken from his news article Journal CSS Resources which also 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: 257
vielen dank fΓΌr diesen super Tutorials !!! ich hatte keine Ahnung wie das geht und ich habe ein einigermaΓen vernΓΌnftiges Layout hingekriegt... (auch wenn es ein bisschen mit IE spinnt 
π: 0 β©: 0
Do you just save the images, or do you also have to put it on the internet?
π: 0 β©: 1
you have to put them online.
π: 0 β©: 1
hi! is was very helpful.
i have a question though, what do i put in the url?
url('') ? I'm using Imageshack but it doesnt seem to work : (
do i use the " '' " ?
π: 0 β©: 0
When I get time I gaurantee that I will take a look at this! it looks very helpful! I think I might just fav it!!
π: 0 β©: 0
Vielen vielen Dank fΓΌr das wunderbare Tutorial! Ich hab mich durch einige durchgeackert, bis ich deins gefunden habe - so klar und verstΓ€ndlich geschrieben, und auch fΓΌr mich CSS-AnfΓ€nger durchschaubar. Ich hab zwar jetzt 5 Stunden herumgebastelt
π: 0 β©: 1
π: 0 β©: 0
thank you 
π: 0 β©: 0
Thank you. This is really helpul...and cool...
π: 0 β©: 0
π: 0 β©: 1
This is mentioned in my journal.
π: 0 β©: 1
You're very welcome. I'll let you know how it turns out, so you can see it.
π: 0 β©: 1
Great tutorial!! It helped a lot!! Thank you very much!
π: 0 β©: 1
you're welcome!
π: 0 β©: 0
THANK YOU for taking time to make a tutorial like this! Got some "AHA!" experiences!!
π: 0 β©: 1
π: 0 β©: 0
I don't like asking questions, but can you explain how you got the height and padding on the journaltop? I just can't think that well right now and I'm getting confused.
π: 0 β©: 1
for firefox browsers (which this tut is refering to) the absolute height of a div that will show the background image is composed of three values:
height+padding-bottom+padding-top
for IE it's only the height which is sometimes tricky to get right in both browsers.
trick: have a background picture in .journaltop without padding - do the padding in .journaltop h2 to push the heading to where you want it to be.
I hope this helps.
π: 0 β©: 0
Absolutely fantastic!!!
And at LAST I've found out about Lorem Ipsum!!! Excellent stuff!
π: 0 β©: 1
great I could help!
π: 0 β©: 0
thank you, i found this really really useful! Im a total beginer and although i used a generator to create the basic, this tutorial helped me understand how to modify it to my liking 
π: 0 β©: 1
you're welcome
π: 0 β©: 0
I'm trying to work this, but I can't get the header to show. Do you know what I might have did wrong?
Here is the header related text.
.journaltop {
background: url([link] ) top left no-repeat #1818A;
font-size: 8px;
text-align:right;
height: 170px;
padding: 40px 3px 0 260px;
}
.journaltop h2 {
color: #ffffff;
padding: 5px;
margin:2px;
text-align:right;
font: 34px Verdana, Arial, Helvetica, sans-serif;
}
It won't show up, the footer will show up, but the header wont!
π: 0 β©: 1
hiya!
first thing that comes to mind is that you changed the order of the background values: you need to keep with the order specified in the template (color first, then url then positioning) or the browser will not be able to read it.
tell me if that was it, if it wasn't I'm out of ideas I'm afraid.
π: 0 β©: 1
Yeah, i think that was it. Thank you so much for helping me!
π: 0 β©: 0
Woah, das ist Klasse. Ich habe Null Ahnung von CSS, werde mir das hier aber mal zu GemΓΌte fΓΌhren. Vielen Dank fΓΌr diese Spitzenarbeit!
π: 0 β©: 1
A very understandable and precise tutorial! I will give it a try soon! Thanks so much!!!!
π: 0 β©: 1
you're welcome
π: 0 β©: 0
Wonderful tutorial~! Very, very nicely done. It will definitely come in handy.
~Blood~
π: 0 β©: 1
thank you
π: 0 β©: 0
hello!
i would like to thank you for this tutorial coz i managed to create, at least, my journal in css.
Here is the link to my journal.. [link]
just to let you know that i am a complete dummy in css... 
thank you again very very much
π: 0 β©: 1
beautiful layout!
wonderfully done
π: 0 β©: 2
thanks to you!!!
π: 0 β©: 0
thanks to you!!!
π: 0 β©: 0
<= Prev | | Next =>