Looks pretty good

Post #94,976 by tseliot 4/8/03 2:38:18 AM Reply	Looks pretty good You can argue font size all day. I wouldn't let it worry you: pick a size that fits your overall design. A couple of syntax points: 1) Are you using a tool to make the CSS? You don't need, for example, the clip declarations, since on the one hand there's no values for the rect() and on the other, to quote the docs, "The 'clip' property applies to elements that have a 'overflow' property with a value other than 'visible'," which I don't think applies to yours. 2) Wow. That is a hell of a lot of javascript. 3) Now that you're going the CSS route, maybe you can eliminate: The 3x3 spacer gif The s p a c e s in-between letters. Use letter-spacing instead. Any font tags. Shudder. 4) Get to know some of the shorthand declarations, starting with: `font: bold italic 9pt Arial, Helvetica, sans-serif;` instead of `font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-style: italic; font-weight: bold; font-variant: normal;` 5) I'd recommend using padding-left instead of text-indent on the h1 elements. 6) Again to quote, "position = static: The box is a normal box, laid out according to the normal flow. The 'left' and 'top' properties do not apply." So you certainly don't need the left and top bits there. Specifying {position: static} isn't even necessary, in my experience, since it's the initial value. There are a number of similar declarations which you might as well leave as the initial value; if something overrides it, it's probably the user and it's probably for a good reason. 7) For h3, did you mean 10pt instead of 10px? Seems more regular. 8) Are you leaving off the final semicolon in each block for IE4's sake (IIRC)? Hate that, but you gotta do what you gotta do. ISTR some other browser ignoring lines without one. 9) Did I mention that is a metric buttload of javascript? It is. Anyway, here's what I came up with, except for the letter-spacing, which would involve reworking the html, to boot: body {\n font: 10pt Arial, Helvetica, sans-serif;\n color: #000000;\n background-color: #FFFFFF;\n}\n\nh1 {\n font: bold italic 9pt Arial, Helvetica, sans-serif; \n text-transform: lowercase;\n background-color: #DDDDDD;\n padding-left: 1em;\n margin-top: 0px;\n margin-bottom: 0px;\n}\n\nh2 { font: bold 12pt Arial, Helvetica, sans-serif; }\nh3 { font: bold 10pt Arial, Helvetica, sans-serif; }\n\n.main {\n position: absolute;\n width: 72%;\n left: 5px;\n}\n\n.news {\n position: absolute;\n width: 20%;\n left: 75%;\n}\n\n.header {\n width: 100%;\n margin-bottom: 1em;\n}\n\n.footer { width: 100%; }\n.disclaimer { font: 8pt Arial, Helvetica, sans-serif; }\n.boldtext { font-weight: bold; }\n.smalltext { font-size: 8pt; } Many fears are born of stupidity and ignorance - Which you should be feeding with rumour and generalisation. BOfH, 2002 "Episode" 10
Post #94,984 by cwbrenn 4/8/03 7:49:11 AM Reply	Re: Looks pretty good Thanks for the comments. Unfortunately, some of the stuff I can't do anything about... the keen tags insert a lot of stuff that I can't control. For example, the javascript isn't mine. I used no javascript at all -- it probably has to do with the banner ads and the newsbox. Second, I use Dreamweaver for creating the stylesheets. I've never used stylesheets for anything other than making fonts pretty :), so with all the positioning stuff I was doing it seemed easier this way. Eventually I'll be more comfortable writing them myself, just as I eventually became more comfortable with html syntax, but for now I need the training wheels. So, on to comments and questions: What's a clip declaration? I honestly have no idea. Dreamweaver must have inserted it in there for some odd reason. Where is the 3x3 spacer gif? If it's something inserted by the keen tags I can't do anything about it. I don't remember using it myself. I just liked the look of the spacing in between the letters. Are you telling me I should actually use a style for that, instead of hitting the space bar? That's seems insane to me, but I guess I can understand the reason for it. No font tags were used in my template. Font tags may be inserted by the keentags, but same disclaimer applies. As to the semicolon, I wasn't intentionally leaving it off -- Dreamweaver did it. I didn't even notice it was missing... Maybe you can answer a question for me. I wound up not using the .footer style because the text I put in it overlapped with the .main and .news styles. How do I get it to stay below those styles? Anyway, thanks for those comments. I've replaced the old stylesheet with your suggested tweaks (and your version is a lot easier to read, too. Stupid Dreamweaver). "We are all born originals -- why is it so many of us die copies?" - Edward Young
Post #95,021 by tseliot 4/8/03 11:04:55 AM Reply	Looks pretty keen, then :) > I just liked the look of the spacing in between the letters. > Are you telling me I should actually use a style for that, > instead of hitting the space bar? That's seems insane to me, > but I guess I can understand the reason for it. Yes, that's what I'm saying. With the stylesheet, you can make a single change {letter-spacing: 0.5em} and have it apply to the whole text. That's important because someday you will decide you didn't like that letter spacing after all, ("it's soooo 2003"), and two keystrokes remove the effect. On such a small page (once you de-keen it ;) it probably doesn't matter, but if you had, say, 10 pages of similar design, it would get tedious after a while. > Maybe you can answer a question for me. I wound up not > using the .footer style because the text I put in it > overlapped with the .main and .news styles. How do I > get it to stay below those styles? Ehhh... I already forgot where the footer applied. But it sounds like you want a normal block-level element, in which case just use a div. You might also be talking about a floated element. I suggest reading CSS2, 9.3ff: [link\|http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme\|http://www.w3.org/TR...ositioning-scheme] > Anyway, thanks for those comments. I've replaced the > old stylesheet with your suggested tweaks (and your > version is a lot easier to read, too. Stupid Dreamweaver). Heh. Code may be autogenerated with abandon, but I still appreciate the human-written short story. :) Many fears are born of stupidity and ignorance - Which you should be feeding with rumour and generalisation. BOfH, 2002 "Episode" 10

Welcome to IWETHEY!