Hi everyone, Trying to teach myself css and am trying turn my design layout into an html/css site. I've been trying using sitepoint's css anthology, but I'm absolutely terrible lol. Any experts willing to help me layout one page? thx
What part are you stuck on exactly? Turning the structured file (psd/ai/eps/whatever) into individual images? Or that and everything else?
thanks guys for the reply, creative, honestly I've done some minor stuff such as designing the background gradient and small images for the rounded tabs, etc, but taking all the tidbits and completing an all inclusive homepage leaves me bewildered. I'm an html newb but started getting interested after messing around with Dreamweaver about a year ago. Since then I've just been trying to catch and learn how to use CSS. (Coding of any sort is definitely not more forte)
You need to learn CSS firtst, then do some design without images, next try to read website source code and learn how to build an effect you like to do. Google "rounded tabs" and you will find many articles about that.
It sounds like you have the images part down then. Other than that, there's really only two ways to add images into an HTML page, which is via HTML img tag, or add to elements as their background via CSS. I'd give you an example, but I don't know how much you know yet. My best advice is to search google for something like... "how to add images to html" or "add images via css" etc. If you can ask a very specific question, I'll jump on it though ;p
thanks creative, i'm gonna dedicate a few more hours to it tonite and hopefully make some progress haha.
I would be glad to help you out as well! Here is a good example of a clean XHTML/CSS page that I built, which you can view the source code and CSS for, so you can start learning a lil more. focalenergy.com/projects/slingshot/buy-learning.html -Patrick
just try to get some basic basic CSS and XHTML help. Then Google all the things you don't know and you will find out!
Not bad, but if anyone else is looking over the code please take these notes/tips into consideration. Fonts specified in pixels as these will not resize in the most popular browser (MSIE6). Do use the shorthand font property As far as I know, any value for height other than `auto` in MSIE6 will trigger hasLayout and the element will contain floats. Instead of math calculation headaches, use auto margins (margin:0 auto. Much less headaches Unless you're doing complex layouts with content before nav/sidebars, you shouldn't resort to absolute positioning. This could have been avoided by floating the header and floating the menu, which are both block level by default but shrinkwrap, or the box containing the elements doesn't take up the full space the parent element allows - instead it only takes up as much space as there is content (sorry if this is confusing) and this would have fit in the header. Oh and, floated elements stack next to each other provided theres enough space on the parent element. Wouldn't target ALL IE browsers. IE6 maybe screwing up but maybe IE7 and IE8 had it right? Would use a background image and float the LIs for this instead of wasting bytes with the img element which is supposed to be content images only. I would have added an id/class to the ul and made a rule for all LIs, then just added a class for the "on" one, and overwritten it with specifity. Empty element? Maybe could've used a different element to apply this gray part on. Inline styles Would have used either the title or the alt, not both. Presentational class name. Give it meaning. Pretend someone's blind... how would you describe it?
ahhhhhh.... ripped apart! lol haha yeah, I can't say that is an example of my best work, or that it is an example of accessible CSS layout. But hey, the client wanted me to get it the PSD sliced up, all code written, be cross-browser compatible in the major browsers and have it validated in less 7 hours. Actually, he wanted it done in 5-6 hours, but this is what happens when you have to rush. You take short cuts. Soulscratch, Why would you use the title or alt attribute, but not both? When you have an image in a link, Firefox will not display the text in the alt attribute, but it will display any text in the title attribute of the <a> tag. So it I feel it is a good idea to declare both, for better usability in Firefox. -Patrick
Actually, I probably would have coded that differently and I wouldn't even resort to alt attribute. You are probably right if its this way.. but Set a background image on the div, forget about any alt attributes. The copy in the image looks like 10-11 pixel Arial... which can easily be copy on top since it isn't anti-aliased. But I can understand if this was done with not much time.. I've probably done it myself
thanks guys, i really appreciate the feedback. Are any of you interested in helping me turn the homepage design into a working layout? I'd be happy to paypal a small fee. I'm afraid it will just take too long for me to put together as it will take a fraction of the time if one of you do it. It's fairly simple, and once I have the initial page, I'm sure I could plug and chug and dissect? if so, send me a PM. thx!