If you're not already using Firebug, you're in for a treat - you really don't know what you're missing. Yes it's another stretch of learning curve but the ability to tweak your css and see the result in real time is the best learning tool ever, IMO.
If the client can only take data at low bandwdtih, its no big deal..
Server side CPU is easy to fix. Buy or rent bigger.
Onlyy time I have run into client side CPU issues was with a massive seasrch through the DOM with javascript on IE6. It's DOM is not hashed. Built own table in Javascript ;-) 100:1 speedup.
Take a box.
"margin" is the area outside the box. "border" is the thickness of the box edge. "padding" is the area inside the box. The space left inside the box, left by the padding, is where the boxes content will go, but defined by "width" and "height". I think, at least that is how I read the diagram in my O'Reily "salmon" CSS Pocket Reference.
highlighted
That's how I normally start then pinch bits from elsewhere and meld 'em together to make it work how I want.
Ah having looked at the page code I see what you are aiming at with the various highlights and things You want "Bathrooms", "Showers" as sub-sections under "What I do", maybe even to "appear" when you hover over "What I do". I think you can only manage that with javascript not pure CSS.
Using a bulleted for the sub-section items might help with the not quite clear current layout along with another colour set for the "active" id (which isn't defined in the stylesheet and doesn't follow the active content either).
Probably tied in with the divs. Also get the w3c compliant logo overprinting the bottom of the menu. I tend to (naughtily) use tables to get the layout out do what I want. Not having got me 'ed around div's...
Does
#logo { position: fixed; top:0; left:0; width:155px; height:84px; }
and
should end up looking like but replace YAPH.1024x536.jpg with a suitably resized image when you're finally happy with the size.
But this would break on a browser with a different width font. To be sure that the sidebar and image stay the same width for everybody you'd need to give the sidebar width in pixels (140) instead of em's. The overall width of the coloured bar will be width + padding (140 + 5 +10). But then you loose the ability of the sidebar to size itself to suit the users font size.
but beware, these mean different things in IE to everyone else. The padding or the margin is a different side of the box,. I forget which..
Indeed. Most sites, like it or not, depend on Javashite.
think,
Swapping margin and padding is a bit fundamental FFS!
Well IE8, Firefox 3.6.13 and Mozilla
1.7.12 all agree that margin is outside the box, and padding inside. Border being how thick the box is.
I think the main disagreement between IE and the others is whether the margin or the padding controls the positioning of the bullets for lists.
maybe it was IE6 that was borked.
Hmm
The main difference was the way IE interprets the overall width of a box. The standard way has the width apply to just the content, whereas IE used to include the padding and the border. These days it does it right if operating in standards mode, and does it wrong (for backwards compatibility) if in quirks mode. (the DOCTYPE will generally control which mode it works in, no doctype at all will leave it in quirks mode).
More here:
...
OK I'm with you on that. I really want to have the browser scale the image and text as appropriate rather than specifying pixels. Hmmm, need to think about it.
Is that Mike Clarke from Wokingham by the way?
You could provide an image the size you'd expect to be normally needed for the sidebar (or a bit bigger) and let the browser do the final size adjustment. For anyone going directly to anything other than the home page this would avoid needing to pull down the large image . It's not much of a load or quality issue for the browser to resize it to fit a smaller space but the quality would suffer if anyone went for really big text but with eyesight so bad they'd probably not notice anyway.
Not me, Sedbergh in Cumbria, and Tyneside before that.
HomeOwnersHub website is not affiliated with any of the manufacturers or service providers discussed here. All logos and trade names are the property of their respective owners.