Join for FREE | Take the Tour Lost Password?
Shop deviantART for the
holidays and save BIG!
Click here! :holly:
[x]

deviantART

:clap:
 

Journal CSS - Part 2 by =kuschelirmel-stock:iconkuschelirmel-stock:

Categories Resources & Stock Images > Tutorials > Web Design > HTML/CSS/Scripting

©2006-2009 =kuschelirmel-stock
:iconkuschelirmel-stock:

Artist's Comments

Part 2 of 2 - the corresponding template can be found here [link]

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.
^zilla774wrote 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.

Comments


:icondholms:
`dholms Nov 10, 2006, 8:33:43 AM
girl you are a WIZ!!!
and i promise to upload mine in the very near
future.
thanks so much for sharing!

:heart:

--
Jesus loves you. Everyone else thinks you're an asshole.
:iconkuschelirmel:
`kuschelirmel Nov 10, 2006, 8:53:41 AM
WIZ? :confused:
I'll just assume it's something positive coming from you hehehe

near future :giggle:
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 ;)

:hug:

--
Love is patient...and kind; Love is not easily angered, it keeps no record of wrongs...It always protects, always hopes, always perseveres.

Avatar by ~Ros-s
:iconmiskis:
`miskis Nov 10, 2006, 10:58:29 AM
YaY...now to save and re-read after I have coffee and can comprehend <> {/ speech. haha ;)

--
You are either pitiful or powerful... you can't be both.
------------------------------------------------------------------------
Help fight breast cancer with just a click.
[link]
:iconkuschelirmel-stock:
=kuschelirmel-stock Nov 11, 2006, 3:00:41 AM
:giggle: reminds me I haven't had coffee yet either :D
*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.

--
`kuschelirmel's stock account.

:pointr: If you're a stocker/manipper, too, I'd love to trade some exclusive stock with you :love:
:iconeraserell:
~eraserell Nov 11, 2006, 9:54:25 AM
hey! just need to ask you something..how do i modify the font size of the text in the journal?

--
*¨) ¤
.•´ .•*¨) .•*•. *
(¸.•Eraserell•*¸ ¤
.•´ .•´¤ ¸•*
(¸.•* (¸.•*´¨`•.
:iconeraserell:
~eraserell Nov 11, 2006, 11:10:23 AM
ok! to this i managed! thanks for reading on!

--
*¨) ¤
.•´ .•*¨) .•*•. *
(¸.•Eraserell•*¸ ¤
.•´ .•´¤ ¸•*
(¸.•* (¸.•*´¨`•.
:iconkuschelirmel-stock:
=kuschelirmel-stock Nov 12, 2006, 3:38:29 AM
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,
:hug:
Jasmin

--
`kuschelirmel's stock account.

:pointr: If you're a stocker/manipper, too, I'd love to trade some exclusive stock with you :love:
:iconeraserell:
~eraserell Nov 12, 2006, 3:40:34 AM
oh wow! thank you very much!!! I was going to ask you that centre thing!! :D thanks!! lemme go through them and make the changes!!

:heart:

--
*¨) ¤
.•´ .•*¨) .•*•. *
(¸.•Eraserell•*¸ ¤
.•´ .•´¤ ¸•*
(¸.•* (¸.•*´¨`•.
:iconeraserell:
~eraserell Nov 12, 2006, 4:07:47 AM
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 :/

--
*¨) ¤
.•´ .•*¨) .•*•. *
(¸.•Eraserell•*¸ ¤
.•´ .•´¤ ¸•*
(¸.•* (¸.•*´¨`•.
:iconkuschelirmel-stock:
=kuschelirmel-stock Nov 12, 2006, 4:31:07 AM
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 ;)
:hug:

--
`kuschelirmel's stock account.

:pointr: If you're a stocker/manipper, too, I'd love to trade some exclusive stock with you :love:
Previous Page12345...Next Page

Found in these Groups:

group avatar #eCSSited
a place for all your CSS needs group avatar #iterators
We iterate!

Details

November 10, 2006
1.1 MB
800×4250

Statistics

160
751 [who?]
18,646 (7 today)

Share

Link
Embed
Thumb

Site Map

©2009 deviantART. All rights reserved
About Us | Contact Us | Site Tour | Help & FAQ Advertise | Services Etiquette | Privacy Policy | Terms of Service | Copyright Policy