Monday, August 13
CSS Does Something Right!
Here's my new banner, starring Floofy McFloofersons, a lynx kitten. (Or at least, new banner #1; I'm going to tweak the banner code to give me multiple banners in random rotation again.)
Now, with the new layout, banners are divided into four sections: An ad area (for ad-supported sites), either 60 or 90 pixels high; a system menu (optional for paid sites), 25 pixels high; the main banner image section, which is however big you want, and a site menu, 25 pixels high (plus a 5-pixel margin for the drop shadow).
So I was going to have the software slice the image up into four segments and load them individually. Not perfect, but not a huge pain either.
But this is something CSS actually does right, of at least, right enough. You can't specify a particular section of an image as the background for an element, but you can specify the position of the background image within the element.
Which wouldn't help much... except that the positioning can be negative. So for the system menu, I just position the image at y=-60 (or -90), fix the height of the div at 25px, and viola!
Makes it a lot easier to manage things. Each banner is one image. If you don't quite like what comes out of the banner generator, you can just pop it into a paint program and tweak it a bit; no worries about keeping four different images lined up.
So score one for CSS. This time.
Comments are disabled.
Post is locked.
Here's my new banner, starring Floofy McFloofersons, a lynx kitten. (Or at least, new banner #1; I'm going to tweak the banner code to give me multiple banners in random rotation again.)
Now, with the new layout, banners are divided into four sections: An ad area (for ad-supported sites), either 60 or 90 pixels high; a system menu (optional for paid sites), 25 pixels high; the main banner image section, which is however big you want, and a site menu, 25 pixels high (plus a 5-pixel margin for the drop shadow).
So I was going to have the software slice the image up into four segments and load them individually. Not perfect, but not a huge pain either.
But this is something CSS actually does right, of at least, right enough. You can't specify a particular section of an image as the background for an element, but you can specify the position of the background image within the element.
Which wouldn't help much... except that the positioning can be negative. So for the system menu, I just position the image at y=-60 (or -90), fix the height of the div at 25px, and viola!
Makes it a lot easier to manage things. Each banner is one image. If you don't quite like what comes out of the banner generator, you can just pop it into a paint program and tweak it a bit; no worries about keeping four different images lined up.
So score one for CSS. This time.
Posted by: Pixy Misa at
03:06 AM
| Comments (3)
| Add Comment
| Trackbacks (Suck)
Post contains 253 words, total size 1 kb.
1
I was going to ask on the other post about the images... I'm viewing this on the latest FF. I see a narrow light colored band about 1/3 of the way down that cuts across the image. The image can be seen through this - is this the shadowing you were talking about? I'm a bit dense most times and what I read doesn't always translate in my head. So I was having a difficult time following the shadow image stuff.
Below the band, the image is the link to the home page from the band up to the top of the image - it's the top part of the image only.
I take it that it's supposed to be like that? The other thing I'm missing is - why would this be desirable? When it comes to visuals and art and images - I'm often lost. *grin*
Below the band, the image is the link to the home page from the band up to the top of the image - it's the top part of the image only.
I take it that it's supposed to be like that? The other thing I'm missing is - why would this be desirable? When it comes to visuals and art and images - I'm often lost. *grin*
Posted by: Teresa at Monday, August 13 2007 04:48 AM (gsbs5)
2
Yep, that's exactly how it should be - but it's not obvious why this is so because I haven't put all the bits together yet. (Actually, the shadow I mentioned isn't the translucent strip - there's a subtle drop shadow at the right and bottom of the banner.)
Here's a mockup that shows how everything fits together:
So the top section is for the ad and the mee.nu or mu.nu logo; the next section is a system-wide menu bar; then you have the banner for the site itself, and then you have the site menu. Paid users (and mu.nu bloggers) can turn off the top two sections - or indeed do something completely different.
Here's a mockup that shows how everything fits together:
So the top section is for the ad and the mee.nu or mu.nu logo; the next section is a system-wide menu bar; then you have the banner for the site itself, and then you have the site menu. Paid users (and mu.nu bloggers) can turn off the top two sections - or indeed do something completely different.
Posted by: Pixy Misa at Monday, August 13 2007 05:09 AM (PiXy!)
3
Ah - now it makes perfect sense! I thought it was something I totally misread. LOL. Thanks.
Posted by: Teresa at Monday, August 13 2007 12:43 PM (gsbs5)
47kb generated in CPU 0.013, elapsed 0.1535 seconds.
56 queries taking 0.1444 seconds, 341 records returned.
Powered by Minx 1.1.6c-pink.
56 queries taking 0.1444 seconds, 341 records returned.
Powered by Minx 1.1.6c-pink.
