Richard Gilmore wrote: > Hi everyone, > > I¹m Richard I¹m new to the list and new to CSS. I¹m learning it for my job > and the websites I work on. I¹m used to tables and old fashioned html and am > having a hard time understanding how layout is done in css. I¹m used to > working with Fireworks and Photoshop, Illustrator and InDesign/Quark where I > can just drag items around visually and plunk them wherever so css seems > very alien and non intuitive to me. >
Hi Richard, Welcome to the list. It sounds like you have just been involved with the design end of things, not the web construction end, so you'll probably unfamiliar with how the web medium works in general, as well as with (X)HTML. The web is completely different from print -- and completely different from a static layout in FW or PS. It takes awhile to get used to its fluidity and flexibility and the lack of control that you have, but once you grasp this you can construct web pages much more easily. I think before you even start on the CSS end that you need some help with the markup end. Good markup is the foundation of good CSS. Take a text document of content and turn it into HTML without using any presentational markup (font, center, bold, align, etc) and without using any CSS. Use semantic markup (google it) to give your document proper structure. Even without CSS, it should be understandable if it has proper structure. Then, gradually build CSS on top of this structure. I strongly recommend both of Dan Cederholm's books. Start with Web Standards Solutions, which covers proper markup and then CSS, then move on to Bulletproof Web Design, which covers more advanced CSS projects that embrace the flexibility of the web medium. > I¹ve got an example here of what I¹ve done and now I¹m stuck. And I¹ve > included a jpg of what I would like it to look like. Can it be done in css? > Frankly I¹m having a hard time believing the hype about how good and useful > css is supposed to be when I can¹t even do the simplest layout. I feel > stupid. Can what I want be done and how would I go about it? > Don't feel stupid. CSS is a learned skill, not an instinct, so if you haven't learned it yet, how can you feel bad for not knowing it? I can't do Javascript, but I don't feel stupid, because I've never learned it. :-) Look at this design component you want to create. Think about what it is conceptually. It's a series of things. You refer to it as a menu. Those are pretty strong clues that it's a list. So mark it up as a list. You could either mark it up as an unordered list, with each thumbnail-title pair a <li>, or you could mark it up as a definition list, with the title the <dt> and the image the <dd> (or vice versa). Either way, you'll be dealing with CSS floats to move the image to the left and the text to the right. I've written an article on a technique that may help you: http://www.communitymx.com/abstract.cfm?cid=97480 There is a similar technique in Dan's Bulletproof book as well. > I design on a Mac with Dreamweaver MX 2004 (and Firefox) but nearly everyone > else I work with uses XP and the site will mostly be viewed on Win IE and > maybe Win Firefox. > One tip: even if the primary audience is WinIE, don't develop for WinIE. Develop for Firefox or Opera and check frequently in WinIE, but get it working correctly in a good browser first. Then you can go back and adjust for WinIE. It's much easier this way. Good luck! Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
