For any of you who were following the CSS experiment in trying to use a body border as a background for a sidebar, headsfromspace has done the legwork on this (bless his polyvalved little alien heart!), and, as I feared, there's not much to be done about the problem in IE5, but he's come up with an alternative using a wrapper, and it's just as easy and simple as the original idea. Have a look at "Daughter of Bodyborders". It looks like this should work just about everywhere.
I've been far too into the blue/brown/grey/green muted thing lately, I think, so I wanted to come up with something pretty and lighthearted and a little exotic. I'm very happy with the results of my efforts in the set "Sea of Stories". I think these are pretty damn charming, and what's cute is that when you stack the first and third tiles, you get a little scalloped edge, as you can see in this example box.
I also need to mention that Anne has tipped me off to a great little pattern toy called Image Styles which you can download and try out. I've been having a party on my screen playing with it, though I've only scratched the surface of possibilities, I think. You can generate backgrounds with all sorts of effects with this, and you can also load up an existing image or pattern and go to work mutating that, with lots of fun results. It would have taken me quite some time to figure that out, though, so I'll quote Anne on how to do this:
"Start with a background tile of any size. Open a new image in the program the exact size of the background tile. Next scroll down the "effects" window on the right and click "image file" click image file again at the top of the new box and load in the background tile you're using. Next, click "add" at the bottom, then scroll down the effects list to "kaleidiscope" and click that. Now play with the sliding bars. As you make a change you can see what it would look like on a web page say, by hitting preview. To get out of preview click the esc (escape) key. Isn't it cool?"The answer is "Yes!". Way cool.
Everybody loves creepy dolls. It's just an immutable rule of the Internet. We love creepy dolls and kittens. So go play with Scotland's Odd Wee Babydolls Who Just Aren't Quite Right from Shane. Silly, silly boy.
And another new pattern set today. This one reminds me of ancient mosaics, so I've named it What Remains. I made an example box using a couple of these patterns, but then I liked the look so much that I decided to expand it into a full-fledged layout. Since I wanted to keep the box idea, I decided to use our faux IFrame idea again, to create this nice page. I also did a version with a colored scrollbar for IE6, though the validator is not at all happy about that idea. Pretty, though. (Of course, as always, anyone is completely free to use this layout if they would like.)
So, I've been pretty busy the last few days with this and that, but one of the "this-es" and quite a few of the "thats" have to do with a very interesting, but ultimately disappointing CSS idea. As I was idly playing with a page layout idea somewhere along the line, I wondered what would happen if I put a border on the body element... Well, I tried this out - over a couple of days, actually - and ended up with about 30 pages of experiments doing various things. Some of these ideas worked brilliantly in Mozilla, and some were very cool in IE. Then I worked out one idea that I thought worked perfectly in both, that is a really handy little way to solve an irritating problem. By creating a sidebar using a border on the body you can get over that nastiness with the background color on the sidebar not extending to the bottom of the page. In this example layout, I just gave left and right borders to the body, with the left border wide enough to act as a sidebar menu, then I used absolute positioning on the sidebar section, and voila, a sidebar whose background color extends as long as the main text area, even if the sidebar contents are much shorter. Sadly, though, this simply won't work in IE5. If you are using IE6, you can see how it looks on this page in quirks mode. If you are using IE5, well, you see how it is...
This is really a shame, because the layout is so straightforward and easy that it's really beautiful. if anyone figures out a way to make it work in IE5, please let me know! I did come up with a couple of fixes that were either too compicated and silly, or just totally defeated the whole purpose in IE. So far I can't figure out anything that preserves the lovely simplicity.
In other news, we have new patterns that I love, love, love!
Hello, and welcome to your Monday! I Have a couple little things to cheer the gray, cold passionless drear of the M-word day, and the first is my new absolutely-love-it ravefave pattern "cocktail hour". I'm just mad about this one, so I used it along with another spiffy new pattern, to make one more tabbed example set. On this one I gave the series an opening title page and used two .gifs with transparency on the corners to give the opening page box rounded corners. Just peruse the source to see how I set that up. What I really wanted to do was to figure out how to make the actual tabs on the inner pages rounded, but once I got started I realized that it will take more time than I have to play around with it. We'll save that little treat for another Monday. Unless one of you figures out a way to do it first. That would be cool.
And one more thing to add a little distraction to your day: 20 Questions to a Better Personality . I really like this quiz - probably because it concluded that I am "a WRCL--Wacky Rational Constructive Leader. This makes you a golden god." Any quiz that recognizes that I am a golden god is okay in my book. Here's my arithmetic:
Next up, the "You're Too Sexy For Your Blog" quiz. Okay, not really. I just made that up. (But it would be fun to make the link graphics for that one, eh?)
Remember back in the Paleolithic era when we could design sites using percentages and know that they would work in any resolution? Remember that fabled time before CSS? Before we had to make tiny static designs that float pea-sized on great big screens? Well I guess we can still do such things, but these days we feel guilty about it and hide our heads in shame if we use tables instead of CSS positioning. Okay, but guess what I did. I took yesterday's layout, changed it up for variety, and recoded it (keeping the CSS) using percentages. Yes, really! Here it is! Of course I had to do a couple of strange things, didn't I? Because a day without strange is a day without sunshine.
The first strange thing is using percentages at all, but after that, I couldn't give the top tabs specific lengths, could I? I had to use a percentage - four tabs, 25%, right? But of course, again, this isn't going to work, because it doesn't take the borders into account, so I did something I've never done before, the second strange thing - I gave them a percentage with a fraction: 24.85 percent, to be exact. Which, of course means that there is still a nasty hole on the right in IE, but I handled that like any stalwart girl should - cosmetically. I gave the container a background color to match the "off-state" background pattern, then, in the htm of the only page where it matters (the last, gallery, page), I gave the menu list a background color to match the "on-state" background pattern. And just because I felt like it, I put the whole CSS-positioned contraption in a table so it could be centered on the page. And then, just for fun, I gave the scrollbar colors for IE. (Here's a nice generator for doing that.) It's not perfect, because in IE you can see that there's a slight shortfall on the bottom border of the "on" tab when you are on the last page, but for the convenience and pleasure of having a dynamic layout, it's not a bad deal. I've checked this in IE6 and 5, Mozilla, and Firefox, and they all look fine to me. If anybody sees anything goofy, though, please let me know!
Sorry I was gone so long, but, look! I've brought you back something smashing: all-CSS tabbed page layouts with background patterns on the tabs, one and two! I began with Kalsey Consulting's CSS Tabs with Submenus when putting these together, but I removed the submenus and added a footer. My goal was to make a version with the tabs taking up the entire top of the box, and this is where I ran into trouble - it took me a whole day to overcome the problem with the difference between how IE and Mozilla interpret the box size. Here's the solution I finally used. I think this makes a really pretty, (deceptively) simple, tidy page design. I know I can never really read the instructions to get my information on CSS and HTML, I just have to view the source and parse out what is doing what to what on the page, but I've included some information here for those things that might be a little bit tricky to understand. Continue on, intrepid explorer, to discover more.
So, this is what you need to know about these layouts:
So there you go - have fun with it. I'll make you another example tomorrow if I have the time...