Re: [css-d] Border strip on leftnav
Thanks, Zoe, I'll give it a try. I've managed to fix most of what was wrong, but only by fiddling rather than restructuring. I sort of have to put this to bed, but once I've got the docs done, I'll take a run at restructuring. That's what I really want anyway -- no kludges, no hacks. Thanks for the feedback. Skip Knox Boise State University [EMAIL PROTECTED] >>> "Zoe M. Gillenwater" <[EMAIL PROTECTED]> 07/07/06 11:05 AM >>> Skip Knox wrote: > http://webtest.boisestate.edu/templatedev/ > > I have a leftnav with dark blue background and a 9px lighter blue > stripe on its right. The leftnav actually has three components: logo at > the top, menu area below it, and a fade below that. > > I keep running into problems with white space appearing as I change > font size in my browser. I suspect I'm going about designing it wrong. > Here's how I'm doing it now. > I actually don't see any white gaps appearing, but I do agree that it could be done a lot more cleanly. Here's how I would do it: Take a div, give it the id #nav (or some other name more meaningful than the current "leftbox"), and place the image of the logo (just the logo, no light blue strip) and the ul inside. Float #nav left. Slice an image that contains the full dark blue width and light blue strip and apply this as a background to #nav, set to repeat-y. Slice another image that contains the bottom fade image. Apply this as a background image to the ul inside #nav, no-repeat, positioned to the bottom. Give the ul enough bottom padding so that its content doesn't overlap the fade image. Done. No nested divs, simple CSS, degrades well in non-CSS and non-image browsers. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Border strip on leftnav
Skip Knox wrote: > http://webtest.boisestate.edu/templatedev/ > > I have a leftnav with dark blue background and a 9px lighter blue > stripe on its right. The leftnav actually has three components: logo at > the top, menu area below it, and a fade below that. > > I keep running into problems with white space appearing as I change > font size in my browser. I suspect I'm going about designing it wrong. > Here's how I'm doing it now. > I actually don't see any white gaps appearing, but I do agree that it could be done a lot more cleanly. Here's how I would do it: Take a div, give it the id #nav (or some other name more meaningful than the current "leftbox"), and place the image of the logo (just the logo, no light blue strip) and the ul inside. Float #nav left. Slice an image that contains the full dark blue width and light blue strip and apply this as a background to #nav, set to repeat-y. Slice another image that contains the bottom fade image. Apply this as a background image to the ul inside #nav, no-repeat, positioned to the bottom. Give the ul enough bottom padding so that its content doesn't overlap the fade image. Done. No nested divs, simple CSS, degrades well in non-CSS and non-image browsers. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Border strip on leftnav
http://webtest.boisestate.edu/templatedev/ I have a leftnav with dark blue background and a 9px lighter blue stripe on its right. The leftnav actually has three components: logo at the top, menu area below it, and a fade below that. I keep running into problems with white space appearing as I change font size in my browser. I suspect I'm going about designing it wrong. Here's how I'm doing it now. The logo has the lightblue stripe as part of the image. This is optional, as I have a version of the logo without the stripe and I can use a 9px border instead. The menu uses a lightblue border-right of 9px. The fade has the lightblue stripe as part of the image, because the lightblue has to fade along with the darkblue. I've already got kludges in place to keep whitespace from appearing between the three sections in the darkblue, but I can't seem to code or kludge my way into keeping everything together. Just go to the site and start sizing fonts and you'll see what I mean. Ideally, someone tells me how to approach the whole problem differently so that I don't have to have any negative margin kludges, but I'll take whatever works at this point. The stylesheet is here http://webtest.boisestate.edu/templatedev/styles/main.css Skip Knox Boise State University [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
