Shop Mobile More Submit  Join Login
CSS Tutorial :: Contex Box by DragonX141 CSS Tutorial :: Contex Box by DragonX141
Hello everyone. Finally, itís here. Iíve decided to go and write an extensive tutorial on how to use pretty context boxes in the CSS journal, just like i use in mine.

If you have no idea how to use CSS, go check out my Basic CSS Tutorial first!

REMEMBER: You must be a subscriber to use the CSS feature!

If you have any question at all, feel free to leave a comment or send a me a note and i'll try my best to find you an answer.

Downloadable Versions:
- MS Word
- Rich Text
- GIF Graphic
Add a Comment:
 
:iconregretfullycrimson:
RegretfullyCrimson Featured By Owner Apr 3, 2013
Thank you SO MUCH FOR DOING THIS!
Reply
:iconpaipuru:
Paipuru Featured By Owner Oct 16, 2011  Student General Artist
Nooooo none of the links work!!! TT_TT
Reply
:iconsuper-radical:
Super-Radical Featured By Owner Jul 29, 2010
Yesss! Thank you! :love:
Reply
:icondenychie:
Denychie Featured By Owner Dec 25, 2009
THIS IS SO HELPFUL! THANK YOU!!
I just got a premium membership as a gift for christmas and I had no idea how to do this. But how do you download a ZIP file?
Reply
:icondragonx141:
DragonX141 Featured By Owner Dec 25, 2009
There should be no zip files in my tutorials.

If you use Windows though (either XP, Vista or 7), there's a utility built in, so you should just have to double click on it.
Reply
:iconvrryoko:
VrRyoko Featured By Owner Jan 17, 2009  Hobbyist Digital Artist
THIS WAS SO HELPFUL.

Thank you SO MUCH for making this! I've read other tutorials before, but this is one that I've actually managed to look at and read over before I do anything and I know this'll help me out! :D THANK YOU!
Reply
:iconrus-club:
Rus-Club Featured By Owner May 5, 2008
I have one question :)
How to make my journal position in center like this [link] but not like this [link] ?
Reply
:iconboombox-creations:
BoomBox-Creations Featured By Owner May 4, 2008
nice!

im trying css and getting a subby wen i make a good 1!

anyway, do you know how to get rid of that line inbetween "xx Coments" and "Previous Journal Entries" ??

thx for your time!
Reply
:icondragonx141:
DragonX141 Featured By Owner May 5, 2008
Ummm, to answer easily, no you can't remove it, cuz it's part of dA's webpage code.

A simple solution would be to make it the same color as the bg.
Reply
:iconboombox-creations:
BoomBox-Creations Featured By Owner May 6, 2008
yer i tried that but half of the feeling thingys changed color...

can u change the color of only that?
Reply
:icondragonx141:
DragonX141 Featured By Owner May 14, 2008
You can. You can have alternating color, or just a single one.

Take a peak at my Complete CSS Tutorial and look at the first example, it'll have what you're looking for.
Reply
:iconwrens-inner-monsters:
Wrens-Inner-Monsters Featured By Owner May 1, 2008   Traditional Artist
-just got a sub- >>; This looks like it'll help out a bit ~ |3
Reply
:icondragonx141:
DragonX141 Featured By Owner May 5, 2008
:w00t:

I'm glad it'll help out. :)
Reply
:iconsweet-red-cherry:
Sweet-Red-Cherry Featured By Owner Dec 2, 2007   Photographer
youre awesome =D
Reply
:icondragonx141:
DragonX141 Featured By Owner Dec 2, 2007
Thank you, but you are to kind! :blush:
Reply
:iconsweet-red-cherry:
Sweet-Red-Cherry Featured By Owner Dec 4, 2007   Photographer
me? :lol: you!
I used youre CSS, and its awesome! [link] thanks again :aww:
Reply
:icondragonx141:
DragonX141 Featured By Owner Dec 4, 2007
Spiffy journal you've made, i like it!

If you ever have questions or anything about it feel free to send me a note. :)
Reply
:iconsweet-red-cherry:
Sweet-Red-Cherry Featured By Owner Dec 8, 2007   Photographer
thank you!
and thanks for the proposal, only thing that is mising is a big red cherry :giggle: but its perfect like that too!
Reply
:icondragonx141:
DragonX141 Featured By Owner Dec 11, 2007
Welcomed!

