Post #83,325
2/21/03 10:22:34 PM
|
Here is my first REAL try at CSS2 and XHTML 1.1...
I was really impressed at how simple the CSS works with the XHTML. And just by changing one attribute you can nearly completely change the site from readable and useable to completely obfuscated.
Commnets on my CSS and XHTML style would be helpful... from those of you having done this alot before.
Whaddya think... does it look OK...
Now I know there are no real graphics on it... but I am planning on a transparent background of the company logo. Pictures of the Work they do, validating of the work... etc... examples of the stuff... formatting of data for ease of use and such... services offered...
This was a demo... to get approved...
Pointer welcome.
[link|http://www.wamgr.com|The Site]
Thanks in advance.
b4k4^2
| [link|mailto:curley95@attbi.com|greg] - Grand-Master Artist in IT | | [link|http://www.iwethey.org/ed_curry/|REMEMBER ED CURRY!] [link|http://pascal.rockford.com:8888/SSK@kQMsmc74S0Tw3KHQiRQmDem0gAIPAgM/edcurry/1//|ED'S GHOST SPEAKS!] | | [link|http://www.eweek.com/article2/0,3959,857673,00.asp|Writing on wall, Microsoft to develop apps for Linux by 2004] | Heimatland Geheime Staatspolizei reminds:
These [link|http://www.whitehouse.gov/pcipb/cyberspace_strategy.pdf|Civilian General Orders], please memorize them.
"Questions" will be asked at safety checkpoints. |
|
Post #83,336
2/21/03 11:03:32 PM
|
yellow on white text not terribly readable
--
Chris Altmann
|
Post #83,339
2/21/03 11:12:56 PM
|
Gotta remember a background image is goin in there...
I guess I should have prefaced that...
It was an example of how Granular the webcontent formatting can be.
b4k4^2
| [link|mailto:curley95@attbi.com|greg] - Grand-Master Artist in IT | | [link|http://www.iwethey.org/ed_curry/|REMEMBER ED CURRY!] [link|http://pascal.rockford.com:8888/SSK@kQMsmc74S0Tw3KHQiRQmDem0gAIPAgM/edcurry/1//|ED'S GHOST SPEAKS!] | | [link|http://www.eweek.com/article2/0,3959,857673,00.asp|Writing on wall, Microsoft to develop apps for Linux by 2004] | Heimatland Geheime Staatspolizei reminds:
These [link|http://www.whitehouse.gov/pcipb/cyberspace_strategy.pdf|Civilian General Orders], please memorize them.
"Questions" will be asked at safety checkpoints. |
|
Post #83,355
2/22/03 2:22:18 AM
|
Nice job!
1. In the div named "layouts", try making the "a" elements block-level elements instead of using <br />... neat trick and you can change them to inline later without changing your HTML.
2. I find named character entity references more readable. For example, use — instead of —
3. Why put the style def inside the img tags? Personally I like to keep it all in one document so the user can override, or I can swap it out, more easily.
4. As I've said elsewhere here, be careful of naming classes after their current colors or what-have-you. You should rename "sitelinksred" to something that has more to do with the content, or at least layout, than the style, like "bodytextlinks" or something. That way, when you decide to make them blue, you don't have to rewrite the HTML or become confused. :)
5. Any reason you chose @import over <link>?
<LINK href="mystyle.css" rel="stylesheet" type="text/css">
The XHTML is flawless. The CSS is well done, and I'd be happy to put it up on my website if I were your client. :)
Many fears are born of stupidity and ignorance -
Which you should be feeding with rumour and generalisation.
BOfH, 2002 "Episode" 10
|
Post #83,399
2/22/03 12:38:26 PM
|
Thanks alot... I thought about your comments...
1. In the div named "layouts", try making the "a" elements block-level elements instead of using <br />... neat trick and you can change them to inline later without changing your HTML. I'd like that, but I am having a mental block as to how to do that... I am really struggling to do this right... the OLD habits are hard to break. Could you, would you... show me, with a bat... on a cat... into the mat... errrr... just an example 'd be great! I am running out of wood to burn... yeah, that kind of wood. /me feeling envy of Pinnochio right about now. 2. I find named character entity references more readable. For example, use — instead of — Done... I agree makes it much more readable as you can guess the char... rather than having to go look it up. I can see why you prefer this to that. 3. Why put the style def inside the img tags? Personally I like to keep it all in one document so the user can override, or I can swap it out, more easily. Done... I don't like borders arouund ANY images... I put that as the only attribute to "img" then specified a style called "vw3c" for the W3C "validated" graphics. 4. As I've said elsewhere here, be careful of naming classes after their current colors or what-have-you. You should rename "sitelinksred" to something that has more to do with the content, or at least layout, than the style, like "bodytextlinks" or something. That way, when you decide to make them blue, you don't have to rewrite the HTML or become confused. :) I thought about that after it was all done, about 20 minutes before the demo... Fixed it now... instead of "red" "redorange" "orange" "yellow"... I am using "black" "verydark" "dark" "medium" "light" "bright" maybe a "verybright" in the future. I tend to think in colors when coding like this, rather than object reference. I also consider what's behind it in the background. 5. Any reason you chose @import over <link>?
<LINK href="mystyle.css" rel="stylesheet" type="text/css"> That was just the way I had seen EVERY other website doing it... Yeah, I fell(jumped) off the bridge too... but that as well has been changed... I like it better anyway... the @import felt kludgey anyway. The XHTML is flawless. The CSS is well done, and I'd be happy to put it up on my website if I were your client. :) *BLUSH* gwon you CRAZY... No, I just want to practice what I preach... at Least in this accord... b4k4^2
| [link|mailto:curley95@attbi.com|greg] - Grand-Master Artist in IT | | [link|http://www.iwethey.org/ed_curry/|REMEMBER ED CURRY!] [link|http://pascal.rockford.com:8888/SSK@kQMsmc74S0Tw3KHQiRQmDem0gAIPAgM/edcurry/1//|ED'S GHOST SPEAKS!] | | [link|http://www.eweek.com/article2/0,3959,857673,00.asp|Writing on wall, Microsoft to develop apps for Linux by 2004] | Heimatland Geheime Staatspolizei reminds:
These [link|http://www.whitehouse.gov/pcipb/cyberspace_strategy.pdf|Civilian General Orders], please memorize them.
"Questions" will be asked at safety checkpoints. |
|
Post #83,403
2/22/03 1:51:44 PM
|
Naming classes
\r\n\r\n4. As I've said elsewhere here, be careful of naming classes after their\r\ncurrent colors or what-have-you. You should rename "sitelinksred" to\r\nsomething that has more to do with the content, or at least layout, than\r\nthe style, like "bodytextlinks" or something. That way, when you decide to\r\nmake them blue, you don't have to rewrite the HTML or become confused. :)\r\n \r\n\r\nI thought about that after it was all done, about 20 minutes before the\r\ndemo... Fixed it now... instead of "red" "redorange" "orange" "yellow"... I am\r\nusing "black" "verydark" "dark" "medium" "light" "bright" maybe a "verybright"\r\nin the future. I tend to think in colors when coding like this, rather than\r\nobject reference. I also consider what's behind it in the background.\r\n \r\n\r\n I don't think that's what the suggestion was. Rather than name the\r\nstyles for the attributes they're changing (color, light/dark,\r\netc.), name them for the content they're describing --\r\nemphasized text, a specific callout block, title, navigation elements,\r\netc. \r\n\r\n If you want to reference the title text to a specific set of color\r\nand face defintions, then do so. But if you want to change from\r\nboldOrange to blueBackgroundYellowForegroundItalic, you're still dealing\r\nwith TitleBlock. And if (down the road) you're dealing with a\r\ntext-to-voice renderer, you'd have the audio CSS attributes in the same\r\nstyle, rendered when creating audio output. For which font color, face,\r\nstyle, and background colors are irrelevant. \r\n\r\n This is a fundamental lesson in coding modularity to reflect your\r\ndomain space, not arbitrary aspects of your language or tools. \r\n --\r\n
Karsten M. Self [link|mailto:kmself@ix.netcom.com|kmself@ix.netcom.com]\r\n
[link|http://kmself.home.netcom.com/|http://kmself.home.netcom.com/]\r\n
What part of "gestalt" don't you understand?\r\n
[link|http://twiki.iwethey.org/twiki/bin/view/Main/|TWikIWETHEY] -- an experiment in collective intelligence. Stupidity. Whatever.\r\n
\r\n
Keep software free. Oppose the CBDTPA. Kill S.2048 dead.\r\n[link|http://www.eff.org/alerts/20020322_eff_cbdtpa_alert.html|http://www.eff.org/alerts/20020322_eff_cbdtpa_alert.html]\r\n
|
Post #83,415
2/22/03 3:33:09 PM
|
Okies... I do realize...
When I was thinking... I was running out of wood.
I was trying to make the stylesheet based on appearances. I want the links colors and back ground to be "externally" controlled and coordinated, rather than be "region or use" specific. Now, granted it's more difficult to keep those in your head.
Think about this, I am indeed new to XHTML and CSS, therefore I am applying things differently than you would or someone else would. Also real coding is a brave new world for me, I just don't want to have pre-concieved ideas or notions when it comes to style...
Convince me I am wrong in feeling that treating links seperately from content... even though they may be content, as well... Now is there good reason to treat them similarly to text/content? When I generalized those anmes from "red" "redorange" "orange" "yellow" to "black" "verydark" "dark" "medium" "light" "bright" maybe a "verybright", does that preclude NOT specifying a background color? No it does not... Does it preclude that they must stay red=>yellow based? No. Does this mean I cannot surround them with Gruesomely Gaudy coloring? No Or even extrememly fine variants? No. It just means, a bit more coding by me to make the rendering along the lines I want.
If you'll notice, I have made most thing relative... sizes, spacings, margins etc... are mostly em based or percentage based... I am trying to make it a framework to use more effectively for myself. I am still learning this.
b4k4^2
| [link|mailto:curley95@attbi.com|greg] - Grand-Master Artist in IT | | [link|http://www.iwethey.org/ed_curry/|REMEMBER ED CURRY!] [link|http://pascal.rockford.com:8888/SSK@kQMsmc74S0Tw3KHQiRQmDem0gAIPAgM/edcurry/1//|ED'S GHOST SPEAKS!] | | [link|http://www.eweek.com/article2/0,3959,857673,00.asp|Writing on wall, Microsoft to develop apps for Linux by 2004] | Heimatland Geheime Staatspolizei reminds:
These [link|http://www.whitehouse.gov/pcipb/cyberspace_strategy.pdf|Civilian General Orders], please memorize them.
"Questions" will be asked at safety checkpoints. |
|
Post #83,417
2/22/03 4:14:27 PM
|
No, but if you stay true to the names...
..it precludes making them the same brightness, or inverted, or fine shades of the same palette, or (god forbid) blinking if that's what a future design dictates.
I think you're doing extremely well for being old to HTML but new to CSS. There are some definite paradigm shifts involved in separating style from content, the most dramatic of which (and therefore the one people rarely understand quickly) is that it's not just about putting style in a separate document. It's about isolating style from content, in exactly the same way you normalize tables in a database or refactor classes in an application; all are techniques to give you a fluid abstraction layer, so that the connections between the layers have more flexibility, and therefore more "power" from an architectural point-of-view. So, names for things in the content layer which instantiate *any* style-layer information disrupt that. It would be like having a polymorphic subclass which you then name after a data point in the abstract class anyway.
What this means for CSS/HTML is that the style parameter in an HTML element doesn't belong to the style layer, just because it's named "style". It belongs to the content (HTML) layer, and should have a name which reflects its role in the HTML layer, not its role in the style layer.
Many fears are born of stupidity and ignorance -
Which you should be feeding with rumour and generalisation.
BOfH, 2002 "Episode" 10
|
Post #83,423
2/22/03 6:29:53 PM
|
Thank you...
You effectively said the exact same things Karsten said... but in terms some more used to the "sysadmin role" would understand...
As soon as you mentioned "normalizing tables", it clicked... not that Karsten was any better or worse... just that wording sometimes *CAN* be what helps in the same way as examples of working code...
Now, then getting back to your making the div layout a have a display:block in it... but ONLY there...
I am having a hard coming-up with a working one other than putting it in just plain "a". Then that just screw's up the WHOLE friggin thing.
I am guessing I don't understand as much as I thought about how naming comes into the work... cause I have tried various class names to get it to worky... The W3C isn't as clear as I'd like on it... or I can't find the right reference there... I really need to buy one the following books:
Eric Meyer's —
[link|http://search.barnesandnoble.com/booksearch/isbninquiry.asp?ISBN=073571245X|Eric Meyer on CSS : Mastering the Language of Web Design], July 2002
[link|http://search.barnesandnoble.com/booksearch/isbninquiry.asp?ISBN=0072131780|Cascading Style Sheets 2.0 Programmer's Reference], March 2001
[link|http://search.barnesandnoble.com/booksearch/isbnInquiry.asp?ISBN=1565926226|Cascading Style Sheets: The Definitive Guide], March 2000
Christopher Schmitt's —
[link|http://search.barnesandnoble.com/booksearch/isbnInquiry.asp?ISBN=0735712638|Designing CSS Web Pages], September 2002
Owen Briggs, Eric Costello, Matt Patterson, Steven Champeon —
[link|http://search.barnesandnoble.com/booksearch/isbnInquiry.asp?ISBN=1904151043|Cascading Style Sheets: Separating Content from Presentation], May 2002
Gonna leave for the store... hopefully they have one of them... or all five, then I can choose. :)
Any other suggestions?
b4k4^2
| [link|mailto:curley95@attbi.com|greg] - Grand-Master Artist in IT | | [link|http://www.iwethey.org/ed_curry/|REMEMBER ED CURRY!] [link|http://pascal.rockford.com:8888/SSK@kQMsmc74S0Tw3KHQiRQmDem0gAIPAgM/edcurry/1//|ED'S GHOST SPEAKS!] | | [link|http://www.eweek.com/article2/0,3959,857673,00.asp|Writing on wall, Microsoft to develop apps for Linux by 2004] | Heimatland Geheime Staatspolizei reminds:
These [link|http://www.whitehouse.gov/pcipb/cyberspace_strategy.pdf|Civilian General Orders], please memorize them.
"Questions" will be asked at safety checkpoints. |
|
Post #83,425
2/22/03 6:40:48 PM
|
I highly recommend the first one
Eric Meyer on CSS : Mastering the Language of Web Design, July 2002 Does it not work to use a declaration like: a.topiclinks { display: block; }IOW, what's called a class selector (the . dot and the class name)? Regardless of how it actually gets to work, you need to pay most attention to [link|http://www.w3.org/TR/REC-CSS2/selector.html#child-selectors|chapter 5 in the CSS2 spec], which covers selectors. This was one of the harder things for me to get into my head, but made all the difference. Almost everything else is just learning syntax; chap 5 is the conceptual biggie.
Many fears are born of stupidity and ignorance -
Which you should be feeding with rumour and generalisation.
BOfH, 2002 "Episode" 10
|
Post #83,430
2/22/03 7:19:12 PM
|
Guess I am daft...
Because I must be typing something wrong... or I am not just using the proper name or SOMETHING...
I just need to sit and read for a while... not ONLINE, in my hand... sitting or laying on the couch. Maybe then I'll stop asking stupid questions...
Of course, I have been coding from looking at others work... and reading the W3C stuff (that's pretty dern DRY!!!) and doing some of the stuff as on-line tutorials... but it just doesn't cut it...
Never thought the internet would fail me... BOOO... HOOO... *sniff* *sniff*
Thanks for the words all.. and I'm gonna get #1 fer sure... and one other one...
b4k4^2
| [link|mailto:curley95@attbi.com|greg] - Grand-Master Artist in IT | | [link|http://www.iwethey.org/ed_curry/|REMEMBER ED CURRY!] [link|http://pascal.rockford.com:8888/SSK@kQMsmc74S0Tw3KHQiRQmDem0gAIPAgM/edcurry/1//|ED'S GHOST SPEAKS!] | | [link|http://www.eweek.com/article2/0,3959,857673,00.asp|Writing on wall, Microsoft to develop apps for Linux by 2004] | Heimatland Geheime Staatspolizei reminds:
These [link|http://www.whitehouse.gov/pcipb/cyberspace_strategy.pdf|Civilian General Orders], please memorize them.
"Questions" will be asked at safety checkpoints. |
|
Post #83,412
2/22/03 3:10:53 PM
|
Pointer and "what KMS said".
Basically you make the "a" elements into block-level elements by using display: block in their style. I have a snippet from my Intranet home page here somewhere...ah: a {\n\tborder: none;\n\tpadding: 0.2em 0.5em;\n\tmargin: 0px;\n\ttext-decoration: none;\n\tbackground-color: #046;\n\tcolor: #079;\n\tfont: bold 1.2em Verdana;\n\tdisplay: block;\n}But, I forgot that IE4 doesn't support this, so I had to put in the linebreaks anyway, and write the following into my stylesheet: /* This is a hack for IE4, since it neither allows\n display: block for the a elements (above), nor\n child selectors like #menucell br. The br\n elements will display in IE4 but not newer\n browsers. */\n#menucell br { display: none; }Bleah. Forget I said anything. :) But go visit [link|http://www.meyerweb.com|Eric Meyer's stuff on CSS] if you haven't already. Anyway, what Karsten mentioned was what I meant: even using "light" and "dark" is too bound to the style, IMO. Best way I test how well I'm separating layout from content (mentally and taxonomically) is to imagine doing something radical to my design and seeing how well the namespace holds up. Radical like: inverting all the colors (i.e. like a film negative), inverting the whole page vertically (element by element), or, as KMS mentioned, imagining other output devices like printers, voice, or what-have-you.
Many fears are born of stupidity and ignorance -
Which you should be feeding with rumour and generalisation.
BOfH, 2002 "Episode" 10
|
Post #83,701
2/24/03 10:03:21 AM
|
One problem, and a pointer
All the "menus" class divs are displaying partially outside the black border of the "content" div. (Galeon on Linux, more details on local setup if you need it.)
Now the [link|http://alistapart.com/stories/taminglists/|pointer]: Best article I've seen on CSS menus.
===
Implicitly condoning stupidity since 2001.
|
Post #83,706
2/24/03 10:18:03 AM
|
I think that's on purpose, Drew
Many fears are born of stupidity and ignorance -
Which you should be feeding with rumour and generalisation.
BOfH, 2002 "Episode" 10
|
Post #83,710
2/24/03 10:22:57 AM
|
Wondered about that
I didn't read the stylesheet to be sure. But if it is intentional, the problem IMO is that it looks so much like all the badly-done, unintentional examples of overlapping divs.
===
Implicitly condoning stupidity since 2001.
|
Post #83,740
2/24/03 11:46:36 AM
|
I fixed the right side...
...to at least look like a pull-off tab...
I just wanted to make to make it look like it had different layer... which it does.
b4k4^2
| [link|mailto:curley95@attbi.com|greg] - Grand-Master Artist in IT | | [link|http://www.iwethey.org/ed_curry/|REMEMBER ED CURRY!] [link|http://pascal.rockford.com:8888/SSK@kQMsmc74S0Tw3KHQiRQmDem0gAIPAgM/edcurry/1//|ED'S GHOST SPEAKS!] | | [link|http://www.eweek.com/article2/0,3959,857673,00.asp|Writing on wall, Microsoft to develop apps for Linux by 2004] | Heimatland Geheime Staatspolizei reminds:
These [link|http://www.whitehouse.gov/pcipb/cyberspace_strategy.pdf|Civilian General Orders], please memorize them.
"Questions" will be asked at safety checkpoints. |
|
Post #83,741
2/24/03 11:50:27 AM
|
Yup, looks intentional now
===
Implicitly condoning stupidity since 2001.
|
