PDA

View Full Version : CSS limitations?


Interstellar Icon
09-26-2008, 11:41 PM
Hi All,

I'm in the process of learning CSS (I'm working through a lynda.com tutorial), and I have a question regarding the process of converting a Photoshop mockup to XHTML/CSS: Are there any limitations in using XHTML/CSS that I should consider when creating my mockup? In other words, do I have complete creative freedom when I'm working up the design in Photoshop, or are there things I need to consider to assure that the mockup can be converted to an XHTML/CSS layout?

This question is based in ignorance, so please forgive me if it seems silly. :roll:

Thanks in advance,
Sam

Cary
09-27-2008, 05:36 AM
What comes to mind are the limitations of font choices and how text flows around things such as images.

Rob_Che
09-27-2008, 09:00 AM
As Cary says, stick to basic fonts for body type etc. You can't have font at angles either, these would need to be images. (90 degrees is possible though using CSS)

If you want fancy or decorative text in your headers there is no reason you can't use images these days as long as you have the correct 'alt text' to back it up and use your H1 / H2 etc tags thoughtfully.


I think the best way to learn though (the way I do it) is to create the photoshop mock up and then find ways of achieving what you have mocked up. Don't constrain yourself during the mock up stage - go crazy !
Think of clever ways of laying your page out.

Post your photoshop mock up when it's done and we'll all chip in any advice we can :)

domedia
09-27-2008, 03:58 PM
Actualy I would start with a HTML document. Make some kind of structure on it, and then try to style it and see how CSS actually works. You'll soon find some limitation. You're doing the right thing I think, finding the limitations of CSS before making the PS prototype.

Interstellar Icon
09-28-2008, 06:56 AM
Thanks everyone! That's a lot of good input, and I'll put it to good use. I've given this some more thought after reading your responses, and I think my primary concern is with layout, particularly regarding images. The sites I've designed thus far have layered images in Photoshop - one for the background (which scales to fit the user's browser), one for the "page" (where the content resides), and sometimes other images on top of those two. Is there any limit to the number of layers you could set up with CSS, using a one-pixel-wide slice? Also, is there a way to set up a background image with this method for images that aren't "pure repeats", i.e. they change from one end of the image to the other?

Here's an example of a site I've built (using tables - what a nightmare!), if it's of any help: www.lccny.com (http://www.lccny.com).

Thanks again. :-D

Sam

domedia
09-28-2008, 07:23 AM
Nice site Sam! Keep it up

Rob_Che
09-28-2008, 08:58 AM
Actualy I would start with a HTML document. Make some kind of structure on it, and then try to style it and see how CSS actually works. You'll soon find some limitation.

I agree Domedia but I'm always concious (from a design point of view) that people will be constrained by the css layout they have created and are just 'filling the gaps' with images. Do you know what I mean ?

I'd rather people problem solve the best way to achieve what they actually want to do, rather than what looks easiest. I'm not suggesting that's what you meant, I just know some people seem to remove the design (art) element when 'desiging a coded page', rather than 'coding a designed page'... make sense ?

domedia
09-28-2008, 12:21 PM
I'm not suggesting that's what you meant Wouldn't occur to me :) Giving lots of different advice is great in situations where there's no set standard for the approach.

Interstellar Icon
09-29-2008, 05:23 AM
Nice site Sam! Keep it up

Thanks very much! That means a lot coming from you.

I agree Domedia but I'm always concious (from a design point of view) that people will be constrained by the css layout they have created and are just 'filling the gaps' with images. Do you know what I mean ?

I'd rather people problem solve the best way to achieve what they actually want to do, rather than what looks easiest. I'm not suggesting that's what you meant, I just know some people seem to remove the design (art) element when 'desiging a coded page', rather than 'coding a designed page'... make sense ?

I think I understand what both of you said in your posts above, and I think both answers have merit. I have some existing sites (including the one in my previous post) that I'd like to convert from tables-based to CSS, and I think I'll probably start there. That should give me a pretty good idea of what can and can't be done with CSS, and if I'm able to replicate them exactly, I'll know that my design style is good to go!

I'm sure I'll have more questions, but for now, I'm going to finish the lynda.com tutorial, and then ask specific questions once I'm in the process of creating my first CSS site.

Thanks again to everyone who provided input. :grin:

Sam

Rob_Che
09-29-2008, 07:01 PM
Cheers Sam... make sure you come back and wow us with your new found abilities from Lynda.com ! I've never been taught so I have big holes in my basic knowledge... I was never one for starting at the shallow end.

Good luck.

Interstellar Icon
09-30-2008, 03:38 AM
Cheers Sam... make sure you come back and wow us with your new found abilities from Lynda.com ! I've never been taught so I have big holes in my basic knowledge... I was never one for starting at the shallow end.

Good luck.

Hey Rob,

You must have a genius IQ if you learned CSS without any training - I'm usually pretty good with this kind of stuff, and it's kicking my butt! :lol: I've already completed a lynda.com tutorial for designing websites using tables, which I've come to discover is not only standards-deficient, but virtually impossible to implement. So lets hope that what I learn in the CSS tutorial is valid, and hopefully we'll be able to "compare notes". :grin:

Thanks,
Sam

Rob_Che
09-30-2008, 07:02 PM
You must have a genius IQ if you learned CSS without any training

Yes I have and it does help.

HA! I wouldn't say I've 'Learnt' CSS... But I'm on my way and have received a lot of help - on here especially.
Remember Google is your friend...
And firebug (for firefox browser) is ESSENTIAL ! :wink: (https://addons.mozilla.org/en-US/firefox/addon/1843)

Che

Interstellar Icon
10-01-2008, 07:49 AM
Remember Google is your friend...
And firebug (for firefox browser) is ESSENTIAL ! :wink: (https://addons.mozilla.org/en-US/firefox/addon/1843)

Che


Yep, I use Google all the time when I get stuck. I'd never heard of Firebug, though - what an awesome tool! Thanks for the tip. :grin:

Sam