Missing a big red cherry huh? That's interesting... *wink* *wink* :giggle:
Reply
:iconsweet-red-cherry:
Sweet-Red-Cherry Featured By Owner Dec 15, 2007   Photographer
:giggle: =p
Reply
:icontinman-20-tinster:
Tinman-20-Tinster Featured By Owner Jun 25, 2007  Hobbyist Photographer
I am trying to use this tutorial and like you mention in the beginning of it with the right corner messing up and not matching...I am running into that problem only on Firefox v2.0 (which should work) I am using the same code as you, nothing changed, the same images basically, same color/style/size and such. And it doesn't work. Do you have any suggestions? Maybe try putting the rest of my code in and seeing if it works more?
Reply
:icondragonx141:
DragonX141 Featured By Owner Jun 25, 2007
Hmmm, my guess would be that it looks fine in IE right?

The problem resides in the top margin of .titlebar .right. It's one of those browser rendering problems. And because of that, it can only work in either IE or Firefox, but not both.

To fix it, you have to pick which browser you wan it to be compatible with; i presume FF in your case. So that means you have to change the first value in margin: of .titlebar .right, most likely removing 14 from it.

If that doesn't work, send me a note and i'll have a look at it.
Reply
:icontinman-20-tinster:
Tinman-20-Tinster Featured By Owner Jun 27, 2007  Hobbyist Photographer
I haven't looked at it in IE because I don't use it but the person on the CSSHelp chat room or whatnot did and said it looked different still.

Anyways, I went and changed the first value in the margin of .titlebar .right till I found the answer and it seems like -54px fixes the problem. Anything else doesn't work. I might have to change it more once I add my other coding and then double check somehow in the evil IE since the person this is for uses it and not FF. I know .titlebar .center is also -54px so that might be why, though .titlebar .title is -14px I don't have a title box yet so I might have to change that when I add one. I'll see.
Reply
:icondragonx141:
DragonX141 Featured By Owner Jun 27, 2007
When i was doing this tutorial, i came to believe that there's a pixel dimension (the one that offsets everything) that is relative to the font style and font point used. Also, without any margin corrections, there would only be one div by line, that's how browsers interpret and render them.

So those are the reasons why this is such a b*tch to tweak just right, and in both browsers. So unfortunately, every box created will need to be tweaked separately. Now oddly and luckily enough, the only observable problem is with the top margin value of that last div.

I still try to figure it out once in a while, so if i ever do, you guys will be the first to know!
Reply
:icontinman-20-tinster:
Tinman-20-Tinster Featured By Owner Jun 27, 2007  Hobbyist Photographer
lol. ya. i can ask a few people that i know that know CSS a lot and taught me what I know to do what I do and they might know but its one of those really hard things I think will be very hard to figure out.
Reply
:icondragonx141:
DragonX141 Featured By Owner Jun 28, 2007
If they ever do figure it out, please, let me know!
Reply
:iconhoannv:
hoannv Featured By Owner Jun 16, 2007
Thank!
Reply
:iconhaskabab:
haskabab Featured By Owner Jun 4, 2007
maybe good if you gave some examples of the outcome with the css above, this is garbage...
Reply
:icondragonx141:
DragonX141 Featured By Owner Jun 4, 2007
Dude, it's says so right in the description "I’ve decided to go and write an extensive tutorial on how to use pretty context boxes in the CSS journal, just like i use in mine."

No need to bash anyways, you can't even use this since you've got no sub!

If you ain't got anything good to say, don't bother saying anything at all!
Reply
:iconwakamoley:
Wakamoley Featured By Owner Apr 28, 2008
:clap:
Reply
:iconstrikemedown:
strikemedown Featured By Owner Jun 1, 2007
Awesome tutorial!
Reply
:icondragonx141:
DragonX141 Featured By Owner Jun 1, 2007
Thank you! :bow:
Reply
:iconstrikemedown:
strikemedown Featured By Owner Jun 1, 2007
Sorry to bother you btw, but do you know any good books on css? Thanks! :-D
Reply
:icondragonx141:
DragonX141 Featured By Owner Jun 1, 2007
Well, i'm not a book person, so i can't really say, though i would imagine there's plenty.

I sometimes use this site ([link]) when i forget stuff. It has almost everything on CSS, definitely check it out
Reply
:iconstrikemedown:
strikemedown Featured By Owner Jun 2, 2007
Thanks, that site is aweosme! I don't really like books either, they kinda suck.
Reply
Add a Comment:
 
×




Details

Submitted on
May 1, 2007
Image Size
79.3 KB
Resolution
816×3764
Link
Thumb
Embed

Stats

Views
18,307
Favourites
227 (who?)
Comments
35
Downloads
4,500
×