Phine Solutions » css/design

CSS min-width

1.618 — Sun, 12 Nov 2006 03:33:46 +0000

While designing fluid multi-column page using CSS, the right column may wrap under if the browser is resized to a small width. To avoid this we can define min-width for the body tag so the columns won’t wrap. The trick is how to convince IE.

In IE 7, the following will work just fine: body {width: auto; min-width: 600px;}

But not for the earlier version though.. Earlier version of IE has no concept of the “min-width”, as a matter of fact, it thinks “width” represent the min-width.

Someone came up with the body tag like this: body {width: 600px;} html>body {width: auto; min-width: 600px;} The first line is for IE and the second line is for Firefox, Opera or Safari. However, this doesn’t work for some IEs. The last resort, will be to use Javascript to set the min-width using the DOM object access.

the web 2.0 look

1.618 — Wed, 11 Oct 2006 04:00:44 +0000

I would summary the web 2.0 look in these few words: bigger font and a lot of white spaces…:)

More and more web designers have realized that people come to web for quickfix of information, whether it is news, tools, or just fun stuff. People scan through the text and move around quickly. A simple design with less options on the page can actually help the users to read and surf.

Add a round corner to your menu without using images

1.618 — Sun, 08 Oct 2006 15:26:05 +0000

Here is a great article about adding the roundish corner to your menu or div layer without having to involve the images for the corners.

Granted it has its limitations, for example, not showing too smooth on a dark background, but it is absolutely a smart idea and easy implementation (no need for those little corner images).

z-index and select box

1.618 — Sat, 07 Oct 2006 19:14:51 +0000

While I was trying to display a div block with a different z-index, I noticed it wouldn’t cover everything underneath it. Namely, the form components like a selection box. Firefox seems to be ok but on IE it looks quite ugly with the form components showing through which supposed to be covered space.

A few fixes can be applied:

use javascript to hide the form components when the upper div is shown – a pretty complicated solution.
use iframe in the div block to really cover things up.
Just use “absolute” position without z-index, so it won’t try to cover, and just push the space down – ok solution if it works for the design, I guess.
Get firefox – can’t tell this to your user though…

css tips – hide the tool bar from the textarea

1.618 — Fri, 06 Oct 2006 03:00:06 +0000

How to hide the scroll bar of the text area?
use overflow:auto style.

A float DIV overflow tip

1.618 — Fri, 29 Sep 2006 03:09:33 +0000

I have a container div which has one or several images inside. The container has a border. Since I want the images flow naturally I applied “float: left” to the image wrapper div.

Here comes the problem: the image grows outside the container DIV.

Reason: Floated elements can extend outside their containers (and their containers’ margins). To make sense of this, consider this scenario: if I have a fairly large image and a few small paragraphs floating to its right, the image has to be able to flow outside the container; otherwise only the first paragraph stays on the right side of the image and the rest will be moved below the image, which is not what I intend it to be.

To fix this, end the image(s) with a “cleardiv” (DIV with “clear:both” style) which will force the container to wrap all the images.

Is my design good enough?

1.618 — Thu, 28 Sep 2006 02:22:22 +0000

I love designing web pages. But often times, I found myself submerged in the endless changing and tweaking the page designs and still not satisfied with the result. This can last hours and sometimes days. I figure this is not the most efficient way to get the things done. Here are some tips I use to improve this:

When stuck in an endless design change, take a break and come back with some fresh eyes and fresh mind. I know it is really hard to put down the unfinished work but this can actually help us finish quicker. Plus, this step leads to the next one, which is even more important;

Use this break to think about what is the GOAL of this part of the design. Am I working to achieve the goal or I am simply just after the pure visual details? Is moving this image 10 pixel to the right really improve the usability of this web page? Ask the questions and get the answer from the design requirement.

Hope these tips can help you too my friend.

A quick web design primer

1.618 — Thu, 28 Sep 2006 02:21:26 +0000

To build a really user friendly web site, made a list of rules that I consider a user really hates, and us, as the site designers, try to work on:

I don’t want to be lost in your site.
The usability is the key to your web site. The user ought to be able to easily tell “where I am” and “what I am doing” all the time on your web site. How to do this? Good navigation system and clear links. They really need to stand out from the rest of the content. Sometimes a simple underlink navigation beats the sophisticated rollover image manu. Why? Because they are just easier to follow.

I love your content, but can I see your main point first?
Every web site (or page) need to have a clear point from the very beginning. Web users scam the content. And they will appreciate the clear writing which shows them what this page is all about.

I love your content, but I am lazy and I don’t want to dig around.
Links are good. They provide nice structure. But overuse the internal links can really test someone’s patience. Don’t make the users make too many clicks. For example, if you contact phone number and email are short enough (which is true most of the time), show them instead of putting a “click here” link which leads to another page.

Your image is obscure, and what does this icon mean?
Images bring the liveliness to your web page. And remember, they can also be the source of the distraction. The image needs to fit the whole theme of your web page. They are the “eye-pleasers”, not dominant roles.

Talk to me…
Write the web copy like you are talking to someone.

Left, or right?
I’ve seen some web sites place their logo on the right top corner of the page. Quitely frankly I think this is not a very good idea. In English speaking country, people read from left to right. Maybe that logo looks nice on the right, but it really works against users’ brain.

My eyes don’t want to jump!
A web site needs to have a consistent flow, left to right, up and down. It should guide the user to the next click or next part of your page, natuarally.