citrusmoon

"Daughter of Bodyborders", and more!

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.

Posted by taz on August 25, 2004 at 03:10 AM in CSS, My Layouts, Patterns, Silly, Web Toys | Permalink | Comments (2) | TrackBack

Another CSS faux IFrame layout

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.)

Posted by taz on August 12, 2004 at 04:35 AM in CSS, My Layouts, Site design | Permalink | Comments (2) | TrackBack

CSS experiments using a Body Border

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!

Posted by taz on August 10, 2004 at 02:05 PM in CSS, My Layouts | Permalink | Comments (4) | TrackBack

Heads up! New example pages.

Here's an update on some more cool example pages using our tiles from headsfromspace: This page shows an example of a vertical text script, viewable in IE, and I love these new I-frame mimic pages using Chinaberry and Chrysanthemum Storm, plus there's this nice "sidewinder" gallery layout, which is neat way to handily fit a series of images onto a single page, and our heads was kind enough to go ahead and do the CSS on that "over the orient" layout .gif I showed you the other day: go take a look.

Posted by taz on August 1, 2004 at 05:57 AM in CSS, Site design | Permalink | Comments (3) | TrackBack

More Faux I-frames

I've been dallying just a little bit more with our faux i-frames in order to show you some quickie examples of using an image on the side, instead of a repeating pattern, then the same idea expanded to fill the horizontal space, and, finally, this same stretched layout with a pattern on the background.

The pattern I used there is from a new group of bloggrounds; I've added three new pages (now over 800 bloggrounds!), and you'll find this group on the last page - very handy for colorizing.

Looking for something to while away a little of your Saturday? You could go view a whole bunch of cool Flash animations from Russian artists. My favorite so far is "Los dias sin dias" from Scary Dolls. And I've been having a great time checking out Little Dead Gyrl's Shelter for Misfit Dolls (linked from Scary Dolls); don't miss the paper dolls and the links, and, well... just everything.

Posted by taz on July 24, 2004 at 03:08 AM in CSS, Web/Tech | Permalink | Comments (3) | TrackBack

CSS I-frame Mimic with Slider Background

Okay! I finally had the chance to get around to playing with Beforethedog's CSS I-frame Mimic technique. It looks and acts like an I-frame (which, as we know, is just fun, fun, fun), but all your content is right there on your page. I wanted to experiment with BTD's background idea, which I did here and, with a touch more color, here. If you want to fiddle around with this layout, you'll just need to experiment with the parameters a bit to see how it works, but be sure to view your pages in as many browsers as possible, because IE and Mozilla, for example, handle things just a bit differently, and I needed to adjust here and there to make it look good in both. Unfortunately, I don't have a mac, so I haven't been able to see it in Safari, and the iCapture screenshot service is disabled at the moment, but I will check back there later. Also, I really need to download Opera... Ah, well.

I designed the tiles specifically for this layout (though just about any background, if it is small enough, will work); you can get them here.

Update: It turns out you can learn a lot from a head from space. This one let me know about an alternative Safari screenshot service, and this faux i-frame layout looks fine, it appears. Thank the Head.

Posted by taz on July 23, 2004 at 04:25 AM in CSS | Permalink | Comments (2) | TrackBack

It's official: I am a Golden God

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:

Wackiness: 64/100
Rationality: 62/100
Constructiveness: 56/100
Leadership: 80/100

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?)

Posted by taz on July 12, 2004 at 01:24 AM in CSS, My Layouts, Silly, Site design | Permalink | Comments (3) | TrackBack

Tabbed Pages using Percentages

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!

By the way, I haven't had a chance to post the backgrounds I've used here to the patterns section yet, so if you want them, just grab them from here and here.

Posted by taz on July 8, 2004 at 04:23 AM in CSS, My Layouts, Site design | Permalink | Comments (1) | TrackBack

Make CSS tabbed pages with backgrounds

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:

  • First, I put the styles on every page so you could easily view the source to see what is going on, but of course you would want to use just one, linked stylesheet.
  • I centered the page horizontally with this technique.
  • The section of the html that tells the page which tab to show (without the background) is at the beginning, in the body tag.
  • The height of the tabs in both layouts is determined by the padding in the "#menu a:link, #menu a:visited" section of the CSS. In both these examples, the text is 14 pixels, with padding of 5 pixels on the top and bottom, for a total of 24 vertical pixels.
  • So, keeping this in mind, if you change the tab height, you also need to change the bottom padding on "#menu" section of the CSS to make that border appear in the right place; if you use 12 pixel text, with 8 pixels of padding (top and bottom), for example, change that #menu bottom padding to 28 pixels (12 + 16).
  • On the regular tabbed layout the width of the tabs will be determined by the left and right padding in the "#menu a:link, #menu a:visited" section of the CSS. On the other version you want the tabs to take up the total space along the top, so you divide your total width by the number of tabs to come up with the width declaration in the "#menu a:link, #menu a:visited" section. If you want six tabs in an 800 pixel-wide box with a one-pixel border, you must do this: add up all the left and right borders for the tabs - for six tabs, that would be 12 pixels, then subtract 12 from 800 (788) then divide this by six (131.3333), and round the number up or down if needed. We'll make this 131. so, 131 X 6 = 786 (for the tabs) + 12 (for the borders) = 798. Give the container a width of 798 and the tabs a width of 131.
  • But, you are going to run into that problem I mentioned with IE, so you have to add that second bit of container information to the CSS to solve this IE box problem. IE wants the full width to be just the total of the width of the tabs, or, in this case, "786", so you need to add that Tan hack that I talked about earlier. You can see an example of this layout with six tabs right here.

    So there you go - have fun with it. I'll make you another example tomorrow if I have the time...

    Posted by taz on July 7, 2004 at 12:03 AM in CSS, My Layouts, Site design | Permalink | Comments (5) | TrackBack

    Two CSS page Generators

    I've been meaning to point out a couple of nice CSS page generators: this one from ClevaTreva (info here), and this one from inknoise. I believe I found both these tools via the always-wonderful Position is Everything.

    Posted by taz on April 16, 2004 at 12:09 PM in CSS | Permalink | Comments (0) | TrackBack