I haven't designed a webpage since 2003 or so, and I'm not sure what's changed in terms of what's possible with CSS since then. I'm designing a website with type in the background and a panel for content (please see file). In the past I would have done everything with images except the interior of the white panel, but is there a way that I can use CSS to style the background text and set transparency for text, etc., and have a white panel on top, or will I have to do everything with images? Also, will my somewhat rare (ie, not Verdana or Arial) fonts for the background text be a problem the way they were in the past, or do most users have most fonts these days? Thanks in advance for your suggestions!
I would suggest using the following: Background: keep an image unless you want the words for an SEO reason use custom fonts: http://www.fontsquirrel.com/tools/webfont-generator Rounded corners on the items can be easily achieved with CSS3 border-radius: http://www.w3schools.com/cssref/css3_pr_border-radius.asp Dashed lines: Another option which can be achieved with CSS: http://www.w3schools.com/cssref/pr_border-style.asp Thanks
Thank you!! This is very helpful. I have one other question; I still haven't wrapped my head around how to contain the background text in one table, and "layer" the white panel on top, since I don't want the bg text to wrap. Is that possible?
Well don't use tables for layouts it's 2014 now! Just slice the background image and set it to the body element as a background. Then create a container and set it's width and then float it right with a margin-right:20px or something.
A lots of changed from 2003 to 2014 with very long.. in today's date your want you website to be a mobile friendly, there are many css framework which you can use to create your website.... However I would just you to use Bootstrap and read the docs since you have the knowledge in css then it will be fast for you catchup. here is a link for you to choose css framework to get you started : http://www.shoutmeloud.com/best-free-css-frameworks-download.html
Now there is no problem in using custom fonts on your page, for example you can use https://www.google.com/fonts collection. You can quickly test them on your site without need of changing and re-uploading source files with http://fontry.net/
Bootstrap, Jade read up on those along with some Node.JS or some other "back-end" type work to get you attuned to the future technologies and world of front-end developing. It's exciting stuff at the moment!
minus 999,999,999,999,999,999 for bootstrap. Do yourself a HUGE favor and ignore that said fat, bloated, idiotic, halfwit, DUMBASS bull even EXISTS. Developer IQ's are dropping down into the art-school range of stupidity for things like Bootstrap, blueprint, yui, or any other HTML/CSS frameworks that to be frank, take the entire reason we even have HTML and CSS. To be brutally frank (when am I ever anything but) what they do to HTML is the equivalent of death by being poisoned, shot, stabbed, hung, stretched, disemboweled, drawn and quartered (ouch), burned at the stake, and then pissing on the ashes to put out the fire. "I met Andy Warhol at a really chic party" blow it out your hairdo 'cause you work at Hardees! 80 pounds of makeup on your art school skin, 80 points of I.Q. located within!" BY THEIR VERY NATURE they use classes in a presentational fashion, resulting in markup that for all intents and purposes might as well be the HTML 3.2 crap CSS was developed to stop people from doing! If you left in 2003, you probably still have all the bad pre-1998 habits since up until FF started to cut into the market, nobody gave a flying purple fish about validation, separation of presentation from content, accessible design, and so forth. Even sadder, many developers failed to extract their craniums from 1997's rectum, and many more up and decided to shove it in even further to the point they're tonguing the tonsils using the same route Lemmiwinks had to use to escape from Mr. Slave... That of course is how HTML 5 came into being. Really it's hard to answer what you are asking without a clearer picture of what you learned when you left; given the time period it was just as the changes (and return to HTML's original intent) started to gain traction -- it already sounds like you missed out on a lot since you've already mentioned using tables for layout. Semantic markup, STRICT markup, separation of presentation from content, semi-fluid elastic layout, accessibility minimums as laid out by things like the Web Content Accessibility Guidelines (WCAG, there's TWO version, I say take the best from BOTH), logical document structure through proper use of numbered headings and horizontal rules -- do any of these ring any bells? If not, you've got a LOT to catch up on. Though it already sounds like you've started using broken methodology with the stupid "let's draw a pretty picture first" approach to "design"... Take your content or a reasonable facsimile, mark it up semantically, bend the semantic markup to your will with CSS to create your layoutS (yes, PLURAL), THEN you can start up the goofy paint program to make the graphics to hang on the layout. As I often say, "If ANYTHING in your markup (tags, classes, ID's) have been chosen to say what things look like, you are probably choosing all the wrong tags for all the wrong reasons."
Hi, I´m in a similar situation. I stopped designing webs in 2006, last I remember is my travel from ps slicing tool and table sites, to layer and css proyects, but I was beginning with CSS and my code was a bit mess (one of my last sites: http://comexandina.e.telefonica.net -and it has been manipulated after I delivered the code-, but even so, I see it today and I find hundreds of mistakes using wrong tags, and a messy css code) Reading your message: I realize, although I started to learn some of the meaning of separation of presentation from content with the use of external css, I´m stuck on HTML 4.1, and CSS2, have a lot to learn, and I dont know where to start... So I have 2 main questions: one is this mentioned above, where to start, any good tutorial, any "bible" to follow? And the second, is about the workflow. What I used to do (back in 2006) was to take the designer layout, and try to export it into a divs structure, (drawing literally the layout with divs in DW) adjusting later the properties of this divs Now, I downloaded the latest version of DW, and I discovered it´s no longer possible to "draw" the divs (but to insert them, same as writing the code manually), so I started to look for new ways to do it. This week I tried the new Edge Reflow, and I think it has a huge potential, but its no possible to export the code to html and css, so you have to copy every single piece of css, and take it to your code (dw or sublime or whatever), so the workflow is too slow and dizzy... I suppose you are a purist coder, and you only use notepad++ or so, but maybe you can help me to find some kind of wysiwyg method (not program), as I think its better for learning, even if I have to clean the code after...
I think I just responded to your thread... but It is NOT better for learning, it PREVENTS you from learning. The entire notion of WYSIWYG is broken for building websites in that what you see is not, should not, nor should ever be exactly what the user gets. That's why we have elastic semi-fluid responsive layout -- and a properly built site should be all THREE! ANYONE telling you otherwise doesn't know enough about the Internet to be designing or developing a blasted thing for it! It's NOT about making one visual appearance; or even a handful of specific ones. That's been broken methodology and thinking since the first day someone asked "what resolution should I target?"; sadly some people have their heads so stuck in the notion of "what's it look like" they can't realize they are pissing on their own feet in the process since again, what it looks like to you is most likely never what everyone else is going to see on a website, nor should it be... Hell, it's the entire reason HTML even EXISTS -- device neutral delivery of content based on the capabilities of the device. The user agent (browser) best determining how to deliver the content. We got away from that with the idiocy of HTML 3.2, but then 4 STRICT was made to drive us back to that original intent -- with CSS to let developers customize appearance to specific devices... by capability, NOT by device.
Oh, and... I'd like to have a good answer to that too -- right now what's out there is just more outdated rot that some jackass slapped HTML 5 on the cover of, while still advocating decade and a half out of date methodologies; though that makes sense since that's one of the main reasons HTML 5 even exists.
to your first answer: absolutely right. The importance of this its cristal clear for me. Lets keep on this conversation on the other thread, just to prevent spreading (if you dont mind). to your second answer: I´m dissapointed about this. I´m aware that most of HTML books are outdated "compemdiums", but I was hoping to find some kind of "sanctuary" in a way or another (mooc, youtube tutorials, developer forums, web guides, etc) to establish a starting point, a "headquarters" for my future learning process. ps: And please, excuse my poor english, as I´m not a native english speaker.
It's on my to-do list at some point... since I keep having people tell me I should do it... but since I'm retired for medical reasons and my "partner in crime" passed away a few years ago -- no guarantee on when/if I'll ever get to it now. I never would have guessed. No, not joking. Your "English as a second language" seems to be better than what most native speakers are using these days. ... and I'm usually VERY sensitive to that; sensitive? Wrong word... I'm an {expletive omitted} about it. 100% unadulterated full on unfiltered JERK when it comes to the subject of poor language skills. Yours? Apart from missing a few things that should be caps? Not even a twitch. Though your use of styled quotes did make me wonder if you were using a non-English keyboard.
Regarding tutorials: Granting that there may be no set of tutorials that could be graded excellent, I'd rate HTMLDog's tutorials as good as any and better than most. cheers, gary