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

deviantART

:deviation:
 

CSS journal mockup by *funkyalien:iconfunkyalien:

Categories Designs & Interfaces > Web Interfaces

©2007-2009 *funkyalien
:iconfunkyalien:

Artist's Comments

I think this is the right place...

With all the different css journals I've been seeing around lately I figured I wanted to try and make one for myself. This, obviously, isn't the actual journal but a mockup I did in Photoshop of how it should hopefully look.
Now I've just gotta figure out how the heck to actually code this. Heh, I coded an entire website by myself using html and css, yet this has me stumped.

Here's the technical stuff:
-I'm guessing that the main header image would have to be a background in order for the text to overlay on it. Thing is I'm not sure how to get that and the footer image to work together properly, as well as the bar at the side to adjust naturally to the length of the journal. Were it just one of these elements it would be easy. Gaps in my knowledge it seems.
-The menu bar would always be on the right, aligned with the main content boxes. Probably css coded to highlight or something.
-Same with the mood box, minus the highlighting of course.
-The titles at the top of each box will probably be inserted images, unless I can get them to work as background images (and I'm sure I can but my mind is totally blank as to how right now).

I'm not really looking for anyone to write the code for me, I'd rather do it myself. But any help about such things is cool :) I've read though *Grayda's tutorials on CSS for journals and I get it. It's just actually implementing it. I'd rather not mess around with the journal css until I KNOW what I'm doing.

Anyway, if there's anyone that knows a think or two about this I just need some critique on the layout. Whether or not it works well. I get the feeling this is deceptively hard to code (such is usually the way with my ideas...) so feel free to point out anything that may be a problem or may not work. Also, should the "Comments | Previous Entries" link be under the design such as it is, or within it? Just a minor thing I was wondering about.

Anyways, thanks in advance for any critique and help with this :D

Critiques


Thank you for your Critique

You are not logged in.

Comments


love 0 0 joy 1 1 wow 1 1 mad 0 0 sad 0 0 fear 0 0 neutral 0 0
:iconmrcontroversial:
~mrcontroversial Jul 11, 2007, 8:48:02 AM
I like the look of the CSS design that you constructed. Havin' the menus on the right side, along with the pics of your characters. Are you thinking of tryin' any colors besides the default for dA? I think that's the only thing I could think of.

--
I'm sarcastic due to the overdose of reality.

Nothing in all the world is more dangerous than sincere ignorance and conscientious stupidity. - Dr. Martin Luther King, Jr. 1963 (from Strength to Love)
:iconfunkyalien:
*funkyalien Jul 11, 2007, 8:51:50 AM
I thought about it but for now it's just easier for me to keep it this way rather than come up with a new colour scheme. I think it'll fit in better with dA's layout that way.

--
It's gotta get harder before it gets any easier.

Remember yesterday, prepare for tomorrow, live for today.
:iconlunardawn:
~LunarDawn Jul 11, 2007, 9:16:50 AM
I quite like it, fresh and new. Having it looks so DA like will have poeple screaming 'omg, how can I do it?'

^^

--
BLOG [link]
COMMISSIONS [link]
:iconyoungpaduan:
~youngpaduan Jul 11, 2007, 9:17:02 AM
This is so cool! I love the swoopy thing that you have at the bottom. I guess the only thing that kind of bothers me is the label "sidebar menu"...it's a bit hard to read 0_o;; But I can't think of a good alternative, so...sorry if that's not really helpful ^^;

Good luck with the code! :D

--
< ll\
|=3| Kittie ~<3
< ll/
:iconfunkyalien:
*funkyalien Jul 11, 2007, 9:21:51 AM
Yup. People like me =p I get the feeling this is gonna take me a while to work out how to do

--
It's gotta get harder before it gets any easier.

Remember yesterday, prepare for tomorrow, live for today.
:iconyoungpaduan:
~youngpaduan Jul 11, 2007, 9:24:31 AM
Oooh, and another tiny thing that you could try maybe is rounding the corners of the boxes...since you've got that whole curve swoop thing going on...

Oh, and for the side thingy, you can have an image that repeats vertically down the side, and then the footer image would be a separate one that's position is relative, so it should get pushed down by the other things if you put it afterwards. In a different div, that is...I guess you could figure than out though...

If you wanted to make the titles background images I'm pretty sure you just say "no repeat" or something along those lines...if you have Dreamweaver it should be somewhere in that list...but I don't think having it as a background image is really all that much better...but that's just my impression 0_o;; I took a class for coding in school, but ended up the one doing the navigation bar in flash, so I just know what little I picked up from the person I was working with.

Hope that helps at least a little! And sorry for such a long comment xD

--
< ll\
|=3| Kittie ~<3
< ll/
:iconfunkyalien:
*funkyalien Jul 11, 2007, 9:25:37 AM
Oh it's a perfectly valid point :) It is pretty hard to read. I might remove it because changing the font kinda breaks the design scheme. We'll see.

--
It's gotta get harder before it gets any easier.

Remember yesterday, prepare for tomorrow, live for today.
:iconeuan-the-echidhog:
=EUAN-THE-ECHIDHOG Jul 11, 2007, 9:31:57 AM
Hi there

Looks great and cool ^^ maybe u could include a few more characters in there...but thats up to u ^^

Euan

--
Life is a bugger, so get used to it!
:iconfunkyalien:
*funkyalien Jul 11, 2007, 9:38:58 AM
I've got a code here for doing that, I just need to change a load of values to get the colours how I want them.

"Oh, and for the side thingy, you can have an image that repeats vertically down the side, and then the footer image would be a separate one that's position is relative, so it should get pushed down by the other things if you put it afterwards. In a different div, that is...I guess you could figure than out though..."

*smacks head* Of course! Guh, why couldn't I think of that? Must've been thinking of it all as one object for that part. Well, that resolves that problem then, thanks :)
I know about the "no repeat" and other position codes so that just became a lot easier to deal with. I'm having it as a background image as it makes it easier to make minor overlays without having to deal with z-positioning or whatever it's called. I could just use an image but I wanted that extra flexibilty in there just in case.

I tend to do all of my coding with Photoshop, ImageReady and Notepad. I tried Dreamweaver before but it left a lot of excess code and was a bit of a pain to use at times. That said, I didn't have as much knowledge with html at the time. Now I just can't remember it =p

Thanks again for this, it's definately helped me think about how to go about it :)

--
It's gotta get harder before it gets any easier.

Remember yesterday, prepare for tomorrow, live for today.
:iconfunkyalien:
*funkyalien Jul 11, 2007, 9:42:27 AM
I was thinking about it. I'll probably have to draw something new for it but that's not really a problem :)

--
It's gotta get harder before it gets any easier.

Remember yesterday, prepare for tomorrow, live for today.
Previous Page12345...Next Page

Details

July 11, 2007
245 KB
245 KB
586×1844

Statistics

50
60 [who?]
6,053 (0 today)
315 (0 today)

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