citrusmoon

Hotsy-tottsy!

I just have to point out what a lovely, simple, black and white blog template this is (not to mention, sex-ay, teh hot!). Made by Blogger Templates, where you can also pick up a nifty trick for getting rid of the top navigation bar on your Blogger blog (I hate that thing).

Makes me really want to start playing with some of the fantastic B&W photos at places like stock.xchng and morguefile (more here) to work up some blog designs.

Posted by taz on May 2, 2005 at 03:40 AM in Site design | 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

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

I love me.

Well yes, yet again I have to admit I love me (is that so wrong?). And these warm, warm feelings because I made this new pattern, which is quite simply wonderlicious. Here's a .gif of a page layout idea using the lighter version (though I think the darker is my favorite). In case you want the colors on that, the background of the text area is #DDDDCC; the border between the background area and the text area is #776677; the bottom bar is #666666; the main page heading is #886611; the section headling is #888888; the text is #777799, and the menu text links are #DDDDDD. I would probably use #889999 or #888899 as the background color behind the pattern.

For lots more page layout ideas and actual templates you can use (because not everybody is as lazy as I am), go dip into the delicious stuff at Kitty's Fullmoon Graphics, then have a look-see at all the fun things from Liz at Migraine Designs, a site I found via the kind and lovely Ethereal Code.

Update: You can have a look at that example page laid out in CSS by our dear headsfromspace here.

Posted by taz on July 26, 2004 at 06:51 AM in Site design, Templates | Permalink | Comments (10) | 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

    Site Design and the Color Blind

    You know what? I really liked my old link color, it was a great sort of slightly smoky rose color that I love (it's now the hover color). You know what else? It was just about perfectly indistinguishable from the surrounding text to someone with color blindness, and that's estimated to be at least one in 20, or as high as one in 12. If you want to check out your pages to see if they are useable to someone with a color deficiency, or if you want to plan a new site with this consideration in mind, there are some really good tools and tips on the web.

    This color vision page will show you how color charts look to people with different types of color blindness, and so does this special colorlab palette. And there's a great 216 color web palette showing an approximation of the hues seen by colour deficient dichromats at Exact Technologies, along with a PDF guide to designing for color-blind users. Really, really helpful is this Vischeck site that allows you to run simulation color checks on web pages or files on your own drive. It also offers downloadable Vischeck plugins. Finally, here's another great page that lets you check pages on the web, with a sticky menu that allows you to toggle between the various types of color problems; here's an applet that lets you enter hex colors for text and background and see how they would be perceived by people in three different groups of color deficiency; and here's a good page about designing with the color blind in mind.

    and PS: new tiles! Slightly deco, I think, and kind of yummy... (plus - oh, yes - a box).

    Posted by taz on May 7, 2004 at 07:23 AM in Color, Site design | Permalink | Comments (0) | TrackBack

    Learning to Fly: Points of Departure

    I think designers who give away template designs with all the graphics and colors in place are web angels, and I've seen some amazingly lovely things offered, but do you know what I really, really like? Sites that give you good, clear ideas about how to put together a design on your own Adam Polselli offers just such a generous gift with his "Get the Look" section outlining palette, font, and key element choices for different styles. Very nice.

    I found Adam's site via a resource I can't gush enough about: forty.something's ultrawonderful Etc., a brilliant spot for web design resources. Do you have a favorites folder called "2 good 2 B true"? Go ahead and put this one there.

    Posted by taz on April 26, 2004 at 03:30 AM in Site design | Permalink | Comments (0) | TrackBack

    Yummy Barbelith

    Ooh! Pretty! I love the color-bar idea on the opening page of Barbelith, and the way the section posts carry through the category color schemes. This looks really interesting... maybe I'll beg for a membership.

    Also... I've just uploaded a nice new pattern I made a couple of days ago. Very "Night of the Iguana". Or something.

    Posted by taz on April 22, 2004 at 05:36 AM in Color, Site design, Weblogs | Permalink | Comments (4) | TrackBack